Slide 1

Slide 1 text

Don’t underestimate CSS Vladimír Kriška (@ujovlado) WebElement #30

Slide 2

Slide 2 text

CSS yesterday • no animations • no preprocessors • no? … nothing, just simple stylesheet

Slide 3

Slide 3 text

CSS today • CSS3 • animations, transformations • styling everything • Simpsons in CSS :) • preprocessors • optimising, minifing

Slide 4

Slide 4 text

How to stay tuned • aneb. “Jak se z toho nedosrat” • use it when you need it • go to conferences (alone)

Slide 5

Slide 5 text

Best of CSSCONF • CSSCONF.eu, many interesting talks: • things you didn’t know about CSS • SVGs (one of the best) • building CSS minifier • CSS grid system (native!) • CSS and the critical path • CSS performance tooling • the state of web typography

Slide 6

Slide 6 text

Mathias Bynens • talk: 3.14 things I didn’t know about CSS • highlights: • CSS without HTML • Unicode in CSS (♥) + crazy classes and IDs • CSS for evil - stealing data from DOM • Useful tools: https://mothereff.in/

Slide 7

Slide 7 text

CSS without HTML • simple thing - just send link to CSS file in headers • Link: ;rel=stylesheet • style your document (body, body::after, …) • most useful for trolling :)

Slide 8

Slide 8 text

CSS without HTML

Slide 9

Slide 9 text

• class=“” . { color: brown } • id=“.my-class” #\.my\-class { color: red } • class=“:hover” .\3A hover { color: blue } • id=“[attr=value]” #\[attr\=value\] { color: red } • class=“{}” .\{\} { color: blue } Unicode in CSS

Slide 10

Slide 10 text

Stealing data from DOM

Slide 11

Slide 11 text

• talk: Styling & Animating SVGs with CSS • highlights: • transformations and animations • embedding SVGs + padding hack • adaptive SVGs Sara Soueidan

Slide 12

Slide 12 text

• Most interesting thing from whole presentation • You can make SVGs responsive (with standard media queries) - referring to their viewport Adaptive SVGs

Slide 13

Slide 13 text

• talk: Lessons learned from building a CSS minifier • highlights: • parsing CSS, regexp or parser? parser! • minifying CSS • tools Stoyan Stefanov

Slide 14

Slide 14 text

• talk: Lessons learned from building a CSS minifier • highlights: • parsing CSS, regexp or parser? parser! • minifying CSS • tools Use a parser

Slide 15

Slide 15 text

• space, comments, … pretty easy • colors: #fff, #ffffff, white, … but shorter is better • hsl(), rgba(), cmyk() • numbers: 0px = 0; 0% = 0; 0.12 = .12… • not useful for angles (0deg) and keyframes (0%) • quotes: url(“”), @charset, @import, fonts Minifying CSS

Slide 16

Slide 16 text

• double declarations: #fac = #ffaacc • in selectors, in media • unit conversions: 1000ms = 1s • shorter keyframe names

Slide 17

Slide 17 text

• talk: CSS and the critical path • highlights: • next.guardian.com (6k devices, …) • 1000ms is critical (300-1000) • CSS is blocking rendering - get CSS down as soon as possible • CSS critical path Patrick Hamann

Slide 18

Slide 18 text

• localstorage • other types of caching

Slide 19

Slide 19 text

• talk: CSS Performance Tooling • highlights: • jsconf.eu site optimisation (troll, 4.5M gif?) • 27s mob., 12.1s cable, • 3 tiers (base, get fast & stay fast & nice to haves) • measure (speed index) • performance budget Addy Osmani

Slide 20

Slide 20 text

• performance budget: • page load 1000ms • speed index under 1000 • 200ms server response time • average page size is 1.8M = we’re fat • minify CSS, images and HTML • unCSS & critical path

Slide 21

Slide 21 text

• talk: The State of Web Typography • highlights: • web is about typography (or not?) • font-style * font-weight * font-stretch • truetype, opentype, woff • “font family recognised, not yet loaded, will be applied after downloading” - our nightmare Bram Stein

Slide 22

Slide 22 text

• opentype features • kerning • justification • hyphenation

Slide 23

Slide 23 text

• questions? Thanks