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
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
 https://www.w3.org/TR/css-grid-1/#grid-definition
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
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