Three CSS features you need to know about

Wow, for a "three things you need to know" title, this article was surprisingly informative. Combining attr with :before is a nice trick; I'll be on the lookout for my own reasons to use that. And calc sounds great.

<a href="http://caniuse.com/" rel="nofollow">http://caniuse.com/</a> is a wonderful resource for checking exactly which browsers support new and exciting features, and whether they need a prefix.

-moz-box-sizing: border-box; -webkit-box-sizing: border-box;<p>...is a great alternative to the calc example - ie Set your width to 100% and your padding to 100px.<p>Edit: code is a little mangled, just Google it.

I've found attr() useful on occasion, but I can't believe that I've carried on for so long assuming the only way to subtract pixels from percentages in my styling was to use JS.<p>As an aside, is Aptiverse in YC? If not, the logo could potentially be a case of mild trademark infringement.

Is calc() performant in modern browsers (IE10, Chrome, Firefox)? I got scared off of it a few years ago when it was first announced because I read that the performance hit was very noticeable...

As I recall, calc should be avoided if performance is a consideration in your project.

These are nice but it's funny how they fall short:<p>1: you can't combine attr() and calc() - calc(attr(data-count) + 10) &#60;-- nope<p>2: how would you count down from an arbitrary number of child elements? you need to set the total via counter-reset... and, no you can't do content-reset: foo attr(data-count)

To those using calc(), WebKit requires -webkit-calc

Examples and browser compatibility stats would have been nice additions to this post.

How have I lived without calc() for all this time?....

is there a way for attr() (or similar) to access other css properties? In the example there is<p><pre><code> .child { position: absolute; left: 100px; width: calc(90% - 100px); background-color: #ff8; text-align: center; } </code></pre> whould be gorgeous to write instead<p><pre><code> .child { position: absolute; left: 100px; width: calc(90% - attr(left px)); background-color: #ff8; text-align: center; } </code></pre> the mdn attr page[0] says it can also access properties, but I cannot find a way<p>[0] <a href="https://developer.mozilla.org/en-US/docs/CSS/attr" rel="nofollow">https://developer.mozilla.org/en-US/docs/CSS/attr</a>

I've used attr()to do some localisation, i.e., add "Chapter" or "Kapitel" before an H1 chapter heading depending on the lang attribute on the HTML element. Useful stuff.

These are really good tips. I use fancy CSS2 and CSS3 stuff all the time and wasn't familiar with all of these.

wow, calc() is sweet enough to drop a LESS dependency in a lot of cases.

attr() seems incredibly useful, and calc() nicely augments static calculations provided by LESS CSS et al. I'm definitely going to use these.

Upvote for calc() function, Useful.

display:none vs visibility:hidden is a need-to-know display: inline-block coupled with font-size: 0px on the parent is huge as well inset box-shadows are pretty cute too

And which major browsers support all of that?