DEV Community

Cover image for 6 CSS features you need to know about....
Rajeswaran
Rajeswaran

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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

background-color: var(--brand-color);
Enter fullscreen mode Exit fullscreen mode

#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);
}
Enter fullscreen mode Exit fullscreen mode
  1. It works with CSS custom properties or variables.
:root {
    --spacing: 0.5rem
}

.container {
    padding: calc(var(--spacing) * 2);
}
Enter fullscreen mode Exit fullscreen mode

#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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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 πŸŽ‰

Discussion (2)

Collapse
adelamay profile image
Adela Hiddleston

I've read a few of your articles and thoroughly enjoy your writing style. I've put it to my list of favorite blog sites and will return soon.
1v1 lol unblocked

Collapse
rajezz profile image
Rajeswaran Author

It's nice hear from you. Thanks 😊✌