slides.oddbird.net/css-next/smashingsf/

Styling the Intrinsic Web

slides.oddbird.net/css-next/smashingsf/

Miriam Suzanne @ SmashingConf SF 2022
Painting of a young white woman in a white gown and head scarf, sitting alone on tall a cloth-draped box, with her arms crossed and her head looking down, resting on one hand.

The Future of CSS

The Present of CSS

The Past of CSS

CSS exists For Two Reasons

1. CSS describes Reusable Objects

InDesign book-cover layout for Riding SideSaddle, my novel in a box
Final novel-in-a-box, Riding SideSaddle
Same photo, but with a badly overlaid cursor pointer and three big scribbled red question marks

New Content!!! 

<P><FONT SIZE="4" COLOR="BLUE">…</FONT></P>
<P><FONT SIZE="4" COLOR="BLUE">…</FONT></P>
<P><FONT SIZE="4" COLOR="BLUE">…</FONT></P>
<P><FONT SIZE="4" COLOR="BLUE">…</FONT></P>
<P><FONT SIZE="4" COLOR="BLUE">…</FONT></P>
Miriam looking surprised and offended, in black and white, with the word OLD and an arrow pointing at her face

CSS Selectors 

p {
  color: blue;
}

We use Classes & Attributes

Combine them To Compose Objects

Design Systems &
Component Libraries

Brad frost on stage talking bout design systems with a demo of 'Brads discount NFT emporium' in comic sans
Headshot of Nicole Sullivan

@stubbornella Nicole Sullivan

2009 Object Oriented CSS

Headshot of Natalie Downe

@natbat Natalie Downe

2008 CSS Systems

Shubhie Panicker on stage with a slide about Systems Thinking

Selectors Can Conflict 

/* <a href="#" class="rad">…</a> */
a      {  color: teal;    }
.rad   {  color: violet;  }
[href] {  color: orange;  }

on every html element,
every css property
must have exactly one value

Tina Turner as Aunty Entity in the Mad Max Thunderdome, with the law 'Two styles enter, one style leaves' in bold text
Product label for Cascade, with sheeting action for virtually spotless dishes - subtitled 'Use the Cascade'

2. CSS describes Responsive Styles

@media min-width

@media prefers-reduced-motion

The real advance in accessibility, is providing options and adapting to user preferences.

– Kate Kalcevich, this morning (paraphrase)

@media hover

The first world wide website & graphic browser
Old IBM desktop
The second browser, a text-only terminal
7 year old Miriam with her hands on her knees

1989 The Artist (it me)

Not paying attention

Hand-made choose-your-own-adventure book called The Mystery of the Missing Art Box
Hand-made book called The Sward

Web for all. Web on everything.

– W3C Mission Statement

Modern desktops
Braille interface and headphones
A zillion different devices of all sizes (original)
Lineup of smart watches
Spider man crawling towards you with webs everywhere
Google Home, Amazon Echo, and Apple HomePod

Everyone has Input

  • 🖥 User Agent (Browser)
  • 👥 User (Preferences)
  • 🎨 Author (Site)

We’re designing unknown content with unknown collaborators on an infinite and unknowable canvas, across operating systems, interfaces, writing-modes, & languages…

– me

Kate Kalcevich on stage, with a slide of many illustrated faces, that says Accessibility is a Team Sport - with red scribbles overtop saying The Entire Web
InDesign book-cover layout for Riding Sidesaddle, my novel in a box

The fact we can control a paper page is really a limitation of that medium.

– John Allsopp, 2000

Stacks of paper
Stacks of paper with a pointer cursor badly pasted on top, with red scribbles coming out of the finger tip, and a speech bubble that say CLICK
Stacks of paper

There are too many variables to consider.

– Keith J Grant

The point of CSS is to make it so you don’t have to worry about them all.

– Keith J Grant

Define some constraints. Let the language work out the details.

– Keith J Grant

Provide hints that the browser may or may not use.

– Håkon Lie

footage from Metropolis with people climbing the stares into the mouth of Moloch a giant machine with glowing eyes
more footage from Metropolis with Mammon the robot in a chair with wires feeding into her head
Product label for Cascade, with sheeting action for virtually spotless dishes - subtitled Use the Cascade

What’s a Cascade??

