The heated competition between web browsers means that most users are now accessing the Internet from devices that support a range of cutting-edge W3C standards in a truly interoperable manner. This means that we can finally leverage powerful and flexible CSS functions to produce cleaner, more maintainable frontend code. Let’s have a look at some of the more exciting choices you may not even be aware of.

The attr() function dates back to the original CSS 2.1 specification, but is now available almost everywhere. This nifty mechanism allows you to use the value of an HTML attribute of the styled element, and can in many cases, remove the need for doing special processing in JavaScript.

To leverage this feature, you need three things: a CSS rule with a :before or :after pseudo-class, the .content property, and the attr() expression with the name of the HTML attribute you wish to use. For example, to display the data-prefix attribute of an <h3> heading, you might try the following code:

h3:before {
content: attr(data-prefix) ” “;
}

This is a heading

Of course, this example isn’t very useful, but illustrates the basic principle well. Let’s try something more useful, though: one great application of the attr() mechanism is to expand link URLs when the user prints out the document. To achieve this, you can try:

@media print {
a:after {
content: ” (link to ” attr(href) “) “;
}
}

Visit our home page

Once you know about this trick, you will be surprised how often it will come handy in your work! Note: The CSS3 specification expands the meaning of attr() in several even more exciting ways, but these features are not yet universally supported in the browser world.

Another universally supported aspect of the CSS 2.1 specification is the counter() function, which makes it easy to automatically add numbers to page headings, sections, and other kinds of recurring elements on the page.

This is great for adding flexible and customizable numbering without having to resort to <ol>-based lists.

The best part is that this is really easy: simply specify a :before pseudo-class with a content property using a counter with your chosen name:

body {
counter-reset: heading;
}

h4:before {
counter-increment: heading;
content: “Heading #” counter(heading) “.”;
}

To learn more about resetting and incrementing counters, check out out the Mozilla Developer Network page on the topic. It also has a great example of nesting counters in creative ways.

Last but not least, let’s talk about the calc() function. This feature lets you perform simple mathematical calculations, for example to automatically calculate element dimensions without having to resort to non-maintainable JavaScript hacks. The mechanism supports all the basic arithmetic operators, including addition, subtraction, multiplication, and division. For example, let’s say you want to create an element that occupies almost the entire width of its parent, but leaves a fixed number of pixels for a subsequent HTML container of some sort:

.parent { width: 100%; border: solid black 1px; position: relative; }

.child { position: absolute; left: 100px; width: calc(90% – 100px); background-color: #ff8; text-align: center; }

Brilliant, isn’t it? For more details, check out the W3C CSS calc specification yourself.

As should be apparent, CSS support has matured enough to the point that it can be used instead of scripting – and greatly simplify the life of web developers. It would be simply foolish not to start leveraging that!

Courtesy : Aptiverse