In modern CSS, various effects that previously required complex setups and concepts can now be achieved with one-line enhancements. These modern CSS techniques are widely supported by browsers, and in this article, I'll introduce eight of them that you might not know about.

1. Scroll Chaining

When a scrollable element, such as a dialog in a browser, reaches the end of its scrollable content, the scroll interaction is passed on to the underlying page (i.e., the body element). This is a default behavior known as scroll chaining.

Scroll chaining isn’t limited to dialogs; it can happen with any adjacent scrollable areas, like sidebars with navigation links or chat popups. In the past, we had various tricks to avoid this, but now, thanks to the overscroll-behavior property, it can be easily controlled with a single line of code.

The default value, overscroll-behavior: auto, allows the usual scroll overflow behavior. To isolate scrolling within a container, you can set overscroll-behavior: contain

.messages {
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

Notice that we use overflow: auto instead of overflow: scroll, which only shows a scrollbar when necessary. Additionally, you can use overscroll-behavior: none to prevent the bounce effect that occurs when you scroll beyond the page boundaries. For instance, to prevent Chrome on Android from refreshing the page when scrolling past the top, you can set this on the html element:

html {
  margin: 0;
  overscroll-behavior: none;
}

2. Scrollbar Gutter

As mentioned above, when using overflow: auto, a scrollbar is added when content becomes too long, which can cause layout shifts by taking up space. This can negatively impact text readability.

Now, with the scrollbar-gutter property, you can reserve space for the scrollbar in advance, avoiding unnecessary visual shifts.

The default value is scrollbar-gutter: auto. You can set scrollbar-gutter: stable to reserve space:

Note that the gutter itself doesn’t have a color—it’s set to gray here for differentiation. Additionally, the second optional parameter, both-edges, allows you to create symmetrical gutters on both sides.

3. Object-Fit and Aspect-Ratio

These two properties can be paired to ensure that images or videos (replaced elements) are displayed without distortion.

object-fit has several possible values:

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

• contain: The replaced content scales to maintain its aspect ratio while fitting within the element’s content box, possibly leaving empty space (letterboxing).

• cover: The content scales to fill the element’s content box while maintaining its aspect ratio, which may result in clipping.

• fill: The content stretches to fill the content box, potentially distorting its aspect ratio.

• none: The content is not resized.

• scale-down: The content is sized as if none or contain were specified, whichever results in a smaller size.

With the aspect-ratio property, you no longer need the padding hack to maintain aspect ratios for elements like videos (e.g., 16:9) or squares. You can now simply use:

.aspect-ratio {
  aspect-ratio: 16/9;
}

.aspect-ratio-square {
  aspect-ratio: 1;
}

Combining these two properties ensures better display consistency:

.image {
  object-fit: cover;
  aspect-ratio: 1;
}

4. min-content, max-content, and fit-content

The min-content keyword limits an element's size to fit the longest word without causing overflow, applying soft line breaks where necessary. This is particularly useful in grid layouts:

.grid-item {
    width: min-content;
}

The max-content keyword represents the maximum intrinsic size of the content, meaning text won’t wrap, even if it causes overflow:

The fit-content keyword is equivalent to fit-content(stretch). Practically, it means the box will use the available space but never exceed the maximum content size:

The calculation for fit-content() is similar to minmax（auto， max-content）, where the maximum size is defined by max-content and the minimum size by auto. However, if the track size exceeds the automatic minimum, the track size will be constrained to the specified parameter.

5. padding-inline and margin-inline

These logical properties might often be overlooked, but they simplify the handling of inline margins and paddings. They are equivalent to:

/* Before */
margin-inline-start: auto;
margin-inline-end: auto;

/* After */
margin-inline: auto;

The margin-inline-start or margin-inline-end corresponds to margin-top and margin-bottom or margin-right and margin-left, depending on the values set for writing-mode, direction, and text-orientation. This is particularly useful for layouts that need to support both LTR and RTL directions.

Similarly:

/* Before */
padding-inline-start: 10px;
padding-inline-end: 20px;

/* After */
padding-inline: 10px 20px; 

6. color-scheme and accent-color

You might be familiar with the prefers-color-scheme media query for customizing dark and light themes. The CSS color-scheme property extends this by allowing you to define the browser's UI elements, including form controls, scrollbars, and system colors, to match your color scheme preferences.

:root {
/* Indicates a preference for dark themes (or light if reversed). */
  color-scheme: light dark;
}

/* Specific elements */
header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}

The accent-color property allows you to set a custom color for elements like:

• <input type="checkbox">

• <input type="radio">

• <input type="range">

• <progress>

7. Preventing Input Zoom on iOS Safari

In iOS Safari, focusing on an input field causes the entire page to zoom in by default, which can significantly affect the user experience. You can prevent this by setting the font-size to at least 16px using the max function, as mentioned in my article on Modern CSS - Math Functions: calc(), min(), max(), clamp()

Subscribe to Premium to read the rest.