Modern CSS takes the whole control of website styling with the help of required JavaScript. In this article, we will highlight seven new CSS updates to simplify the future of styling. In addition, we are considering the browser support of Chrome, Edge, and Firefox. Finally, we will discuss the issues, solutions, and pretty much everything that you'll need to get started right away.
Considering all the tricks and techniques, here are some handpicked CSS features that are worth your time. So, without any further ado, let's dive right into it.
1. CSS Subgrid
Unlike CSS flexbox's ability to move only in one direction, you can define both the dimensions in grids. As they start getting powerful and popular in the coming decades, tremendous changes are witnessed in web designs. Nested grids are used to draw grids inside the grids. But, what are the major drawbacks that raised a call for CSS subgrids?
- Nested grids after level 2 used to overflow content outside the bigger grid that heavily impacted the responsiveness of a website.
- Nested grids acted as independent elements inside the bigger grid container. There was not at all reference to the parent container for any change.
Without subgrids:
After subgrids:
Here's how you can implement subgrids:
.container {
width: 700px;
height: 500px;
background: rgb(214, 255, 139);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.container div {
background: rgb(72, 170, 137);
grid-row: 2/ 3;
grid-column: 2 / 5;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
You can place multiple subgrids. The notable exception is that subgrids inherit parent grid-gap property. It will result in creating all the subgrids with same gap properties inside every parent grid.
The best thing about subgrids is that they are highly responsive, adjustable, and scalable.
Browser compatibility: Firefox
2. aspect-ratio Property
You can eliminate all the adjustment and calculative issues by changing the aspect ratio of a given container. If you aim to insert a video, all you need to do is fix an aspect-ratio relative to the varying screen size. But, while working with two dimensional multiple grids, there are chances of overflows and defaulted view.
You can fix it by supporting the aspect ratio property with width attribute. It becomes handy for responsive images as you can define a height or width.
Here’s how you can implement aspect-ratio property:
.container {
width: 700px;
aspect-ratio: 16 / 9;
background: rgb(72, 170, 137);
}
You can also input aspect-ratio: auto instead of specifying the ratio. The downside of default auto value is that the browser will pick the original dimension of the image. Undoubtedly, it hampers the site's responsiveness.
Browser compatibility: Chrome, Edge, Firefox (partial)
3. Flexbox Gap
Grid-gap is quite popular for creating equal space between each grid. But, you were supposed to apply negative margins, pseudo-class selectors, and complex selectors to handle the space between each flex-items. Thus, the Flexbox gap results in lesser lines of code with higher scalability.
Here's how you can implement the flexbox gap:
.container {
width: 700px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
}
Output:
Browser compatibility: All major browsers, including Chrome, Edge, and Firefox.
4. Scroll Snap
Scrolling helps in sharing more information about a single website without cluttering the web copy. But, the major downside of scrolling is that it may stop at half of the para or image. Sometimes, the control of paginated content is left mid-way. JavaScript is thoughtfully used to avoid scroll customization. But, it was not a completely satisfactory result until CSS Scroll Snap came.
Using Scroll Snap, you can define specific boundaries to fix the layout and visibility of a given container. For example, it works awesome to create carousels and definite website sections. Note that you won't require JS for any adjustment.
Here's how you can implement scroll snap:
.container {
width: 100%;
height: 100%;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
width: 100%;
height: 100%;
}
Output:
CSS scroll snap has parent and child property. The parent or container property decides the direction of the scroll (x or y) and the behavior of the scroll snap. For example, you can set scroll-snap-type: x mandatory. It will grant the user control to decide the scrolling point without considering the scroll position.
On the other hand, scroll-snap-type: y proximity functions only when the website visitor is closer to the scrolling point.
The child property is scroll-snap-align to align the elements during CSS scroll snap. It inputs start, end, and center values to align elements accordingly.
5. Feature Queries
Feature queries are used to deal with graceful degradation. For instance, CSS grids are quite popular nowadays. But, it's worth mentioning that older browsers cannot render it.
Here, feature queries check whether that particular browser supports a specific property or not and gives a support system that encourages referring to a CSS property only if it is supported on that browser. Otherwise, the default value is considered. In this case, you can place blocks instead of grids for any predicted fallback.
Here's how you can implement feature queries:
@supports (content-visibility: auto) {
body{
background: teal;
width: 100%;
height: 100%;
}
}
Therefore, only those browsers that render content-visibility properties will have teal background color; otherwise, the default value would be considered. Note that @ is similar to @media of media queries, where you were supposed to set a max-width or min-width to makeshift adjustments. It simplifies remembering the feature queries @supports.
Browser compatibility: All major browsers, including Chrome, Edge, and Firefox.
6. content-visibility Property
Fast rendering works as a backbone for a user-interactive website. With the increasing popularity of mobile devices, the rendering performance of a website acts as a bottleneck for getting an appealing website.
Here, content-visibility property plays a crucial role. Because, by default, the browsers render all the website's elements at once. It decreases the load time and overall site performance, especially if your website has many heavy animations. On the other hand, the content-visibility property renders only the viewport elements and shows other elements as you scroll throughout the page.
#main {
content-visibility: auto;
/* contain-intrinsic-size: 0 500px; */
}
The content-visibility property inputs three values. content-visibility: visible shows no effect while content-visibility: hidden is similar to display: none where the element skips the inaccessible contents. The content-visibility: auto skips the irrelevant content, but it is available as a normal page to the user-agent features.
Let's measure the power of content-visibility. Here's the result:
7. Transition, Transform, and Animation
In CSS, we have two ways to apply animation. Transition is used to make smooth changes in visual properties of elements. On the other hand, without transition, transform would abruptly manipulate from one state to another.
Animations are used with @keyframes that set styles at several points during the animation duration. The interesting thing is that @keyframes define when the change will happen, transform and animation takes control of the change, and transition takes care of how the change will happen (e.g., hover effects).
.child {
background: teal;
height: 150px;
width: 150px;
color: white;
transition: transform 0.2s ease-in-out;
animation: myAnimation 2s infinite;
}
.child:hover {
transform: scale(2, 2) rotate(45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transform: translateX(400px)
}
100% {
transform: translateX(0px)
}
}
Browser compatibility: All major browsers, including Chrome, Edge, and Firefox.
Wrapping Up
Cascading stylesheet markup is continuously evolving with better features. So far, you came to know about these seven awesome features that include CSS subgrid, aspect-ratio property, flexbox gaps, scroll snap, feature queries, content-visibility property, transition, transform, and animation.
At the end of the day, you have to ensure which features are simplifying your website styling.