Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Oooh shiny

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. Learn how they work and when to use them. For theme designers.

  • Login to see the comments

  • Be the first to like this

Oooh shiny

  1. 1. Oooh, Shiny! All the new CSS toys for WordPress Theme Development Shannon Smith WordCamp Toronto 2017
  2. 2. Shannon Smith www.chroni.ca @cafenoirdesign
  3. 3. I was going to take over the world, but then…
  4. 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. 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. 6. something shiny! • CSS Filters • Feature Queries • Native Mixins • Native Variables • Grid Layout • More!
  7. 7. CSS Filters
  8. 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. 9. A bit more shine! http://webdesignerwall.com/tutorials/9-simple-css-image-filters
  10. 10. Test drive? https://davidwalsh.name/demo/css-filters.php
  11. 11. Just the code! https://www.w3schools.com
  12. 12. Just the code! URL Primitive
  13. 13. Can we use it now? 89% support http://caniuse.com
  14. 14. Feature Queries
  15. 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. 16. Just the code! @supports operators not and or
  17. 17. Can we use it now? 92% support http://caniuse.com
  18. 18. Native Variables
  19. 19. Gimme something shiny! • Native Variables • Custom properties to reuse • Each replace a single variable https://www.w3.org/TR/css-variables/
  20. 20. Just the code! --custom-property-name var(—custom-property-name);
  21. 21. Can we use it now? 76% support http://caniuse.com
  22. 22. Native Mixins
  23. 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. 24. Just the code! :root --custom-property-name @apply
  25. 25. Can we use it now? 0% support http://caniuse.com
  26. 26. Grid Layout
  27. 27. 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. 28. Examples please! http://labs.jensimmons.com
  29. 29. And also… http://labs.jensimmons.com
  30. 30. And even… http://labs.jensimmons.com
  31. 31. Moar! http://labs.jensimmons.com
  32. 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. 33. Just the code! New Terminology https://www.sitepoint.com/introducing-the-css-grid-layout/
  34. 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. 35. Just the code! Setting up a simple grid https://css-tricks.com/snippets/css/complete-guide-grid/
  36. 36. Just the code! Placing items in a grid https://css-tricks.com/snippets/css/complete-guide-grid/
  37. 37. Just the code! Controlling stacking order https://www.w3.org/TR/css-grid-1/#grid-definition
  38. 38. Can we use it now? 72% support http://caniuse.com
  39. 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. 40. Colorfonts
  41. 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. 42. www.typewithpride.com
  43. 43. Just the code! • stylistic sets • font-feature-settings
  44. 44. Can we use it now? • Industry standard since early 2016 • But… Apple SBIX, Google CBDT, and Microsoft COLR • Microsoft Edge & Firefox • Degrade gracefully
  45. 45. www.colorfonts.wtf
  46. 46. Step 3 profit?
  47. 47. Better to illuminate than merely to shine, to deliver to others contemplated truths than merely to contemplate. -Thomas Aquinas
  48. 48. Shannon Smith www.chroni.ca @cafenoirdesign
  49. 49. vip.wordpress.com/jobs
  50. 50. Questions?

×