Modern CSS Functions - Part 2

In the second part of our journey through modern CSS, we'll discover more powerful tools: scroll-snap,

@supports

,

accent-color

, and

color-mix()

. Each one solves a problem that previously required JavaScript or complicated workarounds - just as archaeological discoveries in Egypt reveal increasingly advanced techniques of ancient builders.

Scroll Snap - Snapping While Scrolling

Scroll Snap is a CSS mechanism that allows you to create a snapping effect to specific points during scrolling. With it, you can create carousels, galleries, and full-page sections without using JavaScript.

Imagine a corridor in a pyramid with successive chambers - scroll-snap makes the view automatically stop at each chamber.

1/* Container with scroll-snap */
2.gallery {
3  display: flex;
4  overflow-x: auto;
5  scroll-snap-type: x mandatory;
6  /* mandatory - always snaps to nearest point */
7  /* proximity - snaps only near a point */
8  gap: 1rem;
9}
10
11/* Each element snaps to the start */
12.gallery-item {
13  scroll-snap-align: start;
14  /* Options: start, center, end */
15  flex-shrink: 0;
16  width: 300px;
17}
18
19/* Full-page sections with vertical snap */
20.fullpage-container {
21  height: 100vh;
22  overflow-y: auto;
23  scroll-snap-type: y mandatory;
24}
25
26.fullpage-section {
27  height: 100vh;
28  scroll-snap-align: start;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34/* Scroll padding - offset for fixed headers */
35.container {
36  scroll-snap-type: y mandatory;
37  scroll-padding-top: 80px;
38  /* Accounts for header height */
39}

@supports - Detecting Browser Capabilities

The

@supports

rule (also known as feature queries) allows you to check whether the browser supports a given CSS property before applying it. This is a tool for progressive enhancement - building the experience from basics and adding advanced features where they're available.

It's like testing material strength before building - ancient Egyptians also tested stone before using it to build a pyramid.

1/* Basic @supports usage */
2.layout {
3  display: block; /* Fallback */
4}
5
6@supports (display: grid) {
7  .layout {
8    display: grid;
9    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
10    gap: 1rem;
11  }
12}
13
14/* Checking Container Queries */
15@supports (container-type: inline-size) {
16  .card-wrapper {
17    container-type: inline-size;
18  }
19
20  @container (min-width: 400px) {
21    .card {
22      flex-direction: row;
23    }
24  }
25}
26
27/* Negation - if NOT supported */
28@supports not (aspect-ratio: 1 / 1) {
29  .square {
30    padding-top: 100%; /* Old hack for proportions */
31    height: 0;
32  }
33}
34
35/* Combining conditions */
36@supports (display: grid) and (gap: 1rem) {
37  .modern-grid {
38    display: grid;
39    gap: 1rem;
40  }
41}

accent-color - Styling Form Controls

The

accent-color

property allows you to change the accent color in native form controls such as checkboxes, radio buttons, range sliders, and progress bars. Previously, styling these elements required completely overriding their appearance - now a single line suffices.

1/* Global accent color */
2:root {
3  accent-color: #d4af37; /* Golden like Egyptian ornaments */
4}
5
6/* Specific controls */
7input[type="checkbox"] {
8  accent-color: #c9a66b;
9  width: 20px;
10  height: 20px;
11}
12
13input[type="radio"] {
14  accent-color: #1e3a5f;
15}
16
17input[type="range"] {
18  accent-color: #30d5c8;
19}
20
21progress {
22  accent-color: #d4af37;
23}
24
25/* Different colors for different sections */
26.form-section--gold {
27  accent-color: gold;
28}
29
30.form-section--lapis {
31  accent-color: #1e3a5f;
32}

accent-color

automatically selects a contrasting text color, so you don't need to worry about readability.

color-mix() - Mixing Colors in CSS

The

color-mix()

function allows you to mix two colors in specified proportions directly in CSS. It's a powerful tool for creating color variants, semi-transparent versions, and entire color palettes.

Think of how ancient Egyptians mixed pigments - lapis lazuli with white gave different shades of blue.

color-mix()

works exactly the same way.

1/* Basic syntax */
2/* color-mix(in color-space, color1 percentage, color2) */
3
4/* Mixing in proportions */
5.lighter {
6  background: color-mix(in srgb, #d4af37 70%, white);
7  /* 70% gold + 30% white */
8}
9
10.darker {
11  background: color-mix(in srgb, #d4af37 70%, black);
12  /* 70% gold + 30% black */
13}
14
15/* Creating semi-transparent versions */
16.overlay {
17  background: color-mix(in srgb, #1e3a5f 50%, transparent);
18  /* 50% opacity */
19}
20
21/* Generating a palette from one base color */
22:root {
23  --brand: #d4af37;
24  --brand-light: color-mix(in srgb, var(--brand) 30%, white);
25  --brand-lighter: color-mix(in srgb, var(--brand) 15%, white);
26  --brand-dark: color-mix(in srgb, var(--brand) 70%, black);
27  --brand-darker: color-mix(in srgb, var(--brand) 50%, black);
28}
29
30/* Hover effects */
31.button {
32  background: var(--brand);
33}
34
35.button:hover {
36  background: color-mix(in srgb, var(--brand) 85%, black);
37}
38
39/* Mixing in oklch space (better visual results) */
40.gradient-step {
41  background: color-mix(in oklch, blue 60%, green);
42}

The

color-mix()

function combined with CSS Variables creates a powerful theming system where an entire color palette can be generated from a single base color.