SlideShare a Scribd company logo
But what about old
browsers!?!?!
Rachel Andrew, Fronteers 2015
https://www.flickr.com/photos/nossreh/5510993121/
But what about old browsers?
The CSS Anthology, p.357
“It is possible to create the effect of
rounded corners using a number of
stacked, mostly 1-pixel-high <div>s.”
Ah 2004.
Simpler times.
<div id="box">
<div class="roundborder c1"></div>
<div class="roundborder c2"></div>
<div class="roundborder c3"></div>
<div class="roundborder c4"></div>
<div class="roundborder c5"></div>
<div class="roundborder c6"></div>
<div class="roundborder c7"></div>
<div class="roundborder c8"></div>
<div class="roundborder c9"></div>
<div class="roundborder content">content here</div>
<div class="roundborder c9"></div>
<div class="roundborder c8"></div>
<div class="roundborder c7"></div>
<div class="roundborder c6"></div>
<div class="roundborder c5"></div>
<div class="roundborder c4"></div>
<div class="roundborder c3"></div>
<div class="roundborder c2"></div>
<div class="roundborder c1"></div>
</div>
Don’t try this at home. .roundborder {
height: 1px;
overflow: hidden;
background-color: #B0C4DE;
border-right: 1px solid #33527B;
border-left: 1px solid #33527B;
}
.c1 {
margin: 0 12px 0 12px;
border: none;
background-color: #33527B;
}
.c2 { margin: 0 9px; border-width: 0 3px; }
.c3 { margin: 0 7px; border-width: 0 2px; }
.c4 { margin: 0 6px 0 6px; }
.c5 { margin: 0 5px 0 5px; }
.c6 { margin: 0 4px 0 4px; }
.c7 { margin: 0 3px 0 3px; }
.c8 { margin: 0 2px 0 2px; height: 2px; }
.c9 { margin: 0 1px 0 1px; height: 3px; }
.content { height: auto; padding: 0 15px; }
Past Rachel.
“This is probably not an effect that
you’d use for many small boxes, as it
involves a considerable amount of
extra markup.”
The usual 2004 rounded
corner technique.
<div class="rndbox">
<div class="rndtop"><img
src="topleft.gif" alt="" width="30"
height="30" /></div>
<p>Content here.</p>
<div class="rndbottom"><img
src="bottomleft.gif" alt="" width="30"
height="30" /></div>
</div>
If you find these slides on
the web. Do not do this.
Unless it is actually the
past.
.rndbox {
background: #C6D9EA;
width: 300px;
}
.rndtop {
background: url(topright.gif); no-repeat
right top;
}
.rndbottom {
background: url(bottomright.gif); no-
repeat right top;
}
.rndbox p {
margin: 0 8px;
}
Some things change.
Some stay the same.
The cost of taming layout methods
• Developer hours spent learning non-obvious
concepts.
• Compromises in terms of document semantics in
order to achieve responsive layouts.
• Needing to lean on frameworks to help with
complex maths.
• Adding markup to create grids
• Using preprocessors to abstract layout hacks
Our great hopes for layout
• Flexbox
• CSS Grid
• Box Alignment
The new CSS for Layout
• Items in our layouts understand themselves as
part of an overall layout.
• True separation of document source order and
visual display.
• Precise control of alignment - horizontally and
vertically.
• Responsive and flexible by default.
Items in our layouts understand
themselves as part of a complete
layout.
http://alistapart.com/article/fauxcolumns
http://colintoh.com/blog/display-table-anti-hero
Flexbox
Full height columns with
flexbox, taking advantage
of default alignment values.
.wrapper {
display: flex;
}
.sidebar {
flex: 1 1 30%;
}
.content {
flex: 1 1 70%;
}
Grid Layout
Full height columns in CSS
Grid Layout.
.wrapper {
display: grid;
grid-template-columns: 30% 70%;
}
.sidebar {
grid-column: 1;
}
.content {
grid-column: 2;
}
Separation of source and display
Flexbox
The flex-direction property
can take a value of row to
display things as a row or
column to display them as
a column.
nav ul{
display: flex;
justify-content: space-between;
flex-direction: row;
}
Flexbox
The visual order can be
switched using row-
reverse or column-reverse.
nav ul{
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
Flexbox
Adding display: flex to our
container element causes
the items to display flexibly
in a row.
.wrapper {
display: flex;
}
Flexbox
The order property means
we can change the order of
flex items using CSS.
This does not change their
source order.
li:nth-child(1) {
order: 3;
}
li:nth-child(2) {
order: 1;
}
li:nth-child(3) {
order: 4;
}
li:nth-child(4) {
order: 2;
}
Grid Layout
I have created a grid on
my wrapper element.
The grid has 3 equal
width columns.
Rows will be created as
required as we position
items into them.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Grid Layout
I am positioning my
elements using CSS Grid
Layout line-based
positioning.
Setting a column and a
row line using the grid-
column and grid-row
properties.
li:nth-child(1) {
grid-column: 3 / 4 ;
grid-row: 2 / 3;
}
li:nth-child(2) {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
li:nth-child(3) {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
li:nth-child(4) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
But what about old browsers?
CSS Grid automatic placement
http://www.w3.org/TR/2015/WD-css-grid-1-20150917/#grid-auto-
flow-property
https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-
automatic-placement-and-packing-modes/
But what about old browsers?
Grid Layout
When using automatic
placement we can create
rules for items in our
document - for example
displaying portrait and
landscape images
differently.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}
.landscape {
grid-column-end: span 2;
}
grid-auto-flow
The default value of grid-auto-flow is
sparse. Grid will move forward planning
items skipping cells if items do not fit .
Grid Layout
With a dense packing
mode grid will move items
out of source order to
backfill spaces.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-auto-flow: dense;
}
.landscape {
grid-column-end: span 2;
}
grid-auto-flow
With grid-auto-flow dense items are
displayed out of source order. Grid
backfills any suitable gaps.
With great power comes
responsibility.
Power and responsibility
• Good = creating the most accessible source
order and using Grid or Flexbox to get the
optimal display for each device.
• Bad = using Grid or Flexbox as an excuse to
forget about the source.
• Terrible - stripping out semantic elements to
make everything a grid or flex item.
https://drafts.csswg.org/css-flexbox/#order-accessibility
Authors must use order only for visual,
not logical, reordering of content. Style
sheets that use order to perform
logical reordering are non-conforming.
https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/
Control of alignment
CSS Box Alignment Module Level 3
“This module contains the features of CSS relating to the
alignment of boxes within their containers in the various CSS box
layout models: block layout, table layout, flex layout, and grid
layout.” - https://drafts.csswg.org/css-align/
Vertically centre ALL THE THINGS!
Distributed alignment
justify-content and align-content properties.
Values: space-between, space-around, stretch, space-evenly
Flexbox
The justify-content
property is set to space-
between.
The items at each end are
placed against the
container and the
remaining space
distributed evenly.
nav ul{
display: flex;
justify-content: space-between;
flex-direction: row;
}
Flexbox
The justify-content
property is set to space-
around.
The items are evenly
distributed in the container
with a half size space at
each end.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
}
Default alignment
Used by the justify-items and align-items properties.
The align-items and justify-items properties set the default align-
self and justify-self behavior of the items contained by the
element.
Flexbox
The value of align-items is
stretch by default.
If I add extra text in one
navigation point the others
all take the same height.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: stretch;
}
Flexbox
If I set the value of align-
items to center then we
get vertical centring.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
Flexbox
If flex-direction is column
and I set the value of align-
items to center then we
get horizontal centring.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
Self alignment
justify-self and align-self properties.
The justify-self and align-self properties control alignment of the
box within its containing block.
Flexbox
You can use the align-self
and justify-self properties
to target individual flex
items.
In this example I have set
the group to centre, but
the third item to stretch.
nav ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
nav li:nth-child(3) {
align-self: stretch;
}
Box alignment in CSS Grid Layout
Grid Layout
Creating a grid with the
align-items property set
to centre.
All items will be centered
inside their grid area.
.wrapper {
display: grid;
align-items: center;
grid-template-columns: repeat(5, 150px 10px) 150px;
grid-template-rows: 150px 10px 150px 10px 150px 10px 150px;
}
.a {
grid-column: 1 / 4;
grid-row: 1 / 4;
}
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
}
.c {
grid-column: 1 / 4;
grid-row: 5 / 10;
}
.d {
grid-column: 5 / 8;
grid-row: 5 / 10;
}
.e {
grid-column: 9 / 12;
grid-row: 1 / 10;
}
http://gridbyexample.com/examples/#example24
Grid Layout
Creating a grid with the
justify-items property set
to centre.
All items will be centered
horizontally inside their
grid area.
.wrapper {
display: grid;
justify-items: center;
grid-template-columns: repeat(5, 150px 10px) 150px;
grid-template-rows: 150px 10px 150px 10px 150px 10px
150px;
}
.a {
grid-column: 1 / 4;
grid-row: 1 / 4;
}
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
}
.c {
grid-column: 1 / 4;
grid-row: 5 / 10;
}
.d {
grid-column: 5 / 8;
grid-row: 5 / 10;
}
.e {
grid-column: 9 / 12;
grid-row: 1 / 10;
}
http://gridbyexample.com/examples/#example25
Grid Layout
As with flexbox we can
use align-self and justify-
self to target individual
grid items.
.a {
grid-column: 1 / 4;
grid-row: 1 / 4;
align-self: stretch;
}
.b {
grid-column: 5 / 8;
grid-row: 1 / 4;
align-self: end;
}
.c {
grid-column: 1 / 4;
grid-row: 5 / 10;
align-self: start;
}
.d {
grid-column: 5 / 8;
grid-row: 5 / 10;
align-self: center;
}
.e {
grid-column: 9 / 12;
grid-row: 1 / 10;
}
http://gridbyexample.com/examples/#example26
Responsive by default
Ethan Marcotte, Fluid Grids
“… every aspect of the grid—and the
elements laid upon it—can be
expressed as a proportion relative to
its container.”
target ÷ context = result
h1 {
margin-left: 14.575%; /* 144px / 988px = 0.14575 */
width: 70.85%; /* 700px / 988px = 0.7085 */
}
Flexbox
The most simple flexbox
example demonstrates
the inherent flexibility.
The items will be
displayed as a row, with
equal space between each
item.
nav ul{
display: flex;
justify-content: space-between;
}
The flex property
• flex-grow - add space
• flex-shrink - remove space
• flex-basis - the initial size before any growing or
shrinking
https://drafts.csswg.org/css-flexbox/#flex-components
Authors are encouraged to control
flexibility using the flex shorthand rather
than with its longhand properties
directly, as the shorthand correctly
resets any unspecified components to
accommodate common uses.
Flexbox
flex: 1 1 200px;
flex-grow: 1
flex-shrink: 1;
flex-basis: 200px;
The initial width of our
box is 200 pixels,
however it can grow
larger and shrink smaller
than 200 pixels.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
But what about old browsers?
Flexbox
flex: 1 1 200px;
flex-grow: 1
flex-shrink: 1;
flex-basis: 200px;
If we allow the flex items
to wrap we can see how
flex-basis works by
dragging the window
smaller.
.boxes {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
But what about old browsers?
Flexbox
flex: 0 1 200px;
flex-grow: 0
flex-shrink: 1;
flex-basis: 200px;
The initial width of our
box is 200 pixels, it can
shrink smaller than 200
pixels but may not get
larger.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 0 1 200px;
min-width: 1px;
}
But what about old browsers?
Flexbox
flex: 1 1 200px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
.box3 has been set to
flex: 0 1 200px;
so cannot grow.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
.box3 {
flex: 0 1 200px;
}
But what about old browsers?
Flexbox
If we set box3 to

