DEV Community

mpoiiii
mpoiiii

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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:

aspect-ratio 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>
Enter fullscreen mode Exit fullscreen mode
.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 */
}
Enter fullscreen mode Exit fullscreen mode

compatible:

text-overflow 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" />
Enter fullscreen mode Exit fullscreen mode
img {
 width: 300px;
 object-view-box: inset(30% 30% 10% 20%):
}
Enter fullscreen mode Exit fullscreen mode

object-view-box example

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>
Enter fullscreen mode Exit fullscreen mode
.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 */
}
Enter fullscreen mode Exit fullscreen mode

compatible:

object-view-box 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>
Enter fullscreen mode Exit fullscreen mode
.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;
}

Enter fullscreen mode Exit fullscreen mode

gap property in Flexbox example

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

compatible:

gap property in Flexbox 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>
Enter fullscreen mode Exit fullscreen mode
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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

compatible:

color-scheme 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>
Enter fullscreen mode Exit fullscreen mode
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);
}
Enter fullscreen mode Exit fullscreen mode

compatible:

overscroll-behavior 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.

Top comments (0)