Advertisement
Oooh shiny
Oct. 4, 2017•0 likes•1,208 views
1 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
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.
wcto2017Follow
Advertisement
Oooh shiny
- Oooh, Shiny! All the new CSS toys for WordPress Theme Development Shannon Smith WordCamp Toronto 2017
- Shannon Smith www.chroni.ca @cafenoirdesign
- I was going to take over the world, but then…
- …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/
- 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
- something shiny! • CSS Filters • Feature Queries • Native Mixins • Native Variables • Grid Layout • More!
- CSS Filters
- 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/
- A bit more shine! http://webdesignerwall.com/tutorials/9-simple-css-image-filters
- Test drive? https://davidwalsh.name/demo/css-filters.php
- Just the code! https://www.w3schools.com
- Just the code! URL Primitive
- Can we use it now? 89% support http://caniuse.com
- Feature Queries
- 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
- Just the code! @supports operators not and or
- Can we use it now? 92% support http://caniuse.com
- Native Variables
- Gimme something shiny! • Native Variables • Custom properties to reuse • Each replace a single variable https://www.w3.org/TR/css-variables/
- Just the code! --custom-property-name var(—custom-property-name);
- Can we use it now? 76% support http://caniuse.com
- Native Mixins
- 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/
- Just the code! :root --custom-property-name @apply
- Can we use it now? 0% support http://caniuse.com
- Grid Layout
- 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/
- Examples please! http://labs.jensimmons.com
- And also… http://labs.jensimmons.com
- And even… http://labs.jensimmons.com
- Moar! http://labs.jensimmons.com
- 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
- Just the code! New Terminology https://www.sitepoint.com/introducing-the-css-grid-layout/
- 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
- Just the code! Setting up a simple grid https://css-tricks.com/snippets/css/complete-guide-grid/
- Just the code! Placing items in a grid https://css-tricks.com/snippets/css/complete-guide-grid/
- Just the code! Controlling stacking order https://www.w3.org/TR/css-grid-1/#grid-definition
- Can we use it now? 72% support http://caniuse.com
- 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
- Colorfonts
- 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
- www.typewithpride.com
- Just the code! • stylistic sets • font-feature-settings
- Can we use it now? • Industry standard since early 2016 • But… Apple SBIX, Google CBDT, and Microsoft COLR • Microsoft Edge & Firefox • Degrade gracefully
- www.colorfonts.wtf
- Step 3 profit?
- Better to illuminate than merely to shine, to deliver to others contemplated truths than merely to contemplate. -Thomas Aquinas
- Shannon Smith www.chroni.ca @cafenoirdesign
- vip.wordpress.com/jobs
- Questions?
Editor's Notes
- 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 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
- 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.
- Table of Specification: Completed, Stable, Testing, Refining, Revising, Exploring, Abandoned (Marquee anyone?) Status: Working Draft to Recommended
- You can use multiple filters in one declaration Filter Effects Module Level 1
- 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)
- 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)
- 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)
- CSS Conditional Rules Module Level 3 like media queries associates a block of statements with a supports condition browser compatibility The ‘@supports’ rule is at risk
- 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.
- 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.
- property name is replacing only the value color scheme
- Candidate Recommendation
- So don’t need to repeat the same block of CSS Like in use in Sass or LESS Native CSS mixins are currently an editors' draft, but also have a working implementation in Chrome.
- :root pseudo-class 1. define a custom property set / —custom-property-name
- Abandoned but looking for a replacement @extend replace preprocessors
- 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.
- 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.
- 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.
- 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.
- 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.
- All columns take the size of one fraction (fr) of the container width
- Don’t forget lines!
- All columns take the size of one fraction (fr) of the container width
- All columns take the size of one fraction (fr) of the container width a fraction of the free space in the grid (using the fr unit)
- 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.
- Items can overlap each other. You can use z-index to control their stacking order.
- Popsky by Igor Petrovic Appl and Google formats are Bitmap!
- All columns take the size of one fraction (fr) of the container width
- Scalable Vector Graphics (SVG) OneLine Bold by Roman Kaer
- Gilbert by Type With Pride
- Trajan Color Concept Font by Adobe
- Popsky by Igor Petrovic Appl and Google formats are Bitmap!
Advertisement