前缀和 二维前缀和_向供应商前缀说再见

前缀和 二维前缀和

Imagine you're lying on a beach. Waves slide up and down a sandy shore while the warm sun beats down on your skin. You sip a cool, refreshing drink, and sigh as gulls faintly caw in the distance.

A gentle breeze lightly brushes your fingers as they slide across your keyboard. Tap tap tap. You're writing CSS. Not just any CSS, but pure CSS, the purest you can imagine. There are no vendor prefixes or browser inconsistencies, no external libraries and no compilers. Your code just works.

当手指在键盘上滑动时，微风轻拂。 点击点击点击 您正在编写CSS。 不只是任何CSS，而是纯 CSS，您可以想象到的最纯 。 没有供应商前缀或浏览器不一致，没有外部库也没有编译器。 您的代码就可以了。

In this article, I'll show you how this dream can become reality with a tool called Autoprefixer. I'll walk you through the problems it solves and how to set it up.

在本文中，我将向您展示如何通过一个名为Autoprefixer的工具实现这个梦想。 我将向您介绍其解决的问题以及如何进行设置。

This article is the second part in my series on flexbox. If you like it, be sure to subscribe to the entire course over at Free Flexbox Starter Course.

本文是我关于flexbox的系列文章的第二部分。 如果您喜欢，请确保在Free Flexbox Starter Course上订阅整个课程 。

编写香草Flexbox吸吮 (Writing Vanilla Flexbox Sucks)

With flexbox, there are two things getting in the way of coding utopia: old versions of the syntax and vendor prefixes.

使用flexbox，编码乌托邦有两件事： 语法的旧版本和供应商前缀 。

Flexbox的旧版本 (Old Versions of Flexbox)

The process for building a new feature like flexbox into HTML and CSS is complex and lengthy. It may seem like the flexbox is fairly new, but the first draft was actually done back in 2009. Since then, flexbox has gone through two major changes, leaving us with three versions of the syntax.

在HTML和CSS中构建诸如flexbox之类的新功能的过程既复杂又漫长。 flexbox似乎是一个相当新的事物，但是第一稿实际上是在2009年完成的。从那时起，flexbox经历了两个主要变化，为我们提供了三种语法版本。

• The 2009 version used display: box and had properties that began with box.

  2009版本使用display: box并具有以box开头的属性。

• The 2012 syntax used display: flexbox.

  使用的2012语法display: flexbox 。

• The current version uses display: flex and properties that begin with flex. It's extremely unlikely the syntax will change again.

  当前版本使用display: flex和以flex开头的属性。 语法极不可能再次更改。

These implementations are very similar, but the syntax is different and the older versions don't support all of the newer features. Unfortunately, Android 4.1 and 4.3 only support the 2009 syntax, and IE10 only supports the 2012 syntax, so if you want maximum browser support you still need to use them.

这些实现非常相似，但是语法不同，并且较旧的版本不支持所有较新的功能。 不幸的是，Android 4.1和4.3仅支持2009语法，而IE10仅支持2012语法，因此，如果要最大程度地支持浏览器，则仍然需要使用它们。

供应商前缀 (Vendor Prefixes)

Have you ever seen CSS properties starting with -webkit-, -moz-, -ms- or -o-? Those thing are called vendor prefixes. My favorite explanation of vendor prefixes comes from Peter-Paul Koch of QuirksMode:

您是否看过以-webkit- ，- -moz- ，- -ms-或-o-开头CSS属性？ 这些东西称为供应商前缀 。 我最喜欢的供应商前缀解释来自QuirksMode的 Peter-Paul Koch：

Originally, the point of vendor prefixes was to allow browser makers to start supporting experimental CSS declarations.

最初，供应商前缀的目的是允许浏览器制造商开始支持实验性CSS声明。

Let's say a W3C working group is discussing a grid declaration (which, incidentally, wouldn't be such a bad idea). Let's furthermore say that some people create a draft specification, but others disagree with some of the details. As we know, this process may take ages.

假设W3C工作组正在讨论网格声明(顺便说一句，这并不是一个坏主意)。 让我们进一步说，有些人创建了规范草案，但其他人不同意某些细节。 众所周知，这个过程可能需要一段时间。

Let's furthermore say that Microsoft as an experiment decides to implement the proposed grid. At this point in time, Microsoft cannot be certain that the specification will not change. Therefore, instead of adding grid to its CSS, it adds -ms-grid.

让我们进一步说，作为试验，微软决定实施建议的网格。 此时，Microsoft不能确定规范不会更改。 因此，它没有向其CSS添加网格，而是添加了-ms-grid。

The vendor prefix kind of says "this is the Microsoft interpretation of an ongoing proposal." Thus, if the final definition of grid is different, Microsoft can add a new CSS property grid without breaking pages that depend on -ms-grid.

供应商前缀表示“这是Microsoft对正在进行的提议的解释”。 因此，如果网格的最终定义不同，则Microsoft可以添加新CSS属性网格而不会破坏依赖于-ms-grid的页面。

将它们放在一起 (Putting Them Together)

Let's take an example of some flexbox code from the previous lesson:

让我们从一些Flexbox的代码示例上一课 ：

.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

When you add in vendor prefixes and old versions of the syntax to support older browsers, it looks like this:

当您添加供应商前缀和语法的旧版本以支持旧的浏览器时，它看起来像这样：

.fourth-face {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.fourth-face .column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

Yikes! There are a ton of problems with this code.

kes！ 这段代码有很多问题。

1. We're repeating ourselves. Generally, developers shouldn't duplicate code whenever possible.
   我们在重复自己。 通常，开发人员不应尽可能重复代码。
2. It's a lot of extra work to remember all of those vendor prefixes. They also don't always match the names of the regular properties.
   要记住所有这些供应商前缀，这是很多额外的工作。 它们也不总是与常规属性的名称匹配。
3. It's really easy to forget a vendor prefix. If you do, you probably won't notice the problem unless you're developing in that browser.
   忘记供应商前缀真的很容易。 如果这样做，除非您正在使用该浏览器进行开发，否则您可能不会注意到该问题。
4. It's more difficult to maintain. When you make a change, you have to do it in several places.
   维护起来比较困难。 进行更改时，必须在多个位置进行更改。

抢救的自动前缀！ (Autoprefixer to the Rescue!)

Autoprefixer is a tool that automatically adds vendor prefixes to your CSS. It also translates properties to older versions and even removes an unnecessary prefixes. You can even configure it to target specific browsers. Best of all, it works like magic—once it's turned on, you can forget it's there.

Autoprefixer是一个工具，可自动将供应商前缀添加到CSS。 它还会将属性转换为较旧的版本，甚至删除不必要的前缀。 您甚至可以将其配置为针对特定的浏览器。 最棒的是，它就像魔术一样工作—一旦打开，您就可以忘记它的存在。

密码笔 (CodePen)

The easiest way to try out AutoPrefixer is with CodePen. CodePen is online code editor that lets you jump straight into coding. To try it out, head over to CodePen and click on the "New Pen" button.

试用AutoPrefixer的最简单方法是使用CodePen 。 CodePen是在线代码编辑器，可让您直接进入编码。 要尝试，请转到CodePen，然后单击“新建笔”按钮。

Next, click the setting icon next to CSS.

接下来，单击CSS旁边的设置图标。

Enable Autoprefixer by clicking on the radio button next to the "Autoprefixer" label. I'd also recommend turning on Normalize.

通过单击“自动前缀”标签旁边的单选按钮启用自动前缀。 我还建议您启用“规范化”。

From here, you can type unprefixed CSS into the CSS area and Autoprefixer will do all the work for you!

在这里，您可以在CSS区域中输入未添加前缀CSS，Autoprefixer将为您完成所有工作！

代码包 (CodeKit)

CodePen is great for small projects, but most web development is done locally. Setting up a computer for development can get extremely complicated. Fortunately, it's easy with CodeKit.

CodePen非常适合小型项目，但是大多数Web开发都是在本地完成的。 设置用于开发的计算机可能会变得极其复杂。 幸运的是，使用CodeKit很容易。

CodeKit is a program that watches and incorporates a ton of popular tools, such as Autoprefixer, Sass and CoffeeScript, into your project. It's $32, but if you're not quite ready for tools like Gulp, it's worth the money.

CodeKit是一个程序，可以监视并将大量常用工具(例如Autoprefixer，Sass和CoffeeScript)整合到您的项目中。 它的价格是32美元，但是如果您还没有准备好使用Gulp之类的工具，那是值得的。

Note: Prepros is an alternative to CodeKit for OS X and Windows. The instructions for setting it up should be very similar to the CodeKit instructions.

注意： Prepros是OS X和Windows的CodeKit的替代品。 设置它的说明应该与CodeKit的说明非常相似。

To get started, open up CodeKit and drag a folder into the main window.

首先，打开CodeKit并将一个文件夹拖到主窗口中。

Unfortunately, CodeKit doesn't allow you to run Autoprefixer on plain old CSS files. However, you can convert then to Sass files by renaming the extensions to .scss. You can still write CSS in these files like you normally would. CodeKit automatically copies all of your compiled CSS files into a css directory, so I'd recommend keeping your source CSS files in an scss folder.

不幸的是，CodeKit不允许您在普通的旧CSS文件上运行Autoprefixer。 但是，您可以通过将扩展名重命名为.scss然后将其转换为Sass文件。 您仍然可以像往常一样在这些文件中编写CSS。 CodeKit会自动将所有已编译CSS文件复制到一个css目录中，因此我建议将您的源CSS文件保留在一个scss文件夹中。

Click on the settings button and then under "Languages" click on "Special Language Tools".

单击设置按钮，然后在“语言”下单击“特殊语言工具”。

On this page, check the box next to "Run Autoprefixer". In order to support all of the browsers that can display flexbox, change the "Autoprefixer Browser String" to this:

在此页面上，选中“运行自动前缀”旁边的框。 为了支持所有可以显示flexbox的浏览器，请将“ Autoprefixer Browser String”更改为此：

last 2 versions, Explorer >= 10, Android >= 4.1, Safari >= 7, iOS >= 7

That's it! Now, every time you make a change to one of your files, CodeKit will automatically compile it using Autoprefixer.

而已！ 现在，每次更改其中一个文件时，CodeKit都会使用Autoprefixer自动对其进行编译。

Gulp，Grunt和其他框架 (Gulp, Grunt and Other Frameworks)

Gulp and Grunt are tools that are make it easy to set up a build system for your projects. With them, you can set up powerful build systems that compile your files, run static analysis on your code and even host local servers.

Gulp和Grunt是使您可以轻松地为项目设置构建系统的工具。 使用它们，您可以建立功能强大的构建系统来编译文件，在代码上运行静态分析，甚至托管本地服务器。

Configuring these tools is a little too in depth for this lesson. However, if you're curious, I'd highly recommend digging into one of them. The gulp-autoprefixer and grunt-autoprefixer packages both include examples in their readme files. If you'd like to see my personal gulpfile, check out this Gist.

在本课中，对这些工具的配置太深入了。 但是，如果您感到好奇，我强烈建议您深入研究其中之一。 gulp-autoprefixer和grunt-autoprefixer软件包在其自述文件中均包含示例。 如果您想查看我的个人gulpfile，请查看此Gist 。

Many web application frameworks support Autoprefixer, including Ruby on Rails, ASP.NET, Express and CakePHP. Chances are good there's a way to incorporate Autoprefixer into your favorite framework.

许多Web应用程序框架都支持Autoprefixer，包括Ruby on Rails ， ASP.NET ， Express和CakePHP 。 很有可能有一种方法可以将Autoprefixer合并到您喜欢的框架中。

如果您不能使用自动前缀器怎么办？ (What If You Can't Use Autoprefixer?)

If you can't use Autoprefixer in your project, you have a couple options.

如果您不能在项目中使用Autoprefixer，则有两种选择。

The first is to use a library called -prefix-free. This library does the same thing as Autoprefixer, but in the browser. The downside is that it takes extra time and processing power to prefix the CSS, which can make your site feel a little slow, especially on mobile browsers.

第一种是使用名为-prefix-free的库。 该库的功能与Autoprefixer相同，但在浏览器中。 缺点是给CSS加上前缀会花费额外的时间和处理能力，这会使您的网站感觉有些慢，尤其是在移动浏览器上。

The other option is a tool called Pleeease. Pleeease lets you paste in CSS. It then uses Autoprefixer to print out prefixed styles you can copy into your stylesheets.

另一个选项是称为Pleeease的工具。 Pleeease允许您粘贴CSS。 然后，它使用Autoprefixer打印出前缀样式，您可以将这些样式复制到样式表中。

结语 (Wrapping Up)

That's it! You've learned how to set up your environment for full CSS awesomeness using tools like including CodePen, CodeKit, Gulp and Grunt. Have a question?

而已！ 您已经学习了如何使用诸如CodePen，CodeKit，Gulp和Grunt之类的工具为CSS的完美设置环境。 有一个问题？

In the next lesson, we'll be taking a look at building 12-column layouts with flexbox. To make sure you get it, sign up for the Free Flexbox Starter Course.

在下一课中，我们将看一下使用flexbox构建12列布局。 为了确保您能得到它，请注册免费的Flexbox入门课程 。

翻译自: https://davidwalsh.name/goodbye-vendor-prefixes

前缀和 二维前缀和