Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Lessons Learned the Hard Way (ConvergeSE)


Published on

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

Published in: Design
  • Be the first to comment

CSS Lessons Learned the Hard Way (ConvergeSE)

  1. 1. CSS Lessons Learned the Hard Way Zoe Mickley Gillenwater @zomigi ConvergeSE Columbia, SC, USA 15 April 2015
  2. 2. I make things…
  3. 3. …some of which come out nicely…
  4. 4. Web sites
  5. 5. Books Stunning CSS3: A Project-based Guide to the Latest in CSS Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
  6. 6. Kids
  7. 7. Cakes
  8. 8. …but sometimes I make mistakes…
  9. 9. Gardening
  10. 10. Gardening
  11. 11. Never compare your inside with somebody else’s outside.
  12. 12. special people vs. normal people
  13. 13. 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
  14. 14. 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
  15. 15. Creative people experiment a lot more, therefore succeed a lot more, therefore fail a lot more.
  16. 16. Some of my helpful CSS mistakes
  17. 17. Flexbox demo Use Chrome, Opera, Safari 7, Firefox 28+, or IE 10+ for full effect
  18. 18. .action .component
  19. 19. 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>
  20. 20. HTML for flexbox version <form class="builder"> <section class="component"> <section class="component"> <section class="component"> <section class="component"> <section class="action"> </form>
  21. 21. Allow boxes to wrap .builder { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 40px -20px; }
  22. 22. Using flex to control width/height .flex-item { flex: 1 0 100px; } flex-grow flex-shrink flex-basis
  23. 23. 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)
  24. 24. 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.”
  25. 25. Flexbox fail
  26. 26. This fixed it .component { flex: 1; margin-right: 1px; }
  27. 27. /* this is needed to make .action wrap to second line. why??? */ My comment on the 1px margin
  28. 28. 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.
  29. 29. 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.
  30. 30. 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.).
  31. 31. This was not just a case of succeeding despite a mistake. It was a case of succeeding because of a mistake.
  32. 32. Takeaway: don’t use CSS shorthand without understanding all the pieces
  33. 33. Takeaway: you are smarter than the spec
  34. 34. Let’s talk about another mistake
  35. 35. Shadow style inspiration
  36. 36. The plan: 1. create shadow with generated content 2. skew it with CSS perspective 3. profit
  37. 37. 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); }
  38. 38. Perspective fail
  39. 39. What does rotateX actually do?
  40. 40. The 3 axes X horizontal, left-right Y vertical, up-down Z away-towards you A helpful diagram: your hand. Photo:
  41. 41. Or, if your hand is effed up: ?
  42. 42. Rotate around the axis not in the direction of the axis As explained well by Peter Gasston in in-the-third-dimension-css-3-d-transforms/
  43. 43. My quick sketch
  44. 44. 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); }
  45. 45. Perspective working
  46. 46. Takeaway: sometimes pen and paper can make a new concept real to you
  47. 47. A two-dimensional problem
  48. 48. Absolute positioning
  49. 49. Web layout is horizontally biased
  50. 50. Flexbox is not row-centric .container { display: flex; flex-direction: column-reverse; align-items: flex-start; min-height: 200px; }
  51. 51. Correct IE 11 min-height bug
  52. 52. Fixed with another flex wrapper <div class="outer"> <div class="container"> <div class="bottom">...</div> </div> </div> .outer { display: flex; }
  53. 53. Takeaway: thinking about web layout in rows can be limiting
  54. 54. A more public mistake
  55. 55. Sometimes you need to add special content for screen reader users…
  56. 56. …and occasionally you need to hide content from screen reader users.
  57. 57. 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
  58. 58. Hide content visually and aurally .hidden-silent { display: none; visibility: hidden; }
  59. 59. Hide text only but keep it spoken .hidden-text-spoken { text-indent: -999em; overflow: hidden; display: inline-block; }
  60. 60. 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
  61. 61. Problem: NVDA in Firefox wouldn’t read <label> with this class
  62. 62. Delete half the code, see if bug goes away, repeat
  63. 63. I narrowed it down to overflow: hidden Removing this part caused labels to be read correctly in Firefox by NVDA
  64. 64. But removing it still kept the content hidden. So why was it there to begin with?
  65. 65. This scrollbar is what overflow fixes
  66. 66. Now that I understood what overflow did, I could decide if I needed it.
  67. 67. 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
  68. 68. (By the way, this FF/NVDA bug seems to be gone now.)
  69. 69. Takeaway: one-size-fits-all isn’t always best for your needs
  70. 70. Takeaway: you can get help when you share your confusion publicly
  71. 71. Be willing to fail…
  72. 72. …and then tell us about it.
  73. 73. 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
  74. 74. Sharing mistakes has benefits
  75. 75.
  76. 76. We all do imperfect work
  77. 77. /* this is needed to make .action wrap to second line. why??? */
  78. 78. 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.
  79. 79. Revisiting comments // TODO: Fix this. Fix what? // somedev1 - 6/7/02 Adding temporary tracking of Login screen // somedev2 - 5/22/07 Temporary my ass
  80. 80. 99% of the population of the world doesn’t know CSS. Zoe’s made-up statistic
  81. 81. 99% of the population of the world doesn’t know ______. This is probably true too.
  82. 82. You are awesome, but and you make mistakes.
  83. 83. Let’s use our confidence in our skills to build others up and bravely admit our own shortcomings.
  84. 84. Thank you Zoe Mickley Gillenwater @zomigi Beyond Tellerand Berlin 4 November 2014