-
200920 Aug
Posted in News
The CSS 3 news never really gets too quiet out there, I think that more coders and designers than ever have their heads down and hands dirty in CSS 3. How do I know? Well more tutorials and examples are being made all the time and more and more mentions are popping up on the various design and development blogs. Are your hands dirty enough? I know mine weren’t so I set out to see what’s new in for this summer as it draws to a close.
The entire web development community is on board with HTML 5 and for good reason. Modernizr is a great tool to help you stay cutting edge without alienating your visitors who aren’t running the latest and greatest browser releases. Currently friendly with Safari 4, Firefox 3.5, Operate 10b1 and IE 8, this JS library is definitely handy.
The simplicity and elegance with which many common interface elements can be handled with CSS 3 is part of the attraction to the new standard. Border-radius, border-image etc in particular as well as a handful of other styling options are at the heart of a very practical interface technique that doesn’t need any imagery. Sprites were a quite practical way to improve page load response time, feel of an interface and simplify maintenance, but if you can remove the need for images altogether for parts of your interface (a dream come true), now you’re on your way to interfaces that are easier to support and give you more leverage. Sean Martell (Much ado about pixels) has a great practical example worth checking out.
The ever prolific John Resig weighed (as did Eric Meyer) in the past on the CSS 3 specification and the template layout issues that many have with the proposal. Anyway, the topic was rekindled by Alexis Deveria discussing the jQuery plugin that eventually arose from the topic.
Do you feel this kind of approach is practical? What about libraries like Modernizr? I personally spoke to John about things like this early last year and am excited to see them appearing. Let us know in the comments if you’d rather see CSS focused on elegant (and native) implementation of practical features, or if you appreciate the value JavaScript can contribute.
You can skip to the end and leave a response.
-
Comments
-
01.
CyberSkull says:Comment » August 21st, 2009 at 1:18 am
I’m personally only really interested in using JS for getting work done and state changes in the page. The way I try to handle state changes in the page is not to have JS change the element’s style but change the class. I’m excited by most CSS3 features because it means I don’t have to use JS or images for various effects, it makes for a smaller and faster page.
-
02.
CyberSkull says:Comment » August 21st, 2009 at 2:00 am
Looking over the Fennec example, I have never heard of border-colors before. Where is a good place to look it up?
-
03.
Ollie says:Comment » August 21st, 2009 at 8:18 am
I’d appreciate those kind of advanced tutorials here at css3.info, that way we don’t have to fly over the internet (to find a 404 later on).
-
04.
HTML5, CSS3 are great but Modernizr and things like that kill all the goodness, because they show that it’s OK not to upgrade browsers, it’s all possible without upgrading. But if a surfer ends up on a page that doesnt work or pops up an alert asking to upgrade, and the user does, the world is much better place.
Modernizer is just like an ugly IE6 hack :)
-
05.
@CyberSkull: border-colors have been covered here before:
http://www.css3.info/preview/colored-border/
@Ollie: All of the CSS tricks mentioned have been discussed/documented on CSS3 already. The purpose of the post was to show practical applications and compare/contrast the power of a more robust CSS 3 vs what JavaScript may or may not add.
@fallenBoy: I agree. It’s a valid point. In the end however, the site owner can always choose to show a special message to users with old browsers encouraging them to upgrade, so I sometimes like JS library solutions that allow me to keep moving forward without having to wait for everyone to upgrade.
-
06.
Ollie says:Comment » August 21st, 2009 at 11:08 am
@Frederick: Albright. I’m not a fan of JS libraries like layout module because it makes your website flicker before/after the library is loaded. Of course, you can do all that display: none; hack to hide it but then thats just as ugly as any IE 6 hack. I like some jQuery/Prototype effects but that’s about it – one’s presentation shouldn’t depend on a JS library to function (concerning visual display stuff, behavior).
-
07.
Ollie says:Comment » August 21st, 2009 at 11:09 am
Correction: concerning visual display stuff, not behavior.
-
08.
@Ollie, a very valid point and yes things can be quite ugly. But the question still remains. Does the new standard bring so much to the table that the use of libraries makes it worth while to continue to move forward with more progressive coding without having to mitigate multiple user experiences for various user agents? I have to imagine there are many cases where yes, yes it does.
-
09.
Ollie says:Comment » August 21st, 2009 at 12:11 pm
@Frederick: I guess it depends on what kind of a project it is. Sometimes you can pimp it all up, sometimes you have to stick to the rules. :)
-
10.
-
11.
Alex says:Comment » August 23rd, 2009 at 6:08 pm
I think there are issues with offloading styling to JS, even if it’s just a simple check.
The Modernizr site has a tutorial with a bit of CSS code that only applies a gradient (WebKit property only) if the script sets a certain class on the body element. But the browser will already apply the gradient only if it supports it, all the code does is stop the gradient showing in browsers without JS enabled.
It seems to me to be duplicating the functionality already in CSS and moving it into JS. And it bloats the CSS file, you’re already specifying the background twice, but now in 2 separate rules, if you keep it in one rule with the non-webkit/non-moz property first then you’ll achieve the same effect with less CSS markup and no reliance on JS.
-
12.
Ollie says:Comment » August 26th, 2009 at 8:39 am
@Frederic: I just came across this screencast http://css-tricks.com/video-screencasts/69-first-ten-minutes-with-typekit/ showing typekit, which uses javascript and @font-face to replace certain text. It is a really neat thing, but here show up two unpleasant things: It flashes because it waits until DOM is ready. One solution is to leave it, the other is to hide it with css visibility. Turn off JS and we’re screwed. And here’s the question again, when do we want to use it? :)
-
13.
There you go. AFAICS, the juice has to be worth the squeeze and there are numerous uses for things like this (your case reminds me of sifr for example), that make it worth it. And the debate continues. :)
-
14.
@Ollie: There’s currently a flash when using @font-face in Safari too, as they also wait for the font to load before applying it to the page. Firefox’s implementation differs, as they load unstyled text before applying the font.
-
15.
-
16.
Yes its true there is more talk more people talking about it and more noise (it hurts).
But also consider there are more people using the internet than ever before there are more please able to access the internet than ever before and there are more please owning computers/internet accessible devices than ever before!
-
17.
Replace ‘please’ with ‘people’ twice on comment 16. Strange!
-
18.
Brian Shapiro says:Comment » October 23rd, 2009 at 9:01 pm
Rather than a multi-column module, I’d prefer an overflow attribute that allows me to have the overflow of one element redirect to another element. Strict columns are unnecessarily arbitrary from a designers perspective.
-
01.
