SlideShare a Scribd company logo
The Near Future of CSS
Rachel Andrew
Rachel Andrew
» https://rachelandrew.co.uk
» https://grabaperch.com
» @rachelandrew
» Invited Expert to the CSS Working Group
» Google Developer Expert
Box Alignment Level 3
This is the vertical centering
module!
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
The Near Future of CSS
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 3
Defines:
» justify-content
» align-content
» justify-self
» align-self
» justify-items
» align-items
The Near Future of CSS
.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
The Box Alignment spec defines
how these properties work in other
layout methods
.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/
Defining a simple grid
.cards {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
The fr unit
Defines a fraction unit - a fraction of the available space.
Works in a similar way to using flex-grow with a positive value.
The Near Future of CSS
Wrapped Flexbox Layout
.cards {
display:flex;
flex-wrap: wrap;
}
.card {
flex: 1 1 250px;
margin: 5px;
}
http://codepen.io/rachelandrew/pen/Gqvrwz
The Near Future of CSS
.cards {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
grid-gap: 10px;
}
http://codepen.io/rachelandrew/pen/VjzrgG
The Near Future of CSS
.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
The Near Future of CSS
.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";
}
The Near Future of CSS
The Near Future of CSS
Lots of Grid Examples
http://gridbyexample.com
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/
The Near Future of CSS
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
The Near Future of CSS
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
The Near Future of CSS
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/
The Near Future of CSS
CSS Feature Queries with
@supports
Like 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
The Near Future of CSS
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);
}
}
The Near Future of CSS
The Near Future of CSS
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
(CSS Variables!)
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
The Near Future of CSS
Getting Involved
CSS Specification discussion and
issues are on github
https://github.com/w3c/csswg-drafts
The Near Future of CSS
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 features
Directly request features where browsers give you the means to
do so.
Writing blog posts, presentations and demos also helps.
If we don’t ask we
don’t get
Make some noise for the new shiny!
Thank you!
@rachelandrew
https://cssgrid.me/melbjs

More Related Content

What's hot

An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Rachel Andrew
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley
 
Looking Back to Move Forward: Building the Modern Web
Looking Back to Move Forward: Building the Modern WebLooking Back to Move Forward: Building the Modern Web
Looking Back to Move Forward: Building the Modern Web
Rachel Andrew
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
Wynn Netherland
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe
 
Sass, Compass
Sass, CompassSass, Compass
Sass, Compass
Serg Diniovskiy
 
LESS
LESSLESS
LESS
Joe Seifi
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
FITC
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 
Landing Pages 101
Landing Pages 101Landing Pages 101
Landing Pages 101
Celeste Horgan
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
Mario Noble
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
Nathan Smith
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
拓樹 谷
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
Nicole Sullivan
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Adam Darowski
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
Russ Weakley
 
Sass
SassSass
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
Itai Koren
 

What's hot (20)

An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid LayoutAn Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
Looking Back to Move Forward: Building the Modern Web
Looking Back to Move Forward: Building the Modern WebLooking Back to Move Forward: Building the Modern Web
Looking Back to Move Forward: Building the Modern Web
 
Compass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS DeveloperCompass, Sass, and the Enlightened CSS Developer
Compass, Sass, and the Enlightened CSS Developer
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
Sass, Compass
Sass, CompassSass, Compass
Sass, Compass
 
LESS
LESSLESS
LESS
 
Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!Scalable and Modular CSS FTW!
Scalable and Modular CSS FTW!
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Landing Pages 101
Landing Pages 101Landing Pages 101
Landing Pages 101
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Sass
SassSass
Sass
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 

Similar to The Near Future of CSS

The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
Rachel Andrew
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
Rachel Andrew
 
ConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS LayoutConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS Layout
Rachel Andrew
 
Next-level CSS
Next-level CSSNext-level CSS
Next-level CSS
Rachel Andrew
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS Layout
Rachel Andrew
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS Layout
Rachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
Rachel Andrew
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Rachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
Rachel Andrew
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
Rachel Andrew
 
World of CSS Grid
World of CSS GridWorld of CSS Grid
World of CSS Grid
Elad Shechter
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
Rachel Andrew
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
Rachel Andrew
 
Sencha Touch
Sencha TouchSencha Touch
Sencha Touch
Craig Walker
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
Rachel Andrew
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
Rachel Andrew
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
Rachel Andrew
 

Similar to The Near Future of CSS (20)

The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
 
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS GridWhat I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
 
ConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS LayoutConFoo 2016: Making Sense of CSS Layout
ConFoo 2016: Making Sense of CSS Layout
 
Next-level CSS
Next-level CSSNext-level CSS
Next-level CSS
 
Fluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS LayoutFluent: Making Sense of the New CSS Layout
Fluent: Making Sense of the New CSS Layout
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS Layout
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJSStart Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 
World of CSS Grid
World of CSS GridWorld of CSS Grid
World of CSS Grid
 
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid LayoutAn Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
 
Sencha Touch
Sencha TouchSencha Touch
Sencha Touch
 
But what about old browsers?
But what about old browsers?But what about old browsers?
But what about old browsers?
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
 
DevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout todayDevFest Nantes - Start Using CSS Grid Layout today
DevFest Nantes - Start Using CSS Grid Layout today
 

More from Rachel Andrew

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
Rachel Andrew
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
Rachel Andrew
 
Graduating to Grid
Graduating to GridGraduating to Grid
Graduating to Grid
Rachel Andrew
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
Rachel Andrew
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
Rachel Andrew
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
Rachel Andrew
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
Rachel Andrew
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
Rachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
Rachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
Rachel Andrew
 
Where does CSS come from?
Where does CSS come from?Where does CSS come from?
Where does CSS come from?
Rachel Andrew
 
CSS Grid for html5j
CSS Grid for html5jCSS Grid for html5j
CSS Grid for html5j
Rachel Andrew
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real World
Rachel Andrew
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
Rachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
Rachel Andrew
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
 

More from Rachel Andrew (20)

All Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid LayoutAll Day Hey! Unlocking The Power of CSS Grid Layout
All Day Hey! Unlocking The Power of CSS Grid Layout
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
 
Graduating to Grid
Graduating to GridGraduating to Grid
Graduating to Grid
 
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
 
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
 
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJSSolving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp Keynote
 
New CSS Layout Meets the Real World
New CSS Layout Meets the Real WorldNew CSS Layout Meets the Real World
New CSS Layout Meets the Real World
 
An Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real WorldAn Event Apart DC - New CSS Layout meets the Real World
An Event Apart DC - New CSS Layout meets the Real World
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old Browsers
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!Frontend United: Start using CSS Grid Layout today!
Frontend United: Start using CSS Grid Layout today!
 
Where does CSS come from?
Where does CSS come from?Where does CSS come from?
Where does CSS come from?
 
CSS Grid for html5j
CSS Grid for html5jCSS Grid for html5j
CSS Grid for html5j
 
An Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real WorldAn Event Apart Seattle - New CSS Layout Meets the Real World
An Event Apart Seattle - New CSS Layout Meets the Real World
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 

Recently uploaded

Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 

Recently uploaded (20)

Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 

The Near Future of CSS

  • 1. The Near Future of CSS Rachel Andrew
  • 2. Rachel Andrew » https://rachelandrew.co.uk » https://grabaperch.com » @rachelandrew » Invited Expert to the CSS Working Group » Google Developer Expert
  • 3. Box Alignment Level 3 This is the vertical centering module!
  • 4. 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
  • 6. 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/
  • 7. CSS Box Alignment Level 3 Defines: » justify-content » align-content » justify-self » align-self » justify-items » align-items
  • 9. .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
  • 10. The Box Alignment spec defines how these properties work in other layout methods
  • 11. .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
  • 12. 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/
  • 13. Defining a simple grid .cards { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }
  • 14. The fr unit Defines a fraction unit - a fraction of the available space. Works in a similar way to using flex-grow with a positive value.
  • 16. Wrapped Flexbox Layout .cards { display:flex; flex-wrap: wrap; } .card { flex: 1 1 250px; margin: 5px; } http://codepen.io/rachelandrew/pen/Gqvrwz
  • 18. .cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 10px; } http://codepen.io/rachelandrew/pen/VjzrgG
  • 20. .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
  • 22. .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; }
  • 23. .cards { display:grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-template-areas: "side1 middle1 middle1 side3" "side2 ....... ....... side4"; }
  • 26. Lots of Grid Examples http://gridbyexample.com
  • 27. 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/
  • 29. 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
  • 31. 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
  • 33. 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/
  • 35. CSS Feature Queries with @supports Like 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
  • 37. Does my browser support display: flex? @supports (display: flex) { .has-flex { display: block; background-color: #0084AD; color: #fff; } }
  • 38. Does my browser support display: grid? @supports (display: grid) { .has-grid { display: block; background-color: #284C6D; color: #fff; } }
  • 39. 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/
  • 40. .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); } }
  • 43. 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
  • 45. 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/
  • 46. :root { --primary: blue; --secondary: orange; } h1 { color: var(--primary); } http://codepen.io/rachelandrew/pen/qNXpEZ
  • 47. 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
  • 49. Getting Involved CSS Specification discussion and issues are on github https://github.com/w3c/csswg-drafts
  • 51. 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
  • 52. Request features Directly request features where browsers give you the means to do so. Writing blog posts, presentations and demos also helps.
  • 53. If we don’t ask we don’t get Make some noise for the new shiny!