禁用启用css属性_使用PostCSS启用即将发布CSS功能

禁用启用css属性

Picking up where we left off in the previous article, “The PostCSS Guide to Improving Selectors and Media Queries“, we will have a look at more PostCSS plugins that expand the horizons of CSS. The earlier article focused on improving the structure of your stylesheets through extending selectors and media queries. This one will concentrate on implementing new properties and values from upcoming specifications. The plugins covered in this article implement different functionality and can be effectively used both together and separately, depending on your needs.

在上一篇文章“ 改进选择器和媒体查询的PostCSS指南 ”中我们停下来的地方 ，我们将看一下更多扩展CSS视野的PostCSS插件。 较早的文章着重于通过扩展选择器和媒体查询来改善样式表的结构。 这将专注于实现即将发布的规范中的新属性和值。 本文涵盖的插件实现了不同的功能，并且可以根据您的需要一起有效地使用，也可以分别使用。

We’ll start with my personal favorite.

我们将从我个人的最爱开始。

使重置达到新的水平 (Taking Resets to a New Level)

CSS3 introduced two nice features: the initial value and the all property. The initial value used with values of inherit and unset allow you to reset a property to its original value. The all property serves as a shorthand property to reset every property to one of these three states. While each is interesting on their own, when used together, they allow you to quickly reset all styles for a particular element and prevent it from inheriting styles from parent elements of the page. Another step to writing modular CSS!

CSS3引入了两个不错的功能： initial值和all属性。 将initial值与inherit和unset值一起使用可让您将属性重置为其原始值。 all属性用作将all属性重置为这三种状态之一的简写属性。 尽管每个元素都很有趣，但将它们一起使用时，它们可以让您快速重置特定元素的所有样式，并防止该样式从页面的父元素继承样式。 编写模块化CSS的又一步！

Sadly, both of these features are still not supported by IE. But, as you might have already guessed, there’s a plugin for that.

遗憾的是，IE仍不支持这两个功能。 但是，您可能已经猜到了，但是有一个插件。

Postcss-initial adds support for the initial value and the all: initial combination. Here’s how it works:

Postcss-initial添加了对initial值和all: initial组合的支持。 运作方式如下：

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

Gets compiled into:

编译成：

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

By default, it leaves the original properties with initial for browsers that natively support this feature.

默认情况下，对于本机支持此功能的浏览器，它将原始属性保留为initial 。

The all property, in turn, will be translated into a long list of reset properties.

依次将all属性转换为一长串的reset属性。

.container {
  all: initial;
}

Is transpiled into:

被翻译成：

.container {
  animation: none 0s ease 0s 1 normal none running;
  backface-visibility: visible;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  border: medium none currentColor;
  border-collapse: separate;
  border-image: none;
  border-radius: 0;
  border-spacing: 0;
  bottom: auto;
  box-shadow: none;
  box-sizing: content-box;
  caption-side: top;
  clear: none;
  clip: auto;
  color: #000;
  columns: auto;
  column-count: auto;
  column-fill: balance;
  column-gap: normal;
  column-rule: medium none currentColor;
  column-span: 1;
  column-width: auto;
  content: normal;
  counter-increment: none;
  counter-reset: none;
  cursor: auto;
  direction: ltr;
  display: inline;
  empty-cells: show;
  float: none;
  font-family: serif;
  font-size: medium;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
  height: auto;
  hyphens: none;
  left: auto;
  letter-spacing: normal;
  list-style: disc outside none;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  orphans: 2;
  outline: medium none invert;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  perspective: none;
  perspective-origin: 50% 50%;
  position: static;
  right: auto;
  tab-size: 8;
  table-layout: auto;
  text-align: left;
  text-align-last: auto;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  top: auto;
  transform: none;
  transform-origin: 50% 50% 0;
  transform-style: flat;
  transition: none 0s ease 0s;
  unicode-bidi: normal;
  vertical-align: baseline;
  visibility: visible;
  white-space: normal;
  widows: 2;
  width: auto;
  word-spacing: normal;
  z-index: auto;
  all: initial;
}

In case you are using BEM or Suit, this plugin works well with postcss-autoreset which will automatically reset styles for block and component-level elements.

如果您使用的是BEM或Suit，则此插件可与postcss-autoreset一起使用 ，它将自动重置块级和组件级元素的样式。

自定义属性 (Custom Properties)

When working on a layout, we often have to share some values across the stylesheet. For example, your brand color might be used as a background for a button, a text color for a link or a border for a text block. Currently to achieve this, we would need to repeat the color multiple times in each place it is used. Such repetition makes it tedious to keep the color palette consistent when changing the colors across the application.

在布局上工作时，我们经常必须在样式表中共享一些值。 例如，您的品牌颜色可能用作按钮的背景，链接的文本颜色或文本块的边框。 当前要实现此目的，我们需要在每个使用颜色的地方重复多次。 这样的重复使得在整个应用程序中更改颜色时保持调色板一致很繁琐。

