When writing code no matter for what, one of the hardest part is keeping up. Constantly there are new standards and CSS compatibility problems with all browsers, users, sizes, etc. Designers and programers usually have the most recent browser updates installed and use the most common browsers. So new elements are possible and after all, going with the development instead of staying behind is best anyways.But, as we can’t expect all website visitors to think the same way, we should always make sure to check a commands browser support. No matter if screen or screenreader, old or new browser, phone or desktop, your frontend always has to work well.
Here are five tools I like using, to check on myself and my CSS coding:
Reset CSS
One of the most annoying problems is, when creating a nice first draft, you show it to a client and for him elements suddenly look different. One mistake is, that the browsers CSS is applied to certain elements and depending on the browser looks may vary. Therefore, it’s recommendable to always get started with resetting the browsers css. For that, I like to code from Meyerweb.
Check Browser Support
Just as client CSS can influence the output of the (newly) designed website, browser support of different CSS rules can vary as well. A great site I love is caniuse.com. You just type the element you want to use in the filter and it will show you browsers and versions which are supported and which aren’t.
Global vs. Unprefixed Support
As browsers then also have their own implementation of many newer CSS rules , checking for necessary vendor prefixes is necessary. Great answers and the right solutions for this problem can be found with Pleeease. You can insert your css and it will create the prefixed version for you.
Polyfills
Last but not least, if even with the vendor prefixes, a browser doesn’t support newer functionalities, there are polyfills. They make it possible to check if a browsers supports a certain feature and if not offer a way to use something else instead. If you don’t want to write all of that yourself, you can use Modernizr to help you out.
Write better CSS
Another tool that doesn’t address browser support but your code itself, is csslint.net. It’s a tough check on what you write so far and it says itself, that it “will hurt your feelings”. But don’t we all go through some pain for better code?
This list is far from showing off all the tools out there to help. But it’s a start and hopefully helps you write great CSS and end up with sites your visitors love. Do you have more recommendations? Feel free to comment!
