A layout post

content/blog/2024/css-layout.md

@@ -0,0 +1,215 @@
+---
+title: Learn Grid Now, Container Queries Can Wait
+sub: Take your time with new CSS, but don't sleep on essentials
+date: 2024-06-13
+# image:
+#   src:
+#   alt: Some alt
+author: miriam
+summary: |
+  Several people have asked me recently
+  why Container Queries
+  aren't being used more broadly
+  in production.
+  But I think we underestimate
+  the level of legacy browser support
+  that most companies require
+  to re-write a code-base.
+---
+
+Container (Size) Queries
+shipped in Firefox on February 14, 2023 --
+the last major browser to ship the feature.
+Chrome/Edge and Safari shipped
+a few months earlier,
+in the fall of 2022.
+[CanIUse lists size queries support](https://caniuse.com/css-container-queries)
+in **93.49%** of all tracked browsers,
+with a Baseline status of
+_Newly Available_.
+
+In contrast,
+Safari shipped CSS Grid on March 27, 2017 --
+and Edge un-prefixed the feature
+on October 17 that same year.
+[CanIUse lists grid support](https://caniuse.com/css-grid)
+in **99.39%** of all tracked browsers,
+with a Baseline status of
+_Widely Available_.
+
+These are the two 'stages'
+of [Baseline support](https://web.dev/baseline/),
+as described on Google's [web.dev](https://web.dev/):
+
+- **Newly available**:
+  The feature becomes supported
+  by all of the core browsers,
+  and is therefore interoperable.
+- **Widely available**:
+  30 months has passed
+  since the newly interoperable date.
+  The feature can be used by most sites
+  without worrying about support.
+
+Even in single-digits,
+_6% of the web_
+is still a big difference
+in support.
+
+{% callout 'The CanIUse defaults are broken' %}
+  By default,
+  [CanIUse](https://caniuse.com/) will show you
+  _% of all users_,
+  which is a very misleading number.
+  Since nearly 3% of browsers are untracked,
+  those support numbers will never go over 97% for new features.
+  I recommend opening the
+  [CanIUse default display settings](https://caniuse.com/ciu/settings#display),
+  and selecting _All tracked users_.
+  You might also want to apply the 'filtered' view,
+  to see only browsers with more than
+  0.5% usage by default.
+{% endcallout %}
+
+## We can't measure time in features released
+
+As close observers of CSS
+we often overestimate how long
+these features have been around.
+Especially with newer features
+shipping every few months.
+Our scale is off!
+
+> You're still talking about Container Queries?!
+> That was before
+> color mixing and selector nesting, _last year_!
+> Try to keep up!
+> If you're not learning
+> view transitions with anchor positions now,
+> you'll be left behind!
+
+I get it.
+I'm in the CSS Working Group,
+regularly discussing features
+that won't even become _newly available_
+for another year or three.
+At OddBird,
+we often work on internal tools for clients --
+building from scratch,
+with little need for legacy support.
+With Container Queries,
+I wrote the specification,
+and started building
+[demos in January 2021](https://codepen.io/miriamsuzanne/details/NWRJpQo)
+(this demo is broken,
+since the syntax changed several times).
+
+I've been thinking about
+(and playing with)
+Container Queries
+for much longer than the
+baseline _wide support_ 30 months.
+But actual browser support
+is barely over half-way there --
+reaching 16 months next week.
+
+This is still a _very new feature_,
+despite our hype cycles moving on.
+
+## Large sites (and core features) are slow to change
+
+Many developers are working in a context
+with much more conservative legacy support policies --
+often waiting for 'full' support of a new feature
+before they even consider using it in production.
+
+In conversations,
+I'll especially hear concerns
+about browsers like iOS Safari
+that update more slowly,
+part of a much heavier OS update.
+Safari on mac may update in monthly-ish cycles,
+but users with an old phone
+are often out-of-date.
+
+These are container ships
+that get stuck in the Suez Canal
+during high winds,
+or decimate the Francis Scott Key bridge
+when there's a power issue.
+These ships are not easy to maneuver.
+Sometimes they are maintaining essential resources
+for a long tail of users on older devices --
+sometimes they are weighed down
+by the sheer scale of their organization.
+Either way,
+it takes some time to change course.
+
+But it's not just the sites
+that are difficult to move.
+Developers can start sprinkling
+`text-wrap: balance` on headings
+with a 5-minute pull request,
+no matter how large the project.
+But Layout Systems are core features,
+and often rely on third-party tooling.
+It's one thing to install new light fixtures,
+it's another thing to replace
+the entire hull of a ship.
+Even with a smaller team,
+a smaller project,
+and a lighter browser-support matrix --
+it doesn't make sense to re-write your code base
+or design system
+every time a new feature comes out.
+
+We started phasing-out Susy
+(our light-weight grid system)
+on OddBird projects in 2015.
+By 2017,
+we were
+[recommending others do the same](http://localhost:8080/talks/no-grid-system/),
+and we
+[officially deprecated](https://github.com/oddbird/susy/commit/018b5c638ec0726d172af96828e6f1712682283b)
+the project
+on Jul 14, 2020.
+Four years later,
+[OddBird.net/susy](/susy/)
+still has the highest traffic of anything on our site,
+the `susy` package gets
+[nearly 19k weekly downloads on npm](https://www.npmjs.com/package/susy).
+
+## Learn CSS Grid, Seriously
+
+There's no rush to rip out
+all your media queries,
+and replace them with containers.
+You'll be fine waiting for
+_widely available_ support
+and your next schedule re-factor.
+
+But if you're still avoiding grid --
+whatever your reasons --
+you are, in fact, _missing out_.
+CSS grid is one of the best features in CSS,
+and one of the biggest time-savers
+on every site we build.
+
+Yes, Flexbox is also pretty cool.
+But flexbox is designed for
+content-out distribution,
+not design-system page layout.
+Using flexbox alone
+is like only using `inline` text,
+without paragraphs, divs, and other `block` elements.
+You're using half the system,
+and _it's the more complicated half to manage_.
+
+At some point
+people looked at Grid and thought
+"that looks complicated" --
+then spent nearly a decade
+over-complicating flexbox to compensate.
+
+Stop.
+_It's time to learn grid. Now._

content/workshops/cascading-layouts.md

@@ -34,6 +34,9 @@ included:
   - title: Cutting Edge Techniques
     text: From a W3C Invited Expert
     icon: icons/rocket
+  - title: Video Recordings
+    text: To revisit on your own time
+    icon: icons/video
   - title: Certificate of Completion
     text: Documenting your education
     icon: icons/ribbon