The Near Future of CSS
-
Upload
rachel-andrew -
Category
Technology
-
view
64.417 -
download
0
Transcript of The Near Future of CSS
Rachel Andrew» https://rachelandrew.co.uk
» https://grabaperch.com
» @rachelandrew
» Invited Expert to the CSS Working Group
» Google Developer Expert
Centre the content of .box.box { display: flex; align-items: center; justify-content: center;}
<div class="box"> <img alt="balloon" src="square-balloon.jpg"></div>
http://codepen.io/rachelandrew/pen/XKaZWm
CSS Box Alignment Level 3"The box alignment properties in CSS are a set of 6 properties that control alignment of boxes within other boxes."
-- https://drafts.csswg.org/css-align/
CSS Box Alignment Level 3Defines:
» justify-content
» align-content
» justify-self
» align-self
» justify-items
» align-items
.wrapper { display: flex; }.wrapper li { min-width: 1%; flex: 1 0 25%;}.wrapper li:nth-child(2) { align-self: center;}.wrapper li:nth-child(3) { align-self: flex-start;}.wrapper li:nth-child(4) { align-self: flex-end;}
http://codepen.io/rachelandrew/pen/RavbmN
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}.wrapper li { min-width: 1%;}.wrapper li:nth-child(2) { align-self: center;}.wrapper li:nth-child(3) { align-self: start;}.wrapper li:nth-child(4) { align-self: end;}
http://codepen.io/rachelandrew/pen/jqdNoL
CSS Grid Layout"Unlike Flexbox, however, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions."
-- https://drafts.csswg.org/css-grid/
The fr unitDefines a fraction unit - a fraction of the available space.
Works in a similar way to using flex-grow with a positive value.
Wrapped Flexbox Layout.cards { display:flex; flex-wrap: wrap;}
.card { flex: 1 1 250px; margin: 5px;}
http://codepen.io/rachelandrew/pen/Gqvrwz
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 10px;}
http://codepen.io/rachelandrew/pen/VjzrgG
.cards { display:grid; grid-template-columns: repeat(12,1fr); grid-gap: 10px;}
.card:nth-child(1) { grid-column: 1 / 4; }
.card:nth-child(2) { grid-column: 1 / 4; grid-row: 2; }
.card:nth-child(3) { grid-column: 9 / 13; grid-row: 2; }
.card:nth-child(4) { grid-column: 4 / 10; }
.card:nth-child(5) { grid-column: 10 / 13; }
http://codepen.io/rachelandrew/pen/XKaZwa
.card:nth-child(1) { grid-area: side1; }
.card:nth-child(2) { grid-area: side2; }
.card:nth-child(3) { grid-area: side3; }
.card:nth-child(4) { grid-area: middle1; }
.card:nth-child(5) { grid-area: side4; }
.cards { display:grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-template-areas: "side1 middle1 middle1 side3" "side2 ....... ....... side4";}
CSS Shapes"CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box."
-- https://drafts.csswg.org/css-shapes/
A simple circle.balloon { float: left; width: 429px; shape-outside: circle(50%);}
<div class="box"> <img class="balloon" src="round-balloon.png" alt="balloon"> <p>...</p></div>
http://codepen.io/rachelandrew/pen/KrvyQq
Floating generated content to use Shapes.box::before { content: ""; display: block; float: left; width: 429px; height: 409px; shape-outside: circle(50%);}
http://codepen.io/rachelandrew/pen/mErqxy
Shapes and clip-path.balloon { float: right; width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px);}
http://codepen.io/rachelandrew/pen/xOLPLa/
CSS Feature Queries with @supportsLike Modernizr but in native CSS.
"The ‘@supports’ rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs."
-- https://www.w3.org/TR/css3-conditional/#at-supports
Does my browser support display: flex?@supports (display: flex) { .has-flex { display: block; background-color: #0084AD; color: #fff; } }
Does my browser support display: grid?@supports (display: grid) { .has-grid { display: block; background-color: #284C6D; color: #fff; } }
Test more than 1 thing@supports ((display: grid) and (shape-outside: circle())) { .has-grid-shapes { display: block; background-color: #666; color: #fff; } }
http://codepen.io/rachelandrew/pen/RRkWKX/
.balloon { border: 1px solid #999; padding: 2px;}
@supports ((shape-outside: ellipse()) and ((clip-path: ellipse()) or (-webkit-clip-path:ellipse()))) { .balloon { border: none; padding: 0; float: right; width: 640px; min-width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px); -webkit-clip-path: ellipse(28% 50% at 460px); clip-path: ellipse(28% 50% at 460px); }}
Using feature queries» Write the css for older browsers
» Inside the feature query reset those properties
» Inside the feature query write your new CSS
http://codepen.io/rachelandrew/pen/vKJmXR
CSS Custom Properties"This module introduces a family of custom author-defined properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and the var() function, which allow an author to then use those values in other properties elsewhere in the document."
-- https://drafts.csswg.org/css-variables/
:root { --primary: blue; --secondary: orange;}
h1 { color: var(--primary);}
http://codepen.io/rachelandrew/pen/qNXpEZ
Testing for custom properties:root { --primary: blue; --secondary: orange;}
@supports (--primary: blue) { h1 { color: var(--primary); }
h2 { color: var(--secondary); }}
http://codepen.io/rachelandrew/pen/mErpZA
Getting InvolvedCSS Specification discussion and
issues are on githubhttps://github.com/w3c/csswg-drafts
Raise issues with browsers» Mozilla https://bugzilla.mozilla.org/
» Edge https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/
» Chrome https://bugs.chromium.org/p/chromium/issues/list
Request featuresDirectly request features where browsers give you the means to do so.
Writing blog posts, presentations and demos also helps.
Thank you!@rachelandrewhttps://cssgrid.me/melbjs