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

by Shannon Smith

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Shannon Smith www.chroni.ca @cafenoirdesign

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

…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/

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Gimme something shiny! • CSS Filters • Feature Queries • Native Mixins • Native Variables • Grid Layout • More!

Slide 7

Slide 7 text

CSS Filters

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Test drive? https://davidwalsh.name/demo/css-ﬁlters.php

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Just the code! URL Primitive

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Feature Queries

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Just the code! @supports operators not and or

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Native Variables

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Native Mixins

Slide 23

Slide 23 text

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/

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Grid Layout

Slide 27

Slide 27 text

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/

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Moar! http://labs.jensimmons.com

Slide 32

Slide 32 text

Just the code! Getting Started • Deﬁne 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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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 speciﬁcation  https://www.w3.org/TR/css-grid-1/#grid-deﬁnition

Slide 40

Slide 40 text

Colorfonts

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

www.typewithpride.com

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Can we use it now? • Industry standard since early 2016 • But… Apple SBIX, Google CBDT, and Microsoft COLR • Microsoft Edge & Firefox • Degrade gracefully

Slide 46

Slide 46 text

www.colorfonts.wtf

Slide 47

Slide 47 text

Questions?

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Shannon Smith www.chroni.ca @cafenoirdesign