Podcast Episode

371 – Test Your CSS Code and Browser Support

Announcements

Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

File Manager Advanced is a cPanel interface for WordPress where you can edit, delete, download, zip, and copy without the need of cPanel or FTP.

Test Your CSS Code and Browser Support

When writing code one of the hardest part is keeping up with the changing technologies. There are constantly new standards and CSS compatibility problems with all browsers, users, sizes, etc.

As designers or programers we usually have the most recent browser updates installed and use the most common browsers. However we can’t expect everyone who views a website to be using the exact same version of Chrome as we are.

Here are six tool to check and make sure your code is ready for any device that’s out there.

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. This is because browsers render CSS differently. So we need to always reset the browser 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 and checking for necessary vendor prefixes is necessary. Save time and don’t worry about writing all the prefixes with Pleeease. You can insert your css and it will create the prefixed version for you.

Polyfills
Another thing to discuss is 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 do the heavy lifting for you.

Write better CSS
Another tool that doesn’t address browser support but your code itself, is csslint.net. It’s meant to hurt your feelings and will make you write better CSS code.

Double check your work
By using Browser Stack you can run your website thru dozens of different simulators to show off what the site looks like on different operating systems or devices

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page

Join the newsletter

Best wordpress premium plugins

Subscribe to get regular WordPress content delivered right to your inbox.

Powered by ConvertKit

Leave a Reply