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.
You can skip to the end and leave a response.
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.
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 :)
@CyberSkull: border-colors have been covered here before:
@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.
@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).
@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.
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.
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!