SlideShare una empresa de Scribd logo
1 de 54
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

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 LayoutRachel 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 WebRachel 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 DeveloperWynn 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 CompassClaudina Sarahe
 
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 PrototypingEven Wu
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
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 tryingJames Cryer
 
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 IVDirk 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
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 

La actualidad más candente (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 a 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 GridRachel 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 LayoutRachel 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 LayoutRachel 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 LayoutRachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel 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 - RuhrJSRachel 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 thatRachel 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 & FriendsRachel 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 - DevFest17Rachel Andrew
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFRachel Andrew
 
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 LayoutRachel Andrew
 
Laying out the future
Laying out the futureLaying out the future
Laying out the futureRachel Andrew
 
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 LayoutRachel 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 todayRachel Andrew
 

Similar a 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
 

Más de 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 LayoutRachel 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 LayoutRachel 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 LayoutRachel Andrew
 
Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS LayoutRachel 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 & FriendsRachel 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 - WEBU17Rachel 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 - NordicJSRachel Andrew
 
Web Summer Camp Keynote
Web Summer Camp KeynoteWeb Summer Camp Keynote
Web Summer Camp KeynoteRachel 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 WorldRachel 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 WorldRachel Andrew
 
Perch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersPerch, Patterns and Old Browsers
Perch, Patterns and Old BrowsersRachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersRachel 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
 
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 WorldRachel 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 TodayRachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxRachel Andrew
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid LayoutRachel Andrew
 

Más de 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
 

Último

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Último (20)

Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

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!