I am

Naiara Abaroa

CSS

UI designer/developer at WiMi5

@nabaroa naknak.me

5 gold nuggets

25 minutes

Are you a pioneer?

You'll enjoy ;)

1 Bye bye -prefixes-

The problem

                        

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

The solution

CSS snapshot 2015

Responsible Implementation of CSS

Experimentation and Unstable Features

Implementations of unstable features that are described in W3C specifications but are not interoperable should not be released broadly for general use; but may be released for limited, experimental use in controlled environments.

Why?

We want to allow both authors and implementors to experiment with the feature and give feedback, but prevent authors from relying on them in production websites and thereby accidentally "locking in" (through content dependence) certain syntax or behavior that might change later.

How can we use unstable features?

about:config /Firefox/

chrome://flags/ /Chrome/

Vendor-prefixes for closed enviroments

Proprietary & Non-standardized

... A CSS feature is a proprietary extension if it is meant for use in a closed environment accessible only to a single vendor’s user agent(s). A UA should support such proprietary extensions only through a vendor-prefixed syntax and not expose them to open (multi-UA) environments such as the World Wide Web.

For example, Firefox’s XUL-based UI, Apple’s iTunes UI, and Microsoft’s Universal Windows Platform app use extensions to CSS implemented by their respective UAs.

Still we have to deal with the -prefix

Use autoprefixer

postCSS

2 Grid layout

Grid Terminology

Grid Lines

Grid Track

Grid Cell

Grid Area

Grid lines

The grid lines are the ones dividing horizontally and vertically a grid. And they’re actually numbered, starting at 1.


.grid{
    display: grid; 
    grid-template-columns: 300px 200px 100px; 
    grid-template-rows: 100px 50px;
}

Grid placement properties

grid-column:: Shorthand for grid-column-start and grid-column-end properties.
grid-row:: Shorthand for grid-row-start and grid-row-end properties.
grid-area:: Shorthand to set the 4 placement properties in just one declaration.

The long way:


.item{
    grid-column-start: 2; 
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end 2;
}

Easier with shorthands:


.item{ 
    grid-column: 2 / 4; 
    grid-row: 1 / 2; 
}

Cell spanning

The same position using span.


.item{
    grid-column: 2 / span 2; 
    grid-row: 1;
}

Negative line numbers

Negative numbers allow you to reference the lines starting from the end of the grid. It's like a reverse.

Useful if you want to be sure that the item is in the last column, independently of the number of tracks, you’ll just need to set: grid-column-end: -1;

Named grid lines

You can name the grid lines, so you don’t need to remember the specific number to reference to them.


.item{
    display: grid;
    grid-template-columns: [start] 300px [main] 200px [aside] 100px [end];
    grid-template-rows: [top] 100px [middle] 50px [bottom];
}

One line can have several names, you just need to set them in the definition:


.grid{
    grid-template-rows: [top start] 100px [middle center] 50px [bottom end];
}

The names of the lines can be repeated. To reference them you’ve to use a number that can be again positive or negative.

Place items with repeated named grid lines example


.grid{
  display: grid;
  grid-template-columns: [col] 200px [gap] 50px 
  [col] 200px [gap] 50px [col] 200px [gap];
}

 
.item1{ grid-column: col 2;}
.item2{ grid-column: col 1 / gap 2;}
.item3{ grid-column: col -1;}

And of course, you can span to a named grid line.

Place item spanning to named grid line example


.item{
    grid-column: col 2 / span 2 gap;
}

Grid areas

You can define grid areas and place items directly on them. You have to use the grid-template-areas property to put names to the different areas in your grid. And you could use the grid-area shorthand directly to place the items.


            
.grid{
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-areas:
    'title title title title aside'
    'nav main main main aside'
    'nav main main main aside'
    'footer footer footer footer footer';
}


.item1{grid-area: title;}
.item2{grid-area: nav;}
.item3{grid-area: main;}
.item4{grid-area: aside;}
.item5{grid-area: footer;}

Implicit names

Grid areas create implicit names for the grid lines surrounding them. These implicit names use the “-start” and “-end” suffixes.

E.g. the “title” area creates 4 implicit names for the lines (2 in each axis):

Left line: “title-start”
Right line: “title-end”
Top line: “title-start”
Bottom line: “title-end”

