Trent is an easy guy to admire. He works at a cool design agency (they have a triforce for a logo and pull it off). He’s got a cool blog that shows off his clean design style with art directed posts and custom headers. Jason Santa Maria calls him on the phone to work on cool projects with fancy new web technologies. I thought I’d try and snag an interview with him to see if some…
Three boxes: a main feature box and two sub features. Click on the sub feature boxes and the whole shebang rotates to make that the main feature. The animations happen via CSS3 (the future) and the clicks and class shuffling is done by JavaScript (its forte).
Nicolas has one of those web design blogs that everybody should subscribe to. He explains things with a thoroughness and understanding that we all should strive for. I caught up with Nicolas to ask him some questions about the future of the web, his life, and if he had any advice for others.
Reader Paul writes in:
What’s the difference between
.container div { }anddiv.container { }?
It’s great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very different things. This is pretty similar to this question from a while back.
Perhaps a good way to explain their difference is reason them out in “plain English”.
I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them.
The guys from DOCTYPE told me it was their inspiration for the navigation on their website. They are doing it just like I would have, with CSS3 gradients and jQuery. So I decided to snag their code…
There is some actual data supporting a counter-intuitive idea I postulated about a while back:
People using the more difficult interfaces tended to perform better, were less fazed by distractions and were found more likely to transfer their skills to new interfaces or tasks.
I think the take-away from this isn't "let's make our interfaces less usable" it's "maybe we don't understand as much about usability as we think we do."
... is now the same as the Mozilla / Official spec version, which is great because 1) it's easier to write and technically more powerful and 2) yay standards!
It's only in the WebKit nightlies, but I'm sure will be in the next major releases of Safari and Chrome.
So is
-webkit-gradientgoing away? Certainly not! We’ll maintain support for-webkit-gradientfor the foreseeable future for all the existing content out there that uses it.
Google Chrome is dropping support for the video codec H.264. Kinda feels like an Apple vs. Google pissing match as H.264 is so heavily used by Apple and WebM was developed by Google.
For HTML5 video, this is how it seems like it shakes down to me:
Now:
H.264 - Chrome, Safari, Mobile Safari
Ogg Theora - Firefox, Opera
Near Future:
WebM - Chrome, Firefox, Opera, IE 9
H.264 - Safari, Mobile Safari
Still only need to provide in two formats to get pretty good coverage. If Safari can get on the WebM bandwagon we'd be all set, but don't hold in your farts till that happens.
Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.
