Google’s Core Web Vitals: How to Optimize Your Website?

In 2021, things were difficult for CSS. Nevertheless, there has been a lot of progress in CSS development, from improving old capabilities to speculating several new ones, which have been implemented in many browsers undergoing experimental testing.

CSS coding is one of the most important responsibilities a web developer has regularly. CSS is a stylesheet language that lets us style web pages and make them interactive across various platforms. As a result, it will make a website more interactive. It is because this language has so many applications.

In the case of large projects, generating CSS code from scratch may take a long time. On the other hand, there are many free CSS tools available online. Web developers can benefit significantly from these tools because they save time and make coding more efficient.

Let’s take a look at which CSS language features we can anticipate seeing in browsers in 2022 as 2021 draws to a close. So, for 2022, here are some of the most interesting new CSS features.

1. 1. 1. Container Queries
         In today’s world, responsive web design is unavoidable. Moreover, consumers who use numerous devices to access the internet simultaneously are not uncommon. As a result, your website must be ready to handle a wide range of devices with different screen widths. To do so, you’ll need to adjust your designs and reorganize visual elements dependent on the size of the viewport. The problem is that some components do not automatically respond to their parent container’s changes.Container queries define the set of styles that components must follow depending on their containers’ criteria. As you might assume, this feature provides an elegant solution to typical CSS Grid difficulties.Container Queries, part of CSS-contain-3, allow authors to style elements based on their container’s size or look. It is comparable to a @media query for size-based container queries; however, it evaluates against the size of a parent container rather than the viewport.

          

         Styles are applied conditionally in style-based container queries based on the calculated value of another CSS property.

         main, aside {
         container: inline-size;
         }

         .media-object {
         display: grid;
         grid-template: ‘img’ auto ‘content’ auto / 100%;
         }

         @container (inline-size > 45em) {
         .media-object {
         grid-template: ‘img content’ auto / auto 1fr;
         }
         }

      2. CSS Subgrid
         CSS Grid is a versatile layout module that enables developers to create complex layouts without JavaScript or clumsy CSS hacks.Add the following rule to an HTML element to apply the grid layout.

          

         .grid {
         display: grid;
         grid-template-columns: repeat(9, 1fr);
         grid-template-rows: repeat(4, minmax(100px, auto));
         }

         You can use a variety of grid-specific properties to create the exact layout you require.
         For example, in the preceding example, the grid items will be the child elements of .grid-container, and they will be laid out according to the rules you define with the grid-template-columns and grid-template-rows properties:

         .grid-container {
         display: grid;
         grid-template-columns: 1fr 2fr 1fr;
         grid-template-rows: 50px 70vh 50px;
         }

         But what if you want to use some (or all) of the .grid-grandchild container’s elements in your grid layout? The CSS subgrid is used to solve this problem.

         To enable a grid item to adopt its parent’s grid tracks, you can apply the following rules (including the name grid lines and areas, even though it can also define its own).

         .grid-item {
         /* these rules specify the subgrid’s position within the layout */
         grid-column: 2 / 4; /* two columns vertically */
         grid-row: 1 / 3; /* two rows horizontally */
         /* these rules belong to the subgrid itself */
         display: grid;
         grid-template-columns: subgrid;
         grid-template-rows: subgrid;
         }

         The grid-column and grid-row properties define the grid item’s position within the grid columns or rows. The subgrid will be made up of the child components of .grid-item. A grid item can be spread across multiple grid cells. Subgrid is a value you can apply to the grid-template-columns and grid-template-rows attributes, not a standalone CSS property.

         You may also make a one-dimensional subgrid by only using grid-template-columns or grid-template-rows and giving the other a different value.

         In the example below, the subgrid merely adopted the primary grid’s columns, but it adds a separate rule for the rows.

         .grid-item {
         display: grid;
         grid-template-columns: subgrid;
         grid-template-rows: 200px 400px 200px;
         }

         Unlike CSS flexbox, which can only move one way, grids allow you to specify both dimensions. Web designs are changing dramatically as they become more powerful and famous in the future decades. Grids within grids are drawn using nested grids. But what are the key drawbacks that have prompted the use of CSS subgrids?

         After level 2, nested grids were used to overflow material outside the larger grid, significantly influencing a website’s responsiveness. Within the larger grid container, nested grids functioned as independent pieces. Therefore, there was no mention of the parent container in any of the changes.

         You can add as many subgrids as you want. Subgrids inherit the parent grid-gap property, which is notable. It will result in all subgrids within each parent grid having the same gap attributes.

         The best thing about subgrids is how responsive, adaptable, and scalable they are.

      3. CSS parent selector :has()
         The :hasselector is unique among CSS selectors. The CSS:has() pseudo-class selector is comparable to:not(), which is also used in CSS functions. A dynamic pseudo-class function is what it’s called. It gives you the ability to fine-tune your element matching.If any selector supplied as an argument matches at least one element, the :has() pseudo-class will represent it!
         If the selector is supplied to :has() match at least one element, the element is selected. It appears that this is a little difficult to grasp. Consider the following example:

          

         figure img {
         aspect-ratio: 21 / 9;
         border: 5px solid #3f51b5;
         }

         figure:has(figcaption) img {
         border: 5px solid #9c27b0;
         }

         The figure :has(figcaption) img selector shows that the figure> the element containing the ficaption>element is selected in the example mentioned above. All features with the image /> tag are included. The figcaption selection is passed as an input to here :has().

      4. Cascade Layers
         You can appropriately regulate cascade ordering for same-origin rules with Cascade Layers. It is accomplished by using the @layer at-rule to layer your styles. In the cascade, layers come first, followed by specificity and presentation sequence.

          

         @import(reset.css) layer(reset); /* 1st layer */
         @layer base { /* 2nd layer */
         form input {
         font-size: inherit;
         }
         }

         @layer theme { /* 3rd layer */
         input {
         font-size: 2rem;
         }
         }

         Chromium 99 and Firefox 97 will allow cascade layers. In the first quarter of 2022, they’ll be available as part of Safari TP 133 (behind a flag).

      5. Color Functions
         When working with color, the css-color-5 specification has a few niceties. It introduces two new functions, color-mix() and color-contrast(), and extends existing functions with relative color syntax.
         You can use the color-mix() function to combine two colors in a particular color space.

          

         .text-primary-dark {
         color: color-mix(var(–theme-primary), black 10%);
         }

         .text-primary-darker {
         color: color-mix(var(–theme-primary), black 20%);
         }

         When contrasted to a given base color, the color-contrast() method allows you to choose the best color from a list of colors that satisfies or exceeds the contrast requirement.

         /* Compares wheat against tan, sienna, and #d2691e */

         /* Sienna will be selected as it has a contstast of 4.273 against wheat, which exceeds the threshold of AA-large (3) */

         color-contrast(wheat vs tan, sienna, #d2691e to AA-large)

         You can alter any color to any format using relative color syntax.

         :root {
         –color: #ff0000;
         }

         .selector {

         /* change the transparency */
         color: hsl(from var(–color) h s l / .5);
         /* change the hue */
         color: hsl(from var(–color) calc(h + 180deg) s l);
         /* change the saturation */
         color: hsl(from var(–color) h calc(s + 5%) l);
         }

         These additions fill in the gaps left by CSS Preprocessors. WebKit/Safari already supports it.

      6. Accent Color
         One of the most time-consuming components of website development is form styling. Like many other controls, Forms use the default styles of the web browser. If you wanted to modify their appearance, you’d have to go out of your way to develop code from scratch. A single color change would involve a significant amount of time and effort, potentially delaying you. Accent color overcomes this problem by allowing you to alter the color of controls with just one CSS line.CSS accent-color is a feature of the CSS UI specification that allows you to tint elements with just one line of CSS, saving you time and money by allowing you to incorporate your brand into details.

          

         form {
         accent-color: hotpink;
         }

         Authors can tint both the light and dark parts using the accent-color attribute in conjunction with color-scheme. The user uses a dark theme in this example; the page uses color-scheme: light dark, and the dark-themed hot pink tinted controls use the same accent-color: hotpink.

         Checkbox, radio, range, and progress are the only elements that will tint using the accent-color property. Chromium 93+ and Firefox 92+ both support this feature.

      7. Media Query Ranges
         Specific media queries can now be redone using Media Query Ranges, a syntax that employs standard mathematical comparison operators, thanks to new features in mediaqueries-4.

          

         /* Old Way */
         @media (max-width: 750px) {
         …
         }

         /* New Way */
         @media (width <= 750px) {
         …
         }

      8. Scroll-Linked Animations
         You can bind CSS Animations to the scroll offset of a scroll container using the @scroll-timeline at-rule and animation-timeline property provided by the scroll-animations-1 specification. The connected animation will advance and rewind as you scroll up and down within the container.

          

         /* (1) Define Keyframes */
         @keyframes adjust-progressbar {
         from {
         transform: scaleX(0);
         }

         to {
         transform: scaleX(1);
         }
         }

         /* (2) Define a ScrollTimeline */
         @scroll-timeline scroll-in-document {
         source: auto;
         orientation: block;
         scroll-offsets: 0, 100%;
         }
         /* (3) Attach the Animation + set the ScrollTimeline as the driver for the Animation */
         #progressbar {
         animation: 1s linear forwards adjust-progressbar;
         animation-timeline: scroll-in-document;
         }

         Scroll-Linked Animations are presently only available via a feature flag in Chromium. Syntax parsing functionality has already been implemented to Gecko/Firefox, but no rendering has yet been added.

    

