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...
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) <-- 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)
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.
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