CSS SpeciFISHity, A table of different fish in different combinations, each one labeled as a type of selector, and their specificities calculated below.
Tina Turner as Aunty Entity in the Mad Max Thunderdome, with the law 'Two styles enter, one style leaves' in bold text

every css property
on every html element
must have exactly one value

Cascade filters out
Inheritance fills in

Mechanical coin sorter on a table, with a ramp at the top and a small-to-large series of slots
Same coin sorter, with all slots crossed off except for the largest one with coins in it, and an arrow pointing at those coins that says 'move on'

An ordered list (cascade) of style sheets … can be referenced from the same document.

– Håkon Lie

The user/browser specifies initial preferences and hands the remaining influence over to the document.

– Håkon Lie

Cascade Origins

  • 🖥 User Agent (Browser)
  • 👥 User (Preferences)
  • 🎨 Author (Site)
/* browser styles */
body { margin: 8px; }

/* every designer */
body { margin: 0; }
  1. 🎨 Author (Site)
  2. 👥 User (Preferences)
  3. 🖥 User Agent (Browser)

If conflicts arise the user should have the last word, but one should also allow the author to attach style hints.

– Håkon Lie

❗important

A balance of power

  1. ❗🖥 User Agent Important
  2. ❗👥 User Important
  3. ❗🎨 Author Important
  4. 🎨 Author Styles
  5. 👥 User Preferences
  6. 🖥 User Agent Defaults
Spock Spock with a goatee

👎🏼 Override Styles

in the current origin

👍🏼 Protect Styles

from more powerful origins

Solitude painting from earlier
  1. ❗…
  2. ❗…
  3. ❗🎨 Author Important
  4. 🎨 Author Styles
  5. …
  6. …

CSS Selectors & Specificity

  • * (universal)
  • type
  • .class & [attr]
  • #IDs (single-use)

universal/type » Global Defaults

attrs/classes » Common Patterns

ID/style » Singular Overrides

  1. Unique #IDs
  2. Reusable .classes & [attributes]
  3. Element types
  4. Universal *
A triangle pointing down, with labeled layers from top — settings, tools, generic, elements, objects, components, overrides
Same triangle flipped vertically, with all the labels rotated and numbered 1-7 from bottom to top
Headshot of Harry Roberts

Harry Roberts

Inverted Triangle CSS (ITCSS)

Assumptions Fail

Especially “At Scale” 

table[rules]:not([rules=""])> tr > td,
table[rules]:not([rules=""])> * > tr > td,
table[rules]:not([rules=""])> tr > th,
table[rules]:not([rules=""])> * > tr > th,
table[rules]:not([rules=""])> td,
table[rules]:not([rules=""])> th
{
  border-width: thin;
  border-style: none;
}
[hidden] {
  display: none !important;
}
  1. Unique #IDs
  2. Reusable .classes & [attributes]
  3. Element types
  4. Universal *
.block .element.modifier { /* 3 */ }
.block__element--modifier { /* 1 */ }
Triangle with the horizontal edge labeled 'reach', and the vertical edges labeled 'specificity' and 'explicitness'
triangle with labeled layers from wide base to narrow point — settings, tools, generic, elements, objects, components, overrides

❗important 

.🤬-bootstrap {
  font-weight: bold !important;
}

😩🤬😩

  1. Cascade Layers

  2. Scoped Styles
  3. Container Queries
triangle with labeled layers from wide base to narrow point — settings, tools, generic, elements, objects, components, overrides

Layers of Specificity

@layer { … }

@layer <layer-name> { … } 

@layer generic {
  audio[controls] { display: block; }
  [hidden] { display: none !important; }
}

@input url(…) layer(<name>); 

@import url(reset.css) layer(reset);
@import url(reset.css) layer(reset);

@layer generic {
  audio[controls] { display: block; }
  [hidden] { display: none !important; }
}
  1. Utilities
  2. Components
  3. Themes
  4. Frameworks
  5. Resets
  1. Overrides
  2. Components
  3. Objects
  4. Elements
  5. Generic
  6. Tools
  7. Settings
@layer settings { … }
@layer tools { … }
@layer generic { … }
@layer elements { … }
@layer objects { … }
@layer components { … }
@layer overrides { … }
  1. @layer settings { … }
  2. @layer tools { … }
  3. @layer generic { … }
  4. @layer elements { … }
  5. @layer objects { … }
  6. @layer components { … }
  7. @layer overrides { … }
