iOS6 gives us two new CSS3 properties

It’s always great when new CSS properties are supported in (desktop) browsers. But as long as this support is limited to Chrome (or Safari) it doesn’t provide much benefit, since the user base isn’t that broad yet (but fortunately growing). However they become really interesting as soon as they are backed up by mobile devices powered by WebKit, in this case the iPhone and iOS6. With this new operating system two new CSS3 techniques find their way into a broader audience.

CSS3 filters

They allow enormous manipulations of the content like blur, greyscale or the adaption of the saturation. I’ve build a demo which showcases all the available filters and their employment. You can read more about them at the official specs. A totally awesome way to play around with filters is provided by Adobe’s CSS FilterLab.

CSS3 Cross-fade

As against filters I can’t see that much potential to be a valuable CSS3 property that will be massively deployed. It’s nice to be able to blend in two different images, but the emphasis is on “nice”, not more. However to play around a bit I’ve also made a quick demo. The specs can be found here.

Except from the iOS devices both of the techniques only work in Chrome and Safari 6 so far. Support in Firefox or IE10 is uncertain for now.

What do you think about them? I’m really excited about CSS3 filters, but it will take a long time until we can finally apply them in a desktop environment. But for apps it’s definitely a great addition and as good as ready to use.

Source: mobilexweb.com

  • http://www.nicolas-chevallier.fr Nicolas Chevallier

    I think there are a lot of other useful CSS properties than these ones. They can be useful for specific projects (like some old CSS filters in IE6!).

  • Robert

    Unfortunately the codepen page doesn’t seem to be scrollable on an iPad (with Safari or Chrome), which kind of defeats the the purpose of showcasing the new properties on a mobile device…

    • http://www.css3files.com Christian Krammer

      Robert, the best way to view this examples is at a desktop version of Chrome. It’s true that iOS6 introduced these new properties, but that doesn’t mean that you need to look at the examples on an iOS device. It just means that the user base, which is able to see the new “effects”, is much bigger now.