01.06.2017 Webinale Berlin
Jonas Hellwig
kulturbanause.de
@_kulturbanause
Front-End-Designer @ kulturbanause
Autor, Dozent
Überblick über CSS-Entwicklung
Farben
Media Queries
Variablen
Bilder
Fonts
Tooling & Workflow
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
Selectors
Media Queries
Images & Replaced Content
Backgrounds & Borders
Color
Text, Fonts usw …
Shapes
Flexbox
Grid Layout
Snap Points
Motion Path
…
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%) );
}
div {
background: gray(50%);
}
:root {
--SET-MIT-EIGENSCHAFTEN: {
EIGENSCHAFT: WERT;
EIGENSCHAFT: WERT;
EIGENSCHAFT: WERT;
};
}
body {
@apply --SET-MIT-EIGENSCHAFTEN;
}
:root {
--color:red;
}
div {
background: var(--color);
}
div:hover {
--color:lime;
}
: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;
}
}
Sie können zur Laufzeit verändert werden.
device-width
device-height
device-aspect-ratio
pointer / any-pointer
hover, any-hover
@custom-media --medium (min-width: 800px);
@media (--medium) {
body {
font-size:1.1em;
}
}
@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%;
}
}
div {
background: conic-gradient(red, lime);
}
.div {
background-image: image-set(
url(bild.png) 1x,
url(bild@2x.png) 2x
);
}
IDs können als Hintergrund genutzt werden
.element {
background: element(#id);
}
Plugin für PostCSS
Ermöglicht es, zukünftige CSS Features schon heute zu nutzen
Node.js installieren
NPM installieren
Gulp installieren
gulpfile o.ä. erstellen
gulp-postcss installieren
postcss-cssnext installieren
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'));
});
Funktionsumfang unterscheidet sich von Sass & Co.
Ggf. ändern sich die CSS-Spezifikationen
kulturbanause.de
blog.kulturbanause.de
@_kulturbanause