inverted triangle with labeled layers from wide top to narrow downward point — settings, tools, generic, elements, objects, components, overrides
triangle with labeled layers from wide base to narrow point — settings, tools, generic, elements, objects, components, overrides

Specificity is Contained 

@layer framework {
  #menu .dropdown .item:hover {
    background: whitesmoke;
  }

  .menu-item {
    background: lightcyan;
  }
}
@layer framework {
  #menu .dropdown .item:hover {
    background: whitesmoke;
  }
}

@layer override {
  .menu-item {
    background: lightcyan;
  }
}

Add to Existing Layers 

@layer generic {
  audio[controls] { display: block; }
}

@layer generic {
  [hidden] { display: none !important; }
}
@layer generic {
  audio[controls] { display: block; }
  [hidden] { display: none !important; }
}
@layer default { … }
@layer theme { … }

/* still a lower layer than "theme" styles */
@layer default { … }

Establish layer Order 

@layer generic, elements, objects, components, overrides;
/* establish layer order */
@layer one, two, three;

/* add code to layers as needed */
@import url(two.css) layer(two);
@layer three { … }
@layer one { … }
@layer two { … }

Unlayered styles Default Highest Priority

Nesting Layers 

@layer tools {
  @layer custom { … }
}

/* access nested layers */
@layer tools.custom { … }
@layer components {
  @layer defaults, structures, themes, utilities;
}
/* tools.css */
@layer theme { … }
@layer components { … }
@import url(tools.css) layer(tools);

@layer tools.theme { … }
@layer tools.custom { … }

❗️Important Layers Reverse

(exactly like origins)

  1. ❗Important Resets
  2. ❗Important Themes
  3. ❗Important Components
  4. Components
  5. Themes
  6. Resets

if we need to… Layers -> Override
Importance -> Protect

Never again… Struggle with Frameworks 

@import url(bootstrap.css) layer(bootstrap);

@layer bootstrap.my-overrides {
  /* anything here will override bootstrap */
}

Use Inside Components

See the Pen Button layers by @miriamsuzanne on CodePen.

Data on support for the css-cascade-layers feature across the major browsers from caniuse.com

More Cascade Control

Fewer Hacks

Don’t let assumptions Boss You Around

Complete Guide to CSS Cascade Layers

https://css-tricks.com/css-cascade-layers/

OddBird article, Cascade Layers – There’s a Polyfill for That! by Sana Javed on June 21, 2022
  1. Cascade Layers

  2. Scoped Styles

  3. Container Queries 
.block .element.modifier { /* 3 */ }
.block__element--modifier { /* 1 */ }

1. Avoid Naming Conflicts

(across large teams & projects)

2. By Expressing Membership

(through lower boundaries & proximity)

.title { /* global */ }
.post .title { /* nested */ }

.post__title { /* BEM */ }
.post__title { /* BEM */ }
.title[data-JKGHJ] { /* Vue */ }
wireframe of a site, with multiple nested components

Different from Shadow-DOM Encapsulation

Diagram shows a widget with solid boundaries, which cannot be penetrated in either direction (global styles can't get in, widget styles can't get out)

Build-tools Provide Scoped Styles

BEM, CSS Modules, Vue, JSX, Stylable, etc

Diagram shows a component with porous boundaries, all styles can penetrate, or establish their own lower boundaries 
@scope (.media) to (.content) {
  img { /* only images that are "in scope" */ }
}
.light-theme a { color: purple; }
.dark-theme a { color: plum; }

See the Pen Scope boundary demo by @miriamsuzanne on CodePen.

See the Pen Scope proximity demo by @miriamsuzanne on CodePen.

See the Pen Visualizing scope by @miriamsuzanne on CodePen.

prototype… Now in Chrome Canary

Proximity >> Combinator?? 

.light-theme >> a { color: purple; }
.dark-theme >> a { color: plum; }

Scoped Selector Syntax?? 

@scope (.media) to (.content) {
  img { … }
}

(.media / .content) img { … }
A grid of overlapping 'scope' columns (buttons, cards, logins) and 'layer' rows (default, theme, component). Each scope crosses all layers, and each layer crosses all scopes.
  1. Cascade Layers
  2. Scoped Styles

  3. Container Queries

