Back to the CSS future

Julien Tanguy, Valwin

Back to the CSS future

Human Talks Nantes, par @jutanguy

CSS

Past

Present

CSS versions

Monolithic versioning

CSS Modules

Units

Units

Feature queries

First-letter

p::first-letter {
 initial-letter: 4;
 color: #FE742F;
 font-weight: bold;
 margin-right: 0.5em;
}

Features queries

@supports (initial-letter: 4) {
  p::first-letter {
     initial-letter: 4;
     color: #FE742F;
     font-weight: bold;
     margin-right: 0.5em;
  }
}

Flexbox

Flexbox basics

.vertical-center {
    display: flex;
    align-items: center;
}
.equal-height-cols-container {
    display: flex;
    align-items: stretch;
}

Fluid layout

.container {
    display: flex;
    align-items: stretch;
}
.container > aside {
    flex: 1 0 300px;
}
.container > section {
    flex: 2 1 auto;
}

Future

Variables

Variables

:root {
  --main-bg-color: blue;
}

body {
  background-color: var(--main-bg-color);
}

I can haz vars already !

Sass

$sass-primary-color: #fff;

Less

@less-primary-color: #beeeef;

Shapes

Grid

1
2
3
4
5
6
7
8
9
10
11
12

Grid css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 2fr 100px;
  grid-gap: 10px;
}
.box {
    /* basic styles */
}
.box2 {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
}

Vendor prefixes

Prefix galore

/* Theory */
background: -webkit-linear-gradient(#fff, #000);
background: -moz-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: linear-gradient(#fff, #000);

/* Practice */
background: -webkit-linear-gradient(#fff, #000);

Autoprefixers

-webkit-border-radius on firefox and ie

WIP prefixes & syntax

.version-2009 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.version-2012 {
    display: flexbox;
}
.current {
    display: flex;
}

Feature flags

Fork me on Github