CSS Regions in iOS 7 Safari

I am very excited about the latest iOS version (the 7th). Not only does it make me feel almost the same as the first time I ever used an iPhone (I’m only halfway kidding here :D) but it also manages to improve many things that were already quite good.

The browser is one of them. I have a number of websites that I visit almost on a daily basis and although they are “optimized” for mobile they are still quite heavy. On my iPhone 5, the new Safari mobile browser renders them much, much faster. I was actually blown away by the speed improvement. I am curious what they actually changed :).

Using CSS Regions to create a responsive website. Portrait orientation:


Landscape orientation:


But what is even more impressive is the array of new CSS features supported by the latest Safari mobile. Less than two years ago, only a handful of people outside of Adobe knew about CSS Regions – a new CSS proposal to improve text layout options available to modern web designers/developers. Today, CSS Regions is enabled in Safari mobile. This is A.W.E.S.O.M.E! It really shows that the web is moving forward faster than ever.

If you don’t know about CSS Region, check out this page. In a nutshell Regions enables designers and developers to decouple the presentation of content from the content itself. You can create magazine-like layouts and more complex Responsive Design websites.

If you have an iOS device that is running iOS 7 tap on this link to see an example that uses CSS Regions. If you run Chrome Canary/WebKit Nightly/latest Chrome – you can also see this example on your desktop (just make sure you have enabled the feature).

Leave a Reply