DEV Community

Cover image for Some new features CSS in 2024
Sonay Kara
Sonay Kara

Posted on

Some new features CSS in 2024

In this article we will explore some new CSS features in 2024.

If you like my articles, you can buy me a coffee :)
Image description

1. CSS container queries

Container queries allow you to apply a style to an item depending on the size of the item's container.Container queries work like media queries.

Using container queries

Using container queries, you can dynamically adjust the style of child elements within a parent element according to their size.

To do this, you must first define a container context for the parent element. You specify this with the container-type property.

  • container-type: size; When set to , you can query by both width and height values.

  • container-type: inline-size; When set to , query is made only on width (horizontal dimension).

Thanks to this feature, the style properties of child elements can be changed depending on the size of the parent element.

Examples :

 <div class="post">
        <div class="card">
          <h2>Card title</h2>
          <p>Card content</p>
        </div>
  </div>

Enter fullscreen mode Exit fullscreen mode
.post {
    container-type: size;
  }

  .card h2 {
    font-size: 1em;
    color: blue;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 5em;
      color: purple;
    }
  }
Enter fullscreen mode Exit fullscreen mode

Output :

Image description


2. Css Nesting

With CSS nesting, you can place one rule inside another. This is especially useful for managing styles that are context-dependent. For example, if you have a .container class and want to style its .item elements, you can write the .item rules directly inside the .container rule. CSS Nesting is parsed directly by the browser. This means you don’t need a preprocessor to compile nested rules; they work natively in the browser.

Examples :

<form>
        <label for="name">Name:
          <input type="text" id="name" />
        </label>
        <label for="surname">Surname:</label>
        <input type="text" id="surname" />
      </form>
Enter fullscreen mode Exit fullscreen mode

 input {

    border: red 2px solid;
  }
  label {
    font-family: system-ui;
    font-size: 1.25rem;
    & input {

      border: purple 2px solid;
    }
  }

Enter fullscreen mode Exit fullscreen mode

Output :

Image description


3. :scope Pseudo Class

The Scope Selector is used to define the scope for styles in CSS.

Usage :

  • If :scope is at the root level of a css, it is equivalent to :root

Examples :

<html></html>
Enter fullscreen mode Exit fullscreen mode
:scope {
  background-color: orange;
}
Enter fullscreen mode Exit fullscreen mode

Output :

Image description


  • Using :scope within @scope blocks allows for clear and targeted styling based on the context defined by the class names.

Examples :

<div class="light">
  <p>
    <a href="#">dev.to</a>,

  </p>
</div>

<div class="dark">
  <p>
  Lorem Ipsum
    <a href="#">dev.to</a>,

  </p>
</div>
Enter fullscreen mode Exit fullscreen mode
@scope (.light) {
  :scope {
    background-color: black;
  }

  a {
    font-size : 2rem;
  }
}

@scope (.dark) {
  :scope {
    background-color: yellow;
    color: purple;
  }

  a {
   font-size : 4rem;
  }

Enter fullscreen mode Exit fullscreen mode

Output :

Image description


4. :has() Pseudo Class

The :has() selector in CSS allows you to style a parent element if it contains a specific child element.

Examples :

<p>
  Lorem Ipsum is that it has a more-or-less normal distribution of letters,<a href="/">as opposed to using 'Content here, content here', making it look like readable English.</a> 
</p>
Enter fullscreen mode Exit fullscreen mode
 p:has(a) {
   font-size: 40px;
  }
Enter fullscreen mode Exit fullscreen mode

Output :

Image description


5. Color Functions

You can have much more control over the tones and contrasts of colors with new color functions such as color-mix() and color-contrast()

Examples :

color-mix(in lab, plum 60%, #f00 50%)
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)
Enter fullscreen mode Exit fullscreen mode

6. Anchor Positioning

The CSS anchor positioning module defines features that allow you to tether elements together. Certain elements are defined as anchor elements; anchor-positioned elements can then have their size and position set based on the size and location of the anchor elements to which they are bound.


Conclusion

In this article, we explored some new features CSS in 2024. You can use this features for app.

Top comments (20)

Collapse
 
grahamthedev profile image
GrahamTheDev

Careful with the conclusion part!

While this is a great list, it is worth noting:

  • Container queries only have 90% browser usage support, so you need a polyfill or fallback styling
  • CSS nesting only has 87% browser usage support and is hard to polyfill without causing Cumulative Layout Shift (CLS).
  • :scope is not supported at all in Firefox.
  • color-contrast is not supported at all in any browser and is purely experimental.
  • anchor postioning - has only very recent chromium support (66% of browser usage), so you would need to heavily polyfill / have strong fall-backs.

So in reality, out of the list you gave, container queries are the only one that is "safe" to use at the moment, depending on how far back you want to support browsers!

Collapse
 
aloisseckar profile image
Alois Sečkár

When talkink about any "new" features of web technologies, one has to be aware of possible lack of support in certain browsers.

A dedicated website caniuse.com/ is here to save the day providing detailed info about browser adoption of most if not all of them. If anyone doesn't know it yet, bookmark it asap!

Collapse
 
whereisthebug profile image
@whereisthebug

This is a fantastic point. And this is common with new features in CSS or JavaScript. It's fine to play with them in your personal projects, but you must pay a lot of attention to browser support before using them in production.

Collapse
 
sonaykara profile image
Sonay Kara

Yes, I’m aware of the current support limitations. However, it’s worth noting that when Flexbox and Grid first came out, they faced similar browser support challenges, yet over time they became well-supported

Collapse
 
grahamthedev profile image
GrahamTheDev

absolutely! And I encourage people to play with things and put them in side projects, just wanted to point out they were not really "production ready" yet.

Thread Thread
 
sonaykara profile image
Sonay Kara

Thank you for your feedback. I respect every comment, every information and opinion made on my articles in this community. Your comment is very valuable to me

Collapse
 
tymzap profile image
Tymek Zapała

Workaround would be to install PostCSS and respective plugins which will transform modern CSS to output understandable to older browsers. Once the browser support of these features is acceptable, you just remove the PostCSS plugins from your build step without modyfing the code at all.

Collapse
 
sonaykara profile image
Sonay Kara

Thank you , it seems logical to easily provide legacy browser support with PostCSS and related plugins.

Collapse
 
mince profile image
Mince

This is true

Collapse
 
itsmeseb profile image
sebkolind

Thanks for clarifying this! It’s important to check the browser support on any features you use.

Collapse
 
mince profile image
Mince

Most of these are beta features

Collapse
 
sonaykara profile image
Sonay Kara

Yes, I already said it is.

Collapse
 
mince profile image
Mince

Yes you did 😅

Thread Thread
 
mince profile image
Mince

But I personally love beta features

Collapse
 
jessica_kotei_1811 profile image
Jessica Kotei

Love it

Collapse
 
sonaykara profile image
Sonay Kara

:)

Collapse
 
jessica_kotei_1811 profile image
Jessica Kotei

I want you to teach me

Thread Thread
 
sonaykara profile image
Sonay Kara

You can ask whatever you want by commenting on the article or sending an e-mail
zonaykara@gmail.com

Collapse
 
johndotowl profile image
JohnDotOwl • Edited

Sometimes i wish everyone just put their effort into 1 package , tailwind css, utility based

Collapse
 
sonaykara profile image
Sonay Kara

You may be right, but a CSS framework contains CSS codes. To use a framework effectively, you need to understand css, so you have to learn css.