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


  1. Oooh, Shiny! All the new CSS toys for WordPress Theme

    Development Shannon Smith WordCamp Montréal 2017
  2. Shannon Smith www.chroni.ca @cafenoirdesign

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

  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/
  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
  6. Gimme something shiny! • CSS Filters • Feature Queries •

    Native Mixins • Native Variables • Grid Layout • More!
  7. CSS Filters

  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/
  9. A bit more shine! http://webdesignerwall.com/tutorials/9-simple-css-image-filters

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

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

  12. Just the code! URL Primitive

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

  14. Feature Queries

  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
  16. Just the code! @supports operators not and or

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

  18. Native Variables

  19. Gimme something shiny! • Native Variables • Custom properties to

    reuse • Each replace a single variable https://www.w3.org/TR/css-variables/
  20. Just the code! --custom-property-name var(—custom-property-name);

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

  22. Native Mixins

  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/
  24. Just the code! :root --custom-property-name @apply

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

  26. Grid Layout

  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/
  28. Examples please! http://labs.jensimmons.com

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

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

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

  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
  33. Just the code! New Terminology https://www.sitepoint.com/introducing-the-css-grid-layout/

  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
  35. Just the code! Setting up a simple grid https://css-tricks.com/snippets/css/complete-guide-grid/

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

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

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

  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
  40. Colorfonts

  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
  42. www.typewithpride.com

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

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

    2016 • But… Apple SBIX, Google CBDT, and Microsoft COLR • Microsoft Edge & Firefox • Degrade gracefully
  46. www.colorfonts.wtf

  47. Questions?

  48. Better to illuminate than merely to shine, to deliver to

    others contemplated truths than merely to contemplate. -Thomas Aquinas
  49. Shannon Smith www.chroni.ca @cafenoirdesign