DEV Community

sibaspage
sibaspage

Posted on

New in CSS

Declare Variable

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


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

Enter fullscreen mode Exit fullscreen mode

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

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

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

: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 */
}
Enter fullscreen mode Exit fullscreen mode
/* After */

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

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

Discussion (0)