Some features that were once unique to Sass are now natively integrated into CSS.
Variables
in seconds.
CSS Variables enable dynamic color schemes and themes that can be changed at runtime.
:root {
--button-padding: 10px 20px;
--button-bg-color: #007bff;
--button-text-color: #ffffff;
--button-border-radius: 8px;
}
.button {
padding: var(--button-padding);
background-color: var(--button-bg-color);
color: var(--button-text-color);
border-radius: var(--button-border-radius);
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
Chromesince v49(current: 130)Firefoxsince v31(current: 131)Safarisince v9.1(current: 18)Edgesince v15(current: 130)CSS Nesting
like SCSS, but better.
CSS Nesting allows a hierarchical structure directly in CSS, similar to SCSS, but without a compiler.
.blog {
position: relative;
padding: 1rem;
background: var(--neutral-100);
.blog-item {
border: 1px solid var(--neutral-200);
& span {
font-size: 1rem;
}
}
}Chromesince v112(current: 130)Firefoxsince v117(current: 131)Safarisince v16.4(current: 18)Edgesince v112(current: 130)The :is
Pseudo-Class
The :is() pseudo-class simplifies complex selectors and allows grouping of elements.
:is(selector1, selector2, selector3) {
/* styles */
}Chromesince v88(current: 130)Firefoxsince v78(current: 131)Safarisince v14(current: 18)Edgesince v88(current: 130)The :has()
Pseudo-Class
The :has() selector enables the selection of parent components based on their children.
.card:has(img) {
display: flex;
flex-direction: column;
}Chromesince v105(current: 130)Firefoxsince v121(current: 131)Safarisince v15.4(current: 18)Edgesince v105(current: 130)Container
Queries
Container Queries allow responsive design at the component level, independent of viewport size.
.card {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card-content {
display: grid;
grid-template-columns: 2fr 1fr;
}
}Chromesince v105(current: 130)Firefoxsince v110(current: 131)Safarisince v16(current: 18)Edgesince v105(current: 130)Cascade
Layers
Cascade Layers enable control of specificity through logical layers instead of complicated selectors.
@layer base {
h1 {
font-size: 2rem;
}
}
@layer components {
.button {
padding: 0.5rem 1rem;
}
}Chromesince v99(current: 130)Firefoxsince v97(current: 131)Safarisince v15.4(current: 18)Edgesince v99(current: 130)About the project
Modern CSS has evolved dramatically in recent years, making many preprocessor features obsolete. As a software developer with over 17 years of frontend experience, I'm passionate about CSS, and this project showcases how native CSS capabilities can replace complex SASS/SCSS workflows.
That's me, Karsten.
Modern development
Streamlined workflows using only native browser features. No preprocessors or additional build steps required.
Browser support
All features highlighted are supported in modern browsers. We track compatibility to ensure reliable production use.
Future-proof
Stay ahead of the curve with the latest CSS specifications and upcoming features in the styling ecosystem.
Unlock 50+ CSS features
for 2024 & 2025
Get lifetime access to the latest CSS techniques, best practices, and future trends.
Premium access
Get lifetime access to all current and future content with this special introductory price.
What you'll get
Complete CSS feature guide with in-depth explanations- SCSS to CSS Migration Guide
- 50+ CSS techniques with practical examples
- Ready-to-use components built with native CSS
- Future CSS updates as they become available