6 CSS features you need to know about....

Hi 👋,

Although being a Full Stack Web developer, I'm quite fond of designing beautiful UI.

I would love to share with you some of the cool CSS features that you should know.

#1 - var()

Variables have been available for many years with CSS preprocessing tools like Sass and Less. CSS variables, officially called CSS custom properties, were introduced later. Support for CSS variables was not great until more recently. They are now supported in all modern browsers.

Note: CSS variables are not supported in Internet Explorer.

Why would we want to use variables in CSS? Suppose you're designing a website for a company. You use their brand color, #1092b3, in many places throughout your CSS. Later, the site is going through a rebranding, and the brand color is changing. You
now have to change the brand color in every place you used #1092b3.
Instead, you can define a brand-color variable and reference that variable everywhere you need to use the brand color. Later, when that color changes, you simply need to change the color value once in the variable declaration.

CSS variables are declared with two dashes followed by the variable name, such as

--brand-color: #3FA2D9;

To reference a variable’s value later, you need to pass the variable name to the var function:

background-color: var(--brand-color);

#2 - calc()

The calc function lets you combine the different units for calculating an exact amount. Main advantages of using calc are

1. Mixed units can be used in the calculation.

.container {
    padding: calc(1.5rem - 10px);
}

1. It works with CSS custom properties or variables.

:root {
    --spacing: 0.5rem
}

.container {
    padding: calc(var(--spacing) * 2);
}

#3 - position: sticky

The element acts as a relatively positioned element, scrolling with the document. When the element reaches a specified point, it turns into a fixed element. This point is specified via a top, right, bottom, or left value.

Note: position: sticky is not supported in Internet Explorer.

#4 - Magic of white-space, overflow & text-overflow used together

Your design may require that text must fit within its container without overflowing or wrapping. This can easily be accomplished by using the white-space, overflow, and text-overflow properties together.

First, white-space is set to nowrap. This ensures the text does not wrap but will in turn cause the text to overflow the container. By setting overflow to hidden, we can hide the overflowing content. However, then the text is abruptly cut off at the end of the container. Finally, we can set text-overflow to ellipsis to truncate the text and add an ellipsis at the end.

#5 ::first-letter

Applies the styles only to the first letter of the first line of an element.

#6 prefers-reduced-motion

Some users may have vestibular or seizure disorders that can be triggered by rapidly moving or flashing elements in your pages. You should be mindful of this when designing your animations. Most modern operating systems allow users to disable, or reduce, animations to help alleviate this.

<style>
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .loader {
    width: 10rem;
    height: 10rem;
    background: skyblue;
    animation: spin 500ms linear infinite;
  }
</style>
<div class="loader"></div>

This results in a square that spins very quickly, making one full rotation every 500ms.

This could trigger seizures or other issues, as it moves very fast. We can conditionally disable the animation by using the prefers-reduced-motion media query.

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation: none;
  }
}

When this page is loaded on a system where the user has disabled motion, the box will not be animated.

The prefers-reduced-motion query has two supported values: reduce and no-preference.

Note: prefers-reduced-motion is not supported in Internet Explorer.

That's it for now. 😉

Also, I know there are plenty of cool features in CSS. But writing them would eventually end up in a Book. But, I thought, why can't we pick a few of them.

I hope you came to know about one new feature on CSS.

Thank you! Have a great day 🎉