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

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

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

Presented at WordCamp Ottawa on July 22, 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

July 22, 2017

More Decks by Shannon Smith

Other Decks in Technology


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

    Development Shannon Smith WordCamp Ottawa 2017
  2. …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/
  3. 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
  4. Gimme something shiny! • CSS Filters • Feature Queries •

    Native Mixins • Native Variables • Grid Layout • More!
  5. 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/
  6. 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
  7. Gimme something shiny! • Native Variables • Custom properties to

    reuse • Each replace a single variable https://www.w3.org/TR/css-variables/
  8. 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/
  9. 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/
  10. 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
  11. 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
  12. 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
  13. 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
  14. Can we use it now? • Industry standard since early

    2016 • But… Apple SBIX, Google CBDT, and Microsoft COLR • Microsoft Edge & Firefox • Degrade gracefully
  15. Better to illuminate than merely to shine, to deliver to

    others contemplated truths than merely to contemplate. -Thomas Aquinas