Think you know CSS?

Mark DuBois (Mark@4WebPro.org)

Let’s focus on:

  • Container queries (components change based on where they reside in the UI)
  • Native CSS nesting (instead of Less and Sass)
  • High Definition CSS color guides (50% more colors coming soon)
  • Tips to make your content look good

Container queries

Working example (view the source code – HTML)

Step 1 – set containment element (giving it a type and a name)

.card-container {
container: card / inline-size;
}

 

Container queries

Working example (view the source code – CSS)

Step 2 – apply styles

@container (max-width: 450px) {
.card-child {
grid-template-columns: 1fr;
}

Fluid Typography

clamp() – CSS function that clamps a middle value within a range of values.

3 values required – minimum, preferred, maximum

Font size grows with size of the viewport, but doesn’t go beyond minimum or maximum values. No need for media queries.

Container query review

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

Working example

Native CSS nesting

Previously using Less and Sass

Support presently limited (Chrome 112 minimum)

Note this is coming, but not ready for prime time

Current approach
table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}
Nesting approach
table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

High Definition CSS Color Guides (CSS color 4)

sRGB only choice for over 25 years (rgb, hsl, hex)

Now support for high definition displays (50% more colors to choose)

Many more choices (some browser support today)

Review this article (and all choices becoming available)

 

Tips to make your content look good (some of the key items include):

  • Apply CSS reset (eliminate natural spacing)
  • Set root variables and style main elements
  • Set type scales (consistent design)
  • Set fluid type – clamp ( )
  • Add more space to top of headings; reduce space with direct siblings
  • Reduce line height as type gets larger
  • Set line length to 65 – 75 characters
  • Apply color and contrast

 

References