An Event Apart: “Fit For Purpose: Making Sense of the New CSS”

Eric Meyer speaking at An Event Apart Seattle 2018 on April 2, 2018.

The past year has seen an incredible explosion in what we can do with CSS—from stable flexbox to the dawn of Grid, there are more powerful tools in our toolbox than ever before. Each system is, in its own way, simple, but the multitude of choices can make your head spin. What are the pros and cons? Where are the strengths and weaknesses? How does a committed craftsperson choose? In this detailed talk, Eric will compare and contrast CSS features in a series of real-world design scenarios, illuminating not only what he chose in each situation, but more importantly, why, always with an eye on what trade-offs were made at what cost. You’ll come away with a better sense of how to put all these new CSS features to work for you right away.

Notes

  • Feature queries
    • Ask the browser “Do you support this feature?”
    • @supports (prop: val) { /* CSS goes here */ }
  • Pattern from Lea Verou for detecting support for custom properties (variables):
    • @supports (--css: variables) {}
  • The value in a feature query has to be valid
    • @supports (clip-path: polygon()) { /* INVALID */ }
    • @supports (clip-path: polygon(0 0) ) { /* VALID */ }
    • @supports (clip-path: circle() ) { /* VALID */ }
  • Chain feature queries together, or just pick the least supported feature from your block of code and test for that
    • @supports (display: grid) and (writing-mode: sideways-lr) {}
    • @supports (writing-mode: sideways-lr) or (writing-mode: sideways-rl) {}
  • MOSS or MISO? — do you put feature queries inside media queries, or media queries inside feature queries?
    • MOSS — Media Outside Supports Statements 
      • @media (param: val) {
  @supports (prop1: val) {}
  @supports (prop2: val) {}
}
      • When there are more media switches than support blocks
      • When @supports is used for a few cutting-edge features
      • When @supports blocks are simple and flat
      • When @supports code varies significantly for each breakpoint
    • MISO — Media Inside Supports Statements 
      • @supports (prop: val) {
  @media (param1: val) {}
  @media (param2: val) {}
}
      • When there are more support blocks than media switches
      • When @supports is central to managing your design
      • When there are only a few RWD breakpoints
      • When @supports code applies across all breakpoints
  • “…we agreed to use CSS Grid at the layout level and Flexbox at the component level (arranging child items of components). Although there’s some overlap and in some cases both could be used interchangeably, abiding by this rule helped us avoid any confusion in gray areas.” — Julian Gaviria — How We Adopted CSS Grid at Scale

Speaker Links and Resources

Related Links