And you can reference those lines when placing an item, instead of using the whole area.

Place item using implicit names from grid areas example

Implicit grid

It's possible to place items outside of the explicit grid, creating implicit tracks automatically. The size of these tracks is controlled by grid-auto-columns and grid-auto-rows properties.


.grid{
    display: grid;
    grid-template-columns: 200px 200px;
    grid-auto-columns: 100px;
}


.item{
    grid-column:5;
}

A coupe of examples:


.grid{
    display: grid;
    grid-template-columns: 200px 200px;
    grid-auto-columns: 100px;
}


.item{
    grid-column:2 / span 3;
}


.item{
    grid-column:-5;
}

There's more about Implicit grid & Named grid lines, and special cases...

But for 5 min is enough!

the fr Unit

The new kid on the block

The fr unit can be used for grid-rows and grid-columns values. It stands for "fraction of available space". Think of it as percentages for available space when you've taken off fixed-sized and content-based columns/rows. As the spec says:

The distribution of fractional space occurs after all 'length' or content-based row and column sizes have reached their maximum.

The repeat() function

It allows you to define a pattern repeated X times.

Let's say you want to do 12 equal-width columns spaced from each other by a 1% margin:


grid-template-column:1fr repeat(11, 1% 1fr);

It is the same as:


grid-template-column:1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr;

The specification is really flexible regarding how to place items on the grid.

Choose your favourite way

Can Iuse?

Enable CSS Grid Layout

Chrome

Enable the flag called Enable experimental Web Platform features going to:
chrome://flags/#enable-experimental-web-platform-features

Firefox

Enable the flag called layout.css.grid.enabled going to:
about:config

IE

Enabled by default since IE10 (old syntax).

Prefixed -ms

Opera

Enable the flag called Enable experimental Web Platform features going to:
opera://flags/#enable-experimental-web-platform-features

WebKit

Enabled by default in WebKit Nightly Builds.

Prefixed -webkit

Check the CSS Grid Layout polyfill by François Remy.

Example in use

Doc.

3 Custom properties

Syntax


:root{
    --color:#f2b806;
}

.foo{
    color:var(--color);
}

Resolving dependency Cycles

This example shows a custom property safely using a variable:


:root {
   --main-color: #c06;
   --accent-background: linear-gradient(to top, var(--main-color), white);
}

The --accent-background property will automatically update when the --main-color property is changed.


:root {
--one: calc(var(--two) + 20px);
--two: calc(var(--one) - 20px);
}


 
 one   { --foo: 10px; }
 two   { --bar: calc(var(--foo) + 10px); }
 three { --foo: calc(var(--bar) + 10px); }

Cascade on custom properties

If a custom property is declared multiple times, the standard cascade rules help resolve it


    :root { --color: yellow; }
    div { --color: pink; }
    #alert { --color: blue; }
    * { color: var(--color); }


    I inherited blue from the root element!
    I got green set directly on me!
    
    While I got red set directly on me!
        I’m red too, because of inheritance!

Can I use?

Enable custom properties

Chrome

Enable the flag called Enable experimental Web Platform features going to:
chrome://flags/#enable-experimental-web-platform-features

Supported in next release 49

Firefox

Supported

IE

Not supported

Roadmap Priority: Low

Opera

Not supported

WebKit

Supporten in next release 9.3

But we can use the sintaxis today

PostCSS

Again

CSS extensions

W3C Editor's Draft

Custom selectors

W3C Editor's Draft

Sexy


@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading { /* styles for all headings */ }
:--heading + p { /* more styles */ }
/* etc */

But this is the future

Really?

postcss-custom-selectors

4CSS modules

The problem

The global scope

Workaround

We’ve worked around the issues of global scope with a series of naming conventions like OOCSS, SMACSS, BEM and SUIT, each providing a way for us to avoid naming collisions and emulate sane scoping rules.

The solution

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

Why?

Modular and reusable CSS!

No more conflicts.
Explicit dependencies.
No global scope.

It fits perfectly with React & Angular

The .foo class does not have to be unique on the project as it is not the actual class name that will be rendered.


/* style.css */

.foo {
  color: gold;
  width: 40em;
  margin: 0 auto;
}

 
import styles from './styles.css';