CSS preprocessors such as Less and Sass have solved this problem using variables. Fortunately, W3C are working on a similar concept called custom properties. Although addressing the same problem, they work differently from variables in preprocessors. Less and Sass variables are resolved at compilation time. When you compile your Less or Sass to CSS, the compiler will look for a variable declaration corresponding to the current compilation scope and replace each instance with the corresponding value. This means, that the resolved value of a variable depends solely on where it is used in the code. Custom properties, in turn, are defined for elements in the DOM and are accessible only to their child elements. This means that the value of a variable depends on the position of an element in the DOM and can only be resolved at run time.

诸如Less和Sass之类CSS预处理器已经使用变量解决了此问题。 幸运的是，W3C正在研究一个类似的概念，即自定义属性 。 尽管解决了相同的问题，但它们的作用与预处理器中的变量不同。 Less和Sass变量在编译时解析。 当您将Less或Sass编译为CSS时，编译器将查找与当前编译范围相对应的变量声明，并将每个实例替换为相应的值。 这意味着，变量的解析值仅取决于其在代码中的使用位置。 反过来，自定义属性是为DOM中的元素定义的，并且只能由其子元素访问。 这意味着变量的值取决于元素在DOM中的位置，并且只能在运行时解析。

By this point, you should frown or raise an eyebrow. If a value of a variable is only known at runtime, how can it be resolved by a PostCSS plugin? The truth is, it can’t. It does, however, provide a way to use a subset of that functionality. If we define all of our custom properties in the :root element, these properties will be accessible to all elements on the page. This means, that we can resolve them at compile time.

此时，您应该皱眉或抬起眉毛。 如果仅在运行时才知道变量的值，那么PostCSS插件如何解决？ 事实是，事实并非如此。 但是，它确实提供了使用该功能的子集的方法。 如果我们在:root元素中定义所有自定义属性，则这些属性将可供页面上的所有元素访问。 这意味着，我们可以在编译时解决它们。

Here’s a simple example of how it may look:

这是一个简单的外观示例：

:root {
  --text-color: red;
  --background: blue;
}

h1 {
  color: var(--text-color);
  font-size: var(--font-size, 20px);
}
button {
  background-color: var(--background);
}

Will be compiled into:

将被编译成：

h1 {
  color: red;
  font-size: 20px;
}
button {
  background-color: blue;
}

Note that the --font-size variable is not defined, so it’s replaced with a fallback value of 20px. The important part here is to keep all of the custom properties inside of :root. The ones defined elsewhere will be ignored as they cannot be adequately handled by the plugin. You can start with that, and expand your usage when more browsers start to support it. Chrome already supports them starting from 49.

请注意，-- --font-size变量未定义，因此将其替换为后备值20px 。 这里的重要部分是将所有自定义属性保留在:root 。 其他地方定义的插件将被忽略，因为插件无法对其进行适当处理。 您可以从此开始，并在更多浏览器开始支持它时扩大使用范围。 Chrome 已经从49开始支持它们 。

逻辑属性 (Logical Properties)

If you have ever developed an international website that spans cultures with different writing directions, you know what is involved when maintaining several versions of the interface, such as left-to-right or right-to-left. To address this need, W3C introduced a new concept of logical properties. A way to abstract ourselves from thinking in terms of physical directions such as right or left, but rather in logical ones – start and end. The specification is still very much a work in progress, but you can already try some of this stuff out using the postcss-logical-props plugin.

如果您曾经开发过一个涵盖不同写作方向的跨文化国际网站，那么您将知道在维护界面的多个版本(例如从左到右或从右到左)时涉及的内容。 为了满足这一需求，W3C引入了逻辑属性的新概念。 一种从诸如左右方向之类的物理方向而不是逻辑方向上思考的方法，即从开始到结束。 规范仍在完善中，但是您可以使用postcss-logical-props插件尝试其中的一些内容。

It supports generating left-to-right and right-to-left versions of the website using certain logical properties, such as border-block-start and border-block-end, offset-block-start and offset-block-end. These properties are compiled into their left or right alternatives. You can instruct the plugin to compile both the LTR and RTL versions of the stylesheet and then switch them in the application when a user changes the language.

