7 cool things that you didn’t know about CSS.

1. calc()

Calc is one of the CSS tools which not everyone knows about. It allows you to add calculations in your CSS code. This can be used to make your website more responsive and also remove some annoying overflows: example.

width: calc(100vw - 16px);

2. cubic-bezier()

This is another useful way to make your css animations come to life. Most of the time, we use linear, ease, ease-in-out, and other pre-defined beziers wasting half of the day finding the perfect bezier. The cubic-bezier() function allows us to create a custom bezier. At first, the numbers may seem randon but the moment you get a visual representation, you finally get what the numbers mean. Here’s an example showing the difference between pre-defined and custom beziers.

animation-timing-function: cubic-bezier(0.5, 0, 1, 0.75);

3. @supports

This allows you to tell if a CSS property is supported by the browser and adapt accordingly. It is used like a media query. An example.

@supports (display: flex) or (display: block) {
  .my-class {
    margin-top: 200px;
  }
}

4. The turn unit

This is one of those lesser known CSS hacks. Instead of having to calculate the number of degrees in a quarter turn, you can use the turn unit. Another demo

transform: rotate(0.25turn); /* this is like rotate(90deg) */

5. pointer-events

This CSS property can be used to disable a link. It can also be used for many other things but those are mostly experimental. Just say

a.disabled[href] {
  pointer-events: none;
}

Example.

6. caret

This is the style of the caret (also called cursor). It allows you to change the shape and color of the caret. The color is only supported by some browsers and the shape is supported by none. The syntax is like so:

caret: color shape;

As usual, an example.

7. ::selection

This is one of those cool properties which can really improve the look of your website. This is a pseudo-element which (as the name suggests) is the part of the selected text on a webpage. You can just add a

::selection {
  background: darkblue;
  color: lightgreen;
}

and be satisfied with the background of the selected text being dark blue and the text being light green like in this example or you can get creative and take it one step further like in this example. It turns out that most browsers support multiple styles for different selections. We can take advantage of this fact and make the background of h1 and h2 elements red. We can use this to make some elements more noticeable than others resulting in a better user experience.