css lessons learned the hard way – zoe gillenwater
DESCRIPTION
You’ve probably heard the phrase “learn to fail or fail to learn.” The idea that making mistakes is essential to success has almost become clichéd by now. But in this talk, Zoe is prepared to embarrass herself with tales of her web design screw-ups to prove just how important and powerful it truly is to make mistakes in our work. Along the way, you’ll learn CSS tips and tricks that Zoe learned the hard way so that you don’t repeat her mistakes. Go out, try new things with CSS, and make new mistakes of your very own! This talk was given at beyond tellerrand // BERLIN 2014, 5 November 2014TRANSCRIPT
![Page 1: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/1.jpg)
CSS Lessons Learned the Hard Way
Zoe Mickley Gillenwater @zomigi
Beyond Tellerand
Berlin 4 November 2014
![Page 2: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/2.jpg)
I make things…
![Page 3: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/3.jpg)
…some of which come out nicely…
![Page 4: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/4.jpg)
Web sites
![Page 5: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/5.jpg)
Books
Stunning CSS3: A Project-based Guide
to the Latest in CSS
www.stunningcss3.com
Flexible Web Design: Creating Liquid and Elastic
Layouts with CSS
www.flexiblewebbook.com
![Page 6: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/6.jpg)
Kids
![Page 7: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/7.jpg)
Cakes
![Page 8: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/8.jpg)
…but sometimes I make mistakes…
![Page 9: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/9.jpg)
Gardening
![Page 10: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/10.jpg)
Gardening
https://www.flickr.com/photos/coachjeff/3600883487/
![Page 11: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/11.jpg)
![Page 12: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/12.jpg)
“I can’t start until I know enough to do it perfectly.”
![Page 13: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/13.jpg)
You don’t need everything
http://www.flickr.com/photos/montage_man/4713541238/
![Page 14: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/14.jpg)
Start using Sass in four easy steps.
![Page 16: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/16.jpg)
Drag your web site’s folder into Prepros.
Step 2
![Page 17: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/17.jpg)
In this folder, create a file named styles.scss.
Step 3
![Page 18: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/18.jpg)
Write in it this:
Step 4
$green: #4F9F1A; $blue: #1D6783; $lightgray: #D6D6D6; body { background: $lightgray; color: $green; } a { color: $blue; } button { background: $blue; color: $lightgray; }
![Page 19: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/19.jpg)
Never compare your inside with somebody else’s outside.
![Page 20: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/20.jpg)
If you walk around with the idea that there are some people
who are so gifted—they have these wonderful things in their head,
but you’re not one of them, you’re just sort of a normal person,
you could never do anything like that— then you live a different kind of life.
Brian Eno
![Page 21: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/21.jpg)
Innovation requires a mindset that rejects the
fear of failure and replaces that fear of failure with the
joy of exploration and experimental learning.
Dr. Edward D. Hess
![Page 22: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/22.jpg)
We also need to accept and embrace the concept of failure, not because failure is a good thing but
because it’s a natural part of the path of progress.
If you’re failing, at least that means you’re trying — not remaining on the outside of the arena, looking in.
Helen Walters
![Page 23: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/23.jpg)
Creative people experiment a lot more,
therefore succeed a lot more, therefore fail a lot more.
![Page 24: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/24.jpg)
Some of my recent CSS mistakes
![Page 25: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/25.jpg)
Flexbox demo www.smoresday.us Use Chrome, Opera, Safari 7, Firefox 28+, or IE 10+ for full effect
![Page 26: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/26.jpg)
.action
.component
![Page 27: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/27.jpg)
HTML without flexbox <form class="builder">
<div class="wrap">
<section class="component">
<section class="component">
<section class="component">
<section class="component">
</div>
<section class="action">
</form>
![Page 28: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/28.jpg)
HTML for flexbox version
<form class="builder">
<section class="component">
<section class="component">
<section class="component">
<section class="component">
<section class="action">
</form>
![Page 29: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/29.jpg)
Allow boxes to wrap
.builder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 40px -20px;
}
![Page 30: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/30.jpg)
Using flex to control width/height
.flex-item {
flex: 1 0 100px;
}
flex-grow flex-shrink flex-basis
![Page 31: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/31.jpg)
Defining the flex property
flex-grow
how much flex item will grow relative to other items if extra space is available (proportion of extra space that it gets)
flex-shrink
how much item will shrink relative to others if there is not enough space (proportion of overflow that gets shaved off)
flex-basis
the initial starting size before free space is distributed (any standard width/height value, including auto)
![Page 32: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/32.jpg)
My first attempt
.component {
flex: 1;
}
.action {
flex: 1 1 100%;
}
Zoe’s Brain Said: “Since .action starts out at 100%, it won’t have space to sit on the first line with the content preceding it, and will wrap to a second line.”
![Page 33: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/33.jpg)
Flexbox fail
![Page 34: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/34.jpg)
This fixed it
.component {
flex: 1;
margin-right: 1px;
}
![Page 35: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/35.jpg)
/* this is needed to
make .action wrap to
second line. why??? */
My comment on the 1px margin
![Page 36: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/36.jpg)
The hidden flex-basis value
.component {
flex: 1 1 0px;
}
.action {
flex: 1 1 100%;
}
Reality: Since it’s fine for each .component to shrink to only 0px wide, a 100% wide element can and will sit on the same line as all the components.
![Page 37: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/37.jpg)
That’s why margin “fixed” it
.component {
flex: 1;
margin-right: 1px;
}
.action {
flex: 1 1 100%;
}
What’s happening: Now each .component starts out taking up 1px of space, so a 100% wide element can’t and won’t sit on the same line with any of the components.
![Page 38: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/38.jpg)
Fixing flex-basis to force the wrap
.component {
flex: 1 1 200px;
}
.action {
flex: 1 1 100%;
}
Fixed: .action will always wrap to new line, and .component boxes will wrap to additional lines when there’s less space than their combined flex-basis values (plus margin, etc.).
![Page 39: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/39.jpg)
This was not just a case of succeeding despite a mistake.
It was a case of succeeding because of a mistake.
![Page 40: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/40.jpg)
flex-basis mistake round two
![Page 41: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/41.jpg)
flex can be proportional
Setting flex-grow/flex-shrink to different values can make flex items size
themselves relative to each other
flex: 1; flex: 1; flex: 2;
![Page 42: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/42.jpg)
Trying to make one twice as wide
.gallery-item {
flex: 1 0 200px;
}
.feature {
flex: 2 0 200px;
}
![Page 43: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/43.jpg)
Expected rendering
![Page 44: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/44.jpg)
Actual rendering
![Page 45: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/45.jpg)
What I figured out
Having widths be in multiples of each other only works if flex-basis is 0
flex: 1 0 0px; flex: 1 0 0px; flex: 2 0 0px;
![Page 46: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/46.jpg)
If flex-basis isn’t 0px…
…the widths may not end up as you expect
The third box gets twice as much of the extra, but that doesn’t make it twice as
wide overall
flex: 1 0 10px; flex: 1 0 10px; flex: 2 0 10px;
10px + 5px extra = 15px 10px + 5px extra = 15px 10px + 10px extra = 20px
if 50px available
![Page 47: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/47.jpg)
It’s because flex-basis = 200px
![Page 48: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/48.jpg)
I really get flex-basis now
![Page 49: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/49.jpg)
Takeaway: don’t use CSS shorthand without understanding
all the pieces
![Page 50: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/50.jpg)
Let’s talk about another mistake
![Page 51: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/51.jpg)
Shadow style inspiration
http://sliderpro.net/examples/minimal-slider/
![Page 52: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/52.jpg)
The plan: create shadow with generated content,
skew it with CSS perspective
![Page 53: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/53.jpg)
![Page 54: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/54.jpg)
![Page 55: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/55.jpg)
My first attempt .lightbox:before {
content: "";
position: absolute;
z-index: -2;
left: 2%;
bottom: 0;
width: 96%;
height: 1px;
box-shadow: 0 25px 30px 15px hsla(0,0%,0%,.4);
transform: perspective(20em);
}
![Page 56: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/56.jpg)
Perspective fail
![Page 57: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/57.jpg)
![Page 58: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/58.jpg)
What does rotateX actually do?
![Page 59: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/59.jpg)
The 3 axes
X horizontal, left-right
Y vertical, up-down
Z away-towards you
A helpful diagram: your hand. Photo: http://www.smashingmagazine.com/2012/01/06/adventures-in-the-third-dimension-css-3-d-transforms/
![Page 60: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/60.jpg)
Or, if your hand is effed up:
http://architecture.gtu.ge/MPL/Multimodal%20Explorer/Acad_11/14control_workplane0/control_workplane.htm
![Page 61: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/61.jpg)
Rotate around the axis not in the direction of the axis
As explained well by Peter Gasston in http://www.smashingmagazine.com/2012/01/06/adventures-
in-the-third-dimension-css-3-d-transforms/
![Page 62: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/62.jpg)
My quick sketch
![Page 63: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/63.jpg)
Adding rotateX with perspective .lightbox:before {
content: "";
position: absolute;
z-index: -2;
left: 6%;
bottom: 0;
width: 88%;
height: 1px;
box-shadow: 0 25px 30px 15px hsla(0,0%,0%,.4);
transform: perspective(20em) rotateX(50deg);
}
![Page 64: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/64.jpg)
Perspective working
![Page 65: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/65.jpg)
Takeaway: sometimes pen and paper can make a new concept
real to you
![Page 66: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/66.jpg)
A two-dimensional problem
![Page 67: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/67.jpg)
Absolute positioning
![Page 68: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/68.jpg)
https://www.flickr.com/photos/40325561@N04/8176648959/
Web layout is horizontally biased
![Page 69: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/69.jpg)
Flexbox is not row-centric
.container {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
min-height: 200px;
}
![Page 70: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/70.jpg)
Correct
IE 11 min-height bug
![Page 71: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/71.jpg)
Fixed with another flex wrapper
<div class="outer">
<div class="container">
<div class="bottom">...</div>
</div>
</div>
.outer {
display: flex;
}
![Page 72: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/72.jpg)
Takeaway: thinking about web layout in
rows can be limiting
![Page 73: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/73.jpg)
Is using flexbox another one of my mistakes?
![Page 74: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/74.jpg)
Flexbox fallback #1: Do nothing. (Seriously.)
![Page 75: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/75.jpg)
Flexbox fallback #2: display: table-cell
![Page 76: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/76.jpg)
Flexbox fallback #3: float
(but be careful)
![Page 77: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/77.jpg)
Flexbox with float .container { display: -webkit-box; display: flex; } .sidebar { float: left; position: relative; width: 300px; } .no-flexbox .main-content { margin-left: 300px; }
![Page 78: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/78.jpg)
Flexbox fallback example
Without flexbox (IE 9) With flexbox (Chrome)
![Page 79: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/79.jpg)
Flexbox with float fallback .iw_mini_details_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; } .iw_mini_review_score_wrapper { float: left; } .iw_mini_price_wrapper { float: right; }
![Page 80: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/80.jpg)
A more public mistake
![Page 81: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/81.jpg)
Sometimes you need to add special content for
screen reader users…
![Page 82: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/82.jpg)
![Page 83: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/83.jpg)
…and occasionally you need to hide content from
screen reader users.
![Page 84: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/84.jpg)
![Page 85: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/85.jpg)
I needed CSS classes to:
1. Hide content visually and aurally 2. Hide just the text of an element, not
whole element, but keep text spoken 3. Hide whole element visually but keep
its text spoken by screen readers
![Page 86: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/86.jpg)
Hide content visually and aurally
.hidden-silent {
display: none;
visibility: hidden;
}
![Page 87: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/87.jpg)
Hide text only but keep it spoken
.hidden-text-spoken {
text-indent: -999em;
overflow: hidden;
display: inline-block;
}
![Page 88: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/88.jpg)
Hide element but keep it spoken
Yahoo! Accessibility blog said to use:
.hidden-spoken {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE 6-7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
Article now online at https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html
![Page 89: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/89.jpg)
Problem: NVDA in Firefox wouldn’t read <label> with this class
![Page 90: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/90.jpg)
https://www.flickr.com/photos/87255087@N00/6261885005/
Delete half the code, see if bug goes away,
repeat
![Page 91: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/91.jpg)
I narrowed it down to overflow: hidden
Removing this part caused labels to be read correctly in Firefox by NVDA
![Page 92: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/92.jpg)
But removing it still kept the content hidden.
So why was it there to begin with?
![Page 93: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/93.jpg)
![Page 94: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/94.jpg)
![Page 95: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/95.jpg)
![Page 96: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/96.jpg)
This scrollbar is what overflow fixes
![Page 97: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/97.jpg)
Now that I understood what overflow did, I could
decide if I needed it.
![Page 98: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/98.jpg)
How I fixed my mistake
• Removed overflow:hidden from new instances going forward (but sadly not fixed in existing style sheets)
• Updated documentation to advise adding it on as-needed basis
![Page 99: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/99.jpg)
(By the way, this FF/NVDA bug seems to be gone now.)
![Page 100: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/100.jpg)
Takeaway: one-size-fits-all isn’t always
best for your needs
![Page 101: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/101.jpg)
Takeaway: you can get help when you
share your confusion publicly
![Page 102: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/102.jpg)
Be willing to fail…
![Page 103: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/103.jpg)
…and then tell us about it.
![Page 104: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/104.jpg)
Vulnerability is the birthplace of innovation, creativity, and change.
To create is to make something that has never existed before.
There's nothing more vulnerable than that.
Dr. Brené Brown
![Page 105: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/105.jpg)
Sharing mistakes has benefits
![Page 106: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/106.jpg)
http://www.flickr.com/photos/stilleben/49644790/
![Page 107: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/107.jpg)
We all do imperfect work
![Page 108: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/108.jpg)
/* this is needed to
make .action wrap to
second line. why??? */
![Page 109: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/109.jpg)
The evidence in the comments
// Dear future me. Please forgive me. // I can't even begin to express how sorry I am.
// I am not sure if we need this, but too scared to delete.
// Magic. Do not touch.
![Page 110: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/110.jpg)
Revisiting comments
// TODO: Fix this. Fix what?
// somedev1 - 6/7/02 Adding temporary tracking of Login screen // somedev2 - 5/22/07 Temporary my ass
![Page 111: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/111.jpg)
![Page 112: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/112.jpg)
99% of the population of the world doesn’t know CSS.
Zoe’s made-up statistic
![Page 113: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/113.jpg)
You are awesome, but and you make mistakes.
![Page 114: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/114.jpg)
Let’s use our confidence in our skills to build others up and bravely admit our own
shortcomings.
![Page 115: CSS Lessons Learned The Hard Way – Zoe Gillenwater](https://reader036.vdocuments.site/reader036/viewer/2022081511/559443341a28ab01308b46cc/html5/thumbnails/115.jpg)
Thank you
Zoe Mickley Gillenwater @zomigi
Beyond Tellerand
Berlin 4 November 2014