Enabling Upcoming CSS Features with PostCSS

Inherited in the previous article "PostCSS Guide: Improved Selectors and Media Query", this article will explore more PostCSS plug-ins that extend CSS functionality. The previous article focuses on improving the structure of style sheets by extending selectors and media queries, while this article will focus on how to implement new properties and values ​​in the upcoming specification. The plugins described in this article implement different functions that can be used effectively together or individually according to your needs.

Let's start with my favorite plugin.

Key Points

• PostCSS plug-in can be used to implement new properties and values ​​in the upcoming CSS specification, effectively extending the functionality of CSS. These plugins can be used together or individually according to the needs of the developer.
• PostCSS allows developers to use future CSS features before the browser is officially implemented. The postcss-initial plugin adds support for the initial value and all: initial combination, and the postcss-autoreset plugin automatically resets the style of block-level and component-level elements.
The
• postcss-color-function plugin implements a new color() function that allows developers to use one or more "color adjuster" functions to modify the underlying color. The postcss-color-hwb plugin implements a new hwb() function to define the HWB color; the postcss-color-gray plugin implements the polyfill of the gray() function.
• PostCSS provides a promising opportunity to adopt and evaluate new CSS features early. Developers are advised to write style sheets from a completely new perspective and list available features that can increase productivity.

Pick the reset to the next level

CSS3 introduces two nice features: initialvalue and all attribute. The initial value is used with the inherit and unset values, allowing you to reset the property to its original value. The all attribute is used as a shorthand attribute, which resets all attributes to one of these three states. While both are interesting in themselves, when used together, they allow you to quickly reset all styles of a specific element and prevent it from inheriting the styles of the page's parent element. This is another step in writing modular CSS!

Unfortunately, IE still does not support these two functions. However, as you may have guessed, there is a plugin that solves this problem.

postcss-initial Added support for initial values ​​and all: initial combinations. Here is how it works:

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

Compiled to:

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

By default, it retains the original properties as well as initial for use by native browsers that support this feature.

In turn, the all attribute will be converted to a long list of reset attributes.

.container {
  all: initial;
}

will be converted to:

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

(For the sake of space, the extended code after all: initial has been omitted)

If you use BEM or Suit, this plugin works well with postcss-autoreset, which will automatically reset the styles of block and component level elements.

Custom attributes

When working with layouts, we often need to share some values ​​in the stylesheet. For example, your brand color can be used as a background for a button, a text color for a link, or a border for a block of text. Currently, to achieve this we need to repeat it multiple times each place where the color is used. This repetition makes it cumbersome to keep the palette consistent when changing colors in the application.

CSS preprocessors like Less and Sass have solved this problem with variables. Fortunately, W3C is working on a similar concept called custom properties. Although the same problem is solved, they work differently than variables in the preprocessor. Less and Sass variables are parsed at compile time. When you compile Less or Sass to CSS, the compiler looks for variable declarations corresponding to the current compile range and replaces each instance with the corresponding value. This means that the parsed value of a variable depends entirely on where it is used in the code. Custom properties, in turn, are defined for elements in the DOM and can only be accessed by their child elements. This means that the value of the variable depends on the position of the element in the DOM and can only be parsed at runtime.

You should be frowning or raising your eyebrows so far. If the value of a variable is only known at runtime, how does the PostCSS plugin parse it? The truth is, it can't. However, it does provide a way to use that subset of functionality. If we define all custom properties in the :root element, these properties will be available for all elements on the page. This means we can parse them at compile time.

Here is a simple example of what it might look like:

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

will compile to:

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

Note that the --font-size variable is undefined, so it is replaced with a fallback value of 20px. It is important here to keep all custom properties within :root. Properties defined elsewhere will be ignored because the plugin cannot handle them adequately. You can start here and you can extend its usage when more browsers start supporting it. Chrome has supported them since version 49.

Logical properties

If you have ever developed an international website that spans different writing direction cultures, you will know what it takes to maintain multiple versions of the interface (such as left to right or right to left). To meet this need, W3C introduced a new concept of logical attributes. A way to think about the physical direction (like right or left), but rather the logical direction—start and end. The specification is still in progress, but you can already try some of it with the postcss-logical-props plugin.

It supports the generation of left-to-right and right-to-left website versions 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 the LTR and RTL versions of the stylesheet and then switch them in the application when the user changes the language.

For example, if you have the following CSS:

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

Calling the plugin with option { dir: 'LTR' } will produce the following results:

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

While using { dir: 'RTL' } will provide you with a mirror image:

.container {
  all: initial;
}

New color function

PostCSS provides a complete set of plugins that provide new features for handling colors.

Color adjustment

The

postcss-color-function plugin implements the new color() function. This function allows you to use one or more "color adjuster" functions to modify the underlying color. Each color adjuster can manipulate colors in a specific way.

Here are a few examples of how to use it:

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

will compile to the following color:

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

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

The complete list of color adjusters can be found in the

specification. This plugin can be used very efficiently with custom properties. You can define a set of basic colors and calculate other colors based on them. This way, if you decide to change the base color, the rest of the palette will be updated accordingly.

HWB color notation

HWB stands for hue-whiteness-blackness, which is an alternative way to define color. It uses hue values ​​from 0 to 360 to describe the color, and then adds 0% to 100% whiteness and blackness. This notation is similar to HSL and is easier to understand than RGB. The postcss-color-hwb plugin implements a new hwb() function to define HWB colors. Several examples:

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

The following colors will be generated:

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

gray() function

The

CSS color module also introduces a convenient gray() function. It can be used to generate gray without specifying any redundant information, such as all three channels in RGB colors. postcss-color-gray The plugin implements the polyfill of this function and is very simple to use:

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

The above code will generate gray of different shades:

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

Summary

This is by no means a complete list of all available CSS plugins, but just a choice of some more interesting plugins. You can explore more plugins on postcss.parts.

CSS is booming, and PostCSS is booming. Yes, we are all eagerly awaiting native support for these new features by the browser, but PostCSS provides us with a promising opportunity to adopt and evaluate these features early. The overall advice here is to try to step back from the familiar usage of preprocessors and look at writing stylesheets from a new perspective. Try to list the available features that can increase your productivity and use them in your workflow. You may soon realize that these are exactly the features you've been missing.

Frequently Asked Questions about Enable Upcoming CSS Features with PostCSS

(The FAQ part is omitted here because the article is too long and does not match the pseudo-original goal. The FAQ part can be reorganized and rewritten as needed, but the original intention remains unchanged.)

The above is the detailed content of Enabling Upcoming CSS Features with PostCSS. For more information, please follow other related articles on the PHP Chinese website!