它支持使用某些逻辑属性(例如border-block-start和border-block-end ， offset-block-start和offset-block-end来生成网站的从左到右和从右到左的版本。 这些属性被编译为它们的左或右选择。 您可以指示插件编译样式表的LTR和RTL版本，然后在用户更改语言时在应用程序中切换它们。

For example, if you have the following CSS:

例如，如果您具有以下CSS：

.text {
  border-block-start: 1px solid blue;
  text-align: start;
  padding-block-end: 10px;
  margin-block-start: 20px;
}

Calling the plugin with options { dir: 'LTR' } would yield the following result:

使用选项{ dir: 'LTR' }调用插件将产生以下结果：

.text {
  border-left: 1px solid blue;
  text-align: left;
  padding-right: 10px;
  margin-left: 20px;
}

While using { dir: 'RTL' } would give you a mirror image:

使用{ dir: 'RTL' }会给您一个镜像：

.text {
  border-right: 1px solid blue;
  text-align: right;
  padding-left: 10px;
  margin-right: 20px;
}

新色彩功能 (New Color Features)

PostCSS provides a whole group of plugins that deliver new features for working with colors.

PostCSS提供了一组插件，这些插件提供了使用颜色的新功能。

色彩调整 (Color Adjustment)

The postcss-color-function plugin implements the new color() function. This function allows you to modify a base color using one or multiple “color adjustor” functions. Each of the color adjustors can manipulate a color in a specific way.

postcss-color-function插件实现了新的color()函数。 此功能使您可以使用一个或多个“颜色调节器”功能来修改基本颜色。 每个颜色调节器都可以以特定方式操纵颜色。

Here are a few examples of how it can be used:

以下是一些有关如何使用它的示例：

body {
  color: color(red green(50));
  color: color(red blue(50) a(50%));
  color: color(red tint(50%));
  color: color(red shade(50%));
}

Will be compiled into the following colors

将被编译成以下颜色

body {
  color: rgb(255, 50, 0);
  color: rgba(255, 0, 50, 0.5);
  color: rgb(255, 128, 128);
  color: rgb(128, 0, 0);
}

A complete list of color adjusters can be found in the specification. This plugin can be extremely effective together with custom properties. You can define a set of base colors and calculate others based on them. This way if you’ll decide to change your base colors, the rest of the palette will be updated accordingly.

在规范中可以找到色彩调节器的完整列表。 该插件与自定义属性一起可以非常有效。 您可以定义一组基色并根据这些基色计算其他基色。 这样，如果您决定更改基色，则调色板的其余部分将相应更新。

HWB颜色表示法 (HWB Color Notation)

HWB stands for Hue-Whiteness-Blackness, an alternative method for defining colors. It describes a color using a hue value from 0 to 360 and then adds a degree of whiteness and blackness from 0% to 100%. This notation is similar to HSL and somewhat easier to comprehend than RGB. The postcss-color-hwb plugin implements the new hwb() function which is used to define HWB colors. A couple of examples:

HWB代表色相-白度-黑度，它是定义颜色的另一种方法。 它使用0到360之间的色相值描述颜色，然后添加0％到100％的白度和黑度。 此表示法类似于HSL，并且比RGB更容易理解。 postcss-color-hwb插件实现了新的hwb()函数，该函数用于定义HWB颜色。 几个例子：

body {
  color: hwb(0, 0%, 0%);
  color: hwb(120, 40%, 20%);
  color: hwb(240, 0%, 100%, 0.5);
}

Will generate the following colors:

将生成以下颜色：

body {
  color: rgb(255, 0, 0);
  color: rgb(102, 204, 102);
  color: rgba(0, 0, 0, 0.5);
}

Gray()函数 (Gray() Function)

The CSS colors module also introduced a handy gray() function. It can be used to generate gray colors without specifying any redundant information, such as all three channels in an RGB color. The postcss-color-gray plugin implements a polyfill for the function and is extremely straightforward to use:

CSS colors模块还引入了一个方便的gray()函数。 它可用于生成灰色，而无需指定任何冗余信息，例如RGB颜色中的所有三个通道。 postcss-color-gray插件为该函数实现了一个polyfill ，使用起来非常简单：

body {
  color: gray(0);
  color: gray(25);
  color: gray(50%);
  color: gray(128, 20%);
}

This code above will generate different shades of gray:

上面的代码将生成不同的灰色阴影：

body {
  color: rgb(0, 0, 0);
  color: rgb(25, 25, 25);
  color: rgb(127, 127, 127);
  color: rgba(128, 128, 128, 0.2);
}

包装全部 (Wrapping It All Up)

This is by all means not a complete list of CSS plugins available, but rather a selection of some the more interesting ones. You can explore more of them at postcss.parts.

绝对不是可用CSS插件的完整列表，而是一些更有趣的插件的选择。 您可以在postcss.parts中探索更多它们。

CSS is booming and PostCSS is booming with it. Yes, we are all eagerly waiting for native browser support for these new features, but PostCSS gives us a promising opportunity to adopt and evaluate these features early. The general advice here would be to try to take a step back from the familiar usage of preprocessors and take a fresh perspective on writing stylesheets. Try to come up with a list of available features that would make you more productive and use them in your workflow. You might soon realize that these are the exact features you were missing all along.

CSS蓬勃发展，而PostCSS蓬勃发展。 是的，我们都热切期待本机浏览器对这些新功能的支持，但PostCSS为我们提供了一个有希望的机会，尽早采用和评估这些功能。 这里的一般建议是尝试从预处理器的熟悉用法中退后一步，并对编写样式表有一个新的认识。 尝试列出可用功能的列表，这些功能将使您更加高效并在工作流程中使用它们。 您可能很快就会意识到，这些正是您一直缺少的确切功能。

翻译自: https://www.sitepoint.com/enabling-upcoming-css-features-with-postcss/

禁用启用css属性