CSS is full of new tricks and features that you might not even know about. These features can help us become better in our daily development and even solve our problems. Here are 10 CSS features that you might not know about.

1. Color-Mix()

CSS color-mix() has full support in all modern browsers. For me, this is one of the coolest CSS features introduced in 2022, which allows us to mix different colors without using gradients.

The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount. 

Functional notation: color-mix(<color-interpolation-method>, <color>[<percentage>], <color>[<percentage>])

color-interpolation-method

Specifies what interpolation method should be used to mix the colors. It consists of the in keyword followed by a color space name. The following three types are available:

• <rectangular-color-space>: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50, and xyz-d65.
• <polar-color-space>: hsl, hwb, lch, and oklch.
• custom-color-space: <dashed-ident> referring to a custom @color profile

Example of color mix:

2. Marker (::marker)

If you still use::before to style list elements, you might be surprised to know there is an easier way of doing that. The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

li::marker {
  content: '✅ ';
  font-size: 1.2em;
}

Results ⤵

However, browser support is not great and it is currently not supported in Safari and Safari on IOS with animation or transition properties. Hopefully, it will be supported very soon.

3. Current-Color (currentColor)

I have often seen the currentColor property in most SVGs I work with and assumed it is an SVG feature. However, currentColor can work on any property. What if you want the border color of an element to be the same as the text color? Assuming you have a <div> whose border and the text inside it are blue, you can use currentColor to set the border to blue.

<div style="color: blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background: currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

Result ⤵

4. Mix-Blend-Mode

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

There are over 20 mix-blend modes, although the support for some of them such as plus-lighter and plus-darker is not great. The blend mode on SVGs is also not fully supported in all browsers.

.img {
  mix-blend-mode: multiply;
}

Results ⤵

5. Clip-Path

We have all seen some nice-looking borders and SVGs.  The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. This can be overwhelming at first and I recommend using clippy to create your clip-paths.

The clip path takes a basic shape such as a circle, polygon,  ellipse,rect, or a path for an SVG. You can use clip-path to turn boxes into different shapes, which can help break up the monotony of most websites, where everything is a box with straight edges.

6. Accent Color

If you have worked with forms, you probably know how difficult it is to change the color of checkboxes and radio inputs. The accent-color CSS property sets the accent color for user-interface controls generated by some elements. The accent color is currently supported in the input type of checkbox, range, radio, and the progress element.

input[type='checkbox'] {
  accent-color: purple;
}

Results ⤵

7. Counter 

If you use unordered lists, they do not have any order. However, CSS counter allows you to set a counter for the <ol> and <ul> elements. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings on a webpage or to change the numbering on ordered lists.

li {
  font-size: 30px;
  margin-bottom: 20px;
  counter-increment: li;
  list-style: none;
}
.list li::before {
  content: counter(li);
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30%;
  display: inline-block;
  background-color: #ffa500;
  color: white;
  text-align: center;
  line-height: 30px;
}

Results ⤵

8. Any Link (:any-link)

If you have trouble styling links, especially when they lack a href, the  :any-link CSS pseudo-class would be the best choice for you. The selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.

In other words, it matches every <a> or <area> the element that has an href attribute. Thus, it matches all elements that match :link or :visited. Take note because this means that visited links might also have the same styling.

a:any-link {
  color: forestgreen;
  text-decoration-color: hotpink;
}
/*you might need to style visited links */
a:visited {
  color: purple;
}

9: Empty (:empty)

In this blog, I have a section where I render the blog summary after the user generates the summary. However, I do not want to render the summary when it is empty. This is where CSS empty selector comes in handy and avoids the need to use javascript.

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

.summary:empty {
  /* do not display it when it is empty */
  display: none;
}
/* do not confuse with blank */
.summary:blank {
  display: block;
}

Take note not to confuse empty with blank. the :blank pseudo-class targets elements that have whitespace content, but no visible content. This means that an element containing only spaces, tabs, or line breaks is considered “blank” by the :blank pseudo-class, but an element containing visible content, even if it’s just a single character, is not considered blank.

10. Inset 

The inset property is a shorthand in CSS that combines the top, right, bottom, and left properties. It is used to position an absolutely or relatively positioned element within its containing block. This inset property has no effect on non-positioned elements.

The inset property directly sets the distances from the edges of the element's containing block, effectively combining the functionality of the individual top, right, bottom, and left properties. You can also set inset-inlineand inset-block based on your needs.

/* <length> values */
inset: 10px; /* value applied to all edges */
inset: 4px 8px; /* top/bottom left/right */
inset: 5px 15px 10px; /* top left/right bottom */
inset: 2.4em 3em 3em 3em; /* top right bottom left */
inset: calc(anchor(50%) + 10px) anchor(self-start) auto auto;
inset: auto auto anchor(center) anchor(self-end);
/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;
/* Keyword value */
inset: auto;
/* Global values */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;

Conclusion

Did you learn anything new about CSS today? Comment below with your new best features that could help save you tonnes of hours in development.