Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Don't underestimate CSS (WebElement #30)

Don't underestimate CSS (WebElement #30)

Vladimír Kriška

December 11, 2014
Tweet

More Decks by Vladimír Kriška

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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/

    View Slide

  7. 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 :)

    View Slide

  8. CSS without HTML

    View Slide

  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

    View Slide

  10. Stealing data from DOM

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  18. • localstorage
    • other types of caching

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  22. • opentype features
    • kerning
    • justification
    • hyphenation

    View Slide

  23. • questions?
    Thanks

    View Slide