KEMBAR78
CSS Lessons Learned the Hard Way (Generate Conf) | PDF
CSS Lessons Learned the Hard Way 
Zoe Mickley Gillenwater 
@zomigi 
Generate Conference 
London 26 September 2014
I make things…
…some of which come out nicely…
Web sites
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
Kids
Cakes
…but sometimes I make mistakes…
Gardening
Gardening 
https://www.flickr.com/photos/coachjeff/3600883487/
“I can’t start until I know enough to do it perfectly.”
You don’t need everything 
http://www.flickr.com/photos/montage_man/4713541238/
Start using Sass in four easy steps.
Install Prepros from http://alphapixels.com/prepros/ 
Step 1
Drag your web site’s folder into Prepros. 
Step 2
In this folder, create a file named styles.scss. 
Step 3
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; 
}
Never compare your inside with somebody else’s outside.
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
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
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
Creative people experiment a lot more, therefore succeed a lot more, therefore fail a lot more.
Some of my recent CSS mistakes
Flexbox demo 
www.smoresday.us 
Use Chrome, Opera, Safari 7, Firefox 28+, or IE 10+ for full effect
.action 
.component
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>
HTML for flexbox version 
<form class="builder"> 
<section class="component"> 
<section class="component"> 
<section class="component"> 
<section class="component"> 
<section class="action"> 
</form>
Allow boxes to wrap 
.builder { 
display: flex; 
flex-wrap: wrap; 
justify-content: space-between; 
margin: 0 0 40px -20px; 
}
Using flex to control width/height 
.flex-item { 
flex: 1 0 100px; 
} 
flex-grow 
flex-shrink 
flex-basis
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)
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.”
Flexbox fail
This fixed it 
.component { 
flex: 1; 
margin-right: 1px; 
}
/* this is needed to make .action wrap to second line. why??? */ 
My comment on the 1px margin
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.
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.
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.).
This was not just a case of succeeding despite a mistake. It was a case of succeeding because of a mistake.
flex-basis mistake round two
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;
Trying to make one twice as wide 
.gallery-item { 
flex: 1 0 200px; 
} 
.feature { 
flex: 2 0 200px; 
}
Expected rendering
Actual rendering
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;
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
It’s because flex-basis = 200px
I really get flex-basis now
Takeaway: don’t use CSS shorthand without understanding all the pieces
Let’s talk about another mistake
Shadow style inspiration 
http://sliderpro.net/examples/minimal-slider/
The plan: create shadow with generated content, skew it with CSS perspective
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); 
}
Perspective fail
What does rotateX actually do?
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/
Or, if your hand is effed up: 
http://architecture.gtu.ge/MPL/Multimodal%20Explorer/Acad_11/14control_workplane0/control_workplane.htm
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/
My quick sketch
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); 
}
Perspective working
Takeaway: sometimes pen and paper can make a new concept real to you
A more public mistake
Sometimes you need to add special content for screen reader users…
…and occasionally you need to hide content from screen reader users.
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
Hide content visually and aurally 
.hidden-silent { 
display: none; 
visibility: hidden; 
}
Hide text only but keep it spoken 
.hidden-text-spoken { 
text-indent: -999em; 
overflow: hidden; 
display: inline-block; 
}
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
Problem: NVDA in Firefox wouldn’t read <label> with this class
Delete half the code, see if bug goes away, repeat
I narrowed it down to overflow: hidden 
Removing this part caused labels to be read correctly in Firefox by NVDA
But removing it still kept the content hidden. 
So why was it there to begin with?
This scrollbar is what overflow fixes
Now that I understood what overflow did, I could decide if I needed it.
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
(By the way, this FF/NVDA bug seems to be gone now.)
Takeaway: one-size-fits-all isn’t always best for your needs
Takeaway: you can get help when you share your confusion publicly
Be willing to fail…
…and then tell us about it.
Vulnerability is not weakness. And that myth is profoundly dangerous. 
Dr. Brené Brown
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
We all do imperfect work
/* this is needed to make .action wrap to second line. why??? */
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.
Revisiting comments 
// TODO: Fix this. Fix what? 
// somedev1 - 6/7/02 Adding temporary tracking of Login screen // somedev2 - 5/22/07 Temporary my ass
YAY! Mediocrity!
YAY! Being human!
Hiding mistakes seems to be human nature
But sharing mistakes has benefits
Try to shift “Who can I blame?” to “Who can I teach?”
http://www.flickr.com/photos/stilleben/49644790/
99% of the population of the world doesn’t know CSS. 
Zoe’s made-up statistic
You are awesome, but and you make mistakes.
Let’s use our confidence in our skills to build others up and bravely admit our own shortcomings.
Thank you 
Zoe Mickley Gillenwater 
@zomigi 
Generate Conference 
London 26 September 2014

