1 00:00:00,280 --> 00:00:05,320 Another handy post CSS tool that optimizes your CSS is auto prefixer. 2 00:00:05,320 --> 00:00:09,058 A popular plugin that adds vendor prefixes to CSS rules. 3 00:00:09,058 --> 00:00:14,290 Normally, you'd NPN install auto prefixer as a dev dependency. 4 00:00:14,290 --> 00:00:17,730 Add it to your gulp file and run it like any other plugin. 5 00:00:17,730 --> 00:00:22,620 However, if you have the CSS next plugin pack installed, like we do. 6 00:00:22,620 --> 00:00:24,280 It already comes with auto prefixer. 7 00:00:25,520 --> 00:00:30,750 Auto prefixer uses up to date browser support data from canIuse.com. 8 00:00:30,750 --> 00:00:35,230 To add only necessary vendor prefixes to your CSS, so you don't have to. 9 00:00:35,230 --> 00:00:40,040 For example, developers usually write vendor prefixes for flexbox. 10 00:00:40,040 --> 00:00:43,680 So, you can write your flexbox properties without worrying about browser support. 11 00:00:44,800 --> 00:00:49,340 Back in my source CSS, right below the autoprefixer comment. 12 00:00:49,340 --> 00:00:52,220 I'll create a new rule that targets the class nav. 13 00:00:53,230 --> 00:00:57,530 Then, I'll add a display flex declaration. 14 00:00:57,530 --> 00:01:03,770 Right below that, let's add a flex direction property and set it to column. 15 00:01:03,770 --> 00:01:09,000 So, once I save my source CSS and open up my output CSS. 16 00:01:09,000 --> 00:01:14,460 Notice, how autoprefixer outputs vender prefixes only for IE10 and 17 00:01:14,460 --> 00:01:19,310 legacy webkit browsers, which use the old flex box syntax. 18 00:01:19,310 --> 00:01:24,155 Auto prefixer will also remove outdated vendor prefixes in your CSS. 19 00:01:24,155 --> 00:01:29,140 Border-radius properties, for example, no longer need vendor prefixes. 20 00:01:29,140 --> 00:01:33,105 So, if you currently have or write any vendor prefixes for 21 00:01:33,105 --> 00:01:35,360 border-radius in your CSS. 22 00:01:35,360 --> 00:01:41,847 For example, let's say Webkit-border-radius of ten pixels and 23 00:01:41,847 --> 00:01:47,666 right below that, let's add the un-prefix declaration. 24 00:01:52,125 --> 00:01:57,571 Auto prefixer removes the webkit prefix from the output CSS. 25 00:02:00,756 --> 00:02:05,160 And like most plug ins, you can pass config options to auto prefixer. 26 00:02:05,160 --> 00:02:09,570 These options let you specify the browser versions you want to support. 27 00:02:09,570 --> 00:02:14,720 Since auto-prefixer is installed via the CSS next plugin. 28 00:02:14,720 --> 00:02:18,540 I'll pass the browser's option to CSS next. 29 00:02:21,525 --> 00:02:25,205 You specify the browsers you want to support in your project, 30 00:02:25,205 --> 00:02:27,260 using predefined queries. 31 00:02:27,260 --> 00:02:30,750 The queries can be a string or an array. 32 00:02:30,750 --> 00:02:37,420 For example, the string last 2 versions, instructs autoprefixor or 33 00:02:37,420 --> 00:02:41,652 to ignore all but the last two versions of each major browser. 34 00:02:41,652 --> 00:02:45,090 So, I'll save my gulpfile. 35 00:02:45,090 --> 00:02:50,150 And back in my terminal, I'll press Ctrl+C to stop the watcher. 36 00:02:50,150 --> 00:02:54,640 Then run gulp again, to apply the latest changes. 37 00:02:54,640 --> 00:02:59,520 I'll save my source CSS and open up my output CSS. 38 00:02:59,520 --> 00:03:02,650 And we can see that the old flex box syntax for 39 00:03:02,650 --> 00:03:06,320 WebKit is no longer in the output CSS. 40 00:03:08,160 --> 00:03:13,130 And you're able to use more than one query within an array. 41 00:03:13,130 --> 00:03:19,210 So for instance, to support the last two versions of each browser 42 00:03:19,210 --> 00:03:23,510 and versions of Firefox less than version 27. 43 00:03:23,510 --> 00:03:29,630 Add the string Firefox, less than 27 to the array. 44 00:03:31,260 --> 00:03:34,370 I'll save my Gulp file, bring up the terminal. 45 00:03:34,370 --> 00:03:37,600 Type Control C, then run Gulp again. 46 00:03:39,060 --> 00:03:42,880 Then, I'll save my source CSS and 47 00:03:42,880 --> 00:03:47,190 in the CSS output, you'll see the MAS vendor prefixes. 48 00:03:47,190 --> 00:03:50,580 And the old flex box syntax for legacy Firefox. 49 00:03:54,340 --> 00:03:58,240 So as you can see, adult prefixer is a really smart plugin 50 00:03:58,240 --> 00:04:00,240 that lets you forget about vendor prefixes. 51 00:04:00,240 --> 00:04:03,250 So, you can focus on writing awesome CSS. 52 00:04:03,250 --> 00:04:07,140 Be sure to check out the links to the docs I posted in the teacher's notes. 53 00:04:07,140 --> 00:04:10,500 to see all the query options you can use with Autoprefixer.