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 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:
"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:
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 😀