CSS Lessons Learned the Hard Way (Generate Conf)

  • 1.
    CSS Lessons Learnedthe Hard Way Zoe Mickley Gillenwater @zomigi Generate Conference London 26 September 2014
  • 2.
  • 3.
    …some of whichcome out nicely…
  • 4.
  • 5.
    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
  • 6.
  • 7.
  • 8.
    …but sometimes Imake mistakes…
  • 9.
  • 10.
  • 12.
    “I can’t startuntil I know enough to do it perfectly.”
  • 13.
    You don’t needeverything http://www.flickr.com/photos/montage_man/4713541238/
  • 14.
    Start using Sassin four easy steps.
  • 15.
    Install Prepros fromhttp://alphapixels.com/prepros/ Step 1
  • 16.
    Drag your website’s folder into Prepros. Step 2
  • 17.
    In this folder,create a file named styles.scss. Step 3
  • 18.
    Write in itthis: Step 4 $green: #4F9F1A; $blue: #1D6783; $lightgray: #D6D6D6; body { background: $lightgray; color: $green; } a { color: $blue; } button { background: $blue; color: $lightgray; }
  • 19.
    Never compare yourinside with somebody else’s outside.
  • 20.
    If you walkaround 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
  • 21.
    Innovation requires amindset that rejects the fear of failure and replaces that fear of failure with the joy of exploration and experimental learning. Dr. Edward D. Hess
  • 22.
    We also needto 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
  • 23.
    Creative people experimenta lot more, therefore succeed a lot more, therefore fail a lot more.
  • 24.
    Some of myrecent CSS mistakes
  • 25.
    Flexbox demo www.smoresday.us Use Chrome, Opera, Safari 7, Firefox 28+, or IE 10+ for full effect
  • 26.
  • 27.
    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>
  • 28.
    HTML for flexboxversion <form class="builder"> <section class="component"> <section class="component"> <section class="component"> <section class="component"> <section class="action"> </form>
  • 29.
    Allow boxes towrap .builder { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 40px -20px; }
  • 30.
    Using flex tocontrol width/height .flex-item { flex: 1 0 100px; } flex-grow flex-shrink flex-basis
  • 31.
    Defining the flexproperty 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)
  • 32.
    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.”
  • 33.
  • 34.
    This fixed it .component { flex: 1; margin-right: 1px; }
  • 35.
    /* this isneeded to make .action wrap to second line. why??? */ My comment on the 1px margin
  • 36.
    The hidden flex-basisvalue .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.
  • 37.
    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.
  • 38.
    Fixing flex-basis toforce 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.).
  • 39.
    This was notjust a case of succeeding despite a mistake. It was a case of succeeding because of a mistake.
  • 40.
  • 41.
    flex can beproportional Setting flex-grow/flex-shrink to different values can make flex items size themselves relative to each other flex: 1; flex: 1; flex: 2;
  • 42.
    Trying to makeone twice as wide .gallery-item { flex: 1 0 200px; } .feature { flex: 2 0 200px; }
  • 43.
  • 44.
  • 45.
    What I figuredout 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;
  • 46.
    If flex-basis isn’t0px… …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
  • 47.
  • 48.
    I really getflex-basis now
  • 49.
    Takeaway: don’t useCSS shorthand without understanding all the pieces
  • 50.
    Let’s talk aboutanother mistake
  • 51.
    Shadow style inspiration http://sliderpro.net/examples/minimal-slider/
  • 52.
    The plan: createshadow with generated content, skew it with CSS perspective
  • 55.
    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); }
  • 56.
  • 58.
    What does rotateXactually do?
  • 59.
    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/
  • 60.
    Or, if yourhand is effed up: http://architecture.gtu.ge/MPL/Multimodal%20Explorer/Acad_11/14control_workplane0/control_workplane.htm
  • 61.
    Rotate around theaxis 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/
  • 62.
  • 63.
    Adding rotateX withperspective .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); }
  • 64.
  • 65.
    Takeaway: sometimes penand paper can make a new concept real to you
  • 66.
  • 67.
    Sometimes you needto add special content for screen reader users…
  • 69.
    …and occasionally youneed to hide content from screen reader users.
  • 71.
    I needed CSSclasses 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
  • 72.
    Hide content visuallyand aurally .hidden-silent { display: none; visibility: hidden; }
  • 73.
    Hide text onlybut keep it spoken .hidden-text-spoken { text-indent: -999em; overflow: hidden; display: inline-block; }
  • 74.
    Hide element butkeep 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
  • 75.
    Problem: NVDA inFirefox wouldn’t read <label> with this class
  • 76.
    Delete half thecode, see if bug goes away, repeat
  • 77.
    I narrowed itdown to overflow: hidden Removing this part caused labels to be read correctly in Firefox by NVDA
  • 78.
    But removing itstill kept the content hidden. So why was it there to begin with?
  • 82.
    This scrollbar iswhat overflow fixes
  • 83.
    Now that Iunderstood what overflow did, I could decide if I needed it.
  • 84.
    How I fixedmy 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
  • 85.
    (By the way,this FF/NVDA bug seems to be gone now.)
  • 86.
    Takeaway: one-size-fits-all isn’talways best for your needs
  • 87.
    Takeaway: you canget help when you share your confusion publicly
  • 88.
  • 89.
    …and then tellus about it.
  • 90.
    Vulnerability is notweakness. And that myth is profoundly dangerous. Dr. Brené Brown
  • 91.
    Vulnerability is thebirthplace 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
  • 92.
    We all doimperfect work
  • 93.
    /* this isneeded to make .action wrap to second line. why??? */
  • 94.
    The evidence inthe 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.
  • 95.
    Revisiting comments //TODO: Fix this. Fix what? // somedev1 - 6/7/02 Adding temporary tracking of Login screen // somedev2 - 5/22/07 Temporary my ass
  • 97.
  • 98.
  • 99.
    Hiding mistakes seemsto be human nature
  • 100.
  • 101.
    Try to shift“Who can I blame?” to “Who can I teach?”
  • 102.
  • 103.
    99% of thepopulation of the world doesn’t know CSS. Zoe’s made-up statistic
  • 104.
    You are awesome,but and you make mistakes.
  • 105.
    Let’s use ourconfidence in our skills to build others up and bravely admit our own shortcomings.
  • 106.
    Thank you ZoeMickley Gillenwater @zomigi Generate Conference London 26 September 2014