Browser Prefixes

October 8, 2016

Responsive design makes your design work across screen sizes. But what about working across browsers? Responsive design is only part of the solution to making your site accessible to all platforms. Another part (among many) is using browser prefixes and testing your solutions.

What Is A Browser Prefix?

A browser prefix is a string of text that targets specific browsers at the beginning of a CSS property. They are surrounded by hyphens (-) and help vendors use no-yet-standard or working-draft versions of CSS properties. Some browsers implement different versions of properties and their prefixes help developers implement similar behavior across platforms. Browser prefixes look like this:

.item {
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;

Why Are Prefixes Needed? What About Standards?

Standards sometimes take a while to implement, and, are often tested over long periods of time. So, until a standard is declared, prefixes help the testing/development process and allow developers to use new properties.

How Do I Know What Properties Need Prefixing?

After a while, you start to remember, but there are a lot of ways to check if a property needs prefixing. ShouldIPrefix is a go to, as well as CanIUse. If a property discussed on CSS-Tricks needs prefixing, it’s mentioned in the article. Another tool to help you prefix is Autoprefixer


Yeah, don’t forget to test. After you’ve designed your site, loaded in your browser prefixes, compressed your images, css, js, whatever, pull your smartphone out and navigate to wherever that site lives. I’d be surprised if it looks as good as it did on desktop right from the get go. Chances are, you’ll need to do some adjusting. During the design process, I’m constantly resizing my browser window, moving to different platforms and browsing contexts, and testing my local sites with BrowserStack. This helps me make sure that not only is my site going to work on different screen sizes, but also in different browsing contexts.

No Comments...yet

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

Borders, Pseudo Elements, and Folds

From October 7, 2016

I’ve recently fielded a lot of questions about Ribbons and Folds done with pure CSS. It’s a lot more than just a few lines of CSS, though

Read This Article
Next Post

Box Shadow

From October 11, 2016

This is my solution to figuring out browser prefixes.

Read This Article