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

V.2 Oooh, Shiny! All the new CSS toys for WordPress Theme Development

V.2 Oooh, Shiny! All the new CSS toys for WordPress Theme Development

Presented at WordCamp Montréal on August 13, 2017

Check out all newest things that CSS can bring to WordPress theme development: CSS Filters, Feature Queries, Native Mixins, Grid Layout, Native Variables, and more. The W3C’s CSS Working Group is introducing a ton of new CSS modules in 2017. Learn how they work and when to use them. We’ll look at real examples that you can start using right now.

Shannon Smith

August 13, 2017
Tweet

More Decks by Shannon Smith

Other Decks in Technology

Transcript

  1. Oooh, Shiny!
    All the new CSS toys
    for WordPress Theme Development
    Shannon Smith
    WordCamp Montréal 2017

    View Slide

  2. Shannon Smith
    www.chroni.ca
    @cafenoirdesign

    View Slide

  3. I was going to take over the world,
    but then…

    View Slide

  4. …New CSS Modules!
    • W3C Working Group CSS
    Snapshot 2017

    • There is no CSS Level 4

    • New modular approach

    • 6 interoperable, 10 in testing
    https://www.w3.org/TR/CSS/

    View Slide

  5. I'm Giving Her all she's got Captain! ....
    I don't think she'll hold together, sir!
    https://www.w3.org/Style/CSS/current-work

    View Slide

  6. Gimme something shiny!
    • CSS Filters

    • Feature Queries

    • Native Mixins

    • Native Variables

    • Grid Layout

    • More!

    View Slide

  7. CSS Filters

    View Slide

  8. Gimme something shiny!
    • CSS filter property
    • Like Photoshop filters for the browser
    • filter requires a function (primitive) and a value
    • Syntax


    filter: none | blur() | brightness() | contrast()
    | drop-shadow() | grayscale() | hue-rotate() |
    invert() | opacity() | saturate() | sepia() |
    url();
    https://www.w3.org/TR/filter-effects-1/

    View Slide

  9. A bit more shine!
    http://webdesignerwall.com/tutorials/9-simple-css-image-filters

    View Slide

  10. Test drive?
    https://davidwalsh.name/demo/css-filters.php

    View Slide

  11. Just the code!
    https://www.w3schools.com

    View Slide

  12. Just the code! URL Primitive

    View Slide

  13. Can we use it now?
    89% support http://caniuse.com

    View Slide

  14. Feature Queries

    View Slide

  15. Gimme something shiny!
    • Feature queries
    • A way to turn on or off blocks of CSS
    • Graceful degradation
    • Candidate Recommendation
    https://www.w3.org/TR/css3-conditional/#at-supports

    View Slide

  16. Just the code!
    @supports
    operators
    not
    and
    or

    View Slide

  17. Can we use it now?
    92% support http://caniuse.com

    View Slide

  18. Native Variables

    View Slide

  19. Gimme something shiny!
    • Native Variables
    • Custom properties to reuse
    • Each replace a single variable
    https://www.w3.org/TR/css-variables/

    View Slide

  20. Just the code!
    --custom-property-name
    var(—custom-property-name);

    View Slide

  21. Can we use it now?
    72% support http://caniuse.com

    View Slide

  22. Native Mixins

    View Slide

  23. Gimme something shiny!
    • Native Mixins
    • Takes a set of declarations and inlines them in another
    style rule
    • Experimental
    https://tabatkins.github.io/specs/css-apply-rule/

    View Slide

  24. Just the code!
    :root
    --custom-property-name
    @apply

    View Slide

  25. Can we use it now?
    0% support http://caniuse.com

    View Slide

  26. Grid Layout

    View Slide

  27. Gimme something shiny!
    • Grid Layout

    • The grid layout doesn’t depend
    on the position of elements in
    the markup

    • Overlap is permitted

    • Positioning in arbitrary slots
    https://www.w3.org/TR/css-grid-1/

    View Slide

  28. Examples please!
    http://labs.jensimmons.com

    View Slide

  29. And also…
    http://labs.jensimmons.com

    View Slide

  30. And even…
    http://labs.jensimmons.com

    View Slide

  31. Moar!
    http://labs.jensimmons.com

    View Slide

  32. Just the code! Getting Started
    • Define a container element as a grid with 

    display: grid
    • Set the column and row sizes with 

    grid-template-columns and grid-template-rows
    • Place its child elements into the grid with 

    grid-column and grid-row

    View Slide

  33. Just the code! New Terminology
    https://www.sitepoint.com/introducing-the-css-grid-layout/

    View Slide

  34. Just the code! New Properties
    Properties for the Grid Item
    • grid-column-start
    • grid-column-end
    • grid-row-start
    • grid-row-end
    • grid-column
    • grid-row
    • grid-area
    • justify-self
    • align-self 

    Properties for the Grid Container
    • display
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • grid-template
    • grid-column-gap
    • grid-row-gap
    • grid-gap
    • justify-items
    • align-items
    • justify-content
    • align-content
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow
    • grid

    View Slide

  35. Just the code! Setting up a simple grid
    https://css-tricks.com/snippets/css/complete-guide-grid/

    View Slide

  36. Just the code! Placing items in a grid
    https://css-tricks.com/snippets/css/complete-guide-grid/

    View Slide

  37. Just the code! Controlling stacking order
    https://www.w3.org/TR/css-grid-1/#grid-definition

    View Slide

  38. Can we use it now?
    71% support http://caniuse.com

    View Slide

  39. Learn more
    • The Experimental Layout Lab of Jen Simmons

    http://labs.jensimmons.com
    • Rachel Andrews’ Grid By Example

    https://gridbyexample.com
    • CSS-Tricks’ A Complete Guide to Grid

    https://css-tricks.com/snippets/css/complete-guide-grid
    • CSS Grid Layout specification

    https://www.w3.org/TR/css-grid-1/#grid-definition

    View Slide

  40. Colorfonts

    View Slide

  41. Wait, don’t we already
    have that?
    • Colorfonts / Chromatic Fonts

    • OpenType-SVG Font

    • Vector fonts

    • They bring multiple colors,
    shades, textures and
    transparency to type

    View Slide

  42. www.typewithpride.com

    View Slide

  43. Just the code!
    • stylistic sets
    • font-feature-settings

    View Slide

  44. View Slide

  45. Can we use it now?
    • Industry standard since early
    2016

    • But… Apple SBIX, Google
    CBDT, and Microsoft COLR

    • Microsoft Edge & Firefox

    • Degrade gracefully

    View Slide

  46. www.colorfonts.wtf

    View Slide

  47. Questions?

    View Slide

  48. Better to illuminate than merely to
    shine, to deliver to others contemplated
    truths than merely to contemplate.
    -Thomas Aquinas

    View Slide

  49. Shannon Smith
    www.chroni.ca
    @cafenoirdesign

    View Slide