Introduction to New CSS Features in 2024

In recent years, CSS has ushered in many exciting new features that not only solve many long-standing problems, but also help you significantly optimize the structure of your code. Here are some new CSS features worth noting:

aspect-ratio: Set the fixed ratio of the element

aspect-ratio allows you to define the desired width-to-height ratio of an element's box.

Keeping image proportions constant is a common requirement. This can be easily achieved using aspect-ratio.

/* Control image proportions */
.image {
 width: 100%;
 aspect-ratio: 4 / 3;
}

/* Control video ratio */
.video {
 width: 100%;
 aspect-ratio: 16 / 9;
}

/* Control third-party content */
.iframe-container {
 width: 100%;
 aspect-ratio: 16 / 9;
}

You can remove the fixed ratios currently set by various techniques in your code, complete the setting directly with one line of code, and reduce the number of your DOM at the same time.

compatible:

text-overflow: truncate text

text-overflow is used to specify how to handle and display the overflowed text when the text content overflows its container. Typically, text-overflow is used in combination with other properties such as white-space and overflow to achieve the desired text truncation effect.

text-overflow can set two parameters, namely:

1. clip: truncate text without adding ellipses.
2. ellipsis: Add ellipses when text overflows.

<div class="text-container">
 This is a long paragraph that will be truncated with an ellipsis if it overflows.
</div>

.text-container {
 width: 200px; /* Set container width */
 white-space: nowrap; /* disable text wrapping */
 overflow: hidden; /* Hide overflow content */
 text-overflow: ellipsis; /* Use ellipsis to indicate overflow text */
}

compatible:

object-view-box: crop images and videos

object-view-box It allows you to crop and scale images and videos to fit the dimensions of their container.

<img src="example.jpg" />

img {
 width: 300px;
 object-view-box: inset(30% 30% 10% 20%):
}

Although this property is not currently widely supported, similar effects can be achieved with similar properties and techniques. Here are detailed instructions on how to use existing CSS properties to crop and scale images and videos.

object-fit and object-position are two very useful CSS properties that can be used to control how images and videos are displayed in the container.

<div class="image-container">
 <img src="path/to/image.jpg" alt="Example Image">
</div>

.image-container {
 width: 300px;
 height: 200px;
 overflow: hidden; /* Hide overflow content */
}

.image-container img {
 width: 100%;
 height: 100%;
 object-fit: cover; /* fill the container and maintain proportion */
 object-position: center; /* center alignment */
}

compatible:

gap property in Flexbox

In CSS Flexbox layout, the gap property is used to set the spacing between flex items. The gap property was once only available in CSS Grid layouts, but has now been extended to Flexbox layouts as well, providing a simple and intuitive way to control gaps in layouts.

Have you ever been able to only set the spacing in flex through margin-top or margin-bottom, and then specially handle the border spacing?

The gap attribute can accept one or two values:

1. Single value: Sets the same spacing horizontally and vertically.
2. Two values: the first value sets the row spacing, and the second value sets the column spacing.

<div class="flex-container">
 <div class="flex-item">Item 1</div>
 <div class="flex-item">Item 2</div>
 <div class="flex-item">Item 3</div>
 ...
</div>

.flex-container {
 display: flex;
 flex-wrap:wrap;
 gap: 10px 20px; /* Set the row spacing to 10px and the column spacing to 20px */
}

.flex-item {
 width: 20%;
 background-color: #fffff2;
 padding: 20px;
 border: 1px solid #ddd;
}

In this example .flex-container uses display: flex and gap: 20px, resulting in a 20px gap between each flex item (.flex-item).

compatible:

color-scheme: theme settings

As light and dark themes become more and more popular, color-scheme is added to CSS to specify the color schemes supported by elements. It allows the browser to automatically adjust colors and related styles (such as scroll bars, form controls, etc.) to adapt to light or dark mode based on the user's system settings or the design of the page.

The color-scheme attribute can be set to one or more values ​​to specify the supported color schemes. Common values ​​include:

1. light: light mode
2. dark: dark mode
3. normal: default color scheme

<body>
 <div class="container">
 <h1>Hello, World!</h1>
 <p>This is an example of using the color-scheme property.</p>
 </div>
</body>

body {
 color-scheme: light dark; /* supports light and dark modes */
 font-family: Arial, sans-serif;
 padding: 20px;
}

.container {
 background-color: var(--background-color);
 color: var(--text-color);
 padding: 20px;
 border-radius: 5px;
}

This attribute can be set on the element or on the root element

/* Set color-scheme on the root element */
:root {
 color-scheme: dark light;
}

compatible:

overscroll-behavior: Prevent scrolling from passing

overscroll-behavior is used to control the scrolling behavior of the scroll container at the boundary. It prevents scroll events from propagating to parent elements or turns off the browser's default scrolling behavior.

Have you ever scrolled the mouse wheel like crazy, causing it to be passed directly from within the child component to the web page? By using this attribute, developers can have more control over the user experience of the page.

overscroll-behavior can be set to the following values:

1. auto (default): Allow scroll events to propagate and retain default browser behavior.
2. contain: Prevent scroll events from propagating to the parent element, but retain the default browser behavior.
3. none: Prevent the propagation of scroll events and turn off the default browser behavior.

<body>
 <div class="scroll-container">
 <div class="content">Scrollable content...</div>
 </div>
</body>

body {
 margin: 0;
 height: 200vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #f8f9fa;
}

.scroll-container {
 width: 300px;
 height: 200px;
 overflow: auto;
 border: 2px solid #ccc;
 padding: 10px;
 background-color: #fff;
 overscroll-behavior: contain; /* Prevent scrolling events from propagating */
}

.content {
 height: 400px;
 background: linear-gradient(to bottom, #e9ecef, #dee2e6);
}

compatible:

Summarize

Although CSS now has many exciting new features, which have solved many of the pain points that CSS has always had, we still need to wait more time for compatibility. Most of the new features cannot be used in Safari. If you use In order to obtain relevant features, it is best to adapt to low-end models.