Category: Coding

Here are some Cascading Style Sheets updates you won’t want to miss, ranging from little-known scroll-snap properties to stunning new color palettes.

CSS (Cascading Style Sheets) debuted in 1996 and is still an important, evolving component of the web development stack. CSS, like other living languages, is always adding new features in response to real-world practices. Because of the rapid evolution, even dedicated developers may miss new features. Check out some of the most useful features coming to CSS in the near future.

Subgrid

CSS has been criticized for a number of egregious flaws since its inception. Some simple tasks, such as centering something in CSS, necessitate overly complex workarounds and finagling.
Another significant issue was achieving a reasonable grid layout, at least until the CSS Grid Layout module stepped in.

A grid layout is indicated by the display: grid declaration and is similar to Flexbox in that it allows you to define rectangular layouts while also controlling your grid in two dimensions.
According to research, most CSS developers are aware of Grid Layout, and many of us use it. (Don’t forget to try it out if you haven’t!)

Subgrid is a brand-new and extremely useful feature for the Grid Layout module. The subgrid feature allows you to create a child grid that will inherit the layout of its parent grid.

In contrast to nesting a grid display within another, the child grid defines its own dimensions and gaps. The parent’s layout is applied to the subgrid when using the subgrid, but the subgrid can still override aspects of the layout if necessary.

Subgrid is currently only available in Firefox 71 and higher, but it is planned for Safari WebKit, Google Chrome, and Microsoft Edge. A Subgrid will be a very useful layout feature in the future.

Accent-color

Despite their popularity, some display elements are notoriously difficult to style. Checkboxes and radio buttons, for example, are frequently replaced with a custom widget that mimics their behavior while hiding the browser’s implementation. You can target these elements with the new CSS accent-color option.

For example, as shown in Listing 1, you could apply a magenta color to all of the radio buttons on your page (also see this live example).

Listing 1: CSS Color Control for Radio Buttons

<style>
input[type="radio"] {
    accent-color: magenta;
}
</style>

<form action="/foo.bar">
  <p>Select your favorite outdoor adventure type</p>
  <input type="radio" id="mountain" name="type" value="mountain">
  <label for="mountain">Mountain</label><br>
  <input type="radio" id="ocean" name="type" value="ocean">
  <label for="ocean">Ocean</label><br>
  <input type="radio" id="desert" name="type" value="desert">
  <label for="desert">Desert</label>
</form>

Scroll snap

CSS offers a handy set of properties for controlling the scroll snap-action in a web browser. Many of these features are already available in recent browser versions, while others are still being rolled out.

It’s worth noting that more than a third of CSS users are still unaware of scroll snap.

The scroll-snap-* properties command provides several options for fine-tuning how the scroll position works on a container. Developers benefit from increased precision, while end-users benefit from a smoother, more controlled user experience.

Listing 2 shows a simple example of how to control the scroll snap on a div (also see this live example).

Listing 2 is an example of a simple scroll snap.

<style>
  .scroll-container,
  .scroll-area {
    max-width: 850px;
    height: 300px;
    font-size: 60px;
  }

  .scroll-container {
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 500px;
  }

  .scroll-area {
    scroll-snap-align: start;
  }

  .scroll-container,
  .scroll-area {
    margin: 0 auto;
  }

  .scroll-area {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .scroll-area:nth-of-type(1) {  background: IndianRed; }
  .scroll-area:nth-of-type(2) {  background: Moccasin; }
  .scroll-area:nth-of-type(3) {  background: thistle; }
  .scroll-area:nth-of-type(4) {  background: seagreen; }
</style>

<div class="scroll-container">
	<div class="scroll-area">1</div>
	<div class="scroll-area">2</div>
	<div class="scroll-area">3</div>
	<div class="scroll-area">4</div>
</div>

The y scroll position in Listing 3 automatically moves to the child element no matter where you release the scroll movement. This is due to the scroll container’s scroll-snap-type property being set to y and the child elements having the scroll-snap-align: start declaration.

This behavior can also be changed. You could, for example, set the scroll-snap-type property to y proximity. That works as expected, snapping only when the scroll is close to the element.

In addition, the related overscroll-behavior property controls how nested-scroll containers behave.

Logical CSS Properties

You’ve probably experienced the annoyance of having to write out the border-left and border-right or border-top, border-bottom properties verbatim if you’ve ever wanted to set a container border on the left and right, or bottom and top. The problem is that there is no way to use the shortcut property without affecting the borders you don’t want to change. This is also true for elements like padding and margins.

The CSS Logical Properties module allows you to refer to things in an abstract way by using the inline and block keywords. When referring to left and right, use inline; when referring to top and bottom, use block. For example, to add a border to the left and right sides of a div, use the code in Listing 3. (also see a live example here).

Listing 3: Left and right padding with inline logic

div {
  border-inline: 10px dashed seagreen;
}

These are useful shortcuts for borders, but the inline and block logical keywords can also be found in a variety of other properties.

The majority of developers use these shortcuts to deal with text-direction and writing-mode issues. In these cases, a property like padding-inline-end allows you to target the trailing padding regardless of text direction.

Essentially, the abstraction to inline and block allows for the creation of generalized styles that can be applied to a variety of situations. More information can be found at, CSS Logical Properties and Values.

Container searches

Container queries are not yet fully stable in CSS, but they will be soon. They will have a significant impact on the way we think about responsive design. The basic idea is that you will be able to set a breakpoint based on the size of a parent container rather than just the viewport and media.

There is no clear definition of the syntax, but it will probably resemble Listing 4.

@container Listing 4.

@container (max-width: 650px){ … }

Consider how powerful it will be to fine-tune a layout based on the size of various containers that appear throughout the nested layers of a UI. This is a fairly significant change that will almost certainly spark a wave of interface innovations.

Three new color schemes

CSS practitioners have used RGB, HEX, and named colors to beautify and enliven device displays since time immemorial. The HSL-style color declaration was introduced recently. The CSS specification is now introducing new color descriptors, namely hwb, lab, and lch.

HWB is an abbreviation for hue, whiteness, and blackness. It’s a nice touch that stands out for its human readability—you choose a color and then add white and black. It’s compatible with the most recent versions of Chrome, Firefox, and Safari. (The Microsoft Edge feature reference is oddly deafeningly silent on this subject.) To learn more about HWB, see hwb() – a color notation for humans? It, like RGB and HWL, has an alpha channel for transparency.

LCH, which stands for lightness, chroma, and hue, is notable for expanding the available color palette. What, why, and how are LCH colors used in CSS? This is a good overview that includes an eye-opening discussion of color theory in CSS. Only Safari currently supports LCH.

The most theoretical of the new color spaces is LAB, which is derived from the CIE LAB color theory. The lab color descriptor claims to cover the entire spectrum of human-perceptible colors, which is a bold claim. It, like LCH, is currently supported only by Safari. More information about LAB for CSS can be found in the Mozilla CSS documentation.