Too Many Browsers Will Give You a Headache

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

The arrival of the Chrome desktop browser launched the new “Browser Wars” and the first “Battle of the Browsers” took place on the battlefield of mobile devices. Yes, coders have been better.

So let’s take a look at what browsers are relevant:

  • Desktops: Chrome, Firefox, Internet Explorer (versions 8, 9, 10 and 11), Opera and Safari.
  • Mobile devices: Android Browser (versions 2.3, 4.x and 5), Safari Mobile, Chrome Mobile, Internet Explorer Mobile, Opera Mini and Opera Mobile.

Browsers that need special attention if website traffic is high are highlighted in italics. Also, take a look in your own statistics to see if any optimization pays off.

You may ask: do I have to optimize for all these browsers? Don’t worry. Ensuring availability of the main content is possible in all browsers even if you are using the CSS3 technologies described in this text.

Now, let’s take an example and focus on one browser.

Chrome Mobile

The usage share of Chrome on mobile devices is rapidly increasing, so it is good to mention that it has replaced the original browser on new Android devices. It is the one with the globe icon labeled “Internet”.

Unlike its “older brother”, the mobile Chrome will have an automatic update on some devices. Not to mention that it is much better at supporting CSS3 and other HTML5 technologies. See html5test.com.

Chrome comes in an iOS version as well, however, that is a kind of pseudo-Chrome.

Pseudo-Browsers

In iOS, it is not possible to install a browser with its own rendering engine. Therefore, iOS Chrome and all other alternative browsers are mere user interfaces. The actual websites are rendered using mobile Safari.

To give you another example of a pseudo-browser, statistics show that some websites are accessed through the Facebook interface. Displaying a website in social-networking apps of this kind is possible thanks to a pseudo-browser. The rendering itself is done using the core of the default browser of a given platform, using Chrome, an Android browser on Android, mobile Safari on iOS or Internet Explorer on a Windows Phone.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more