luke.dewitt

$ cd ~/talks/three-things-about-css

2017-07-18REDspace Tech Share

Three Things You Might Not Know About CSS⁠

Browsers read selectors right to left, CSS can count, and the Fab Four technique makes emails responsive without media queries.

$ open slides

  1. Three Things You Might Not Know . . . About CSS TECHSHARE - JULY 18TH, 2017
  2. .card__body .card__body—red
  3. Browsers read CSS Rules from right-to-left
  4. .card__body .card__body—red So this is actually matched first
  5. If the last element doesn’t match the element it’s looking at, it can easily be ignored…
  6. Wasn’t always the case…
  8. 70%
  9. There’s a lot more going on in browsers today to make it even faster…
  10. DON’T USE IDS IN CSS
  11. A quick note on specificity…
  12. Play with the calculator: https://specificity.keegan.st/
  13. Play with the calculator: https://specificity.keegan.st/ x1000 x100 x10
  14. use @at-root
  15. https://csswizardry.com/ 2012/05/keep-your-css- selectors-short/
  16. CSS Counters
  17. PROPERTIES counter-reset: counter-name; Used to define the counter counter-increment: counter-name; counter-decrement: counter-name; Used to increment/decrement the counter content: counter(counter-name); Used to display the counter https://codepen.io/chriscoyier/pen/sDoac
  18. Can also be tied to elements and interactions on the page… https://codepen.io/alexerlandsson/pen/KzQaEG
  19. FUN!
  20. Question?
  22. Simple Math
  23. FUN!
  24. The Fab Four calc() width min-width max-width
  25. If the width value is greater than the max- width value, max-width wins. If the min-width value is greater than the width or max-width values, min- width wins.
  26. If the width value is greater than the max- width value, max-width wins. If the min-width value is greater than the width or max-width values, min- width wins. !important
  27. .box { width: 320px; min-width: 480px; max-width: 160px; }
  29. .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); }
  30. .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); }
  31. .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); }
  32. .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); }
  33. If the width value is greater than the max- width value, max-width wins. If the min-width value is greater than the width or max-width values, min- width wins. !important
  34. With a parent of 500px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); }
  35. With a parent of 500px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 250px
  36. With a parent of 500px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 250px 500px
  37. With a parent of 500px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 250px 500px -9600px
  38. With a parent of 500px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 250px 500px -9600px 500px
  39. With a parent of 400px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); }
  40. With a parent of 400px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 200px
  41. With a parent of 400px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 200px 400px
  42. With a parent of 400px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 200px 400px 38400px
  43. With a parent of 400px… .block { display:inline-block; min-width:50%; max-width:100%; width:calc((480px — 100%) * 480); } 200px 38400px 400px
  44. Demo http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/the-fab-four.html
  45. Quirks: - old outlook.com - calc() support - Outlook web app - Webkit prefixes
  46. .block { display:inline-block; min-width:240px; width: 50%; max-width:100%; min-width:-webkit-calc(50%); min-width:calc(50%); width:-webkit-calc(230400px - 48000%); width:calc(230400px — 48000%); }
  48. Thank You!!
1 / 48
download pdf ↓

$ cat notes.md

An internal tech share at REDspace, and an excuse to talk about CSS for half an hour.

1. Browsers read selectors right to left

In .card__body .card__body--red, the browser matches .card__body--red first. If the rightmost part doesn’t match the element it’s looking at, the whole rule can be skipped quickly. That wasn’t always how it worked, and browsers do a lot more today to make matching fast.

Which leads to two habits:

  • Don’t use IDs in CSS. An ID outweighs any number of classes, so specificity gets away from you fast. Play with the specificity calculator.
  • Keep selectors short. In Sass, @at-root helps you nest without the output piling up. Harry Roberts has a good post on keeping CSS selectors short.

2. CSS counters

CSS can count for you:

  • counter-reset: name; defines a counter.
  • counter-increment: name; steps it.
  • content: counter(name); displays it.

They can also react to the page: count checked checkboxes and you’ve got a score with no JavaScript. A couple of fun demos from CodePen: Chris Coyier’s counters and Alex Erlandsson’s.

3. The Fab Four

calc() plus width, min-width and max-width. The rules when they disagree:

  • If width is greater than max-width, max-width wins.
  • If min-width is greater than width or max-width, min-width wins.

So with width: calc((480px - 100%) * 480), a 500px parent gives a huge negative width and min-width: 50% wins (two columns). A 400px parent gives a huge positive width and max-width: 100% wins (one column). That’s a breakpoint at 480px with no media query, which matters in email clients that ignore them. Here’s the Fab Four demo.

Quirks to watch for: old Outlook.com, calc() support, the Outlook web app, and WebKit prefixes.

visitor@whatadewitt: ~