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 */
}
Top comments (0)