All posts tagged ‘CSS3’

File Under: CSS

W3C Gives Its Blessing to Prefix-Free CSS Animations


The W3C’s CSS Working Group, the group charged with creating the CSS standard, has given browser makers the go-ahead to remove the prefixes from CSS 3 Transforms, Transitions and Animations.

CSS vendor prefixes were designed to help web developers by giving them a way to target CSS to specific browsers and use proposed standards before they were finalized. By prefixing properties developers can target any quirks in specific browsers until the standard is finalized. Unfortunately that’s not always what has ended up happening. Vendor prefixes have come under considerable fire recently, with Opera going so far as to implement other browsers’ prefixes.

That’s why the announcement that three more properties are ready to go prefix-free is good news for web developers. Obviously it’s a bit early to get rid of your transition and animation prefixes, but look for coming updates from browser makers to do away with the need for prefixes like -moz, -webkit, -o and -ms when using Transforms, Transitions and Animations. In fact the latest preview release of Internet Explorer 10 already supports the unprefixed versions.

The IEBlog recently posted a nice overview of all the new prefix-free CSS properties in IE 10.

Unfortunately, as is often the case in web development, using the prefix-free version of CSS rules is not a simple as it should be. Even those who followed the best practice of including an unprefixed version of CSS rules after the prefixed declarations may, in some cases, need to tweak their code a bit.

Consider for example the syntax of CSS gradients. The prefixed gradient syntax supported by today’s browsers is in fact based on a now obsolete draft version of the gradient specification. The earlier syntax is incompatible with the current Candidate Recommendation version of the spec. That means if you wrote out the unprefixed rule on a site two years ago, using the correct syntax for the time, your unprefixed code won’t work when gradient prefixes are removed (as they have been in IE 10). Fortunately, gradients are something of an anomaly and most of the time you won’t need to change too much. With the Transforms, Transitions and Animations you shouldn’t need to change anything at all.

Either way, browser makers will likely need to continue supporting the prefixed versions of CSS rules even after the W3C declares the non-prefixed versions ready for prime time.

File Under: CSS, HTML5, Web Standards

A Guide to HTML5 Features You Can’t Detect

What language does that browser speak?

What language does that browser speak?

Web developers looking to play with the new features in HTML5, CSS 3 and other NEWT tools are still struggling with incomplete and inconsistent browser support. While HTML5 and its siblings are far from perfect (and complete), that doesn’t mean you can’t use them; it just means using them is a little more complicated since you need to detect the current browser’s level of support and then adjust accordingly.

One of the easiest ways to detect the current web browser’s level of HTML5 support is the Modernizr JavaScript library. We’ve covered Modernizr several times in the past and it’s a great addition to any HTML5 toolkit.

But sadly, not everything can be detected with JavaScript. If you’ve ever bashed your head against the keyboard trying to figure out why something wasn’t being detected, Modernizr has a new wiki page for you: The Undetectables.

The page lists a number of features that simply can’t be detected using general feature tests. Instead, these features can be found by either user agent sniffing (which leads to heartache and doom), browser inferences or as the wiki puts it “simply providing the same (slow) fix to everyone.”

In some cases there are workarounds, like the great keypress JavaScript effort from Google , which fixes a number of erratic, inconsistant keyboard behavior quirks in today’s browsers. However, in many cases you’re probably better off avoiding the undetectable features until browsers catch up.

If your code has been behaving strangely, despite your best efforts to detect a browser’s features, save yourself some hair pulling and head over the new Modernizr page to see if perhaps the problem is on the list of things that can’t be detected. If you discover other problems trying to sniff a browser’s capabilities, be sure to let the Modernizr devs know about it.

See Also:

File Under: CSS, Web Standards

CSS3 Pie Lets You Have Your CSS and IE It, Too

When it arrives later this year, Internet Explorer 9 will support most of the latest decorations and behaviors in CSS3. But until then, you’re stuck with the same old workarounds for IE users.

Here’s something that might make your life as a designer a little bit easier: CSS3 Pie is a new library written by Jason Johnston that lets you use several of the latest CSS3 enhancements and still have them show up in Internet Explorer versions 6 through 8.

It creates DHTML behaviors that IE can understand, and then it controls how they’re presented. The library can be used to translate a few CSS decorations: border-radius, border-image, box-shadow, multiple background images and gradient backgrounds.

Right now, it’s just a demo, and since it uses .htc files for DHTML behaviors, it causes a serious performance hit on some versions of IE. It will likely become more useful in the future as Johnston builds it out. Follow Pie’s progress on Twitter.

Is it a good idea? On one hand, it’s just another life support mechanism for IE6. But it also gives us an easy enough fix where we can continue creating modern designs without having to worry as much about alienating those visitors stuck using browsers that don’t have proper CSS3 support.

Hat tip to Rey Bango at Ajaxian, who notes that CSS3 Pie deserves a spot on your shelf next to those other two libraries that perform similar magic tricks, Modernizr and html5shiv.

Also, A List Apart recently ran an excellent tutorial on using Modernizr to smooth the transition to HTML5 and CSS3.

See Also: