CSS

CSS is a stylesheet language. It is basically the cosmetic layer of a web page (i.e. HTML).

Variables

:root {
  --main-color: blue;
}

body {
  color: var(--main-color);
}

@property can define variables with more precisions

Light-dark themes

You can usecolor-scheme and light-dark() to easily define light-dark color themes.

/* Use at property level */
:root {
  color-scheme: light dark;
  --color-background: light-dark(white, black);
}

/* Use at media query level */
@media (prefers-color-scheme: light) {
  body {
    color: black;
  }
}

INFO

You can switch between themes with @matchMedia

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// …

// Watch for change
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Read more: @matchMedia

Scroll

The scroll-snap properties allows to align ("snap") the scroll on certain elements within HTML containers.

.container {
    scroll-snap-type: y mandatory;
    scroll-padding: 50px;
    scroll-margin: 50px;
}

.container .section {
    scroll-snap-align: start;
}

• scroll-snap-type's first parameter is the axis. Second one can be mandatory (always snap to sections) or proximity (snap if close to the section).
• scroll-margin and scroll-padding define offsets of section's align point.
• scroll-snap-align can be at the start or at the end of the section.

Resources

• postcss.org – Tool to lint and enable extra features to CSS
• cssdb.org – A list of current and potential future CSS features
• projectwallace.com – CSS analyser