New in CSS

#css #webdev #design

Declare Variable

:root {
    --global--primary-color: #29313e;
}


a {
    color: var(--global--primary-color);
}

@Supports

It allows you to do the same depending on what CSS properties and values the user browser supports.

@supports (display: grid) {
    .main-content {
        display: grid;
    }
}

content-visibility

It is a really cool new CSS feature to improve site performance. It basically works like lazy loading, only not for images but any HTML element. You can use it to keep any part of your site from loading until it becomes visible.

.sec-viewport {
    content-visibility: auto;
}

Scroll Snap

Scroll snapping gives you the option to lock the user’s viewport to a certain parts or element of your site.

.container {
    scroll-snap-type: y mandatory;
}

:is and :where

It allow you to reduce repetition in CSS markup by shortening lists of CSS selectors.

/* Before */
.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
    /* markup goes here */
}

/* After */

:is(.main, .sidebar, .site-footer) a:hover {
    /* markup goes here */
}

:where(.main, .sidebar, .site-footer) a:hover {
    /* markup goes here */
}