Newsgames — CSS

Like most people, I find CSS bewildering with its huge numbers of units, properties, selectors, layouts… all of which is nearly impossible to debug since invalid rules are simply ignored by browsers.

An important tool to check if your CSS is correct is jigsaw.

My notes on selectors are in my HTML Elements since querySelector’s argument uses the same syntax. With CSS it’s important to remember selectors can be combined, turned into a list using commas, a list of children using >, any descendants using a space…

I’ve settled on only a tiny fraction of what’s available which I’ve noted down here.

html or :root?

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity (0-1-0) is higher than html’s (0-0-1). — MDN’s :root article

The colon prefix marks :root as a pseudo-class. I’d generally find html easier to understand, but there’s a convention to set global variables using two dashes (–) prefixes.

:root {
  --card-height: 22vh;
  --card-width: calc(var(--card-height) * (500/726) + 6px);
  --adwidth: calc(50vw - (var(--card-width) * 2.5) - 6px);
}

These variables can be accessed in any ruleset using the var() function.

The style I’ve settled on is to declare global variables in a :root ruleset and base font-size etc in an html ruleset.

Nesting landscape or portrait

Thanks to nesting at-rules, specifically @media along with orientation, global variables can be conditionally set to support either landscape (ie desktop) or portrait (mobile which nowadays makes up the bulk of visitors).

@media (orientation: landscape) {
  :root {
    --card-height: 22vh;
    --card-width: calc(var(--card-height) * (500/726) + 6px);
  }
}

@media (orientation: portrait) {
  :root {
    --card-width: 15vw;
    --card-height: calc(var(--card-width) * (726/500));
  }
}

vh vs vw

vh and vw are relative length units based on viewport. For landscape, height is typically what decides how to best use the available screen real estate, whereas for portrait it’s width.

Document doesn’t use legible font sizes

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-sizing