
Three CSS features you need to know about - moonlighter
http://aptiverse.com/blog/css_features/
======
pjungwir
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.

~~~
glitchdout
Here's a reason to use the :before + attr() combo: Combine it with media
queries to progressively display more flair content when more space is
available. Check this CSS Tricks article to see what I mean: <http://css-
tricks.com/css-media-queries/>

Really cool stuff.

------
bensummers
<http://caniuse.com/> is a wonderful resource for checking exactly which
browsers support new and exciting features, and whether they need a prefix.

~~~
jongalloway2
Here's info on calc support: <http://caniuse.com/calc>

No support in Opera, requires -webkit prefix in prefix-encumbered browsers ;-)

~~~
X-Istence
Meh, Opera now is WebKit ... so the -webkit prefix should work ;-)

------
iamben
-moz-box-sizing: border-box; -webkit-box-sizing: border-box;

...is a great alternative to the calc example - ie Set your width to 100% and
your padding to 100px.

Edit: code is a little mangled, just Google it.

~~~
stan_rogers
Box-sizing should be supported unprefixed as well (recent versions of IE,
Chrome, FF and Opera; not sure about the current Safari).

~~~
eurleif
And you should add the unprefixed version of a property to your CSS even if it
isn't yet supported by browsers, to future-proof your code.

~~~
masklinn
Unless the spec is still in flux and the unprefixed syntax changes, then
you're SOL.

~~~
eurleif
Still better to have the unprefixed version in your code than not to, I'd say.
I really doubt the spec would change so that old code was still valid, but had
a different meaning; most likely, the worst that would happen is old code
would become invalid (and CSS's error handling makes invalid code not a big
deal).

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

As an aside, is Aptiverse in YC? If not, the logo could potentially be a case
of mild trademark infringement.

~~~
geargrinder
Anything in an orange box is an infringement of the YCombinator mark? The
Aptiverse logo doesn't have a white outline and is a different font, not to
mention a completely different letter. There is certainly no confusion for me.

~~~
MichaelApproved
Most importantly, it doesn't even appear that the "Y" with orange background
is even trademarked by YC.

~~~
pbhjpbhj
Trademarks are acquired by commercial use. You presumably mean registered.

~~~
MichaelApproved
_"Trademarks are acquired by commercial use."_

Are you trying to differentiate between a registered and unregistered
trademark? From what I understand, to get an unregistered trademark, you must
add "TM" to your mark. That type of mark is mainly valid in the region/state
that you're doing business out of.

To get a registered trademark circle r (R), you must file the right paperwork
and pay a fee with the federal gov.

In both cases, to maintain your trademark, you must clearly show that it is
your trademark with either a TM or a circle R (R). There are other
requirements but these are the two I was looking for when stating that there
is no YC trademark. If they do have a trademark on the Y with orange
background, it's being maintained poorly.

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

~~~
rickyc091
[https://developer.mozilla.org/en-
US/docs/CSS/calc#Browser_co...](https://developer.mozilla.org/en-
US/docs/CSS/calc#Browser_compatibility)

Looks like calc is supported in Chrome 19+, Firefox 16+, IE9+, Safari 6+.

~~~
mcrittenden
He/she was asking if it performs well, not if it is supported.

~~~
wwweston
One could argue that where a feature is not supported, it's going to perform
terribly, perhaps taking O(∞).

~~~
qu4z-2
But it won't lock up the user's browser in that time, which is helpful.

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

~~~
mnicole
I love calc, but there's also a webkit bug that causes transitions applied to
elements with calc'd dimensions to crash the browser that I don't believe has
been fixed yet. The crash is particularly rough for Safari (closes with no
warning), but just stops the other browsers from loading the page once it hits
that element.

------
busticated
These are nice but it's funny how they fall short:

1: you can't combine attr() and calc() - calc(attr(data-count) + 10) <\-- nope

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)

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

~~~
james4k
Yeah.. I'm on Chrome 25 and was disappointed to see this.

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

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

~~~
GhotiFish
No kidding. The _nightmare_ I went through trying to make a fluid CSS layout
with more than one column. My god! The time I wasted! Arg!!!!!

~~~
masklinn
Then again, ideally fluid layouts with multiple columns would use (ta-daaa)
columns: <http://caniuse.com/#feat=multicolumn>

------
_ZeD_
is there a way for attr() (or similar) to access other css properties? In the
example there is

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

whould be gorgeous to write instead

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

the mdn attr page[0] says it can also access properties, but I cannot find a
way

[0] <https://developer.mozilla.org/en-US/docs/CSS/attr>

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

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

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

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

------
afshinmeh
Upvote for calc() function, Useful.

------
importednoob
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

------
rorrr
And which major browsers support all of that?

~~~
Trezoid
All of them except Opera (though webkit needs the -webkit- prefix on calc())