element.innerHTML = `
  CSS Modules are fun.
`;

._20WEds96_Ee1ra54-24ePy

This will generate something like this:


CSS Modules are fun.


._20WEds96_Ee1ra54-24ePy {
  color: gold;
  width: 40em;
  margin: 0 auto;
}

When using it through webpack with the default setup

Make it more readable

We can configure the class format in our Webpack config as a parameter to css-loader:


loaders: [
  ...
  {
    test: /\.css$/,
    loader: 'css?localIdentName=[name]__[local]___[hash:base64:5]'
  }
]

.foo class identifier from earlier would compile into this:


.MyComponent__foo___1rJwx { … }

Composition

composes: ;

It's possible to compose selectors.


/** theme.css **/

.background {
    background: rgba(0,0,0,.5);
}

/** MyComponent.css **/

.root {
  composes: background from "./theme.css"; /*or composes: background;*/
  margin: 10px;
}


div class="MyComponent__root _theme__background">

Setting up

Webpack

The css-loader has CSS Modules built-in. Simply activate it by using the ?modules flag.

css-modules/webpack-demo

Browserify

The plugin css-modulesify gives your Browserify build the ability to require a CSS file and compile it as a CSS Module.

css-modules/browserify-demo

JSPM

The experimental JSPM loader jspm-loader-css-modules adds CSS Modules support to SystemJS & JSPM

css-modules/jspm-demo

NodeJS

The css-modules-require-hook works similarly to the Browserify plugin, but patches NodeJS's require to interpret CSS files as CSS Modules. This gives complete flexibility in how the output is handled, ideal for server-side rendering.

or postCSS...

Doc

5 PostCSS

Is Sass dead?

A tool for transforming CSS with JavaScript

Based on plugins

Build you own environment

Currently, PostCSS has more than 200 plugins

Great Plugins

Autoprefixer

Add vendor prefixes to CSS rules using values from Can I Use.



:fullscreen {
}

:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}

cssnext

Use the latest CSS syntax today with cssnext



:root { 
    --red: #d33;
}
a { 
    &:hover {
        color: color(var(--red) a(54%));
    }
}

a:hover { 
    color: #dd3333;
    color: rgba(221, 51, 51, 0.54);
}

CSS Modules

Work CSS like independent components


                                
.name {
    color: gray;
}

.Logo__name__SVK0g {
    color: gray;
}

From Sass to PostCSS

Try it

It's possible

Sass postCSS

They can live together

What did I use?

reveal.js

postCSS

gulp

Attribution

SVG original by igalia.com

I am

5 gold nuggets

25 minutes

Are you a pioneer?

You'll enjoy ;)

1 Bye bye -prefixes-

The problem

The solution

CSS snapshot 2015

Responsible Implementation of CSS

Experimentation and Unstable Features

Why?

How can we use unstable features?

about:config /*Firefox*/

chrome://flags/ /*Chrome*/

Vendor-prefixes for closed enviroments

Proprietary & Non-standardized

Still we have to deal with the -prefix

Use autoprefixer

postCSS

2 Grid layout

Grid Terminology

Grid lines

Grid placement properties

Cell spanning

Negative line numbers

Named grid lines

Grid areas

Implicit names

Implicit grid

But for 5 min is enough!

the fr Unit

The new kid on the block

The repeat() function

Choose your favourite way

Can Iuse?

Enable CSS Grid Layout

Example in use

Doc.

3 Custom properties

Syntax

Resolving dependency Cycles

Cascade on custom properties

Can I use?

Enable custom properties

But we can use the sintaxis today

PostCSS

Again

CSS extensions

Custom selectors

Sexy

But this is the future

Really?

4CSS modules

The problem

The global scope

Workaround

The solution

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

Why?

Modular and reusable CSS!

It fits perfectly with React & Angular

._20WEds96_Ee1ra54-24ePy

Make it more readable

Composition

composes: ;

Setting up

Webpack

Browserify

JSPM

NodeJS

or postCSS...

Doc

5 PostCSS

Is Sass dead?

A tool for transforming CSS with JavaScript

Based on plugins

Build you own environment

Great Plugins

Autoprefixer

about:config /Firefox/

chrome://flags/ /Chrome/