Add Vendor Prefixes with Autoprefixer4:13 with Guil Hernandez
Learn how to use Autoprefixer, a popular PostCSS plugin that adds vendor prefixes to your CSS.
Another handy post CSS tool that optimizes your CSS is auto prefixer. 0:00 A popular plugin that adds vendor prefixes to CSS rules. 0:05 Normally, you'd NPN install auto prefixer as a dev dependency. 0:09 Add it to your gulp file and run it like any other plugin. 0:14 However, if you have the CSS next plugin pack installed, like we do. 0:17 It already comes with auto prefixer. 0:22 Auto prefixer uses up to date browser support data from canIuse.com. 0:25 To add only necessary vendor prefixes to your CSS, so you don't have to. 0:30 For example, developers usually write vendor prefixes for flexbox. 0:35 So, you can write your flexbox properties without worrying about browser support. 0:40 Back in my source CSS, right below the autoprefixer comment. 0:44 I'll create a new rule that targets the class nav. 0:49 Then, I'll add a display flex declaration. 0:53 Right below that, let's add a flex direction property and set it to column. 0:57 So, once I save my source CSS and open up my output CSS. 1:03 Notice, how autoprefixer outputs vender prefixes only for IE10 and 1:09 legacy webkit browsers, which use the old flex box syntax. 1:14 Auto prefixer will also remove outdated vendor prefixes in your CSS. 1:19 Border-radius properties, for example, no longer need vendor prefixes. 1:24 So, if you currently have or write any vendor prefixes for 1:29 border-radius in your CSS. 1:33 For example, let's say Webkit-border-radius of ten pixels and 1:35 right below that, let's add the un-prefix declaration. 1:41 Auto prefixer removes the webkit prefix from the output CSS. 1:52 And like most plug ins, you can pass config options to auto prefixer. 2:00 These options let you specify the browser versions you want to support. 2:05 Since auto-prefixer is installed via the CSS next plugin. 2:09 I'll pass the browser's option to CSS next. 2:14 You specify the browsers you want to support in your project, 2:21 using predefined queries. 2:25 The queries can be a string or an array. 2:27 For example, the string last 2 versions, instructs autoprefixor or 2:30 to ignore all but the last two versions of each major browser. 2:37 So, I'll save my gulpfile. 2:41 And back in my terminal, I'll press Ctrl+C to stop the watcher. 2:45 Then run gulp again, to apply the latest changes. 2:50 I'll save my source CSS and open up my output CSS. 2:54 And we can see that the old flex box syntax for 2:59 WebKit is no longer in the output CSS. 3:02 And you're able to use more than one query within an array. 3:08 So for instance, to support the last two versions of each browser 3:13 and versions of Firefox less than version 27. 3:19 Add the string Firefox, less than 27 to the array. 3:23 I'll save my Gulp file, bring up the terminal. 3:31 Type Control C, then run Gulp again. 3:34 Then, I'll save my source CSS and 3:39 in the CSS output, you'll see the MAS vendor prefixes. 3:42 And the old flex box syntax for legacy Firefox. 3:47 So as you can see, adult prefixer is a really smart plugin 3:54 that lets you forget about vendor prefixes. 3:58 So, you can focus on writing awesome CSS. 4:00 Be sure to check out the links to the docs I posted in the teacher's notes. 4:03 to see all the query options you can use with Autoprefixer. 4:07
You need to sign up for Treehouse in order to download course files.Sign up