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.

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