CSS Prefixes
As I’ve said before, CSS is a tedious but incredibly essential part to web development. Without CSS, any website you visit would be plain old HTML documents; aka, we wouldn’t be surfin’ the web as much as we do now.
In many ways, CSS is very much so a trial and error language. Changing margins from 5% to 3% to 2% should, at this point in programming history, be more streamlined (maybe that’s why people pull for no code), and certain basic code chunks for responsiveness (i.e., flex) have the capacity to be written as mix-ins.
My last article talked about why you need to be using a CSS preprocessor, and this one will piggy back off of it. If you’re like me, you’re likely trying to find a great CodePen that will suit all of your aesthetic needs. These CSS wizards are including similar yet vastly different prefixes to simple CSS commands, such as
-moz,-webkit
and many others.
The official terminology for these prefixes is “CSS Vendor Prefixes”, or “CSS browser prefixes.” The word prefix makes sense when describing them; in a literal sense, they prefix whatever command you’re implementing (such as ```radius``` or ```border```). The “vendor” or “browser” part indicates, quite literally, which browser will be able to translate whatever command you’re implementing.
Writing these commands with vendor prefixes makes CSS even more annoying and repetitive. The reason why you should always include these prefixes, especially if you’re writing in an animation, is to ensure that each and every browser that serves your site will present it in the same way. The most popular prefix is ```-webkit-```, and it’s used by Android, Chrome, iOS, and Safari. However, you should be using all of them.
This is where preprocessors can really aid you in this process. Writing a SCSS mix-in with all of these pre-processors for an animation or effect that you’ll likely be using many times makes your code more DRY and saves you from a lot of headaches. If you needed yet another reason to use a CSS preprocessor, it’s this: write all the vendor prefixes in one place, and save them for later.
For more information on vendor prefixes, visit these two sites: