Web Platform Team Blog

Adobe

decor

Making the web awesome

Take CSS Regions out for a drive in Safari 6.1 & 7!

We mentioned in an earlier blog post that Regions was available in iOS 7 Safari. With the Mavericks release, CSS Regions are available in Safari 6.1 & 7 too! You can use them with -webkit- prefix and have them work in all the latest versions of Safari on mobile and desktop.

This marks Safari as the second browser to ship an implementation of Regions enabled by default! This is a momentous occasion for us to see a feature we have nurtured for just over 2 years be more widely available for designers to experiment with and give us feedback. We could not have done it without the support of browser vendors such as Apple, Microsoft, and Google.

Learn

If you want to know the basics of CSS Regions, Apple’s Beth Dakin and our Mihnea Ovidenie have written a great introduction on the WebKit blog.

Play

You can also take a look at Baby Elephants a demo created using National Geographic content on the latest Safari on Mobile and Desktop to see how regions can enable more control over your web design.

Also take a look at some of pens on codepen.io that demonstrate how regions can be used (if you create some of your own, please use the tag ‘CSS Regions’ so others can take a look!).

Apply

Did you know you can use tools in Chrome & Safari Developer Tools to help with regions? To learn about that and more, head over to Smashing Magazine where CJ has written in depth on how regions can be used.

To celebrate this occasion, we are donating to the National Geographic Society on your behalf.

If you can questions, please do leave comments below or tell us on twitter.

3 Comments

  1. November 12, 2013 at 2:17 am, Peter Gasston said:

    Congratulations on all the hard work you’ve done getting Regions into many browsers. But would you consider working with Mozilla so that we can also get them into Firefox, and the hands of more of our users faster?

  2. November 12, 2013 at 8:59 am, nimbupani said:

    We are! David Baron has concerns about the layout containers that we are looking to address, but I think at this point we are looking at having it ship in Chrome so more users can get to use it.

  3. November 22, 2013 at 4:44 am, Matt | SEO Sussex said:

    I use firefox too. I like to use chrome as it’s superfast, so I keep it clean, without any addons and keep it fast. But fireox I use with lots of addons like Firebug & SEO Quake etc.. Would welcome Regions too! :)