flex-grow: 2
This box will be assigned
twice of much of the
available free space after
we have reached the 200
pixel initial width.
.boxes {
display: flex;
justify-content: space-around;
}
.box {
flex: 1 1 200px;
min-width: 1px;
}
.box3 {
2 1 200px;
}
But what about old browsers?
http://madebymike.com.au/demos/flexbox-tester/
The CSS Grid Layout fr unit
Grid Layout
I am creating three grid
column tracks, all 1fr in
width.
This gives me three equally
sized column tracks.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Grid Layout
If I create the first column
as 600 pixels and then
have two 1fr columns the
600 pixel track is removed
from the available space
and the remainder is
distributed equally
between the two columns.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 1fr;
}
Grid Layout
With a 600 pixel column, a
1fr and a 3fr column. The
600 pixels is removed from
the available space then
the remaining space is
divided by 4.
The 1fr column gets 25%
and the 3fr column 75%.
.wrapper {
display: grid;
grid-template-columns: 600px 1fr 3fr;
}
http://alistapart.com/article/holygrail
Three columns. One fixed-width
sidebar for your navigation, another
for, say, your Google Ads or your Flickr
photos—and, as in a fancy truffle, a
liquid center for the real substance.
Grid Layout
CSS Grid “Holy Grail”
using grid-template-
areas.
//css
.header { grid-area: header;}
.footer { grid-area: footer;}
.side1 { grid-area: nav;}
.side2 { grid-area: ads;}
.content { grid-area: content;}
.wrapper {
display: grid;
grid-template-columns: 300px 20px 1fr 20px 300px;
grid-template-rows: auto;
grid-template-areas:
"header header header header header"
"nav ...... content ...... ads"
"footer footer footer footer footer"
;
}
//html
<div class="wrapper">
<header class="header">This is the header</header>
<article class="content"></article>
<div class="side1"></div>
<div class="side2"></div>
<footer class="footer"></div>
</div>
But what about old browsers?
CSS Anthology, 2004
Q. Is it a bad thing to use effects that
don’t work in some browsers?
2004 Rachel
“Users [of IE] might see square corners
instead of rounded ones […] but they’ll
be able to use the site just as well as
their Mozilla-wielding counterparts.”
It’s one thing to have no rounded
corners. Quite another to have no
layout in an older browser.
http://positioniseverything.net/explorer.html
We need to think about feature
support differently in a world of
evergreen browsers.
Evergreen browsers mean we can
enhance with newer techniques.
Over time our users see the site
incrementally improve.
CSS Grid Layout
• Early implementation in IE10, 11 and current Edge
• Implementation of most of the current spec
behind a flag in Blink
• Prefixed in Webkit Nightlies
• Partial implementation in Firefox Nightlies
• Edge have updating to current spec as ‘High
Priority’ on the backlog
Start with small UI elements
• Your layout doesn’t have to be all flexbox or
nothing.
• Build your layout using the methods that work
for your audience profile.
• Finesse using more modern methods
Grid Layout
Display a dl in two
columns using Grid.
dt elements alway start
on the left, dd on the
right.
@media (min-width: 550px) {
.grid-dl {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.grid-dl dt {
grid-column-start: 1;
}
.grid-dl dd {
grid-column-start: 2;
}
.grid-dl dt+dd {
border-top: 2px solid #ccc;
}
}
http://codepen.io/rachelandrew/pen/wKgePy
http://codepen.io/rachelandrew/pen/wKgePy
Flexbox in the real world
Zoe M. Gillenwater - Enhancing Responsiveness With Flexbox
https://www.youtube.com/watch?v=_98SE8WUvLk
Check your stats before making
assumptions about support.
http://get.gaug.es/
Separate desktop and mobile
statistics - your mobile users may
well have far more capability.
Use modern methods for
prototyping and benefit from rapid
design in the browser.
Take an interest in early stage
specifications in order to feed back
to the process. Have your say.
http://gridbyexample.com
Thank you
Slides & Resources: 

https://rachelandrew.co.uk/presentations/modern-css-layout
http://csslayout.news - sign up for my weekly CSS Layout email
—
@rachelandrew
me@rachelandrew.co.uk
—
https://rachelandrew.co.uk
https://grabaperch.com

More Related Content

What's hot

CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
Rachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
Rachel Andrew
 
Grids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid LayoutGrids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid Layout
Simone Lelli
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
Rachel Andrew
 
Building calloutswithoutwsdl2apex
Building calloutswithoutwsdl2apexBuilding calloutswithoutwsdl2apex
Building calloutswithoutwsdl2apex
Ming Yuan
 
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
Igalia
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
Rachel Andrew
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016
Rachel Andrew
 
CSS Grid
CSS GridCSS Grid
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
 
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
 
CSS Grid Layout Introduction
CSS Grid Layout IntroductionCSS Grid Layout Introduction
CSS Grid Layout Introduction
Ajara I. Pfannenschmidt
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
Rachel Andrew
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
Rachel Andrew
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
Rachel Andrew
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
Jason Yingling
 
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
 

What's hot (20)

CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Grids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid LayoutGrids of Tomorrow: CSS Grid Layout
Grids of Tomorrow: CSS Grid Layout
 
Introduction to CSS Grid Layout
Introduction to CSS Grid LayoutIntroduction to CSS Grid Layout
Introduction to CSS Grid Layout
 
Building calloutswithoutwsdl2apex
Building calloutswithoutwsdl2apexBuilding calloutswithoutwsdl2apex
Building calloutswithoutwsdl2apex
 
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
CSS Grid Layout. Implementation status and roadmap (Webkit Contributors Meeti...
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid LayoutTalk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
 
CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016CSS Grid Layout: An Event Apart Boston 2016
CSS Grid Layout: An Event Apart Boston 2016
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
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!
 
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
 
CSS Grid Layout Introduction
CSS Grid Layout IntroductionCSS Grid Layout Introduction
CSS Grid Layout Introduction
 
AEA Chicago CSS Grid Layout
AEA Chicago CSS Grid LayoutAEA Chicago CSS Grid Layout
AEA Chicago CSS Grid Layout
 
Laying out the future
Laying out the futureLaying out the future
Laying out the future
 
CSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS LayoutCSS Conf Budapest - New CSS Layout
CSS Conf Budapest - New CSS Layout
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 
Grid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SFGrid and Flexbox - Smashing Conf SF
Grid and Flexbox - Smashing Conf SF
 

Similar to But what about old browsers?

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 Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the Job
Rachel Andrew
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
Rachel Andrew
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
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
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
Boris Paillard
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
Rachel Andrew
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
Rachel Andrew
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
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
 
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
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
Rachel Andrew
 
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
 
Next-level CSS
Next-level CSSNext-level CSS
Next-level CSS
Rachel Andrew
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
Rachel Andrew
 
Better Layouts with Flexbox + CSS Grids
Better Layouts with Flexbox + CSS GridsBetter Layouts with Flexbox + CSS Grids
Better Layouts with Flexbox + CSS Grids
Samantha Provenza
 
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
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS 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
 
2D Page Layout
2D Page Layout2D Page Layout
2D Page Layout
Unfold UI
 

Similar to But what about old browsers? (20)

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 Right Layout Tool for the Job
The Right Layout Tool for the JobThe Right Layout Tool for the Job
The Right Layout Tool for the Job
 
Confoo: The New CSS Layout
Confoo: The New CSS LayoutConfoo: The New CSS Layout
Confoo: The New CSS Layout
 
Laracon Online: Grid and Flexbox
Laracon Online: Grid and FlexboxLaracon Online: Grid and Flexbox
Laracon Online: Grid and Flexbox
 
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
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
CSSConf.asia - Laying out the future
CSSConf.asia - Laying out the futureCSSConf.asia - Laying out the future
CSSConf.asia - Laying out the future
 
Evergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsersEvergreen websites for Evergreen browsers
Evergreen websites for Evergreen browsers
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
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
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
 
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?
 
Next-level CSS
Next-level CSSNext-level CSS
Next-level CSS
 
CSS Grid Layout
CSS Grid LayoutCSS Grid Layout
CSS Grid Layout
 
Better Layouts with Flexbox + CSS Grids
Better Layouts with Flexbox + CSS GridsBetter Layouts with Flexbox + CSS Grids
Better Layouts with Flexbox + CSS Grids
 
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
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS 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
 
2D Page Layout
2D Page Layout2D Page Layout
2D Page Layout
 

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
 
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
 
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
 
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
 
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
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
Rachel Andrew
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NE
Rachel Andrew
 

More from Rachel Andrew (19)

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
 
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
 
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
 
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
 
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
 
Introducing CSS Grid Layout
Introducing CSS Grid LayoutIntroducing CSS Grid Layout
Introducing CSS Grid Layout
 
CSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NECSS Grid Layout for Frontend NE
CSS Grid Layout for Frontend NE
 

Recently uploaded

Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
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
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
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
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
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
 
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
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
“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
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
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
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 

Recently uploaded (20)

Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
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
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
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
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
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
 
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
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
“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...
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
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
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 

But what about old browsers?

  • 1. But what about old browsers!?!?! Rachel Andrew, Fronteers 2015 https://www.flickr.com/photos/nossreh/5510993121/
  • 3. The CSS Anthology, p.357 “It is possible to create the effect of rounded corners using a number of stacked, mostly 1-pixel-high <div>s.”
  • 4. Ah 2004. Simpler times. <div id="box"> <div class="roundborder c1"></div> <div class="roundborder c2"></div> <div class="roundborder c3"></div> <div class="roundborder c4"></div> <div class="roundborder c5"></div> <div class="roundborder c6"></div> <div class="roundborder c7"></div> <div class="roundborder c8"></div> <div class="roundborder c9"></div> <div class="roundborder content">content here</div> <div class="roundborder c9"></div> <div class="roundborder c8"></div> <div class="roundborder c7"></div> <div class="roundborder c6"></div> <div class="roundborder c5"></div> <div class="roundborder c4"></div> <div class="roundborder c3"></div> <div class="roundborder c2"></div> <div class="roundborder c1"></div> </div>
  • 5. Don’t try this at home. .roundborder { height: 1px; overflow: hidden; background-color: #B0C4DE; border-right: 1px solid #33527B; border-left: 1px solid #33527B; } .c1 { margin: 0 12px 0 12px; border: none; background-color: #33527B; } .c2 { margin: 0 9px; border-width: 0 3px; } .c3 { margin: 0 7px; border-width: 0 2px; } .c4 { margin: 0 6px 0 6px; } .c5 { margin: 0 5px 0 5px; } .c6 { margin: 0 4px 0 4px; } .c7 { margin: 0 3px 0 3px; } .c8 { margin: 0 2px 0 2px; height: 2px; } .c9 { margin: 0 1px 0 1px; height: 3px; } .content { height: auto; padding: 0 15px; }
  • 6. Past Rachel. “This is probably not an effect that you’d use for many small boxes, as it involves a considerable amount of extra markup.”
  • 7. The usual 2004 rounded corner technique. <div class="rndbox"> <div class="rndtop"><img src="topleft.gif" alt="" width="30" height="30" /></div> <p>Content here.</p> <div class="rndbottom"><img src="bottomleft.gif" alt="" width="30" height="30" /></div> </div>
  • 8. If you find these slides on the web. Do not do this. Unless it is actually the past. .rndbox { background: #C6D9EA; width: 300px; } .rndtop { background: url(topright.gif); no-repeat right top; } .rndbottom { background: url(bottomright.gif); no- repeat right top; } .rndbox p { margin: 0 8px; }
  • 9. Some things change. Some stay the same.
  • 10. The cost of taming layout methods • Developer hours spent learning non-obvious concepts. • Compromises in terms of document semantics in order to achieve responsive layouts. • Needing to lean on frameworks to help with complex maths. • Adding markup to create grids • Using preprocessors to abstract layout hacks
  • 11. Our great hopes for layout • Flexbox • CSS Grid • Box Alignment
  • 12. The new CSS for Layout • Items in our layouts understand themselves as part of an overall layout. • True separation of document source order and visual display. • Precise control of alignment - horizontally and vertically. • Responsive and flexible by default.
  • 13. Items in our layouts understand themselves as part of a complete layout.
  • 16. Flexbox Full height columns with flexbox, taking advantage of default alignment values. .wrapper { display: flex; } .sidebar { flex: 1 1 30%; } .content { flex: 1 1 70%; }
  • 17. Grid Layout Full height columns in CSS Grid Layout. .wrapper { display: grid; grid-template-columns: 30% 70%; } .sidebar { grid-column: 1; } .content { grid-column: 2; }
  • 18. Separation of source and display
  • 19. Flexbox The flex-direction property can take a value of row to display things as a row or column to display them as a column. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
  • 20. Flexbox The visual order can be switched using row- reverse or column-reverse. nav ul{ display: flex; justify-content: space-between; flex-direction: row-reverse; }
  • 21. Flexbox Adding display: flex to our container element causes the items to display flexibly in a row. .wrapper { display: flex; }
  • 22. Flexbox The order property means we can change the order of flex items using CSS. This does not change their source order. li:nth-child(1) { order: 3; } li:nth-child(2) { order: 1; } li:nth-child(3) { order: 4; } li:nth-child(4) { order: 2; }
  • 23. Grid Layout I have created a grid on my wrapper element. The grid has 3 equal width columns. Rows will be created as required as we position items into them. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  • 24. Grid Layout I am positioning my elements using CSS Grid Layout line-based positioning. Setting a column and a row line using the grid- column and grid-row properties. li:nth-child(1) { grid-column: 3 / 4 ; grid-row: 2 / 3; } li:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; } li:nth-child(3) { grid-column: 1 / 2; grid-row: 1 / 2; } li:nth-child(4) { grid-column: 2 / 3; grid-row: 1 / 2; }
  • 26. CSS Grid automatic placement http://www.w3.org/TR/2015/WD-css-grid-1-20150917/#grid-auto- flow-property https://rachelandrew.co.uk/archives/2015/04/14/grid-layout- automatic-placement-and-packing-modes/
  • 28. Grid Layout When using automatic placement we can create rules for items in our document - for example displaying portrait and landscape images differently. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; } .landscape { grid-column-end: span 2; }
  • 29. grid-auto-flow The default value of grid-auto-flow is sparse. Grid will move forward planning items skipping cells if items do not fit .
  • 30. Grid Layout With a dense packing mode grid will move items out of source order to backfill spaces. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-auto-flow: dense; } .landscape { grid-column-end: span 2; }
  • 31. grid-auto-flow With grid-auto-flow dense items are displayed out of source order. Grid backfills any suitable gaps.
  • 32. With great power comes responsibility.
  • 33. Power and responsibility • Good = creating the most accessible source order and using Grid or Flexbox to get the optimal display for each device. • Bad = using Grid or Flexbox as an excuse to forget about the source. • Terrible - stripping out semantic elements to make everything a grid or flex item.
  • 34. https://drafts.csswg.org/css-flexbox/#order-accessibility Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.
  • 37. CSS Box Alignment Module Level 3 “This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.” - https://drafts.csswg.org/css-align/
  • 38. Vertically centre ALL THE THINGS!
  • 39. Distributed alignment justify-content and align-content properties. Values: space-between, space-around, stretch, space-evenly
  • 40. Flexbox The justify-content property is set to space- between. The items at each end are placed against the container and the remaining space distributed evenly. nav ul{ display: flex; justify-content: space-between; flex-direction: row; }
  • 41. Flexbox The justify-content property is set to space- around. The items are evenly distributed in the container with a half size space at each end. nav ul{ display: flex; justify-content: space-around; flex-direction: row; }
  • 42. Default alignment Used by the justify-items and align-items properties. The align-items and justify-items properties set the default align- self and justify-self behavior of the items contained by the element.
  • 43. Flexbox The value of align-items is stretch by default. If I add extra text in one navigation point the others all take the same height. nav ul{ display: flex; justify-content: space-around; flex-direction: row; align-items: stretch; }
  • 44. Flexbox If I set the value of align- items to center then we get vertical centring. nav ul{ display: flex; justify-content: space-around; flex-direction: row; align-items: center; }
  • 45. Flexbox If flex-direction is column and I set the value of align- items to center then we get horizontal centring. nav ul{ display: flex; justify-content: space-around; flex-direction: column; align-items: center; }
  • 46. Self alignment justify-self and align-self properties. The justify-self and align-self properties control alignment of the box within its containing block.
  • 47. Flexbox You can use the align-self and justify-self properties to target individual flex items. In this example I have set the group to centre, but the third item to stretch. nav ul{ display: flex; justify-content: space-around; flex-direction: row; align-items: center; } nav li:nth-child(3) { align-self: stretch; }
  • 48. Box alignment in CSS Grid Layout
  • 49. Grid Layout Creating a grid with the align-items property set to centre. All items will be centered inside their grid area. .wrapper { display: grid; align-items: center; grid-template-columns: repeat(5, 150px 10px) 150px; grid-template-rows: 150px 10px 150px 10px 150px 10px 150px; } .a { grid-column: 1 / 4; grid-row: 1 / 4; } .b { grid-column: 5 / 8; grid-row: 1 / 4; } .c { grid-column: 1 / 4; grid-row: 5 / 10; } .d { grid-column: 5 / 8; grid-row: 5 / 10; } .e { grid-column: 9 / 12; grid-row: 1 / 10; }
  • 51. Grid Layout Creating a grid with the justify-items property set to centre. All items will be centered horizontally inside their grid area. .wrapper { display: grid; justify-items: center; grid-template-columns: repeat(5, 150px 10px) 150px; grid-template-rows: 150px 10px 150px 10px 150px 10px 150px; } .a { grid-column: 1 / 4; grid-row: 1 / 4; } .b { grid-column: 5 / 8; grid-row: 1 / 4; } .c { grid-column: 1 / 4; grid-row: 5 / 10; } .d { grid-column: 5 / 8; grid-row: 5 / 10; } .e { grid-column: 9 / 12; grid-row: 1 / 10; }
  • 53. Grid Layout As with flexbox we can use align-self and justify- self to target individual grid items. .a { grid-column: 1 / 4; grid-row: 1 / 4; align-self: stretch; } .b { grid-column: 5 / 8; grid-row: 1 / 4; align-self: end; } .c { grid-column: 1 / 4; grid-row: 5 / 10; align-self: start; } .d { grid-column: 5 / 8; grid-row: 5 / 10; align-self: center; } .e { grid-column: 9 / 12; grid-row: 1 / 10; }
  • 56. Ethan Marcotte, Fluid Grids “… every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container.”
  • 57. target ÷ context = result h1 { margin-left: 14.575%; /* 144px / 988px = 0.14575 */ width: 70.85%; /* 700px / 988px = 0.7085 */ }
  • 58. Flexbox The most simple flexbox example demonstrates the inherent flexibility. The items will be displayed as a row, with equal space between each item. nav ul{ display: flex; justify-content: space-between; }
  • 59. The flex property • flex-grow - add space • flex-shrink - remove space • flex-basis - the initial size before any growing or shrinking
  • 60. https://drafts.csswg.org/css-flexbox/#flex-components Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.
  • 61. Flexbox flex: 1 1 200px; flex-grow: 1 flex-shrink: 1; flex-basis: 200px; The initial width of our box is 200 pixels, however it can grow larger and shrink smaller than 200 pixels. .boxes { display: flex; justify-content: space-around; } .box { flex: 1 1 200px; min-width: 1px; }
  • 63. Flexbox flex: 1 1 200px; flex-grow: 1 flex-shrink: 1; flex-basis: 200px; If we allow the flex items to wrap we can see how flex-basis works by dragging the window smaller. .boxes { display: flex; flex-flow: row wrap; justify-content: space-around; } .box { flex: 1 1 200px; min-width: 1px; }
  • 65. Flexbox flex: 0 1 200px; flex-grow: 0 flex-shrink: 1; flex-basis: 200px; The initial width of our box is 200 pixels, it can shrink smaller than 200 pixels but may not get larger. .boxes { display: flex; justify-content: space-around; } .box { flex: 0 1 200px; min-width: 1px; }
  • 67. Flexbox flex: 1 1 200px; flex-grow: 1; flex-shrink: 1; flex-basis: 200px; .box3 has been set to flex: 0 1 200px; so cannot grow. .boxes { display: flex; justify-content: space-around; } .box { flex: 1 1 200px; min-width: 1px; } .box3 { flex: 0 1 200px; }
  • 69. Flexbox If we set box3 to
 flex-grow: 2 This box will be assigned twice of much of the available free space after we have reached the 200 pixel initial width. .boxes { display: flex; justify-content: space-around; } .box { flex: 1 1 200px; min-width: 1px; } .box3 { 2 1 200px; }
  • 72. The CSS Grid Layout fr unit
  • 73. Grid Layout I am creating three grid column tracks, all 1fr in width. This gives me three equally sized column tracks. .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  • 74. Grid Layout If I create the first column as 600 pixels and then have two 1fr columns the 600 pixel track is removed from the available space and the remainder is distributed equally between the two columns. .wrapper { display: grid; grid-template-columns: 600px 1fr 1fr; }
  • 75. Grid Layout With a 600 pixel column, a 1fr and a 3fr column. The 600 pixels is removed from the available space then the remaining space is divided by 4. The 1fr column gets 25% and the 3fr column 75%. .wrapper { display: grid; grid-template-columns: 600px 1fr 3fr; }
  • 76. http://alistapart.com/article/holygrail Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance.
  • 77. Grid Layout CSS Grid “Holy Grail” using grid-template- areas. //css .header { grid-area: header;} .footer { grid-area: footer;} .side1 { grid-area: nav;} .side2 { grid-area: ads;} .content { grid-area: content;} .wrapper { display: grid; grid-template-columns: 300px 20px 1fr 20px 300px; grid-template-rows: auto; grid-template-areas: "header header header header header" "nav ...... content ...... ads" "footer footer footer footer footer" ; } //html <div class="wrapper"> <header class="header">This is the header</header> <article class="content"></article> <div class="side1"></div> <div class="side2"></div> <footer class="footer"></div> </div>
  • 79. CSS Anthology, 2004 Q. Is it a bad thing to use effects that don’t work in some browsers?
  • 80. 2004 Rachel “Users [of IE] might see square corners instead of rounded ones […] but they’ll be able to use the site just as well as their Mozilla-wielding counterparts.”
  • 81. It’s one thing to have no rounded corners. Quite another to have no layout in an older browser.
  • 83. We need to think about feature support differently in a world of evergreen browsers.
  • 84. Evergreen browsers mean we can enhance with newer techniques. Over time our users see the site incrementally improve.
  • 85. CSS Grid Layout • Early implementation in IE10, 11 and current Edge • Implementation of most of the current spec behind a flag in Blink • Prefixed in Webkit Nightlies • Partial implementation in Firefox Nightlies • Edge have updating to current spec as ‘High Priority’ on the backlog
  • 86. Start with small UI elements • Your layout doesn’t have to be all flexbox or nothing. • Build your layout using the methods that work for your audience profile. • Finesse using more modern methods
  • 87. Grid Layout Display a dl in two columns using Grid. dt elements alway start on the left, dd on the right. @media (min-width: 550px) { .grid-dl { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .grid-dl dt { grid-column-start: 1; } .grid-dl dd { grid-column-start: 2; } .grid-dl dt+dd { border-top: 2px solid #ccc; } }
  • 90. Flexbox in the real world Zoe M. Gillenwater - Enhancing Responsiveness With Flexbox https://www.youtube.com/watch?v=_98SE8WUvLk
  • 91. Check your stats before making assumptions about support.
  • 93. Separate desktop and mobile statistics - your mobile users may well have far more capability.
  • 94. Use modern methods for prototyping and benefit from rapid design in the browser.
  • 95. Take an interest in early stage specifications in order to feed back to the process. Have your say.
  • 97. Thank you Slides & Resources: 
 https://rachelandrew.co.uk/presentations/modern-css-layout http://csslayout.news - sign up for my weekly CSS Layout email — @rachelandrew me@rachelandrew.co.uk — https://rachelandrew.co.uk https://grabaperch.com