CSS in 2022

Deze week deed ik mee aan de CSS survey 2022. Ik zag een tweetje langskomen en ik werd nieuwsgierig wat dit voor enquête was. Ik waan me namelijk best wel slim als het gaat om CSS. Zeker nu wij de afgelopen tijd veel met TailwindCSS werken.

Viel dat even tegen. Ik blijk net aan een voldoende te hebben (omdat ik misschien ondertussen zat te Googlen wat ik allemaal gemist heb). In deze blog biecht ik op voor welke CSS mogelijkheden ik “Never heard of it” heb moeten invullen en welke features ik graag verder wilde uitzoeken.

Layout

CSS Logical Properties

Nooit van gehoord: margin-block-start, padding-inline-end, border-inline-start… Kennelijk kan je hiermee je styles aanpassen op basis van de display value. Als het block is doe dit, als het inline is doe dat, enzovoorts.

section {
  border-block: 8px solid blue;
  border-inline: 8px solid green;
}

@container

@container (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Viewport-Percentage Length Units

Van de Viewport-percentage Length Units had ik wel eens van gehoord. Sterker nog, ik gebruik vh enorm vaak. Blijkbaar mis ik nog een arsenaal aan mogelijkheden: svw, lvw, dvw, svh, lvh, dvh, vw, vh. Simpel gezegd staat de ‘s’ voor Small, ‘l’ voor Large, ‘d’ voor Dynamic, ‘v’ voor Viewport, ‘w’ voor Width en ‘h’ voor Height.

body {
  height: 100dvh;
}

Meer over Viewport-Percentage Length Units:

• https://www.the-koi.com/…22-v-sv-lv-dv/
• https://css-tricks.com/…c-viewports/

Intrinsic Sizing

Intrinsic Sizing gaat zover ik weet over tekstlengte. Met min-content, max-content, fit-content definieer je of de tekst zijn eigen breedte moet aanhouden of zich moet aanpassen.

h2 {
  width: max-content;
}

Colors

conic-gradient()

Gradients kende ik wel, maar de conic-gradient() functie niet… Dit is het resultaat:

En een ander code voorbeeld:

.blue-to-red {
  background: conic-gradient(from 45deg, blue, red);
}

color()

Met deze functie kan je meer kleuren genereren dan met de standaard rgb() functie. Het enige grote nadeel is dat color() alleen ondersteund wordt in Safari.

.brightest-green {
  background: color(display-p3 0 1 0);
}

accent-color

De CSS-eigenschap accent-color is wel een leuke toevoeging als je snel formulieren wilt stylen. Als je geen zin hebt om bijvoorbeeld aangepaste radio-buttons en checkboxes wilt maken, maar wel snel de huisstijlkleur wilt doorvoeren kan dat met accent-color.

input[type=checkbox],
input[type=radio],
input[type=range],
progress {
  accent-color: red;
}

color-mix()

.teal {
  background: color-mix(in lab, white 20%, #34c9eb);
}

Wide Gamut Colors

lch(), lab(), oklch(), oklab()

.foo {
  background-color: lab(29.2345% 39.3825 20.0664);
  background-color: lch(29.2345% 44.2 27);
}

Relative Colors

.foo {
  --color: #4488dd;
  background-color: hsl(from var(--color) h s calc(l * 1.2))
}

Typografie

font-palette

@font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}
.grays {
  font-family: bungee;
  font-palette: --PinkAndGray;
}

Probeer/Lees hier meer over font-palette:

• https://codepen.io/cssgrid/pen/BaYKdeM
• https://css-tricks.com/…web-typography/

Andere functionaliteiten

@property

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Cascade Layers

Cascading Layers is interessant voor degenen die veel CSS overschrijven. Je kunt hiermee een hiërarchie maken in je CSS bestanden. Waarschijnlijk ga je hierdoor minder !important nodig hebben.

@layer layer-name {rules}

Lees meer over Cascade Layers:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

will-change

De will-change eigenschap heeft alles te maken met grafische performance. Je zult dit alleen nodig hebben als je erg geavanceerde websites aan het bouwen bent met veel animaties en bewegende onderdelen. Met will-change vertel je de browser welke CSS-eigenschap gaat aanpassen door middel van bijvoorbeeld een :hover of Javascript. De browser kan zich qua performance optimaliseren om die taak te gaan uitvoeren.

Waarschuwing: will-change is bedoeld als laatste redmiddel, om te proberen bestaande prestatieproblemen op te lossen. Het mag niet worden gebruikt om prestatieproblemen te anticiperen.

/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* Example of <custom-ident> */
will-change: opacity;          /* Example of <custom-ident> */
will-change: left, top;        /* Example of two <animatable-feature> */

/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

Shadow DOM ::part()

custom-element::part(foo) {
  /* Styles to apply to the `foo` part */
}

Meer informatie over ::part:

• https://developer.mozilla.org/…CSS/::part

Nu jij?

Zo, nu kan jij overal “Know what it is, but haven’t used it” invullen. Hier het linkje: https://survey.devographics.com/survey/state-of-css/2022.