Advanced CSS Techniques: Fluid Design, Mathematical Functions, and Modern Features

Since the invention of the World Wide Web, a new digital era was born. Early WWW contained only pure HTML documents using semantic HTML tags to distinguish basic styles between web elements. CSS was later introduced as a simple key-value style language for styling semantic HTML tags. Modern CSS has evolved to allow web designers to create modern styles, animations, responsive elements, and image filters with developer-friendly syntax.

Modern CSS standards provide functions and nested blocks (at-rules), along with pseudo-elements, pseudo-classes, and selector combinations designed to improve developer productivity. This article explores lesser-known CSS features that can help developers build modern, performant websites.

Fluid Design with Mathematical and Grid Functions

Traditional responsive design encourages adjusting layouts based on device viewport size. Fluid design suggests using relative units and CSS mathematical functions to dynamically adjust website elements based on viewport size.

The CSS clamp() function provides a one-line solution for dynamically adjusting font sizes with minimum and maximum boundaries:

<style>
  h1 { font-size: clamp(2.2em, 3vw + 1em, 2.5em) }
</style>

<h1>CSS math functions</h1>

The clamp() function uses the 3vw + 1em expression to dynamically set font size while preventing it from exceeding the 2.2em and 2.5em boundaries.

Similarly, min() and max() functions can set dynamically computed values with only one boundary:

h1 { font-size: max(2.2em, 3vw + 1em) }

Modern CSS also provides grid-focused functions for fluid design without media queries:

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    grid-gap: 1em;
    justify-self: center;

    > div {
      background: #ddd;
      padding: calc(2vw + 0.5em);
      font-size: calc(1vw + 1em); 
      font-weight: bold;
      text-align: center;
      border-radius: 0.5em;
    }
  }
</style>   
<div class="container">
  <div>Block 1</div>
  <div>Block 2</div>
  <div>Block 3</div>
  <div>Block 4</div>
</div>

CSS Mathematical Step Value Functions

Starting in 2024, every popular web browser has added round(), rem(), and mod() step value functions to its CSS engine.

The round() function rounds values to the nearest specified interval without JavaScript:

<style>
  :root { --width: 527px }
  .container {
    background: #aaa;
    width: round(var(--width), 25px);
    height: 2em;
  }
</style>   

<div class="container"></div>

The rem() function enables using the modulo operator in CSS:

:root {
  --width: 50em;
  --block: 15em;
  --extra: rem(var(--width), var(--block));  /* --extra: 5em */
}

The mod() function behaves similarly to rem() but always takes the divisor's sign.

Media Queries Beyond Traditional Responsive Design

Media queries can handle various use cases beyond responsive design. For print custom styles:

@media print {
  header, footer {
    display: none;
  }
}

For fullscreen mode styling:

@media (display-mode: fullscreen) {
  body {
    margin: 0;
    padding: 2em;
    border: 0.5em solid #aaa;
  }
}

For device aspect ratio checking:

@media (aspect-ratio: 16 / 9) {
  body { background: darkcyan }
}

Customizing Native Form Controls with CSS

The accent-color property allows changing the default color scheme of native form controls:

<input type="checkbox" style="accent-color: cadetblue"/>
<input type="radio" style="accent-color: teal"/>
<input type="range" style="accent-color: hotpink"/><br/>
<progress style="accent-color: darkcyan"></progress>

The color-scheme property can be used with accent-color to improve visibility on light and dark system themes:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }

  input[type="checkbox"], 
  input[type="radio"], 
  input[type="range"],
  progress {
    accent-color: white;
    color-scheme: dark;
  }
}

CSS Counters and @counter-style

CSS counters allow creating incrementable/decrementable counters in CSS selectors. For displaying counter values based on element occurrences:

<style>
  :root { counter-reset: references }
  a[href]:empty { text-decoration: none }

  a[href]:empty::after {
    counter-increment: references;
    content: '[' counter(references) ']';
  }
</style>

The @counter-style at-rule allows creating new or extended list styles:

<style>
  @counter-style modified-alpha {
    system: extends alpha;
    prefix: "[ ";
    suffix: " ] ";
    pad: 2 "0";
  }
  
  ol { list-style-type: modified-alpha }
</style>

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
  <li>Bootstrap</li>
</ol>

CSS Animations Without Dedicated Keyframes

CSS variables can be updated within keyframes, enabling animation of multiple elements without writing multiple keyframe blocks:

@property --t {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@keyframes tick {
  from { --t: 0 }
  to   { --t: 100000 }
}

:root { animation: tick 86400s linear infinite }

This creates a global animation clock that can be used to animate any CSS property:

<style>
  /* Previous CSS snippet goes here... */

  div > div {
    background: #555;
    width: 2em;
    height: 2em;
    margin-top: 2em;
    border-radius: 50%;
  }
  
  div > div:first-child { translate: calc(sin(var(--t)) * 200px + 200px) }
  div > div:last-child { translate: calc(cos(var(--t)) * 200px + 200px) }

</style>

<div>
  <div></div>
  <div></div>
</div>

By mastering these lesser-known CSS features, developers can optimize CSS feature selection for high-quality design requirements and efficiently create websites.