FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 CSS Preprocessors and Prefixes

Hello. Welcome back to Bombproof Web Design. In this lesson, you're going to learn how to use a combination of CSS Vendor Prefixes and CSS Preprocessors to help future-proof your code. And to enable you to use some newer SASS properties that are not 100% natively supported in all browsers. We're gonna begin with CSS Vendor Prefixes. The easiest way for me to explain what a vendor prefix is, is just to show you. Right here, we are using a little bit of CSS that incorporates a relatively new CSS property named transform. What this little line of code will do is rotate the box that it's applied to by seven degrees. When that works, it looks like this. As you can see here the box is rotated by seven degrees. When it doesn't work, it looks like this. Now the reason that, the rotation worked on the first browser is, that browser was Chrome, which has full native support for transform properties in CSS. The second browser is Safari, which doesn't yet have full 100% native support. But, it is very easy to activate that support in Safari. All we have to do is use the same CSS property, and the same value, but just apply a little vendor prefix at the beginning, which looks like this. So I'm gonna copy and paste this line. So it's almost exactly the same code, all we need to do is put a little prefix at the beginning. In this case, webkit because Safari is a webkit browser. So we'll save that code and go back and have another look now at Safari. As you can see, now the transformed code works. Now this technique of adding vendor prefixes can be used for lots and lots of different kinds of relatively new CSS properties. And there are different browser prefixes that need to apply in different scenarios. Now it's a lot to think about to try and figure out which browser prefixes you're going to apply and which properties are going to need those prefixes applied to them. So if you really want to be on top of this, you need a tool to automate the process. And there are two tools that I'm going to give you that you can use to help make this process really quite effortless and painless. The first is Autoprefixer, which is an open source library that will actually look up the properties that you've used in your CSS on, which we learned about earlier. And depending on the latest information, it finds at, it will incorporate the correct bounder prefixes for you without you having to think about it. The second type of tool that we're going to use is CSS preprocesses. Now if you haven't used a CSS processor before, you can think of it as being like shorthand for full CSS. It gives you a way to write much less code, which can then be expanded into a full amount of code later. Say, for example, if I type out a quick Little piece of Stylus. Now, you can see how I've written, in an abbreviated form here, and Stylus has expanded my card into full CSS here. Now you can't really see the value of it in this little demonstration, but as we move into the demonstrations, you will understand more about why this is so powerful. There are three different preprocessors that are all quite popular. There is Stylus, which is my personal favorite. I'll include links to all of these in the notes below the video. There is SASS and also SCSS, which is another version of this same preprocessor. And there is {less}, which is also very popular. And for working with both vendor prefixes and CSS preprocessors, we're gonna be using a little tool called Prepros. Now this is a free application. Everything that we'll be covering in this video, you can do with the free version. There is a pro version that you can also purchase which will give you additional functionality. But you won't need that for the purposes of this tutorial. We're gonna begin by going through how you can use Prepros to take a few lines of Stylus code and turn them into full and robust CSS with all the required vendor prefixes in place. All right. I have installed the free version of Prepros. It's waiting for me to add a new project. I have here a folder, that contains my Stylus project. And inside that folder, I have a secondary folder named Stylus that will hold my Stylus files. Within that, I have a couple of Stylus files that I've already prepared earlier. So to add this folder as a project, all I have to do is drag it, and drop it onto the Prepros window. People automatically detect the Stylus files that are inside. As you can see here. But before we go further, let's take a quick look at the code that's contained in this first file here. This is the code that is contained in that first Stylus file. We have a few different classes, and a few different properties that are all going to require vendor prefixes to be added to them. So looking again at Prepros, I'm going to click the file here to open up some additional options. Now pre-checked is this auto-compile option which will mean that as soon as I make a change, and save this particular file, it will automatically compile it into CSS3 for me. And what Im also going to do is check this box that says auto prefix CSS. What that will do is it will use that auto-prefixer package that I showed you earlier, to automatically apply all the required vendor prefixes to this code. So I'm gonna check that box. Now as well as auto-compiling when you make a change to your file, you can also hit this button here to prompt a compilation of your file. So we have this notice here that compilation has been successful. Now if we go back to our project folder. You see there's a new folder has been created right next to our Stylus folder named CSS. This is the folder that Prepros is writing our complete CSS into. So we have a new CSS file in here that's just been created. And now you can see that we have full CSS that's been produced from our original code, and all of the required vendor prefixes have been included. Now that's one way you can use Prepros to add vendor prefixes through the auto prefix functionality. There is a second way you can do that, and that's through what's called mixin libraries. Each of the three major CSS preprocessors has a mixin library that goes along with it. In the case of Stylus, the mixing library is named nib. To describe our mixin simply, basically it's a lot of code that you can pull into your CSS by just using a little bit of code. For example, if you were to use nib's linear gradient mixin in your CSS, It would expand to give you all of this code. And you can see that in this example, vendor prefixes have been included in the expanded code. So by incorporating mixin libraries in with your CSS preprocesses, you'll have a secondary way to bring in vendor prefixes. Let's have a look at the same code that we just compiled using auto prefixer, this time compiled using the nib mixin library. There's only one difference between this code and the Stylus code that we just compiled using auto prefixer, and that is because we're using an external library of code, the nib mixin library, nib needs to be imported. And nbi is also available as part of your Prepros download. All you need to do, is select the file that you want to use nib with, and check the used nib box. And that will make the nib library available to your code. So now let's see what happens when we compile this Stylus. So here's our new CSS that's being compiled by using nib rather than auto prefixer. There are some differences. You can see that there are more vendor prefixes that have been incorporated. And some that have not been incorporated. So you'll be able to try out these different approaches and decide which one of them is going to suit you the best. You can use these exact same processors with which ever preprocessor is your personal favorite. I like Stylus, but you might prefer {less} or SCSS/SASS. In the next video you'll learn how to use something called Normalize.css to create a baseline of consistent rendering across all browsers.

Back to the top