CSS attribute function with media query responsive code sample

Scenario:

You are wondering what the css attribute function attr() can practically do for you? Sometimes I wonder too, but it is there possibly for a good reason after the people behind the scenes gone through the necessary reviews and development to implement this feature, especially a widely used internet standards such as the Cascading Style Sheet.

So you need an example, and a little creativity on what it can be used for. The following is by no means the best example, but it serves as a starting point!

Solution:

Following example demonstrating the use of css attribute function with media query to achieve responsiveness in your web page. Try resize the browser width to see the responsive effect.

Short content goes here, keep it short!

The Code:

@media all and (min-width: 800px) {
b.nickedRes::after {content: attr(data-long); display: block; color: green; font-weight: normal;}
}

Short content goes here, keep it short!
<b class=”nickedRes” data-long=”longer content goes here…”></b>

More examples:

w3schools media queries and attr function examples

CSS attribute function

Feel free to suggest more examples.

With the advancement of CSS features, and the combination of javascript, you can do a lot with your web page!! Not to mention server side coding addition. It will make your web page do tons of useful stuff.