See the Pen Media vs Container by @miriamsuzanne on CodePen.

Nested grid-item containers inside the main container, also use small card layout

⚠️ Layout Loops?

CSS Context vs Content

2010-2020 🚧 Laying Foundations 🚧

2020 Proposals

  • David Baron: @container
    limited by containment
  • Brian Kardell: switch()
    limited to paint

Defining Containers

We need to define the containers for our cards to query

No Content Sizing 

.container {
  contain: size layout style;
}

2D size containment Is Too Restrictive

See the Pen Rad by @miriamsuzanne on CodePen.

We need Inline Size Containment

Robin Marx on stage, with a slide that says Here Be Dragons about http3, but scribbled text makes it about Single-axis containment

See the Pen 💥 Inline Containment Error - Auto-sized BFCs effected by floats by @miriamsuzanne on CodePen.

See the Pen 💥 Inline Containment Error: %-Padding in Orthogonal Writing Modes by @miriamsuzanne on CodePen.

Zeno half way between a Greek temple and a tree, the remainder of his path is marked with increasingly small half-way measures, each with a sundial below it.

contain: inline-size;

contain: block-size;

Too Complicated 

.sidebar, main, .grid-item {
  contain: inline-size layout style;
}

More Declarative 

.sidebar, main, .grid-item {
  container-type: inline-size;
}
<div class="container">
  <div class="container">
    <div class="container">
      We can nest containers!
    </div>
  </div>
</div>

See the Pen Enter the 36 Chambers by @miriamsuzanne on CodePen.

Querying Containers 

@container (min-width: 40em) {
  .card { /* ... */ }
  h2 { /* ... */ }
}
.container { container-type: inline-size; }

@container (width > 30em) {
  .container { padding: 2em; }
}

Naming Containers 

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (width > 30em) {
  .container { padding: 2em; }
}

Finding Containers

  1. For each matched element…
  2. Find the nearest ancestor that has…
    • Any required container types
    • Any required container name

See the Pen Media vs Container by @miriamsuzanne on CodePen.

See the Pen container query demo with blockquotes by @miriamsuzanne on CodePen.

See the Pen Flexbox cards, with Container Queries by @miriamsuzanne on CodePen.

See the Pen Container Query Bookstore by @miriamsuzanne on CodePen.

See the Pen Responsive Icon Demo (Una Kravets) by @miriamsuzanne on CodePen.

See the Pen Container Query Blinds v2 by @miriamsuzanne on CodePen.

See the Pen Container Holds Water by @miriamsuzanne on CodePen.

prototype… In Chrome Canary & Safari TP

Data on support for the css-container-queries feature across the major browsers from caniuse.com 
@container (width > 30em) { /* CQ support */ }

@supports not (container-type: inline-size) {
  @media (width > 40em) { /* no CQ support */ }
}

Container Query Polyfill

https://github.com/GoogleChromeLabs/container-query-polyfill

But wait, There’s More

Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

Why cq*? Because ch Already Exists

See the Pen Basic Container Units by @miriamsuzanne on CodePen.

See the Pen Container Units (Scott Kellum) by @miriamsuzanne on CodePen.

Data on support for the css-container-query-units feature across the major browsers from caniuse.com

Non-size Queries 

@container style(--colors: invert) { … }
@container state(is-stuck) { … }
  1. Cascade Layers
  2. Scoped Styles
  3. Container Queries

Building on Existing CSS

Building on The Cascade

Already make… Styles Reusable

Already make… Styles Responsive

A List Apart: Responsive Web Design by Ethan Marcotte (May 25, 2010)

Technical Ingredients…

  • Fluid grids (%)
  • Flexible images (%)
  • Media queries

Flexbox & (Sub)Grids & …

min-/max-content, fit-content, minmax(), clamp(), etc…

Headshot of Jen Simmons

@jensimmons Jen Simmons

Everything You Know About Web Design Just Changed

Intrinsic Web Design

  1. Fluid & Fixed
  2. Stages of Squishiness
  3. Truly Two-Dimensional Layouts
  4. Nested Contexts
  5. Expand & Contract Content
  6. Media Queries, As Needed

Responsive & Reusable Components

Our medium is not done. Our medium is still going through radical changes.

– Jen Simmons, Designing with Grid