Don't underestimate CSS (WebElement #30)

Don't underestimate CSS (WebElement #30)

1633975316e340c5f24414567a3f3679?s=128

Vladimír Kriška

December 11, 2014
Tweet

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