The future of CSS
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 😢
IE11
3,10 % worldwide
8,49 % in Belgium 😱
Feature queries (@supports)
Usage
@supports ( display: grid ) {
.foo { display: grid; }
}
Great for progressive enhancement !
⚠️ Watch out for feature support
e.g. not ideal for flexbox !
Grid Layout
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;
}
Custom properties (variables)
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