CSS3 is a very serious and ambitious spec adjustment. For most sites, even just on top of HTML 4, it's a JavaScript killer. Rollovers, drop-menus, hilighting, UI animations... they're all in the document side of things now. So the scripting and multimedia side can be for actual scripting and multimedia functions. They can be real programs, instead of having to stand in for every one of the document's shortcomings.
Look at the average site from the 2000s... you'd have a script for every single weird function. Now I can just say "a:hover" and dish out some commandments. But that code I've known about since grade 11.
The stuff I learned today was:
Attribute Selectors
You can select elements based on their attributes like a[href^="http"] selects anchors that go to addresses that start with "http" ...as in, offsite links. Or you can select by file type of the link like a[href$'.pdf'] and so much other craziness. All the pictures with a width of 300px get a certain trim image... the possibilities are staggering.
Media Queries
I already knew about these, but what I didn't know was that you could use them to select things by the size of the screen. So you can say, if the screen is wider than 600px, then my menubar shall be horizontal. If it's narrower, it'll be vertical. I thought media queries were for something else. That is sad.
Math-y pseudo-classes with nth-*
I knew I could do things like select the first or last of something, or every odd or even instance of something, but I had no idea I could do things like select all but the first instance of something with div:nth-*(n+1) or, say, 3n-1, which I still don't quite understand, I think it's the instance before every third instance? The layout possibilities are crazy enough, but what about the artistic potential?
Multiple background images
I have hacked so many multi-backgrounds into stuff just by nesting tons of divisions and assigning each of them a different background... and I didn't even notice when CSS3's multiple background code became browser-accepted. I can just put in one background after another. The code is so natural I don't even feel like I have to explain it here. You just go background url is this and this and this, positions are this and this and this, sizes are this and this and this, origins etc. So I can officially background it up.
Background Size Contain vs. Cover
I totally knew about this one, but I had to be reminded of it again! Contain scales the background to the area it's occupying, while making sure not to crop or distort it. Cover makes sure that everything's covered, but goes ahead and crops the image. These two things solve so much about background layout. I used to make background DIVs with a viewport-fixed position, behind everything else, with the background image as a regular image that scaled up, and still, getting it to cover everything without distorting was not easy. Made me feel great, but I do like being able to do it this way better.
Colours in HSL
I guess I just got used to using colour names and hex codes. I guess that reflects when I learned about all this stuff in the first place. But it also reflects a failure to keep up to pace and that is not my style, so I love being shocked into the present by things like HSL colours in CSS. HSL is a way more natural way to think about colour, and a much easier thing to adjust. Plus it's so much more fun to tell your CSS file what degree value your hue is. "It's 95 degrees, so my complimentary colour should be... let's see 95 plus 1/3rd of 360, that's 210 degrees for my off-colour. And this one's gonna be half as bright and twice as vivid. Yeah."
Multicoloured Borders
As graceful as the multi-background code, this makes boxes look so much better!
Transitions
This is the one I really regret not knowing about all these years. I could have been making links bounce and things slide in and out of view without JavaScript! I could have been making all those effects that my clients wanted without all the scripting and Flash that I hated... and in much less time. Oh well, at least I can now that I know.
I guess I love CSS so much because, like a programming language, it offers me so much power over abstraction. And unlike a programming language, it has a performance advantage on my favourite publishing platform - the web! By leaning on CSS, I can always be two steps ahead of designers who are leaning on JavaScript. If I could be an expert at both, that'd make me a better web designer. But I'd rather be an expert on CSS and Usability, because that makes me a better web developer. Or maybe it's the other way around!
