A brief analysis of CSS :is() and :where() coming to browsers soon

Preview versions of Safari (Technology Preview 106) and Firefox (version 78) now support the new CSS :is() and :where() pseudo-classes. Chrome's implementation still lags behind.

Use :is() to reduce duplication

You can use the :is() pseudo-class to remove duplicates from a selector list.

/* before */
.embed .save-button:hover,
.attachment .save-button:hover {
  opacity: 1;
}

/* after */
:is(.embed, .attachment) .save-button:hover {
  opacity: 1;
}

This feature is mainly useful in unprocessed standard CSS code. If you use Sass or a similar CSS preprocessor, you may prefer nesting.

Note: Browsers also support the non-standard :-webkit-any() and :-moz-any() pseudo-classes, which are similar to :is() but more restrictive. WebKit deprecated :-webkit-any() in 2015, and Mozilla has updated Firefox's user agent stylesheet to use :is() instead of :-moz-any() .

Use :where() to keep specificity low

:where() pseudo-class has the same syntax and functionality as :is() . The only difference between them is that :where() does not increase the specificity of the overall selector (that is, the higher the specificity of a CSS rule, the higher its style will be taken).

Neither :where() pseudo-class nor any of its arguments contribute to the specificity of the selector, which is always zero.

This feature is useful for styles that should be easily overridden. For example, the base stylesheet sanitize.css contains the following style rule, which sets the default fill color if the <svg fill> attribute is missing:

svg:not([fill]) {
  fill: currentColor;
}

Due to its higher specificity (B=1, C=1), websites cannot override this declaration with a single class selector (B=1) and are forced to either add !important or artificially increase the specificity of the selector (e.g. .share- icon.share-icon ).

.share-icon {
  fill: blue; /* Not applicable due to low specificity*/
}

CSS libraries and base stylesheets can avoid this problem by wrapping their attribute selectors with :where() to keep the overall selector low specificity (C=1).

/* sanitize.css */
svg:where(:not([fill])) {
  fill: currentColor;
}

/* author stylesheet */
.share-icon {
  fill: blue; /* Due to high specificity, applicable*/
}

Summarize

This is the end of this article about CSS :is() and :where() coming to browsers. For more CSS :is() and :where() browser content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!