W3C standards have created a beautiful ruleset for web developers to create ubiquitous behavior in website layouts. These rules are much more commonplace and have been adopted by professionals in every area.
Unfortunately the one area that is somewhat lagging is browser support. Modern browsers have jumped onto the HTML5 and CSS3 bandwagon as it scurries off into our distant future. But that wagon left behind a few stragglers, namely old versions of Internet Explorer that get scarce usage around the world.
I’d like to focus on a handful of HTML/CSS specs with a deeper look into their current browser support. How many of you are still unsure over which CSS prefixes you need? This guide will fill you in and get you rolling with the most up-to-date info on modern web browser support.
SVG CANVAS
These two elements are distinct and separate, but often get paired together. SVG is an image format just like PNG or JPEG – however it’s a native vector graphic. So while fixed-pixel bitmap images can’t be resized, SVGs can without any quality loss.
As of right now SVG support is 100% across the board. In fact, every single browser both desktop and mobile supports SVG. So honestly if you’ve been holding off on this technology, you’ve got the green light to start using it.
The biggest concern with SVGs are with older versions of Internet Explorer 6-8. These have absolutely no inherent support for rendering SVGs in the browser. If you don’t care about the older versions then just move on ahead – otherwise try a library such as SVG Web.
HTML5 canvas elements are another aspect of dynamic rendering with HTML5. Canvas support is in the same vein as SVG with only partial support on Opera Mobile. Canvas elements can be rendered in Opera Mobile, but it doesn’t support canvas animation.
Otherwise Canvas is the perfect container for dynamic SVG graphics, or other 2D/3D elements. Again IE 6-8 are your only concerns. But yet again free JavaScript libraries come to save the day.
FLEXBOX DISPLAY
If you aren’t familiar with Flexbox let me cover the basics. The CSS displayproperty has some traditional values like block, table, inline, etc. The newest addition is display: flex.
A flex container will fit the width of its container, and the internal elements take on ratio-based widths. So a flex container with 3 internal elements isn’t defined by pixels. Instead the elements are given a ratio, like 1:1, so they’d all fit based on the browser width.
This is definitely a confusing topic so I’d recommend this video for more clarification. Basically this is just a new display property for responsive websites that don’t want to use floats and clearfix hacks.
Flexbox support is great everywhere except Redmond’s headquarters. IE11 is the first version to have full support. Everything else requires prefixes and detailed hacks.
If you want to use flexbox then do a little research on your target audience. Try to estimate which browser versions would be the most prominent and make your decision from the highest common denominator.
Flex is powerful and worth learning. But it may still be a couple years away from dominating 99% browser support.
RBGA AND HSLA COLORS
Alpha channel colors were added to CSS3 along with a few other selection methods. Plenty of designers still prefer the hexadecimal code when it’s useful. Yet there’s something to be said about working with RGBa for a transparent effect.
Both RGBa() and HSLa() are fully supported in all modern browsers. You’ll run into trouble with older versions of IE6-8, but that seems like par for the course.
At this point RBGa is almost too powerful to pass up. It can be used in place of any CSS color value and it’s much easier than creating transparent PNGs. I say this is one setting that’s worth using and leaving IE6-8 users in the dust.
CSS3 BROWSER PREFIXES
Web developers have already grown accustomed to the beauty of CSS3 properties. Gradients, box shadows, everything that used to require images can now be written in code.
When these specs first hit the market they required almost endless browser prefixes. But where do we stand today?
Custom rounded corners can be made using border-radius. At this point you do not need to use any prefixes at all. Older iOS3 browsers may need -webkit, but we’re currently on iOS 8. So for all intents and purposes you can ditch border-radius prefixes.
The same goes for our beloved box-shadow property. Older versions of Firefox(3.x) and iOS(4.3) need their respective prefixes. However these are so outdated that it’d be like trying to support IE 5.5. You may be a stickler for support, but honestly you can get away with absolutely no prefixes on this one.
CSS3 animation and transition properties completely changed the game for web designers. Thankfully we’re at a point where you only need -webkitprefixes for both animations and transitions.
This prefix adds support for versions of Safari and Chrome – everything else is good to go.
And finally we get to the crazy CSS3 gradient used in backgrounds. As you can see by this feature chart, CSS3 gradients are supported in all major browsers except Opera Mobile… but come on.
For good measure you might include the -webkit prefix for older versions of Safari. But at this point the only true requirement is DXImageTransform for Internet Explorer.
HTML5 AUDIO & VIDEO
Lastly I want to cover the popular methods of embedding media on the web. Video and audio players were originally created in Flash because it was the most supported plugin.
Now every browser supports HTML5 and it’s easier than ever to just embed a raw mp3 or mp4 file. Both HTML5 video and HTML5 audio are good to go.
You will have trouble with our old friend Internet Explorer versions 6-8. But thankfully a JS library named HTML5Media was released that forces support among all browsers.
So get your video files prepped and uninstall Adobe Flash because you won’t be making any more ActionScript media players ever again!
FINAL THOUGHTS
While these are just a few of the newest properties, I feel these are also the most popular and often the most confusing. When you see how easy it is to code HTML5/CSS3 features you become enamored by these advancements. And with browser support growing rapidly I can only imagine where the industry will be in another 5 years.