CSS Lessons Learned the Hard Way (Beyond Tellerand)
-
Upload
zoe-gillenwater -
Category
Design
-
view
1.076 -
download
0
description
Transcript of CSS Lessons Learned the Hard Way (Beyond Tellerand)
![Page 1: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/2.jpg)
I make things…
![Page 3: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/3.jpg)
…some of which come out nicely…
![Page 4: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/4.jpg)
Web sites
![Page 5: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/6.jpg)
Kids
![Page 7: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/7.jpg)
Cakes
![Page 8: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/8.jpg)
…but sometimes I make mistakes…
![Page 9: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/9.jpg)
Gardening
![Page 10: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/10.jpg)
Gardening
https://www.flickr.com/photos/coachjeff/3600883487/
![Page 11: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/11.jpg)
![Page 12: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/12.jpg)
“I can’t start until I know enough to do it perfectly.”
![Page 13: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/14.jpg)
Start using Sass in four easy steps.
![Page 16: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/16.jpg)
Drag your web site’s folder into Prepros.
Step 2
![Page 17: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/17.jpg)
In this folder, create a file named styles.scss.
Step 3
![Page 18: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/19.jpg)
Never compare your inside with somebody else’s outside.
![Page 20: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/24.jpg)
Some of my recent CSS mistakes
![Page 25: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/26.jpg)
.action
.component
![Page 27: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/33.jpg)
Flexbox fail
![Page 34: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/34.jpg)
This fixed it
.component {
flex: 1;
margin-right: 1px;
}
![Page 35: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/40.jpg)
flex-basis mistake round two
![Page 41: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/43.jpg)
Expected rendering
![Page 44: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/44.jpg)
Actual rendering
![Page 45: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/47.jpg)
It’s because flex-basis = 200px
![Page 48: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/48.jpg)
I really get flex-basis now
![Page 49: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/49.jpg)
Takeaway: don’t use CSS shorthand without understanding
all the pieces
![Page 50: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/50.jpg)
Let’s talk about another mistake
![Page 51: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/51.jpg)
Shadow style inspiration
http://sliderpro.net/examples/minimal-slider/
![Page 52: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/52.jpg)
The plan: create shadow with generated content,
skew it with CSS perspective
![Page 53: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/53.jpg)
![Page 54: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/54.jpg)
![Page 55: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/56.jpg)
Perspective fail
![Page 57: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/57.jpg)
![Page 58: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/58.jpg)
What does rotateX actually do?
![Page 59: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/62.jpg)
My quick sketch
![Page 63: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/64.jpg)
Perspective working
![Page 65: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/66.jpg)
A two-dimensional problem
![Page 67: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/67.jpg)
Absolute positioning
![Page 68: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/70.jpg)
Correct
IE 11 min-height bug
![Page 71: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/72.jpg)
Takeaway: thinking about web layout in
rows can be limiting
![Page 73: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/73.jpg)
Is using flexbox another one of my mistakes?
![Page 74: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/74.jpg)
Flexbox fallback #1: Do nothing. (Seriously.)
![Page 75: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/75.jpg)
Flexbox fallback #2: display: table-cell
![Page 76: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/76.jpg)
Flexbox fallback #3: float
(but be careful)
![Page 77: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/78.jpg)
Flexbox fallback example
Without flexbox (IE 9) With flexbox (Chrome)
![Page 79: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/80.jpg)
A more public mistake
![Page 81: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/81.jpg)
Sometimes you need to add special content for
screen reader users…
![Page 82: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/82.jpg)
![Page 83: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/83.jpg)
…and occasionally you need to hide content from
screen reader users.
![Page 84: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/84.jpg)
![Page 85: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/86.jpg)
Hide content visually and aurally
.hidden-silent {
display: none;
visibility: hidden;
}
![Page 87: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/89.jpg)
Problem: NVDA in Firefox wouldn’t read <label> with this class
![Page 90: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/93.jpg)
![Page 94: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/94.jpg)
![Page 95: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/95.jpg)
![Page 96: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/96.jpg)
This scrollbar is what overflow fixes
![Page 97: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/99.jpg)
(By the way, this FF/NVDA bug seems to be gone now.)
![Page 100: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/100.jpg)
Takeaway: one-size-fits-all isn’t always
best for your needs
![Page 101: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/101.jpg)
Takeaway: you can get help when you
share your confusion publicly
![Page 102: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/102.jpg)
Be willing to fail…
![Page 103: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/103.jpg)
…and then tell us about it.
![Page 104: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/105.jpg)
Sharing mistakes has benefits
![Page 106: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/106.jpg)
http://www.flickr.com/photos/stilleben/49644790/
![Page 107: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/107.jpg)
We all do imperfect work
![Page 108: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/108.jpg)
/* this is needed to
make .action wrap to
second line. why??? */
![Page 109: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/111.jpg)
![Page 112: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/113.jpg)
You are awesome, but and you make mistakes.
![Page 114: CSS Lessons Learned the Hard Way (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/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 (Beyond Tellerand)](https://reader033.fdocuments.in/reader033/viewer/2022052907/559033bc1a28ab082d8b45f6/html5/thumbnails/115.jpg)
Thank you
Zoe Mickley Gillenwater @zomigi
Beyond Tellerand
Berlin 4 November 2014