Top 10 CSS FEATURES YOU NEED TO KNOW

CSS is a powerful tool that can be used to style and layout web pages. In this article, we will discuss some of the new CSS features that you need to know about.

1. Container Queries
2. New Viewport Units
3. CSS Nesting
4. Individual Transform Properties
5. Inset Property
6. Accent-color Property
7. Gap Property for Flexbox
8. Logical Properties (Inline and Block)
9. nth-of syntax
10. Selector :has()

https://podcasters.spotify.com/pod/show/menyhart-b-norbert9/episodes/Top-10-CSS-FEATURES-YOU-NEED-TO-KNOW-e2ih2cr

Container Queries

Container queries are a new feature in CSS that allow you to apply styles based on the size of a container, rather than the size of the viewport. This can be useful for creating responsive designs that adapt to the size of the container they are in.

.container {
  width: 100%;
}

@media (min-width: 600px) {
  .container {
    background-color: lightblue;
  }
}

@container (min-width: 600px) {
  .container {
    background-color: lightblue;
  }
}

New Viewport Units

Viewport units are a way to size elements based on the size of the viewport. There are four new viewport units in CSS: vw, vh, vmin, and vmax. These units can be useful for creating responsive designs that adapt to the size of the viewport.

.element {
  width: 50vw;
  height: 50vh;
}

.element {
  width: 50svw;
  height: 50svh;
}

Layout Viewport	Original Units (2013)	New Unit Equivalent
Width	vw	svw, lvw, dvw
Height	vh	svh, lvh, dvh
Smallest	vmin	svmin, lvmin, dvmin
Largest	vmax	svmax, lvmax, dvmax

CSS Nesting

CSS nesting is a new feature that allows you to nest CSS rules inside other rules. This can make your CSS code more readable and maintainable.

.container {
  background-color: lightblue;

  .element {
    color: white;
  }
}

header {
  & h1 {
    font-size: 24px;
  }
}

Individual Transform Properties

CSS now allows you to apply individual transform properties, such as translate, rotate, and scale, to elements. This can make it easier to create complex animations and effects.

.element {
  transform: translateX(50px) rotate(45deg) scale(1.5);
}

/* Individual props >= Chrome 104*/
.element {
  translate-x: 50px;
  rotate: 45deg;
  scale: 1.5;
}

Inset Property

The inset property is a new shorthand property in CSS that allows you to set the top, right, bottom, and left properties of an element at the same time. This can make it easier to position elements on the page.

.element {
  inset: 10px 20px 30px 40px;
}

Accent-color Property

The accent-color property is a new property in CSS that allows you to set the color of the accent elements in your design, such as links and buttons. This can make it easier to create a consistent color scheme across your site.

a {
  accent-color: blue;
}

button {
  accent-color: red;
}

Gap Property for Flexbox

The gap property is a new property in CSS that allows you to set the gap between flex items in a flex container. This can make it easier to create layouts with consistent spacing between elements.

.container {
  display: flex;
  gap: 10px;
}

.container {
  display: flex;
  gap: 10px 20px;
}

Logical Properties (Inline and Block)

Logical properties are a new feature in CSS that allow you to use logical properties, such as inline-start and block-end, instead of physical properties, such as left and bottom. This can make it easier to create layouts that adapt to different writing modes.

.element {
  margin-inline-start: 10px;
  margin-block-end: 20px;
}

nth-of syntax

The nth-of syntax is a new feature in CSS that allows you to select elements based on their position in a list. This can be useful for styling every nth element in a list.

li:nth-of-type(odd) {
  background-color: lightblue;
}

li:nth-of-type(even) {
  background-color: lightgreen;
}

li:nth-of-type(3n) {
  background-color: lightcoral;
}

li:nth-of-type(3n + 1) {
  background-color: lightgoldenrodyellow;
}

Selector :has()

The :has() selector is a new feature in CSS that allows you to select elements based on their descendants. This can be useful for styling elements that contain specific content.

div:has(p) {
  background-color: lightblue;
}

div:has(p a) {
  background-color: lightgreen;
}

div:has(p a[href*="example.com"]) {
  background-color: lightcoral;
}

These are just a few of the new CSS features that you need to know about. By using these features, you can create more powerful and flexible designs for your web pages.

P.S. Upcoming CSS Features

CSS is constantly evolving, and there are always new features being added to the language. Some of the upcoming CSS features that you should keep an eye on include:

• Mixins
• Functions

I am going to cover this in my next article / Episode.

Conclusion

In this article, we discussed some of the new CSS features that you need to know about. These features can help you create more powerful and flexible designs for your web pages. By using container queries, new viewport units, CSS nesting, individual transform properties, and other new features, you can take your CSS skills to the next level. So, start experimenting with these new features and see how they can enhance your web designs.