Don't underestimate CSS (WebElement #30)

Transcript

1. Don’t underestimate CSS Vladimír Kriška (@ujovlado) WebElement #30
2. CSS yesterday • no animations • no preprocessors • no? … nothing, just simple stylesheet
3. CSS today • CSS3 • animations, transformations • styling everything • Simpsons in CSS :) • preprocessors • optimising, minifing
4. How to stay tuned • aneb. “Jak se z toho nedosrat” • use it when you need it • go to conferences (alone)
5. 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
6. 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/
7. CSS without HTML • simple thing - just send link to CSS file in headers • Link: <css-without-html.css>;rel=stylesheet • style your document (body, body::after, …) • most useful for trolling :)
8. CSS without HTML
9. • 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
10. Stealing data from DOM
11. • talk: Styling & Animating SVGs with CSS • highlights: • transformations and animations • embedding SVGs + padding hack • adaptive SVGs Sara Soueidan
12. • Most interesting thing from whole presentation • You can make SVGs responsive (with standard media queries) - referring to their viewport Adaptive SVGs
13. • talk: Lessons learned from building a CSS minifier • highlights: • parsing CSS, regexp or parser? parser! • minifying CSS • tools Stoyan Stefanov
14. • talk: Lessons learned from building a CSS minifier • highlights: • parsing CSS, regexp or parser? parser! • minifying CSS • tools Use a parser
15. • 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
16. • double declarations: #fac = #ffaacc • in selectors, in media • unit conversions: 1000ms = 1s • shorter keyframe names
17. • 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
18. • localstorage • other types of caching
19. • 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
20. • 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
21. • 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
22. • opentype features • kerning • justification • hyphenation
23. • questions? Thanks