A collection of mistakes I've made in my CSS, how I fixed them, and how trying and failing has made me better.

1. CSS Lessons Learned
the Hard Way
Zoe Mickley Gillenwater
@zomigi
ConvergeSE
Columbia, SC, USA
15 April 2015

2. I make things…

3. …some of which come out
nicely…

4. Web sites

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. Kids

7. Cakes

8. …but sometimes I make
mistakes…

9. Gardening

10. Gardening
https://www.flickr.com/photos/coachjeff/3600883487/

12. Never compare your inside
with somebody else’s outside.

13. special people
vs.
normal people

14. 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

15. 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

16. Creative people
experiment a lot more,
therefore succeed a lot more,
therefore fail a lot more.

17. Some of my
helpful CSS mistakes

18. Flexbox demo
www.smoresday.us
Use Chrome,
Opera, Safari 7,
Firefox 28+, or IE
10+ for full effect

19. .action
.component

20. 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>

21. HTML for flexbox version
<form class="builder">
<section class="component">
<section class="component">
<section class="component">
<section class="component">
<section class="action">
</form>

22. Allow boxes to wrap
.builder {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 40px -20px;
}

23. Using flex to control width/height
.flex-item {
flex: 1 0 100px;
}
flex-grow flex-shrink flex-basis

24. 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)

25. 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.”

26. Flexbox fail

27. This fixed it
.component {
flex: 1;
margin-right: 1px;
}

28. /* this is needed to
make .action wrap to
second line. why??? */
My comment on the 1px margin

29. 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.

30. 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.

31. 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.).

32. This was not just a case of
succeeding despite a mistake.
It was a case of succeeding
because of a mistake.

33. Takeaway:
don’t use CSS shorthand
without understanding
all the pieces

34. Takeaway:
you are smarter than the
spec

35. Let’s talk about
another mistake

36. Shadow style inspiration
http://sliderpro.net/examples/minimal-slider/

37. The plan:
1. create shadow with generated content
2. skew it with CSS perspective
3. profit

40. 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);
}

41. Perspective fail

43. What does rotateX actually
do?

44. 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/

45. Or, if your hand is effed up:
http://architecture.gtu.ge/MPL/Multimodal%20Explorer/Acad_11/14control_workplane0/control_workplane.htm
?

46. 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/

47. My quick sketch

48. 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);
}

49. Perspective working

50. Takeaway:
sometimes pen and paper
can make a new concept
real to you

51. A two-dimensional problem

52. Absolute positioning

53. https://www.flickr.com/photos/40325561@N04/8176648959/
Web layout is
horizontally biased

54. Flexbox is not row-centric
.container {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
min-height: 200px;
}

55. Correct
IE 11 min-height bug

56. Fixed with another flex wrapper
<div class="outer">
<div class="container">
<div class="bottom">...</div>
</div>
</div>
.outer {
display: flex;
}

57. Takeaway:
thinking about web layout in
rows can be limiting

58. A more public mistake

59. Sometimes you need to add
special content for
screen reader users…

61. …and occasionally you need to
hide content from
screen reader users.

63. 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

64. Hide content visually and aurally
.hidden-silent {
display: none;
visibility: hidden;
}

65. Hide text only but keep it spoken
.hidden-text-spoken {
text-indent: -999em;
overflow: hidden;
display: inline-block;
}

66. 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

67. Problem:
NVDA in Firefox wouldn’t read
<label> with this class

68. https://www.flickr.com/photos/87255087@N00/6261885005/
Delete half the code,
see if bug goes away,
repeat

69. I narrowed it down to
overflow: hidden
Removing this part caused labels to be read
correctly in Firefox by NVDA

70. But removing it still kept the
content hidden.
So why was it there to begin with?

74. This scrollbar is what overflow fixes

75. Now that I understood
what overflow did, I could
decide if I needed it.

76. 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

77. (By the way, this FF/NVDA
bug seems to be gone now.)

78. Takeaway:
one-size-fits-all isn’t always
best for your needs

79. Takeaway:
you can get help when you
share your confusion
publicly

80. Be willing to fail…

81. …and then tell us about it.

82. 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

83. Sharing mistakes has
benefits

84. http://www.flickr.com/photos/stilleben/49644790/

85. We all do imperfect work

86. /* this is needed to
make .action wrap to
second line. why??? */

87. 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.

88. Revisiting comments
// TODO: Fix this. Fix what?
// somedev1 - 6/7/02
Adding temporary tracking of Login screen
// somedev2 - 5/22/07
Temporary my ass

90. 99% of the population of the
world doesn’t know CSS.
Zoe’s made-up statistic

91. 99% of the population of the
world doesn’t know ______.
This is probably true too.

92. You are awesome,
but and you make mistakes.

93. Let’s use our confidence in
our skills to build others up
and bravely admit our own
shortcomings.

94. Thank you
Zoe Mickley Gillenwater
@zomigi
Beyond Tellerand
Berlin
4 November 2014