Recently I went into the studio with Helen Zeng to record an MVA on CSS. For those of you not familiar with CSS, CSS stands for Cascading Style Sheets, and it’s a language used to design and layout HTML pages. During our course we dug into a few properties that have been added relatively recently to CSS. And you may have noticed at a couple of points we had to set those properties multiple times.
Helen put it best when she said that CSS is, in a lot of ways, a list of suggestions and standards browser vendors can implement in their products. However, vendors are not required to implement every CSS feature. Vendors are also free to branch off and add their own properties as well. Anyone who’s done web development knows how challenging it can be dealing with different browsers and different implementations.
Vendors often implement properties that aren’t part of the CSS standard. Sometimes this done as a sort of beta test, and sometimes this is done because the vendor doesn’t want to wait until the standard is finalized. Because the feature may be implemented later, or the standard may change when finalized, vendors want to avoid using a name that could mean something later. This is where vendor prefixes come into play.
Vendor prefixes are unique to each browser manufacturer. They are added to the beginning of the property names to create unique names for that vendor. What’s nice about this convention is it means if the property is added to CSS you don’t have to worry about that property meaning different things on different browsers. Each vendor has their own prefix: ms for Microsoft, moz for Mozilla, etc.
The problem, however, is different vendors may all be implementing the same property with their vendor prefix. In order to ensure your page renders properly in every browser you need to set the property for every vendor.
Or, in other words, you need to set the same attribute multiple times.
Now, if you’re anything like me, and I know I am, you probably don’t want to have to remember which properties have vendor prefixes, and you also don’t want to set each one of them by hand. This is where Visual Studio comes to the rescue.
You’re probably already familiar with IntelliSense, which extends into CSS. As you type CSS properties, Visual Studio shows you the available options. When you type a property, like user-select, that has vendor prefixes, Visual Studio is there to help. Note the icon on the left that looks a little like a piece of paper and a pair of scissors. In Visual Studio that indicates a code snippet.
Whenever you see a code snippet, the shortcut key to have Visual Studio complete it for you is hitting tab twice, or “tab tab” as I always say.
You’ll notice after that shortcut key combo Visual Studio has done part of the work for you by adding in the vendor prefixes and the property. At this point you might be thinking, “OK, well now I need to set all of those properties by hand.” Once again, code snippets to the rescue. I’m going to disable user selection by setting the option to “none”. When I do this I simply start typing, as the first “inherit” is already highlighted and ready to be overwritten.
Once I type “none”, I simply press Enter. Visual Studio updates all of the other properties for me.
And now I can easily ensure my CSS properties are going to apply to all browsers, and ensure backwards compatibility.
There is one small problem, however. As I said earlier, vendors are free to implement properties as they see fit. As a result, the values may mean different things on different browsers. Some additional research may be required as you venture into vendor prefixed properties.
Vendor prefixes can be a bit bewildering. Fortunately, Visual Studio offers great support through IntelliSense and code snippets to make things easier to manage. And if you’re looking to dig more into CSS, Helen and I are here to help with our MVA.