Although modern browsers have been improving rapidly there’s still a need for backwards compatibility. Web standards have reached a turning point where most devices are capable of supporting CSS3 features. However it’s crucial to understand your audience and learn how to manage visitors who are not at the precipice of change.
These useful tips and tools can be applied to any web design project for increasing CSS3 support. Most developers already know that the biggest contender is Microsoft’s Internet Explorer, but fallback methods need to support as many browsers as possible. Follow along with these resources and see if you can put them to good use in future web projects.
Modern Web Standards
It can be tricky to choose when it’s appropriate to adopt newer standards. It’s taken years for CSS3 keyframes and transforms to become mainstream – and many frontend developers still avoid these technologies.
Unfortunately new technology just takes a while to catch on. This is totally fine but it shouldn’t slow you down. Keep a pragmatic mindset and recognize when a new feature is more than acceptable to start using. Keep a consistent tally of browser support for new properties and libraries. For example, you may be surprised to learn that HTML5 video(with a JS fallback) has become the best choice for streaming digital media.
Take some time to consult a web standards chart to see which features are supported by which browser versions. The chart above includes everything from video codecs to input fields and pseudo-classes.
This makes it so much easier to organize a list of features which may pose a problem in legacy browsers. Just because CSS3 icon fonts may not be supported in IE7 doesn’t mean you shouldn’t use them. Fallback methods are meant to offer alternatives to older browsers which is why they’re so popular.
Just stay focused on each project’s goal and try your hardest not to sacrifice anything. CSS3 has some incredible features and should prove to be the future of frontend web development. Newer technologies get picked up faster than you may think, and when used properly they’ll definitely improve your workflow.
When to Abandon a Browser?
It can be a tough decision to upend your support for an older browser. You never know when it’s the right time to stop supporting people who are unwilling or unable to keep up with newer technology. It’s also these same users that are impeding web standards and creating compatibility issues for developers.
The best way to check browser support is with traffic analysis. Use a platform like Google Analytics to review the most common browsers used by your visitors. These stats will help you gauge when it’s time to stop supporting an older legacy browser and just accept that those users may not have the best viewing experience.
You’ll want to spend time at least looking for a possible solution before giving up. There are so many possible issues from SVG support to CSS3 animation – it would be impossible to list them all.
When designing a new site try making a list of all the features which need to be supported. Then you’ll have a better idea of which browsers may cause problems and which fallbacks are at your disposal.
If you don’t have any traffic stats you might instead try looking over some online trackers. W3Counter is a free service which lists the top 10 browsers and their market share. These results may not reflect 100% onto your audience but they’re still a good estimate.
Checking for Browser Support
Aside from the table I mentioned earlier there are other great resources for checking browser support. Most developers aren’t looking to check a particular browser but instead need to check out a particular feature.
Can I Use is a new dynamic webapp offering all the information you’d ever need on HTML5 elements and CSS3 properties. You can also find information on SVG image support and other detailed topics.
I would suggest that every web developer memorize or bookmark the Can I Use domain. It’s fantastic for determining browser support for any possible feature. The site is quick, reliable, and updated frequently.
However there is one other alternative I’d like to mention. HTML5 Please is a similar site devoted to browser support. You can search for properties or features and get a list of how much support is offered for each browser version.
But the best part is that you’ll also be given some suggestions for fallback methods. HTML5 Please includes standard fallback libraries and hacks which can be used to pull support from older browsers. The search bar is automated so you don’t even need to refresh the page to lookup multiple features.
Take a look at the show all page if you want to see everything listed together at once. Between HTML5 Please and the other resources in this post you should have no problem researching fallback methods for any modern feature.
Free Libraries & Resources
Perhaps the quickest and most surefire method of browser support is through the use of open source libraries. JavaScript is supported by a wide array of browsers so it tends to be the safest language. Consider a few of these JS resources for improving CSS3 support.
Modernizr
Every web designer & developer should at least have heard about Modernizr. This is a feature-packed JS library for improving HTML5 and CSS3 support in many legacy browsers. Modernizr can be used as one large library or customized to support individual features. If you’re new to the library I would highly recommend following this tutorial to learn more.
Prefix Free
CSS3 prefixes are used for many newer properties to enhance browser support. Thankfully the open source Prefix Free library allows developers to write a single property while also supporting all other prefixes. You’ll save time writing duplicate code and even support some older browsers.
CSS3 Pie
It shouldn’t come as a surprise that Internet Explorer has a lot of buggy rendering issues. CSS3 PIE is a library which adds CSS3 support to IE6-9. It covers a wide array of CSS3 properties and it’s even customizable for your own usage.
Selectivizr
Here is yet another IE fixit library meant to handle selectors. Selectivizr is open source and fixes a number of problems with pseudo-classes in IE6-8.
Fallback.js
If you ever have problems loading a specific plugin or library then consider trying Fallback.js. This is a free open source library made for handling CSS and JS libraries which are unable to load or function properly. It may seem a little confusing at first but the Fallback.js documentation covers everything in great detail.
IE7.js
Closing
Modern web development has become much more streamlined but it’s still hard work. Garnering support for older browsers may send you out to the far reaches of the Internet before finding a great solution. It’s my hope that this article can provide all the best tools and resources in one location to make backwards-compatibility a breeze.
Leave a Reply