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

The future of CSS

By maelig

The future of CSS

  • 245
Loading comments...

More from maelig