5 Days of HTML5 (Day 5: Adapting Your Website for HTML5 Browser Support)

It’s day 5. The final day in our series and I wanted to cover something useful and a bit fancy within the realm of HTML5/CSS3. So today’s tutorial is on an issue facing most HTML5/CSS3 developers, the issue of cross browser compatibility.

What is Cross Browser Compatibility?

Cross browser compatibility refers to your site being able to be displayed correctly and consistently across multiple browsers. With there being four or five major browsers out there that are widely used, it’s important that we cater for everyone’s needs.

With HTML5 and CSS3 being relatively new, us developers currently face the issue of our technologies not being fully supported across all browsers. Whilst rounded corners work great in Firefox, Safari encounters some issues rendering the corners when the position is set to relative.

So how can we tackle this issue? We used to be able to run some nifty javascript to determine what browser our user is running and serve up alternative stylesheets. Now we have so many different browsers, versions of browsers and features that can be disabled, it’s just not practical to determine how we render a site based on browser alone.

Enter Modernizr. Modernizr is a javascript library able to detect not just what browser a user is running, but what features that browser can support, and then amend the HTML tag of your website to include classes dependent on supported features.

So how does it work?

Well first lets heard over to modernizr.com and download the latest version. Copy the .js file to the root of your website and add it into the <head> section of our HTML page with the following:

<script src="js/modernizr-1.0.min.js"></script>
Next we need to set up our HTML tag for Modernizr, amend the <html> tag at the beginning of the page to the following
<htmlclass="no-js">
That’s it! Modernizr is set up and we can see that when we run our page in a browser and view source, Modernizr populates our HTML tag with multiple classes depending on what features of HTML5/CSS3 our browser can handle. So we may see that Modernizr has replaced our HTML class with something like this:
<htmlclass="js canvas canvastext geolocation rgba hsla no-multiplebgs>

Here we can see that rgba is indeed supported, but multiple backgrounds are not. So no problem there for our site, but what if Modernizr returned a class value of ‘no-rgba’? Well because we are dynamically selecting class, we can write multiple classes in our style sheet to cover all bases and the ones that aren’t returned will simple be ignored. We could write the following to cover our bases for RGBA:

.rgba {
background:rgba(106,0,106,0.2);
}

.no-rgba{
background:url('../images/alt_background.png')
}

Here we present two classes, one utilising RGBA, and one using a transparent .png image to replicate the transparency with the alpha channel.

Again, here’s another fantastic video from the guys at SitePoint on the use of modernizr to serve adaptable HTML5 sites that pick and mix their design based on compatibility, making sure that your site never fails to deliver.

Well that’s it for my mini series on HTML5, I hope you got some use from it if even for a starting point in your own research. I’ve only touched upon the basics of HTML5/CSS3 but it’s evident that the revisions in this markup have been designed with the modern world of the web in mind. With the W3C moving towards native browser support we can rely less and less on external libraries and deliver powerful websites efficiently and with minimal compatibility issues…as soon as the major browsers catch up and support it…

Feel free to comment your thoughts and link me to your work! I’ll have my website and email back up within the next couple of weeks, i’ll update another blog post when its on and maybe explain some of the features powering it 😀

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s