Modern CSS takes full control of the styling of the website using the required JavaScript. In this article, we’ll highlight seven new CSS updates to simplify the future of styling. Additionally, we are considering browser support for Chrome, Edge, and Firefox. Finally, we’ll discuss issues, solutions, and just about everything you’ll need to get started right away.

Considering all the tips and techniques, here are some handpicked CSS features that are worth your time. So, without further ado, let’s dive into it.

1. CSS sub-grid

Unlike the ability of CSS flexbox to move in only one direction, you can define both dimensions in grids. As they start to become powerful and popular in the decades to come, tremendous changes are seen in web designs. Nested grids are used to draw grids inside grids. But what are the major drawbacks that have sparked a call for CSS subgrids?

• Nested grids after level 2 overflowed with content outside of the larger grid, which greatly affected a website’s responsiveness.

• The nested grids acted as independent elements inside the larger grid container. There was no reference to the parent container for any changes.

Without subnets:

After the subnets:

Here’s how to 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 sub-grids. The notable exception is that subgrids inherit from the parent grid-gap property. This will cause all sub-grids to be created with the same spacing properties inside each parent grid.

The best thing about subnets is that they are very responsive, adjustable, and scalable.

Browser compatibility: Firefox

2.Aspect ratio property

You can eliminate all fit and calculation issues by changing the aspect ratio of a given container. If you want to insert a video, you just need to set an aspect ratio relative to the varying screen size. But, when working with multiple two-dimensional grids, there are risks of overflow and default view.

You can fix it by supporting the aspect ratio property with the width attribute. This comes in handy for responsive images because you can set a height or a width.

Here’s how to implement the aspect ratio property:

.container {
width: 700px;
aspect-ratio: 16 / 9;
background: rgb(72, 170, 137);
}

You can also enter the aspect ratio: auto instead of specifying the ratio. The downside of the automatic default is that the browser will choose the original dimension of the image. Without a doubt, this affects the responsiveness of the site.

Browser compatibility: Chrome, Edge, Firefox (partial)

3. Flexbox space

Grid-gap is very popular for creating equal space between each grid. But, you were supposed to apply negative margins, pseudo-class selectors, and complex selectors to manage the space between each flexible element. Thus, the Flexbox gap results in fewer lines of code with greater scalability.

Here is how you can implement the flexbox gap:

.container {
width: 700px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
}

Production:

Browser Compatibility: All major browsers including Chrome, Edge, and Firefox.

Scrolling allows more information to be shared on a single website without cluttering the web copy. But, the main disadvantage of scrolling is that it can stop halfway through the para or frame. Sometimes control of paginated content is left halfway. JavaScript is used judiciously to avoid scrolling customization. But, that wasn’t a completely satisfactory result until CSS Scroll Snap came along.

Using Scroll Snap, you can set specific limits to fix the layout and visibility of a given container. For example, it works great for creating carousels and defined website sections. Note that you won’t need JS for any adjustments.

Here’s how to 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%;
}

Production:

The CSS scrolling snap has a 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 make scroll-snap-type: x mandatory. It will give the user the control to decide the scroll point regardless of the scroll position.

In contrast, the scroll-snap: y proximity type only works when the site visitor is closer to the scroll point.

The child property is scroll-snap-align to align elements when snapping to CSS scroll. It enters the start, end, and center values ​​to align the elements accordingly.

5. Feature requests

Feature requests are used to deal with gradual degradation. For example, CSS grids are very popular these days. But, it should be mentioned that older browsers cannot render it.

Here, the feature queries check whether that particular browser supports a specific property or not, and provides a support system that encourages reference to a CSS property only if it is supported on that browser. Otherwise, the default value is taken into account. In this case, you can place blocks instead of grids for any planned folds.

Here’s how to implement feature queries:

@supports (content-visibility: auto) {
body{
background: teal;
width: 100%;
height: 100%;
}
}

Therefore, only browsers that display content visibility properties will have a teal background color; otherwise, the default value would be taken into account. Note that @ is similar to @media for media queries, where you were supposed to set a maximum width or a minimum width for makeshift adjustments. This makes it easier to remember @supports feature requests.

Read more: How to use multimedia queries in HTML and CSS

Browser Compatibility: All major browsers including Chrome, Edge, and Firefox.

6.Content visibility property

Fast rendering works as the backbone of an interactive website for the user. With the growing popularity of mobile devices, the rendering performance of a website is a bottleneck in achieving an engaging website.

Here, the visibility property of the content plays a crucial role. Because, by default, browsers render all the elements of the site at the same time. This decreases the load time and overall site performance, especially if your website has a lot of heavy animations. On the other hand, the content-visibility property renders only viewport items and displays other items as you scroll the page.

#main {
content-visibility: auto;
/* contain-intrinsic-size: 0 500px; */
}

The content-visibility property enters three values. content-visibility: visible shows no effect while content-visibility: hidden is similar to display: none where the element ignores unreachable content. Content visibility: Auto ignores irrelevant content, but it is available as a normal page for user agent functionality.

Let’s measure the power of content visibility. Here is the result :

7. Transition, transformation and animation

In CSS we have two ways to apply animation. The transition is used to make smooth changes in the visual properties of elements. On the other hand, without transition, the transformation would pass abruptly from one state to another.

Animations are used with @keyframes which define styles at multiple times during the animation duration. The interesting thing is that @keyframes defines when the change will happen, the transformation and animation take control of the change, and the 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.

Wrap

Cascading style sheet markup is continually evolving with better functionality. So far you have discovered these seven awesome features which include CSS subgrid, aspect ratio property, flexbox gaps, scroll snapping, feature queries, visibility property of content, transition, transformation and animation.

Ultimately, you need to make sure which features simplify the style of your website.

Read more

About the Author