Oooh shiny

Editor's Notes

1. 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.
2. Shannon Smith has been working as an open source web developer for over 10 years. She support things like making the web accessible for everyone, using open source software, and helping non-profits with online community organizing. Also hiker, sewist, poet, and mother of four. Automattic VIP Team vip.wordpress.com
3. CSS Snapshot 2017 - January 2017 (https://www.w3.org/TR/CSS/)When the first CSS specification was published, all of CSS was contained in one document that defined CSS Level 1. CSS Level 2 was defined also by a single, multi-chapter document. However for CSS beyond Level 2, the CSS Working Group chose to adopt a modular approach, where each module defines a part of CSS, rather than to define a single monolithic specification. This breaks the specification into more manageable chunks and allows more immediate, incremental improvement to CSS. This profile includes only specifications that we consider stable and for which we have enough implementation experience that we are sure of that stability.
4. Table of Specification: Completed, Stable, Testing, Refining, Revising, Exploring, Abandoned (Marquee anyone?) Status: Working Draft to Recommended
5. You can use multiple filters in one declaration Filter Effects Module Level 1
6. may need vendor prefixes can use on hover The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example: filter: url(svg-url#element-id)
7. may need vendor prefixes can use on hover The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example: filter: url(svg-url#element-id)
8. Roll your own! The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Example: filter: url(svg-url#element-id)
9. CSS Conditional Rules Module Level 3 like media queries associates a block of statements with a supports condition browser compatibilityThe ‘@supports’ rule is at risk
10. The supports condition consists of one or more name-value pairs combined by conjunctions (and), disjunctions (or), and/or negations (not). Precedence of operators can be defined with parentheses.
11. CSS Custom Properties for Cascading Variables Module Level 1 Candidate Recommendation CSS variables allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers.
12. property name is replacing only the value color scheme
13. Candidate Recommendation
14. So don’t need to repeat the same block of CSSLike in use in Sass or LESSNative CSS mixins are currently an editors' draft, but also have a working implementation in Chrome.
15. :root pseudo-class1. define a custom property set / —custom-property-name
16. Abandoned but looking for a replacement @extend replace preprocessors
17. CSS Grid Layout Module Level 1 Candidate Recommendation This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
18. CSS Grid Layout Module Level 1 Candidate Recommendation This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
19. CSS Grid Layout Module Level 1 Candidate Recommendation This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
20. CSS Grid Layout Module Level 1 Candidate Recommendation This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
21. CSS Grid Layout Module Level 1 Candidate Recommendation This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.
22. All columns take the size of one fraction (fr) of the container width
23. Don’t forget lines!
24. All columns take the size of one fraction (fr) of the container width
25. All columns take the size of one fraction (fr) of the container widtha fraction of the free space in the grid (using the fr unit)
26. Determines a grid item's location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends. Items can overlap each other. You can use z-index to control their stacking order.
27. Items can overlap each other. You can use z-index to control their stacking order.
28. Popsky by Igor Petrovic Appl and Google formats are Bitmap!
29. All columns take the size of one fraction (fr) of the container width
30. Scalable Vector Graphics (SVG) OneLine Bold by Roman Kaer
31. Gilbert by Type With Pride
32. Trajan Color Concept Font by Adobe
33. Popsky by Igor Petrovic Appl and Google formats are Bitmap!