foreword

As CSS continues to evolve, some cool and useful properties are either completely ignored, or for some reason not as skillfully applied by developers as other common properties. In this article, we will learn about those unfamiliar but very useful CSS properties in CSS. You may or may not have heard of these properties, but after you understand them, you will find them so practical.

If this article is helpful to you, ❤️Follow+Like❤️Encourage the author, the official account of the article is first published, follow the front-end Nanjiu to get the latest articles as soon as possible～

:is() and :where() pseudo-selectors

These two pseudo-selectors gained wider browser support in the last year, and both handle grouping and specificity.

:is()

It's a match pseudo-class, :is() takes as its argument a list of selectors to try to match

Several unique behaviors of :is() selector lists:

• If an invalid selector is listed, the rule will continue to match valid selectors. Whereas the :is(-ua-invalid, article, p) rule will match both article and p.
• The calculated specificity will be equal to the specificity of the selector passed with the highest specificity. For example, :is(#id, p) will have a specificity of #id— 1.0.0 — and :is(p, a) will have a specificity of 0.0.1.

Pseudo-selectors in CSS: is() allows you to write compound selectors more concisely.

example:

We may have seen CSS like this, giving the same CSS style to a large number of elements

section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #BADA55;
}

It looks much more concise after using :is()

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

compatibility

:where()

This pseudo-class is basically the same as :is() except that it always has zero specificity. It also accepts a selector list as the parameter it tries to match, and will select all elements that can be selected by any of the rules in the selector list.

example:

When the p tag in header, main, and footer is hover ed, add the following style to it, we may write like this:

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

We can also use :where() to achieve:

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

This looks much simpler than the above.

:where() and :is() are always 0, but the priority of :is() is determined by the highest priority selector in its selector list.

We can combine multiple selectors into a single expression using :is and :where . Using :where we can set safe default styles using complex selectors that can be easily overridden with simple utility classes without adding specificity.

compatibility

currentColor

Often referred to as the "first CSS variable", currentColor is a value equal to the element's color property. It can be used to assign color equal to the property's value to any CSS property that accepts a color value. It forces CSS properties to inherit the value of the color property.

This value is useful to avoid assigning the same value to multiple CSS properties that accept a color in the same selector, such as border-color, background,box-shadow, etc.

example:

If we need to unify the text color, border, and shadow of each paragraph, we might write like this:

.green {
  color: darkgreen;
  border-left: 5px solid darkgreen;
  box-shadow: 5px 5px 10px darkgreen;
}

.brown {
  color: darkgoldenrod;
  border-left: 5px solid darkgoldenrod;
  box-shadow: 5px 5px 10px darkgoldenrod;
}

.red {
  color: darkred;
  border-left: 5px solid darkred;
  box-shadow: 5px 5px 10px darkred;
}

But with currentColor we can write

.box {
  border-left: 5px solid currentColor;
  box-shadow: 5px 5px 10px currentColor;
}
.green {
  color: darkgreen;
}
.brown {
  color: darkgoldenrod;
}
.red {
  color: darkred;
}

compatibility

Alternate Values ​​for Custom Attributes

Custom properties significantly improve CSS by allowing developers to create reusable values ​​in their stylesheets without the need for a CSS preprocessor like SASS. Custom attributes were immediately adopted and are widely used today with huge impact, especially in theming and interacting with JavaScript. But many people may ignore the second parameter of the var function, which is used as a fallback option to apply when the custom attribute is invalid.

define variables --

• Start with --, case sensitive
• The definition of variables must have a scope and cannot be directly defined externally, which is different from scss and less

:root {
	--myColor: blue;
  --color-default: black;
}

Use variable var(variable_name, def_value)

The first parameter of var is the variable name, and the second parameter is the alternate value when the variable cannot be found

div {
	background-color: var(--myColor, 'red');
}

We can also set another variable as an alternate value

color: var(--myColor, var(--color-default));

interactive media query

When creating responsive websites, we often make assumptions about input mechanisms based on screen size. We assume the screen size 1920px belongs to a desktop computer or laptop and the user interacts with the website using a mouse and keyboard, but what about a laptop with a touch screen or a smart TV screen?

This is where the Interactive Media feature comes in, allowing us to fine-tune the usability of the components the user can interact with (inputs, off-canvas menus, dropdowns, modals, etc.) based on the primary input mechanism - touch, stylus, mouse pointer etc.

@media (pointer: fine) {
  /* use mouse or stylus */
}
@media (pointer: coarse) {
  /* touch */
}
@media (hover: hover) {
  /* can hover */
}
@media (hover: none) {
  /* can't hover */
}

scroll-padding

When implementing a fixed header, page anchor scroll links cause the fixed header to cover part of the content. Previously we had to use JavaScript to solve this and implement custom scrolling logic to account for fixed header offsets. Things only get more complicated if the header height changes at breakpoints, luckily we don't have to rely on JavaScript for this anymore. We can specify and change the value of scroll-padding-top using standard CSS media queries.

html {
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

We can also set other orientations or use normal scroll-padding.

scroll-padding: /* ... */;

scroll-padding-top: /* ... */;
scroll-padding-right: /* ... */;
scroll-padding-bottom: /* ... */;
scroll-padding-left: /* ... */;

compatibility

font rendering options

I believe that everyone has done some countdown scenes. Here we will find that if the plain text is rendered, there will be a strange phenomenon - the number jumps strangely. The main reason for this phenomenon is that the rendering width of each number is actually different.

For example, when the number is changing, the entire text is also jumping left and right. Here we may wrap a layer of boxes for each number, and then fix the width of the box, so that this situation can be avoided in digital dramas. , but this is troublesome. Today I will introduce a pure CSS solution to you, only one line of CSS is needed!

font-variant-numeric: tabular-nums

tabular-nums solves the above problem by setting the same width for all numeric characters.

Let's compare again:

compatibility

Students who like it are welcome to give a like~ The original posting address click here , everyone is welcome to pay attention to the public account "Front-end Nanjiu", if you want to join the front-end exchange group to learn together, please click here

I'm Nan Jiu, see you next time! ! !