01.06.2017 Webinale Berlin

cssnext & »CSS Level 4«

Jonas Hellwig
kulturbanause.de
@_kulturbanause

Jonas Hellwig

Front-End-Designer @ kulturbanause

Autor, Dozent

Was erwartet euch?

Überblick über CSS-Entwicklung

Farben

Media Queries

Variablen

Bilder

Fonts

Tooling & Workflow

CSS Level 4?

Gemeinsame Spezifikation bis 2.1

Aufteilung in Module

Module werden in Leveln weiterentwickelt

Module in »CSS3« in Level 3 eingeflossen

CSS4 gibt es nicht. Es gibt CSS Module in Level 4

CSS Module in Level 4

Selectors

Media Queries

Images & Replaced Content

Backgrounds & Borders

Color

Text, Fonts usw …

Moderne Techniken in früheren Leveln

Shapes

Flexbox

Grid Layout

Snap Points

Motion Path

…

Color

#rrggbbaa

Browser Support

rebeccapurple

In Memoriam

CSS Reset

Browser Support

color-mod

 div {
   color: color(red hue(180deg));
 }

 div {
   background: color(green alpha(10%) ); 
   background: color(green hue(180deg) ); 
   background: color(green saturation(10%) ); 
   background: color(green lightness(10%) ); 
   background: color(green blackness(20%) ); 
   background: color(green whiteness(20%) ); 
   background: color(green shade(20%) ); 
   background: color(green tint(20%) ); 
   background: color(green blend(blue 50%) ); 
 }

Visualisierung

gray()

 div {
   background: gray(50%);
 }

Visualisierung

Variables / Custom Properties

currentColor()

Browser-Support

var() Syntax

Browser-Support

Sassmeister

@apply Syntax

 :root {
   --SET-MIT-EIGENSCHAFTEN: {
     EIGENSCHAFT: WERT;
     EIGENSCHAFT: WERT;
     EIGENSCHAFT: WERT;
  };
 }

 body {
   @apply --SET-MIT-EIGENSCHAFTEN;
 }

Browser-Support

Playground, Sassmeister

CSS vs. Preprocessor

CSS Variablen kaskadieren

 :root {
   --color:red;
 }

 div {
  background: var(--color);
 }

 div:hover {
  --color:lime;
 }

Sassmeister

CSS Variablen in MQs

 :root {
   --innenabstand: 1em;
 }

 .grid {
   padding:var(--innenabstand);
 }

 @media screen and (min-width: 600px) {
   :root {
     --innenabstand: 1.5em;
   }
 }

 @media screen and (min-width: 1400px) 
   :root {
     --innenabstand: 2em;
   }
 }

CSS Variablen sind dynamisch

Sie können zur Laufzeit verändert werden.

Inline-Styling

Eigene Eigenschaften

calc()

Media Queries

Veraltete Media Queries

Interaction Type Media Queries

pointer / any-pointer

hover, any-hover

Demo

Browser-Support

Custom Media Queries

 @custom-media --medium (min-width: 800px);

 @media (--medium) {
  body {
    font-size:1.1em;
  }
 }

Playground

Media Query Ranges

 @custom-media --small (max-width: 800px);
 @custom-media --medium (width > 800px) and (width < 1000px);
 @custom-media --large (min-width: 1000px);

 .box {
   @media (--small) {
     width:100%;
   }
   @media (--medium) {
     width:50%;
   }
   @media (--large) {
     width:33%;
   }
 }

Playground

Images

conic-gradient()

 div {
  background: conic-gradient(red, lime);
 }

					

Canary Demo

JS Demo

image-set()

 .div {
   background-image: image-set(
      url(bild.png) 1x,
      url(bild@2x.png) 2x
   );
 }

					

Demo

Browser Support

element()

IDs können als Hintergrund genutzt werden

 .element {
   background: element(#id);
 }

					

Demo

Browser Support

cssnext

cssnext

Plugin für PostCSS

Ermöglicht es, zukünftige CSS Features schon heute zu nutzen

Website

Features

cssnext Setup

Node.js installieren

NPM installieren

Gulp installieren

gulpfile o.ä. erstellen

gulp-postcss installieren

postcss-cssnext installieren

gulpfile.js

 var gulp = require('gulp');
 var postcss = require('gulp-postcss');
 var cssnext = require("postcss-cssnext");

 gulp.task('default', function () {
    return gulp.src('./src/*.css')
        .pipe(postcss([cssnext()]))
        .pipe(gulp.dest('./dest'));
 });
					

cssnext Nachteile

Funktionsumfang unterscheidet sich von Sass & Co.

Ggf. ändern sich die CSS-Spezifikationen

Vielen Dank!

Jonas Hellwig

kulturbanause.de

blog.kulturbanause.de

@_kulturbanause