SlideShare uma empresa Scribd logo
1 de 54
Baixar para ler offline
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
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
.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.
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";
}
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/
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
@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
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
(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
Getting Involved
CSS Specification discussion and
issues are on github
https://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 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

Mais conteúdo relacionado

Mais procurados

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
 

Mais procurados (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
 

Semelhante 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
 

Semelhante 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
 

Mais 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
 

Mais 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

Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxNeo4j
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandIES VE
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentationyogeshlabana357357
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform EngineeringMarcus Vechiato
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jNeo4j
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024Stephen Perrenod
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessUXDXConf
 

Último (20)

Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Your enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4jYour enemies use GenAI too - staying ahead of fraud with Neo4j
Your enemies use GenAI too - staying ahead of fraud with Neo4j
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 

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
  • 5.
  • 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
  • 8.
  • 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.
  • 15.
  • 16. Wrapped Flexbox Layout .cards { display:flex; flex-wrap: wrap; } .card { flex: 1 1 250px; margin: 5px; } http://codepen.io/rachelandrew/pen/Gqvrwz
  • 17.
  • 18. .cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 10px; } http://codepen.io/rachelandrew/pen/VjzrgG
  • 19.
  • 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
  • 21.
  • 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"; }
  • 24.
  • 25.
  • 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/
  • 28.
  • 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
  • 30.
  • 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
  • 32.
  • 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/
  • 34.
  • 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
  • 36.
  • 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); } }
  • 41.
  • 42.
  • 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
  • 48.
  • 49. Getting Involved CSS Specification discussion and issues are on github https://github.com/w3c/csswg-drafts
  • 50.
  • 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!