The future of CSS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4054265/0-Movie-Poster.jpg)
Custom properties (CSS variables) : stage 5 (standard)
Grid Layout : stage 4 (candidate recommendation)
CSS Conditional Rules (@supports) : stage 4 (candidate recommendation)
The bad news
No Babel for CSS 😢
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4144334/postcss.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4163398/DGK4iqnUMAAcDBY.jpg)
IE11
3,10 % worldwide
8,49 % in Belgium 😱
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4054275/tumblr_n8mezlMqwi1r5zq6ao1_500.gif)
Feature queries (@supports)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4097991/Image_2017-09-05_at_4.55.39_PM.png)
Usage
@supports ( display: grid ) {
.foo { display: grid; }
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4054276/e7ce6d2e-eb03-ec68-612a-52a0df562133_0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4054278/giphy__1_.gif)
Great for progressive enhancement !
⚠️ Watch out for feature support
e.g. not ideal for flexbox !
Grid Layout
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4098001/Image_2017-09-05_at_4.58.04_PM.png)
Usage
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 10px;
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4054304/Image_2017-08-17_at_11.12.50_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4144341/Image_2017-09-20_at_5.54.58_PM.png)
Custom properties (variables)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/4098082/Image_2017-09-05_at_5.12.06_PM.png)
Usage
:root { --color: blue; }
.box { --color: red; }
.box .inside {
background-color: var(--color);
}
Advantages over pre-processor variables
Available at run time → this makes them easy to manipulate with Javascript.
You might not need a pre-processor anymore !
myElement.style.setProperty(
'--some-variable', 100
);
They are part of the cascade → use calc(), redefine them in a media query, etc
The future of CSS
By maelig
The future of CSS
- 1,914