css lessons learned the hard way (convergese)
TRANSCRIPT
CSS Lessons Learned the Hard Way
Zoe Mickley Gillenwater @zomigi
ConvergeSE
Columbia, SC, USA 15 April 2015
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
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
Flexbox demo www.smoresday.us Use Chrome, Opera, Safari 7, Firefox 28+, or IE 10+ for full effect
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;
}
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.”
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.
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);
}
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/
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);
}
Flexbox is not row-centric
.container {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
min-height: 200px;
}
Fixed with another flex wrapper
<div class="outer">
<div class="container">
<div class="bottom">...</div>
</div>
</div>
.outer {
display: flex;
}
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 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
https://www.flickr.com/photos/87255087@N00/6261885005/
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
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
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
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