2. New Viewpoints Units
   Setting viewport units is inconvenient for everyone who has tried to code a website for Safari iOS. When a container is set to vh size, the mobile browser shrinks it to fit the screen. Use a script that resizes the container for you to get around this bug. Apart from the inconvenience of loading a new script, several workarounds have negative consequences for Chrome users.

3. When working with Viewport Units, Safari on iOS has a long-standing and vexing problem where the vh unit refuses to cooperate. When you set a container to 100vh, you’ll get an element that’s somewhat too tall: When calculating 100vh, MobileSafari disregards some of its UI.

   Leaving the vh unit alone, the CSS Working Group included many additional viewport definitions to the css-values-4 specification, along with new viewport relative lengths:

   svh/svw: 1% of the Small Viewport height/width

   lvh/lvw: 1% of the Large Viewport height/width

   dvh/dvw: 1% of the Dynamic Viewport height/width

4. Overall Score Behavior
   Consider a web page with a scrolling element that can be scrolled independently. However, when you conclude the scrolling, the following parent element is affected by default. It is mentioned as scroll chaining. Some websites use scroll chaining as part of their UI design. On the other hand, scroll chaining is an unpleasant effect that many users find confusing.Overscroll behavior is a simple alternative to scroll chaining. It helps users focus on the modal content without worrying about switching to the main page.You can override the default behavior when “overscrolling” a container using the CSS overscroll-behavior property. For example, you can use it to prevent a full reload when you use the pull-to-refresh action, disable rubber banding, keep scrolling to one layer, etc.

    

   Firefox (version 36) and Chromium have long supported it (version 63). Finally, Safari is catching up.

Wrapping Up

The functionalities of Cascading Style Sheet Markup are constantly improving. CSS subgrid, aspect-ratio property, flexbox gaps, scroll snap, feature queries, content-visibility property, transition, transform, and animation are the seven fantastic features that you’ve learned about thus far. Including these features would help you to build a responsive website. Finally, it would be best to determine which features aid in the styling of your website.
Many of the above-mentioned new CSS features and which exact new features will debut in browsers in mid-2022 remain unknown. However, some of the functionalities mentioned above are already accessible in one or more browsers. So, if you’re curious, you can give it a try. Finally, let us express our gratitude to those who have silently contributed to the development of CSS once more!