DEV Community: Anuraggharat651

Mastering CSS Units: A Complete Guide

Anuraggharat651 — Wed, 13 Mar 2024 06:28:29 +0000

In today’s world, where the Internet is accessed over various devices with different screen sizes, making the website responsive should be our first priority.

Responsive web design ensures that your website adapts to every screen size, device type, and browser without sacrificing usability and accessibility. A responsive website enhances the user experience and performance. CSS units play an important role in achieving website responsiveness.

This blog explores CSS units and all the available ones in CSS. We will look at two categories of CSS units — absolute and relative. Also, we will study each unit from both the categories and their use case scenarios.

Explore top API testing tools to ensure seamless integration & performance.

What is a CSS Unit?

CSS, which stands for Cascading Style Sheets, is a rule-based language used to control the presentation and styling of HTML documents. A CSS file contains multiple CSS rules that specify how all the elements on the webpage are to be styled.

A CSS rule has three parts: a selector, a property, and a value for that CSS property. Many CSS properties, like width, height, margins, padding, etc., accept a value and a proper unit. If an incorrect unit is passed to a CSS property, that CSS property is discarded.

Anatomy of a CSS code

A unit is a standardized quantity used to denote or measure physical quantities. In the real world, we use units like km or mile to measure distance, grams or pounds to measure weight, and seconds, minutes, or hours to measure time. In the CSS context, properties like width, height, margin, padding, font size, border, etc., related to sizing or dimensions require a unit.

A CSS unit is a measurement of length, size, or quantity used to express the amount of quantity for a CSS property. CSS provides plenty of options to work with units, like pixels, centimeters, millimeters, percentages, etc..

The units in CSS are grouped into two categories.

Absolute units
Relative units

In the next section, we will explore in detail the different types of CSS units.

This article on the Best Automated UI Testing Tools cover what is UI automated testing, challenges while performing UI testing, and top tools that can help you perform UI testing.

Introduction to Absolute Units

Absolute CSS units are fixed measurements that do not change based on external factors like screen or browser sizes. These units stay consistent and the same across all device sizes. This means that an element, when set to an absolute value, will remain the same on large desktops and handheld devices.

Here are some common absolute units in CSS.

Pixel Unit (px)

Pixels or px are the most common absolute length units used in CSS. 1 pixel stands for 1 single dot on the screen. However, don’t confuse the CSS pixel with actual pixels. A CSS pixel is not necessarily equal to one physical screen pixel.

1 pixel is defined as 1/96 of an inch. But this was defined when the computer monitors had a resolution of 1024×768 px and a DPI( Dots/Pixels per inch) of 96.

Today, modern computer monitors with the latest high-density screens have a DPI of almost 3 times the old monitors. The same thing applies to mobile phones or any screen-related device. The image below shows a comparison between the 1st generation of iPhone and the latest model (i.e., iPhone 15 Pro) in terms of resolution.

As you can see, the screens have become denser; hence, 1 pixel of a CSS unit is no longer equal to 1 physical pixel.

To summarize, CSS pixels are logical pixels used to define values for CSS properties, and device pixels are the physical screen pixels. So hereafter, whenever we discuss pixels, we refer to CSS pixels (not physical screen pixels).

In the below example, we have three texts in < p > tags with font sizes of 16px, 20px and 24px respectively.

&lt;div>
&lt;p style="font-size: 16px;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 20px;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 24px;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

Pixel unit example 1

Although the pixel unit is mostly used in font-related properties, we can also use it for specifying widths, heights, margins, paddings, etc. In the example below, we provide a width of 800px and a height of 100px for a < div > element.

&lt;div style="width: 800px; 
            height: 100px; 
            background-color: #0ebac5; 
            font-size: 24px;">
     Width of 800px, height of 100px and font-size of 24px
&lt;/div>

Pixel unit example 2

Pixels (px) are the most popular and go-to unit while providing measurements in CSS. However, pixel units can present challenges during responsive behavior due to their fixed-size nature. If the provided value exceeds the screen size, the browser will add a scroll bar to fit the content on the page.

The best test automation frameworks include Selenium, Cypress, Playwright, and Appium. Find more about these top test automation frameworks.

&lt;div style="width: 2800px; 
            height: 100px; 
            background-color: #0ebac5; 
            font-size: 24px;">
     Width of 2800px, height of 100px and font-size of 24px
&lt;/div>

Scrollbar at the bottom due to absolute units

Inches Unit (in)

In CSS, the inch unit is equivalent to 96px, i.e., 1in = 96px. Similar to pixels, 1 inch in CSS is not equal to 1 physical inch.

&lt;div>
&lt;p style="font-size: 0.25in;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 0.5in;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 1in;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

Inches unit example

Centimeter Unit (cm)

In CSS, a 1-centimeter unit or 1cm equals 25.2/64 inches or 37.8px. The cm unit is used to specify length values in centimeters. Similar to pixels, 1cm in CSS is not equal to 1cm in real life.

&lt;div>
&lt;p style="font-size: 1cm;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 2cm;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 3cm;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

Centimeter unit example

The best automation testing frameworks include Selenium, Cypress, Playwright, and Appium. Find more about these top test automation frameworks.

Millimeter Unit (mm)

The millimeter unit or 1mm is an absolute CSS unit where 1mm equals 3.78px or 1/10 of 1 cm. Generally, the centimeter (cm) and millimeter (mm) units are rarely used and have minimal use cases.

&lt;div>
&lt;p style="font-size: 5mm;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 10mm;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 15mm;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

Millimeter unit example

Quarter Millimeter Unit (q)

A quarter millimeter unit or 1q roughly equals 0.944px or 1/4 of 1mm unit. This is one of the smallest measurements available in CSS and is only used in cases where minute adjustments of spacing (or lengths) are required.

&lt;div>
&lt;p style="font-size: 10q;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 25q;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 50q;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

Quarter millimeter unit example

Perform live web device testing on different devices with LT Browser 2.0. Test on multiple mobile and tablet viewports and debug UI issues on the go across 50+ device viewports.

Points Unit (pt) and Picas Unit (pc)

Points (pt) and Picas (pc) units are two additional units that are used alongside the pixel unit. In CSS, 1 point unit or 1pt is equivalent to 1.33px or 1/72 inch, and 1 picas or 1pc is equivalent to 16px or 1/6 inch. These units are used when precise control over sizing and layout is required.

&lt;div>
&lt;p style="font-size: 10pt;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 20pt;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 30pt;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

Points unit example

&lt;div>
&lt;p style="font-size: 1pc;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 2pc;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 3pc;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

Picas unit example

To summarize,

Perform live test and view website on different devices with LT Browser 2.0. Test on multiple mobile and tablet viewports and debug UI issues on the go across 50+ device viewports.

When to Use Absolute Units?

Absolute CSS units should be considered in cases where an HTML element should carry a fixed size regardless of factors like screen size, orientation, or parent element size. Generally, absolute units are used to denote small fixed values. Here are some use cases where you can consider using absolute units.

Printing Stylesheets

CSS has a special rule allowing you to define styles for printing a web page. This rule is a part of the CSS media queries rule that conditionally applies or modifies styles when the webpage is printed on paper.

@media print {
/* Styles will only be added while printing a web page*/
body {
font-size: 20px;
}
.container{
width: 1000px;
}
}

During the printing process, it is necessary to attain pixel-perfect measurements so that the printed output matches the dimensions of the paper used for printing. Using absolute CSS units like pixels or inches, we can attain maximum accuracy since these units are closest to physical measurements. Hence, as a standard practice, using absolute CSS units while writing styles for web page printing is always recommended.

Attaining Pixel Perfect Design

Developers follow a UI design while creating a webpage. These designs are crafted with utmost precision and fixed measurements, which all the developers must follow. Absolute units are ideal for achieving pixel-perfect designs since they specify fixed measurements that don’t change based on external factors.

Absolute CSS units can also be considered in cases where maintaining responsive design is not a requirement. For example, while building desktop apps that only run on a single device with fixed dimensions that cannot be resized. Since the app does not change dimensions, we can use absolute units to define the size of elements to attain a pixel-perfect design.

Simplify your work with our Decimal to BCD Converter. Accurately convert decimal numbers to binary-coded decimal values quickly and easily! Try it now and simplify your work.

Sizing of Images and Icons

Along with textual content, the webpage comprises multimedia items like images, SVGs, icons, etc. In most cases, these assets don’t scale the same way as other elements. These assets have a fixed set of measurements that must be followed per the screen size. In such cases, using absolute CSS units, we can specify a fixed sizing and position of icons or images so that they don’t stretch or compress when the webpage is resized.

In the below example, we have styled a logo using absolute units. We have placed it at the top left and provided sizing using pixel measurements.

&lt;body>
&lt;nav
style="background-color: #dfdfdf;
position: relative;
height: 150px;">
&lt;img
style="position: fixed;
width: 200px;
height: 50px;
top: 50px;
left: 50px;"
src="https://www.lambdatest.com/resources/images/logos/logo.svg"
>

&lt;/nav>

&lt;/body>

Styling logo using absolute CSS units

Specifying Small Spacing and Lengths

One of the most useful use cases of absolute units is to provide specific CSS spacing while providing margins and paddings. Margins and padding properties in CSS require exact values to keep the entire design consistent.

Also, absolute CSS units make fine-tuning spacing easier since we get a wide range of units to make even the smallest adjustments.

div{
margin: 1px 0.5px;
padding: 1.5px;
border: 1cm solid red;
}

Decode UTF8 encoded data with ease using our online UTF8 Decode tool now and simplify your workflow! Decode your data quickly and accurately.

When to Avoid Using Absolute Units?

Absolute units provide fixed values that do not change based on screen sizes. Hence, this fixed nature makes it difficult to maintain responsiveness across all screens. For example, in the below output, we have an image with a width of 1000px and a height of 800px. On displays larger than 1000px, the image will be shown properly on the screen. But on devices with screen sizes less than 1000px, only a part of the image will be visible, and a horizontal scrollbar will be added to fit the image on the screen.

Using absolute CSS units should be avoided when measuring relative to external factors such as device viewports, parent elements, and default browser settings.

Image shown properly on large screens

Image cropped on small screen

Introduction to Relative Units

The relative units are measured in relation to external criteria such as parent element size, viewports, browser default size, etc. Relative units are calculated units that are calculated values that are calculated during the layout operation of the website. The browser uses inheritance and cascading rules to arrive at the final value. Relative units fluctuate as external factors such as viewport size and parent element change.

Here are some common relative CSS units:

EM Unit (em)

The em unit is a popular relative unit used mainly for specifying lengths for font-related properties in CSS. em units are calculated based on the font size of the parent element. The em unit inherits the value of the parent element. Let’s understand this with the help of the example below.

&lt;div style="font-size: 16px;">
&lt;p style="font-size: 1em;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;p style="font-size: 2em;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
&lt;/p>
&lt;/div>

In the above example, the parent div element has a font size of 16rem, and two children < p > elements have a font size of 1em and 2em respectively. Hence, the computed value for these child < p > tags will be

1em = 1 X font-size of parent = 1 X 16px = 16px

2em = 2 X font-size of parent = 2 X 16px = 32px

To cross-check if the computed values are working correctly we can open the Chrome DevTools and click on the < p > element. Move to the computed styles tab to open the styles for < p > tag. You can find the style applied to the selected element.

em unit example

Need to encode your text into UTF-8 format? Use our UTF-8 Encode tool to encode your text for seamless communication across all platforms and devices. Try it for free today.

REM Unit (rem)

The rem unit, also called the root em unit, is an em counterpart. Instead of inheriting the value from the parent, the value is inherited from the root element, i.e., < html > element. Similar to em, the computed value is based on the value set to the root element in CSS. If no value is set to the root element, CSS uses the browser’s default values to calculate the computed values.

html{
  font-size: 24px;
}

<div style="font-size: 16px;">
<p style="font-size: 1rem;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
</p>
<p style="font-size: 2rem;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
</p>
</div>

In the above example, we have a root element < html > with a font size of 24px and parent < div > with font size of 16px. Inside the parent element, we have 2 child paragraph elements < p > with font sizes of 1rem and 2rem, respectively. Since we use rem instead of em, the final value is calculated based on root element sizing. Hence, the computed value of the font size property of p tags is as follows:

1rem = 1 X font-size of root = 1 X 24 = 24px

2rem = 2 X font-size of root = 2 X 24 = 48px

rem unit example

CH Unit (ch)

In CSS, the ch unit stands for character unit. A ch unit in CSS is defined as the width of the character ‘0’ of the font. So, a width of 10ch will be equal to the width of 10 ‘0’ characters of the font used on the website. This unit is useful when the requirement is to size an element based on the width of the characters of the font.

One important point to remember is the ch unit will change if the font of the element is changed since the size of the character ‘0’ does not stay the same in all the fonts.

<div>
<p style="font-size: 50px;
width: 10ch;
background-color: aqua;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
</p>


<p style="font-size: 50px;
width: 10ch;
background-color: aqua;">
0000000000
</p>
</div>

ch unit example

Need to convert Hex to RGB values? Use our Hex color to RGB Converter tool to convert Hex colors to RGB values — it’s fast, free, and accurate. Try it now for hassle-free conversions.

EX Unit (ex)

ex stands for x-height unit in CSS. An ex unit in CSS is defined as the height of the lowercase character ‘x’ measured from the baseline. Similar to ch, ex is also relative since the height of character ‘x’ changes based on the font.

<div>
<p style="font-size: 50px;
height: 5ex;
background-color: aqua;">
Next-Generation Mobile Apps and Cross Browser Testing cloud
</p>
</div>

ex unit example

Device Viewport Unit (vw and vh)

Device viewport units consist of two different units, vw (view width) and vh (view height). 1vw is equal to 1% of the viewport width. Similarly, 1vh is equal to 1% of the viewport height. So if a device has a viewport of 1920 X 1080 pixels (width X height), then 1vh = 108 pixels and 1vw = 192 pixels.

<div style="height: 20vh; width: 100vw; background-color: beige;">
DIV1 width=100vw and height=20vh
</div>


<div style="height: 20vh; width: 50vw; background-color: aqua;">
DIV2 width=50vw and height=20vh
</div>


<div style="height: 20vh; width: 25vw; background-color: burlywood;">
DIV3 width=25vw and height=20vh
</div>

Viewport units on large screen

In the above example of CSS viewport units, we have created three div containers with a width of 100vw, 50vw, and 25vw respectively, and a height of 20vh. These measurements will change when the screen is resized.

Viewport units on small screen

Device Viewport Maximum and Minimum Units (vmax, vmin)

The vmin and vmax units are based on the values of vw and vh. By definition, in CSS, 1vmin is 1% of the viewport’s smallest dimensions, and 1vmax is 1% of the viewport’s largest dimensions. For example, if a browser is 1000 pixels in width and 600 pixels in height, then 1vmin is equal to 6px since 600 pixels < 1000 pixels. Similarly, 1vmax is equal to 10px since 1000 pixels > 600 pixels.

 <div style="height: 10vmax; width: 50vmin; background-color: beige;">
height=10vmax and width=50vmin
</div>

Min/Max viewport units on large screen

The vmin and vmax units are extremely helpful when the device’s orientation is changed. In such cases, the values for vmin and vmax are automatically changed.

Device Percentage Unit (%)

Percentage unit (%) is a relative unit calculated based on the parent element’s size. For example, if the width of a parent < div > element is 400px and the width of a child div inside the parent div is set to 50%. Then, the width of the child < div > will be 200px since 50% of 400 is 200.

<div style="width: 400px; height: 400px; background-color: bisque;">
     <div style="width: 50%; height: 50%; background-color: aqua;">
     </div>
</div>

percentage units example

Percentage units work with all kinds of CSS properties like fonts, borders, etc., but are mostly used while creating responsive layouts. Here’s an example of a responsive 3-column layout using percentage units.

<div style="display: flex;
flex-direction: row;
justify-content: start;
width: 100vw;
height: 100vh;
background-color: beige;">
<div style="width: 33.33%;
height: 100%;
background-color: tomato;">
</div>
<div style="width: 33.33%;
height: 100%;
background-color: blue;">
</div>
<div style="width: 33.33%;
height: 100%;
background-color: yellow;">
</div>
</div>

3-column layout using percentage unit

To summarize relative units,

When to Use Relative Over Absolute CSS Units?

Here are a few cases where we can consider using Relative units over Absolute units.

Need to decode an encoded URL? Our free online URL Decode tool can help to decode any encoded URL. Fast, simple, and reliable, Try it now.

Responsive Web Design

The most important use case of relative units is responsive web design. It is possible to size the HTML elements using relative CSS units based on the parent of device dimensions. This makes it easy to change sizing based on screen size.

Previously, we discussed how using Absolute units for images causes issues with responsive web design. Let’s fix this problem using Relative units.

<img
src="https://www.lambdatest.com/resources/images/icons/banner1.webp"
style="width: 80%; 
height: auto;"
>

Responsive image on large screen

Responsive image on small screen

Relative units like vw, vh, and %, along with CSS media queries, can be used to create responsive and flexible web pages.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
CSS Units
</title>
</head>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
min-height: 100vh;
}
.parent{
display: flex;
flex-direction: row;
justify-content: start;
width: 100vw;
height: 100vh;
background-color: beige;
}
.child1{
width: 33.33%;
height: 100%;
background-color: tomato;
}
.child2{
width: 33.33%;
height: 100%;
background-color: blue;
}
.child3{
width: 33.33%;
height: 100%;
background-color: yellow;
}
@media only screen and (max-width: 600px) {
.child1,.child2,.child3{
width: 100%;
height: 33.33%;
}
.parent{
flex-direction: column;
}
}


</style>
<body>


<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>




</body>
</html>

Responsive 3-column layout using relative units

Font Sizing

Relative units like em and rem are perfect for specifying size for font-related properties. Since these units are related to the parent or root element’s size, they allow the font to scale and adapt if the screen is resized. Since em and rem are directly related to the root or parent element, the text using these values remains readable even when the screen size changes.

<p style="font-size: 100px;">Text with 100px font-size</p>
<p style="font-size: 2rem;">Text with 2rem font-size</p>

Responsive text on large screen

Responsive text on small screen

Layouts

Using relative CSS units like %, vh, and vw, creating layouts is quick and easy. It is super simple to create fluid designs where the size of the child element is set based on the parent element. These layouts stay responsive and adapt when the screen is resized.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
CSS Units
</title>
</head>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
min-height: 100vh;
}
div{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 20px;
}
img{
   width: 50%;
}
.parent{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
width: 100vw;
height: 100vh;
}
.child1{
padding: 10px;
width: 100%;
height: 20%;
font-size: 30px;
background-color: aqua;
}
.child2{
padding: 10px;
width: 20%;
height: 80%;
background-color: beige;
}
.child3{
padding: 10px;
width: 30%;
height: 80%;
background-color: lightcyan;
}
.child4{
flex-direction: column;
width: 50%;
height: 80%;
}
.grandchild1{
padding: 10px;
width: 100%;
height: 50%;
background-color: tomato;
}
.grandchild2{
padding: 10px;
width: 100%;
height: 50%;
background-color: yellow;
}
@media only screen and (max-width: 600px) {
.parent{
flex-direction: column;
}
.child1{
width: 100%;
height: 10%;
}
.child2{
width: 100%;
height: 60%;
}
.child3{
width: 100%;
height: 20%;
}
.child4{
width: 100%;
height: 10%;
flex-direction: row;
}
.grandchild1,.grandchild2{
height: 100%;
width: 50%;
}


}
</style>
<body>
<div class="parent">
<div class="child1">
LambdaTest
</div>
<div class="child2">
<ul>
   <li>Live Testing</li>
   <li>Automated Testing</li>
   <li>Mobile Testing</li>
   <li>HyperExecute Testing</li>
   <li>Visual Regression Cloud</li>
   <li>AI Powered Test Analytics</li>
   <li>Smart TV Testing</li>
</ul>
</div>
<div class="child3">Next-Generation Mobile Apps and Cross Browser Testing Cloud
</div>
<div class="child4">
<div class="grandchild1">
   <img src="https://www.lambdatest.com/resources/images/selenium-parallel-testing-index.png" alt="">
</div>
<div class="grandchild2">
   <img src="https://www.lambdatest.com/resources/images/selenium-parallel-testing-index.png" alt="">
</div>


</div>
</div>
</body>


</html>

For checking the layout on various screen sizes we will use LT Browser from LambdaTest. LT Browser is a free, Chromium-based desktop application designed specifically for web developers to help them build, test, and debug their websites and web applications, particularly for mobile responsiveness.

It supports 53+ multiple device viewports of varying screen sizes to test the responsiveness of a website. We will use this browser to check how our responsive web page performs on all screen sizes.

Complex layout on large screens using relative units

Complex layout on small screens using relative units

Handling responsiveness using relative units

Check out this tutorial to explore different features of LT Browser that you can use to test responsive web designs.

Subscribe to our LambdaTest YouTube Channel for the latest updates on tutorials around mobile app testing, real device cloud, and more.

When to Avoid Using Relative Units?

It is best not to use relative units when small measurements and adjustments are required. Since relative CSS units keep changing, it is difficult to attain consistency. Also, in some cases, old browsers may not fully support relative units. In such cases, we can choose relative units and add absolute units as a fallback.

Keep your data safe and secure by using our free online Base64 Encoder. With our tool, you can easily convert any type of data into a secured Base64 string. Try it now.

Wrapping Up

That’s all for the blog. I hope you liked the blog and learned about CSS units. We discussed briefly all the popular units in CSS, along with examples.

We understood the right use case for each unit and when it should be avoided. It’s very unlikely that you would ever need to use all the CSS units, but knowing all the available options makes it easier to choose the best one for the job. Every unit type has its own use case and works like a charm if used correctly.

Happy Coding!

Introduction to Tailwind CSS: A Complete Guide

Anuraggharat651 — Wed, 27 Dec 2023 06:05:29 +0000

Businesses always look for new ways to improve their online presence. Having a good website is important for this. Making websites work better, load faster on all devices, and easier to build are big goals. Hence, there is a constant search for solutions to replace the outdated mainstream approach and bring products to meet this dynamic market.

Websites play a pivotal part in establishing a strong online presence for businesses. Consequently, enhancing website performance, making them responsive, and streamlining their development process have become crucial objectives.

CSS is a crucial element for web development in making websites visually appealing. However, managing long lines of CSS code, maintaining it over time, and handling responsive design can often pose challenges. That’s why CSS frameworks were introduced. Tailwind CSS is a new-age CSS framework for rapidly building modern websites by eliminating the traditional CSS writing process from scratch.

Before CSS frameworks were introduced, writing CSS was a time-consuming process. Developers had to write every CSS rule from scratch and maintain these rules and properties over time. As codebases expanded, refactoring CSS and optimizing it became challenging.

CSS frameworks solved this problem by eliminating the need to write CSS code manually. CSS frameworks provided ready-to-use component classes that developers could directly plug into their HTML code. This sped up the development process since writing anything from scratch was unnecessary.

Elevate the app testing process from these 12 best mobile automation testing tools. Our comprehensive list includes top-performing tools for achieving excellence. Learn more here.

However, these frameworks did come with design constraints. Each of these frameworks included predefined components and styles. Developers had to work within the guidelines and design system provided by the frameworks. Hence, any website built using these frameworks would appear the same.

The level of customization and control for the developers was very low. If developers needed to customize, they had to overwrite the existing styling with new styles, which was not easy. As a result, a new kind of framework called Tailwind CSS became popular among developers.

Tailwind is a utility-based CSS framework used for building websites quickly. Tailwind operates differently than the existing frameworks in the market. Instead of giving fixed component-based classes, it provides utility-based classes that developers can use to style their web pages from scratch. With Tailwind, developers are not restricted to any styles; they are free to style however they want. It’s like Writing CSS without actually writing CSS.

Source

As seen in the graph above, Tailwind’s download numbers significantly increased between 2021 and 2022. If we talk about weekly downloads, Tailwind currently stands at 6M+ weekly downloads, more than Bootstrap’s 5.4M downloads, making it the market leader. It’s surprising to learn that a year ago, downloads of Tailwind were only around one-third of what they are now. This is clear evidence of how rapidly the popularity of Tailwind CSS has expanded.

Bootstrap weekly downloads

Tailwind CSS weekly downloads

In this blog, we will explore Tailwind CSS and how it differs from other frameworks. We will also learn how to use the wide variety of classes Tailwind offers. After that, we will build a Developer Portfolio website by applying our newfound Tailwind expertise.

This article on the Best UI Automated Testing Tools cover what is UI automated testing, challenges while performing UI testing, and top tools that can help you perform UI testing.

What is Tailwind CSS?

Tailwind is a utility-first CSS framework comprising single-purpose utility classes that can be used to style an HTML webpage. In contrast to other frameworks, Tailwind doesn’t come with predefined CSS component classes. Instead, it consists of CSS utility or helper classes resembling CSS properties. Tailwind covers almost all the CSS properties in the form of utility classes.

Tailwind CSS

By combining multiple utility classes, we can create any component from scratch. Using variations of the same utility class, we can further fine-tune the styles to match the design requirements. In short, it provides you with all the building blocks to create your own components.

Consider Tailwind as a vast collection of CSS classes, each of which is set up with a single CSS attribute. Use a class from this sizable CSS file to apply a CSS style. For instance, all we need to do to bold a text is add the class of .font-bold to our HTML element. Tailwind CSS automatically creates a class with the name .font-bold for us with the CSS attribute font-weight: bold; it is inside our CSS output file. Tailwind allows us to use all the CSS properties without writing any CSS code ourselves.

Tailwind CSS is like writing CSS, without actually writing CSS!✅
— Anurag (@anurag_gharat) May 26, 2023

Since Tailwind became popular among the developer community, eCommerce giants like Shopify and new-age startups like Lemon Squeezy have incorporated it into their web design. Some organizations that use Tailwind CSS are:

Shopify

OpenAI

Lemon Squeezy

Netflix

Loom

Verge

Generally, CSS frameworks can be divided into two groups based on their nature.

Utility-based frameworks
Component-based frameworks.

This blog lists down the best Android testing tools to automate mobile app testing and ensure compatibility across different browsers, devices, and OS.

Utility-based framework

In a utility-based framework, each class is a single-purpose utility class that handles one primary CSS property. The name of the class also resembles the property that it carries. For example, a .flex-row class will have only one CSS property assigned to it, which is flex-direction: row.

Popular websites like Kickstarter, Clubhouse, and Medium use their utility-based CSS framework, which fits their brand design style.

Component-based framework

In the component-based framework, most classes carry the names of components like cards, navbar, footer, etc. This means a .card CSS class will contain CSS properties like border, background color, padding, etc., making it look like a card.

Many brands have their in-house CSS component framework built while keeping their brand design system in mind. Organizations like Forbes, Udemy, Spotify, and Walmart use their own CSS component framework.

In this Selenium with Java tutorial, you will learn everything you need to know to kick start your journey in Selenium Java automation testing.

Features of Tailwind CSS

Tailwind stands out in web development with its unique features, making it a preferred choice for developers seeking efficiency and flexibility in their projects. Here are some key features of Tailwind.

Utility First Fundamentals

As discussed earlier, Tailwind follows the utility’s first fundamentals. Every class in Tailwind is a utility class for a single CSS property. Each class has a single responsibility and acts as a building block for creating websites.

With the help of such classes, it is possible to style a component from scratch without writing any CSS. The only downside of this approach is that the HTML elements will look crowded because of multiple class names. The table below shows one of the important Tailwind classes and their corresponding CSS properties.

Classes for Interactions and Element States

Along with utility classes, Tailwind has numerous modifiers like .bg: , .dark: , .md: etc. which can be used as a prefix for applying conditional classes. One such set of modifiers is used to apply styles based on the element’s current state or user interactions.

For example, a .bg-black will set the background color as back for an element, but hover:bg-black will only set the background color as black when the user hovers the cursor over the element. We will learn more about such interactions later in this blog.

Get started with this complete automation testing using selenium tutorial. Learn what Selenium is, its architecture, advantages and more for automated cross browser testing. Read more.

Customizing Styles

Tailwind already provides us the freedom to style the website as we want. But in some situations, the already preconfigured styles require more customization. In such cases, we can make use of the tailwind.config.js file. This is a configuration file provided by Tailwind to change the values of the existing classes.

For example, we can change the value of the blue color(.bg-blue), or we can even change the breakpoint values for screen modifiers(.lg:).

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
theme: {
        extend: {},
        },
    plugins: [],
};

We will see how we can customize and extend Tailwind later in a separate section.

Dark Mode

In recent times, dark mode has surged in popularity, becoming a must-have feature for websites and apps. Due to this, many designers and developers now make a dark version of the website and app along with the default design. Dark mode in Tailwind is implemented using utility classes. Using the dark: prefix, we can now write conditional classes that will only be applied if the color schema of the browser is set to dark mode.

Responsiveness Across All Screen Sizes

Tailwind CSS uses the mobile-first approach for its utility classes, which means it prioritizes the experience of mobile users over desktop users. A general and common approach is to write CSS styles for large devices first and then modify them using media queries for smaller devices.

But in the mobile-first approach, we write styles for smaller devices first and then use media queries to modify these styles for larger devices. In Tailwind, all the classes target all screen sizes by default, but by attaching prefixes, they can be made conditional based on screen size.

For example, a .w-full class will add a width: 100% property on all screen sizes, but by changing the class name to .lg:width-full, the width: 100% property will be only applied on large screen sizes ( screen sizes >1024px ).

Stay ahead of the curve in software testing with our list of the 13 best automation testing java frameworks for 2023.

Support for Functions and Directives

Functions and directives are useful features while working on a huge code base. Tailwind CSS provides a few sets of functions that we can use in our custom CSS files. These functions are evaluated during the build time and are replaced by static values in the output CSS file.

Functions in Tailwind:

.container {
    height: calc(100vh - theme(spacing.20));
}

Directives are custom Tailwind CSS at-rules that can be used to add extra functionality or Tailwind properties inside our custom CSS file.

Directives in Tailwind:

@media screen(md) {
      /*will be applied for min-width = 640px */
}

Community Support and Plugins

Plugins allow the developers to extend the functionalities of the Tailwind CSS framework by adding custom utilities, functions, styles, and components. Tailwind supports both official and third-party plugins.

To add plugins to the project, first install them using a package manager before putting them in the tailwind.config.js file. Tailwind offers support for both official and third-party plugins.

As Tailwind CSS is popular among developers, you will always find some projects and libraries built on top of it. Also, it is well-maintained, so if you ever find yourself stuck on an issue, hundreds of developers will always be ready to help you!

Tired of messy JavaScript code? Make your JavaScript code visually appealing with our JavaScript formatter and js beautifier tool. Get beautifully formatted code effortlessly.

Support for Third-Party Libraries

Since Tailwind is a utility-based CSS framework. There are a lot of parties that provide pre-built and configured UI components that are built on top of Tailwind.

Tailwind UI, created by the Tailwind team, includes a vast library of free and premium components and templates that anybody may utilize to avoid building anything from the start. There are plenty of third-party websites as well that provide pre built UI components and templates to work with.

Tailwind UI

If you are still in two minds about using Tailwind, here is a list of advantages and disadvantages of using Tailwind that will help you make your decision.

Tired of manual RGB to HEX conversions? Convert RGB colors to HEX values with ease using our fast and reliable online tool. It’s free and simple to use.

Advantages of Using Tailwind CSS

Using Tailwind offers several advantages that make it a popular choice among web developers. These advantages stem from its unique approach to styling and its focus on utility classes. Here are some key benefits:

Tailwind enables faster development with the help of the extensive list of utility classes. These classes get directly added inside the HTML, eliminating the need to write any custom CSS.
Every CSS property is available in the form of classes. Further, these classes have variants that can be further used to finetune the design.
Maintaining and scaling can be done effortlessly since all the classes provide consistent design. Also, since the name of the classes stays the same, upgrading the version in the future won’t cause any breaking changes.
Highly performant because the Tailwind compiler generates an output CSS file that contains the minimized and optimized version of the CSS. Hence, you only have to ship your CSS code, resulting in faster page load time.
Since all the classes in Tailwind are single-purpose-utility classes, you get more freedom and control over the styling of the website.
Using modifiers makes it easy to make your website responsive across all screen sizes.
Along with the existing utility classes, Tailwind also provides a configuration file that you can use to customize the classes or extend them to add new ones.
Tailwind CSS has a vast community of developers and designers who are constantly working to improve the experience. Plenty of resources are built upon Tailwind to make the development process easy.
Tailwind easily integrates into modern JavaScript frontend frameworks like React, Angular, Vue, Ember, etc.

Disadvantages of Using Tailwind CSS

While Tailwind offers numerous advantages, it’s important to acknowledge that it may not be the perfect fit for every project or developer. Here are some potential disadvantages of using Tailwind.

Tailwind is a utility-based CSS framework with no component classes. As a result, the development process begins from zero.
Before using Tailwind, it is necessary to have prior knowledge of CSS.
All the CSS classes are directly added inside HTML. Hence, HTML files can appear to be cluttered.

Installing Tailwind CSS

Installing Tailwind in your project is a straightforward process, but it requires some initial setup. Here’s a general guide on how to install Tailwind.

Need to decode an encoded URL? Our free online URL Decode tool can help to decode any encoded URL. Fast, simple, and reliable, Try it now.

Using Tailwind CLI

There are multiple ways of using Tailwind. In this guide, we will see the most common way of installing Tailwind CSS. Before installing Tailwind, ensure your system has

Node.js
Node package manager (npm)

If you don’t have either of them, you can install them from the official Node.js website. When you install Node.js, it will automatically install npm.

To install Tailwind, we will create a folder for our project and open it in our code editor. I have created a folder by the name TW-Demo and opened it in VS Code.

Folder Structure

Now, we will create our HTML and CSS files. We will create a src folder, and inside that, we will create index.html and style.css files, as shown in the image below.

Folder Structure

Now, we will initialize the project using the command below.

 >    npm init - y

The above command will generate a package.json file. The package.json file contains all the metadata about the project, author, version number, and installed dependencies.

Initializing a new npm project

With our project initialized, we can now install Tailwind and start working. Run the following command in your terminal. This command will install Tailwind in our project as a dev dependency.

 >   npm install - D tailwindcss

Installing Tailwind CSS

The next step is creating a configuration file for handling all our Tailwind CSS configurations. Running the following command will generate a tailwind.config.js file in our project.

npx tailwindcss init

Initializing Tailwind CSS

Now, we need to add the location of all our template files (HTML, JavaScript) in the configuration file. After adding the paths, our configuration file should look like this.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: ["./src/**/*.{html,js}"],
   theme: {
      extend: {},
   },
   plugins: [],
};

By making the above change, we are denoting that all the files ending with the ‘.html / .js’ extension inside the src folder are template files.

Keep your data safe and secure by using our free online Base64 Encoder. With our tool, you can easily convert any type of data into a secured Base64 string. Try it now.

Now that we have finished the configuration process, we can add the three Tailwind directives to import base, component, and utility styles. We will add these import statements inside our style.css file from the src folder.

style.css:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

The final step is generating the CSS code using a build process. This build process will scan all the classes from template files and generate CSS code for them.

The following command will run the build process in watch mode. In this command, we mention the style.css file from the src folder as our input file and output.css from the dist folder as the output file.

> npx tailwindcss - i ./src/style.css - o. /dist/output.css --watch

Running Tailwind CSS build

The final output is generated in the output.css file inside the dist folder. Hence, we need to add this path inside our HTML file.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Demo</title>


    <!-- Link to the CSS file generated after build process -->
    <link href="/dist/output.css" rel="stylesheet">


</head>
<body>

</body>
</html>

Since our build process is running in watch mode, any change in the HTML or CSS file will reflect in the output CSS file automatically.

Binary to Gray Code Converter is a free, easy-to-use online tool that converts a binary number into its equivalent Gray code representation in just one click.

Let’s add some HTML code and check if our setup process was a success. We will create a simple heading tag and add some text styling classes.

index.html:

<body>
    <h1 class="text-6xl text-red-400">
An Introduction to Tailwind CSS
    </h1>
</body>

Now open your HTML file in your browser and check if the styles are applied or not. You can either open it directly or use a live server extension, as I did. The output should be similar to the below screenshot.

Output:

Setting up Tailwind CSS

Great! We have now successfully set up Tailwind in our project.

A tool that converts decimal to hex numbers into equivalent Hexadecimal representation. Input a decimal number and click ‘Convert to Hex’ to get the result in seconds.

Using CDN

The CDN method adds the Tailwind inside a webpage in just one step. In this method, a CDN link that contains the Tailwind file is added with the help of the < script > tag in the head section of this website. The CDN method skips the entire installation and setup procedure and provides us a link to the Tailwind CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Demo</title>


    <!-- Link to the Tailwind CSS CDN file -->
    <script src="https://cdn.tailwindcss.com"></script>


</head>
<body>

</body>
</html>

For configuration changes, we can create a tailwind.config object inside the script tags.

<script>
    tailwind.config= {
            content: [],
            theme: {},
            plugins: [],
        };
</script>

Although this is the fastest and easiest way of adding Tailwind, it is not the recommended one!

The CDN link injects the entire Tailwind file into the webpage. This might affect the page load speeds. Also, the Tailwind file is hosted over the CDN. Hence, at times, the website can experience downtime and disruptions. The other downside of this approach is security risks, no control over the version, and less room for adding customization and local debugging.

How to use Tailwind CSS?

Using Tailwind can be compared to writing inline styles in a more efficient and shorter way. Like inline styles, we add CSS properties through the style attribute. In Tailwind, we add the same styles in the form of classes through the class attribute. Consider it as using CSS properties in the form of classes.

Let’s create a button with regular CSS and then use Tailwind to understand the difference.

Regular CSS Approach

We will create a simple HTML button element and give a class myButton to it. We will then style this button by adding a few CSS properties to myButton class.

index.html:

    <body>
        <button class="myButton">Login</button>
    </body>

style.css:

    .myButton{
        padding:25px 50px;
        border: none;
        background-color: black;
        color: white;
        border-radius:25px;
        font-size: 24px;
    }

Output:

Button using plain CSS

Tailwind CSS Approach

Now, let’s see the Tailwind approach.

index.html:

    <body>
       <button 
    class="bg-black text-white rounded-3xl px-12 py-6 text-2xl">
            Login
       </button>
    </body>

Output:

Button using Tailwind CSS

As you can see, we obtained the same result without writing any CSS. We used the Tailwind utility classes to apply CSS properties to our button element.

To understand this, open the Chrome Developer tools by pressing ‘Ctrl + Shift + I’ and move to the Elements tab. Now select our button element to see all the styles applied to it.

As you can see, a few CSS properties were applied to our button element through the classes we added. Tailwind applies these CSS properties behind the scenes by using the utility classes that we gave.

Now that we have successfully run Tailwind CSS let’s explore some common and important classes using examples.

Get your CSS validated by our CSS Validator and eliminate syntax errors and other issues that could affect your website’s performance. Ensure your CSS code is error-free today.

Exploring Tailwind CSS Classes

Tailwind has a lot of utility classes, and covering all of them in one blog is not possible. In this section, we will cover only the common and most used classes. For the entire list, check the official Tailwind documentation.

Colors

Colors

Tailwind has a variety of predefined color classes to choose from. Each color further has different sets of variants, which are denoted by a numbered value(50,100,150,900). where 50 means the lightest and 900 means the darkest.

For background colors, we can use the bg-{color-name}-{variant-value} class, and for text color, we can use text-{color-name}-{variant-value}.

Example:

<body class="bg-blue-700">
      <h1 class="text-white">Tailwind CSS Colors</h1>
</body>

The above code will add a blue background color to the body and a white text color to the h1 element.

Output:

Colors in Tailwind CSS

The entire list of colors and their variants are available on the official Tailwind documentation.

Keep your JavaScript code safe from syntax errors with our free online JavaScript Escape tool by quickly and easily converting special characters in your JavaScript.

Sizing

In Tailwind, the height and width properties are denoted by the .h-{number} and .w-{number} classes. The number denotes the value for height and width in rem/px. A value of 1 corresponds to 0.24rem or 4px. Hence a class of .w-1 will add a style of width: 4px; or width: 0.25rem.

index.html:

<div class="w-48 h-32 bg-teal-400"></div>

The above code will create a teal-colored div element of width = 12rem (192px) and height = 8rem (128px).

Output:

Width and Height classes in Tailwind CSS

Utility classes to set height and width using relative units like percentage and screen sizes are also available. Here’s a list of a few such classes.

Similar classes are available as well for setting height.

Margins and Paddings

Margins and padding properties are important for maintaining the consistency of the design. Tailwind offers tons of classes to add margins and paddings to the element.

The syntax of margins is .m-{value}

For padding, we use a .p prefix instead of .m prefix. So, just like margins, .p-{value} is a padding of {value} across the whole element.

To apply margins and paddings, we need to pass an appropriate number as a value. This number is similar to what we pass for width and height. For example, a class of .p-4 denotes a CSS property of padding: 16px; or padding: 1rem;

Example:

    <section class=" flex h-screen pt-20">
            <div class="w-32 h-32 bg-teal-400 mt-10"></div>
            <div class="w-32 h-32 bg-teal-400 ml-20"></div>
            <div class="w-32 h-32 bg-teal-400 ml-10 p-20"></div>
    </section>

Output:

Margins and Paddings in Tailwind CSS

The below table shows some standard margin classes and the CSS properties that they represent. For padding, use ‘p’ instead of ‘m’.

Beautify your HTML and improve readability of the code with our free online HTML Prettify tool. Beautify your code and save time on your projects.

Flexbox

CSS Flexbox is a layout model in CSS that is used for creating website layouts, alignments, and distributing elements across the webpage. Flexbox plays a major role in adding responsive behavior to the website. To use Flexbox in Tailwind, we need to use the .flex class to add the display: flex; property. We can then define the flex-direction using the .flex-row and .flex-col classes.

Example:

<div class=" flex flex-row gap-6">
            <div class="w-32 h-32 bg-teal-400"></div>
            <div class="w-32 h-32 bg-teal-400"></div>
            <div class="w-32 h-32 bg-teal-400"></div>
   </div>

Output:

Flexbox in Tailwind CSS

The table below shows some standard Flexbox classes and the CSS properties that they represent.

Flexbox Content Alignment

Just like we have classes for Flexbox, we have classes to control how content inside the flexbox is laid out. The .justify-content property in CSS is used to align the content along the main axis ( if flex-direction = row, then main axis = x-axis, flex-direction = column, then main axis = y-axis).

Tailwind contains .justify-{direction} class to denote the justify-content CSS property. The direction value determines the direction in which the content inside the flexbox will be positioned. So .justify-center is justify-content: center; and similarly .justify-between is justify-content: between;

Example:

        <section class="flex flex-col min-h-screen">
            <div class="p-4 text-xl">
                justify-start
            </div>
            <div class="flex flex-row justify-start bg-slate-200 p-4 gap-12">
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
            </div>
            <div class="p-4 text-xl">
                justify-center
            </div>
            <div class="flex flex-row justify-center bg-slate-200 p-4 gap-12">
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
            </div>
            <div class="p-4 text-xl">
                justify-end
            </div>
            <div class="flex flex-row justify-end bg-slate-200 p-4 gap-12">
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
            </div>
            <div class="p-4 text-xl">
                justify-between
            </div>
            <div class="flex flex-row justify-between bg-slate-200 p-4 gap-12">
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
            </div>
            <div class="p-4 text-xl">
                justify-around
            </div>
            <div class="flex flex-row justify-around bg-slate-200 p-4 gap-12">
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
            </div>
            <div class="p-4 text-xl">
                justify-evenly
            </div>
            <div class="flex flex-row justify-evenly bg-slate-200 p-4 gap-12">
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
                <div class="w-12 h-12 bg-teal-400 rounded-md"></div>
            </div>
        </section>

Output:

Justify content in Tailwind CSS

Here is a list of all the justify-content property class names.

Similar to the justify-content property, the align-items property is used to align context across the cross-axis ( if flex-direction = row, then cross-axis = y-axis, flex-direction = column, then cross-axis = x-axis). The table below contains all the classes that denote the align-items property.

Example:

 <section class="flex flex-col min-h-screen">
                    <div class="p-4 text-xl">
                        items-start
                    </div>
                    <div class="flex flex-row items-start bg-slate-200 p-4 gap-12">
                        <div class="w-24 h-12 bg-teal-400"></div>
                        <div class="w-24 h-20 bg-teal-400"></div>
                        <div class="w-24 h-32 bg-teal-400"></div>
                        <div class="w-24 h-28 bg-teal-400"></div>
                    </div>
                    <div class="p-4 text-xl">
                        items-center
                    </div>
                    <div class="flex flex-row items-center bg-slate-200 p-4 gap-12">
                        <div class="w-24 h-12 bg-teal-400"></div>
                        <div class="w-24 h-20 bg-teal-400"></div>
                        <div class="w-24 h-32 bg-teal-400"></div>
                        <div class="w-24 h-28 bg-teal-400"></div>
                    </div>
                    <div class="p-4 text-xl">
                        items-end
                    </div>
                    <div class="flex flex-row items-end bg-slate-200 p-4 gap-12">
                        <div class="w-24 h-12 bg-teal-400"></div>
                        <div class="w-24 h-20 bg-teal-400"></div>
                        <div class="w-24 h-32 bg-teal-400"></div>
                        <div class="w-24 h-28 bg-teal-400"></div>
                    </div>
                </section>

Output:

Align items in Tailwind CSS

Our HTML Minify is a perfect tool for anyone looking to optimize website’s speed. Minify your code and optimize website for faster loading times in few seconds.

Grids

Many developers avoid CSS grids and use flexboxes while designing the layout of their websites due to the complexity. Tailwind simplifies the working of the grid and provides simple and easy-to-use classes for developers.

Using the .grid-cols-{number} class, we can define the number of columns inside a grid layout. So .grid-cols-2 will create a two-column layout inside a grid container. For specifying the gap between columns, .gap-{number} is an important utility. The .gap-{x} class represents the gap property in CSS, which controls gutters between grids and flexbox. Let’s see an example to understand.

Column Grid Example:

<section class="grid grid-cols-5 gap-4 p-10">
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Online Browser Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Cypress Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Selenium Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Playwright Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            HyperExecute
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            On-Premise Selenium Grid
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Native Mobile App Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Real Devices Cloud
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Visual Regression Cloud
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Test Intelligence
        </div>
    </section>

Output:

Grid in Tailwind CSS

Row Grid Example:

 <section class="grid grid-rows-3 grid-flow-col gap-4 p-10">
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Online Browser Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Cypress Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Selenium Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Playwright Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            HyperExecute
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            On-Premise Selenium Grid
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Native Mobile App Testing
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Real Devices Cloud
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Visual Regression Cloud
        </div>
        <div class="w-36 h-36 bg-teal-200 rounded-md flex justify-center items-center text-center">
            Test Intelligence
        </div>
    </section>

Output:

A list of commonly used grid column and row layout classes is mentioned below.

Test your native, hybrid, and web apps across all legacy and latest mobile operating systems on the most powerful Android emulator online.

Background

The utility classes provided by Tailwind to control the background styles start with .bg-{property-name}. For example, .bg-fixed is for background-attachment: fixed; property. Similarly, .bg-red-400 is for setting the background color as the red of variant 400. Let’s see a simple example to understand how to use background properties.

Example:

<section class="flex bg-gray-200 gap-10 flex-row justify-center min-h-screen">
    <div
        class="w-2/3 bg-center bg-cover bg-no-repeat
            bg-[url('https://www.lambdatest.com/resources/images/icons/banner1.webp')]">
    </div>
</section>

Output:

Handling Background in Tailwind CSS

In the above example, I am setting the background image by passing in an arbitrary value. We will discuss this feature in the later part of the tutorial. The table below contains all the important background properties provided by Tailwind.

This article explains the emulator vs simulator vs real device differences, the learning of which can help you select the right mobile testing solution for your business.

Text and Font

Tailwind has tons of utilities for controlling the font and text styling for the textual elements. All the classes that control the font properties start with .font-{property-name}, and the ones that control the text properties start with .text-{property-name}.

Example:

<section class=" flex flex-col gap-10 p-10 text-4xl min-h-screen">
    <p class="italic">Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
    <p class="font-bold">Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
    <p class="font-thin">Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
    <p class="underline">Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
    <p class="text-sm">Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
    <p class="text-right">Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
    <p class="text-center">Next-Generation Mobile Apps and Cross Browser Testing Cloud</p>
</section>

Output:

Text and Font in Tailwind CSS

Check the below list of a few common and popular Tailwind CSS classes and the properties that they represent.

Transition

The transition property in CSS is used to specify how a property change transition effect will occur. Tailwind CSS uses the .transition-{property-name} class to denote the transition property.

Example:

 <section class="flex flex-row justify-center gap-10 p-10 text-2xl">
     <div class="w-48 h-48 bg-teal-300 rounded-md flex justify-center     items-center hover:bg-red-400 transition-none">
                        No Transition
                    </div>
        <div class="w-48 h-48 bg-teal-300 rounded-md flex justify-center items-center
                                transition-all duration-500 ease-linear hover:bg-red-400">
                        All Transition
                    </div>
              </section>

Output:

Here’s a list of all the important and most used transition classes in Tailwind CSS.

Want to convert SCSS to clean, concise CSS? Convert SCSS to CSS like a pro with our intuitive online tool. Get clean, readable code instantly. Start converting today.

Transition

The transition property in CSS is used to specify how a property change transition effect will occur. Tailwind CSS uses the .transition-{property-name} class to denote the transition property.

Example:

 <section class="flex flex-row justify-center gap-10 p-10 text-2xl">
     <div class="w-48 h-48 bg-teal-300 rounded-md flex justify-center     items-center hover:bg-red-400 transition-none">
                        No Transition
                    </div>
        <div class="w-48 h-48 bg-teal-300 rounded-md flex justify-center items-center
                                transition-all duration-500 ease-linear hover:bg-red-400">
                        All Transition
                    </div>
              </section>

Output:

Here’s a list of all the important and most used transition classes in Tailwind CSS.

Transition

The transition property in CSS is used to specify how a property change transition effect will occur. Tailwind CSS uses the .transition-{property-name} class to denote the transition property.

Example:

 <section class="flex flex-row justify-center gap-10 p-10 text-2xl">
     <div class="w-48 h-48 bg-teal-300 rounded-md flex justify-center     items-center hover:bg-red-400 transition-none">
                        No Transition
                    </div>
        <div class="w-48 h-48 bg-teal-300 rounded-md flex justify-center items-center
                                transition-all duration-500 ease-linear hover:bg-red-400">
                        All Transition
                    </div>
              </section>

Output:

Here’s a list of all the important and most used transition classes in Tailwind CSS.

Each transition property comes with a default easing function and duration property. But Tailwind CSS allows us to change them by overriding them using the .ease-{timing-function} and .duration-{time}, respectively.

For example, the .ease-linear class will override the default timing function property with the new transition-timing-function: linear; property. Similarity .duration-500 will override the default value of 150 ms duration with a 500 ms value.

Animations

Animations are an important part of any website. Tailwind CSS has a few preconfigured utility classes that can be used to add CSS animations to any elements on the screen. Behind the scenes, these classes use keyframes to create animations.

Example Code:

 <section 
class="flex min-h-screen gap-20 justify-center items-center">
          <div 
             class="w-32 h-32 bg-teal-400 rounded-md animate-spin">
      </div>
          <div 
            class="w-32 h-32 bg-teal-400 rounded-full animate-ping">
      </div>
          <div 
            class="w-32 h-32 bg-teal-400 rounded-full animate-pulse">
      </div>
          <div 
            class="w-32 h-32 bg-teal-400 rounded-full animate-bounce">
          </div>
    </section>

Output:

Animations in Tailwind CSS

Tired of using old colors? Get your creative juices flowing with our free online random color generator. Try our tool to find fresh new hues.

Using Modifiers for Handling States of Elements

Each and every utility class in Tailwind can be applied conditionally using a modifier prefix. The conditions can be a specific element state like hover, active, disabled, or a pseudo-element like first-child, placeholder text, markers, etc.

For example, a bg-black class will set the background color as black for an element, but the hover:bg-black class will only set the background color as black when the user hovers the cursor over the element. Similarly, using the text-red-500 class over an anchor tag element will make the link red. But the visited:text-red-500 variation will make the link red only if it has been visited.

Tailwind contains modifiers for all CSS pseudo-classes, pseudo-elements, media queries, feature queries, and attribute selectors. In the below table, you can find modifiers for all the important pseudo-classes and pseudo-elements.

In the below example, we are conditionally setting the background color property of the body element based on the viewport size.

Example:

Output:

Conditional classes in Tailwind CSS

Customizing Default Tailwind CSS classes

Tailwind has its own design system. All the classes and their variants follow a fixed set of values, which are predefined and configured according to the design system. Tailwind CSS uses a specific design system where all class styles and variations have predetermined values, ensuring everything looks consistent. But what if the project demands different styles or values that are absent in Tailwind?

In such cases, we can customize the existing styles with our own values defined inside the tailwind.config.js file. We can either redefine the default values again for classes or create entirely new values.

To create custom values, we first define the values inside the tailwind.config.js file. We will add four custom colors inside a colors object and add them inside the theme object.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
      colors: {
       myBlue: "#2827CC",
       myRed: "#EB4D4B",
       myGreen: "#0ebac5",
       myYellow: "#F7CD2E",
     },
      extend: {},
   },
   plugins: [],
};

Once the tailwind.config.js file is configured, we can use these values inside our HTML file like other classes. Here, we are applying a background color of our custom values.

<div class="w-48 h-48 bg-myBlue">


        </div>

        <div class="w-48 h-48 bg-myRed">

        </div>


        <div class="w-48 h-48 bg-myGreen">

        </div>

        <div class="w-48 h-48 bg-myYellow">

        </div>

Output:

Using custom properties in Tailwind CSS

And it doesn’t stop here! We can also extend the existing list of values by adding our new ones. For example, we can add a new font-size value in the already existing list of values like sm,md, …., xl, 2xl up to 9xl, etc.

The new values to be extended must be added inside the extend object in the tailwind.config.js file.

/** @type {import('tailwindcss').Config} */


module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    colors: {
      myBlue: "#2827CC",
      myRed: "#EB4D4B",
      myGreen: "#4DD637",
      myYellow: "#F7CD2E",
    },
    extend: {
      fontSize: {
        50: "50px",
        60: "60px",
        70: "70px",
      },
    },
  },
  plugins: [],
};

Once declared inside the configuration file, we can use them like other classes in our HTML file.

<h1 class="text-5xl">A text with 5xl default size</h1>


    <h1 class="text-50">A text with 50px custom size</h1>

    <h1 class="text-60">A text with 60px custom size</h1>

    <h1 class="text-70">A text with 70px custom size</h1>

Output:

Extending Tailwind CSS

Creating a custom theme completely replaces Tailwind’s default configured values. Hence, by declaring our own values, we won’t be able to use the already existing Tailwind values. But by extending the Tailwind CSS values, we can preserve the existing ones while adding new ones of our own.

This customization feature of Tailwind makes it a game changer and a preferred framework as compared to the other frameworks.

Need a random MAC address for your work? Our online tool is fast and easy-to-use for generating random MAC addresses with just a few clicks.

Arbitrary Values in Tailwind CSS

In some cases, we might run into a situation where we need a custom value just once. In such cases, defining a new variable inside the configuration file might be an overkill. In such cases, we can make use of the Just in Time (JIT) compilation feature of Tailwind CSS to pass custom values directly to the classes.

This feature allows us to break out of the existing design system using custom values. To use custom values in classes, add the value inside the square brackets and then attach it to the class.

Example:

.bg-red-500 is a class that carries Tailwind CSS-defined values. But using the .bg-[#123123], we can give a custom color value of #123123 to the .bg class. Similarly, we can pass arbitrary values to all sorts of classes like .w-[50px], .m-[2px], .text-[#222], etc.

HTML:

<!--Red Color variant provided by Tailwind CSS-->
    <div class="w-48 h-48 bg-red-500">


    </div>


    <!--Custom Red Color variant-->
    <div class="w-48 h-48 bg-[#E6425E]">

    </div>

Output:

Arbitrary values in Tailwind CSS

Behind the scenes, the Just In Time compiler of Tailwind CSS generates the CSS code from arbitrary values provided to the classes. While using this feature, passing the values that the CSS property can recognize is necessary.

Demo: Building Developer Portfolio Using Tailwind CSS

As a developer, it is essential to have your own Portfolio website to showcase your work and skills, and publish blogs. Your Portfolio website can be very useful for building an identity online. If you are applying for a job role, a well-designed portfolio website will greatly impact the recruiter.

In this part of the blog, we will create a modern minimalist Portfolio website using HTML, Tailwind CSS, and JavaScript. Now that we know about Tailwind CSS and how to use it, building a Portfolio website will be good practice and give us much-needed hands-on experience.

Here’s what we are making. You can check this live version.

Developer Portfolio

We will be making a single-page Portfolio website. The website will be divided into 7 sections.

Home
About
Work Experience
Projects or Works
Services
Blogs
Contact

Additionally, we will have a navbar at the top and a footer at the bottom of the page. We will make sure our website is responsive across all devices. In the end, we will add a button to switch between the light theme and the dark theme for our website. The theme toggler feature will be the highlight of our website. So let’s get started!

Folder Structure

First, let’s create the folder structure for our Portfolio website. We will create a folder with the name Portfolio. We will create a src folder in the Portfolio folder containing our HTML file, CSS files, and assets. The entire code for the Portfolio website can be found on my GitHub. For just the boilerplate code, switch to the GitHub starter branch.

If you want to make your folder structure, modify the build commands and link tags as per your folder structure.

To set up Tailwind CSS inside this folder, we will follow the steps discussed in the Setting up Tailwind CSS section.

Initialize a new project using

>   npm init - y

Install Tailwind CSS using

> npm install - D tailwindcss

Initialize Tailwind CSS using

>   npx tailwindcss init

Update the tailwind.config.js file with template file extensions.

/** @type {import('tailwindcss').Config} */
module.exports = {
   content: ["./src/**/*.{html,js}"],
   theme: {
      extend: {},
   },
   plugins: [],
};

Inject the Tailwind CSS base, component, and utilities inside style.css.

@tailwind base;
  @tailwind components;
  @tailwind utilities;

Generate the output.css file in watch mode.

We will not create a separate dist folder for the output.css file. Instead, we will generate the output file inside the src folder itself. This will make it easy for us to host our website on a hosting platform later. So, the command for generating the output file will contain the src folder instead of the dist folder.

 npx tailwindcss - i ./src/style.css - o ./src/output.css --watch

Talking about the fonts and icons, we will use a Poppins font. You are free to use your favorite font. We need to include Poppins as a font inside our configuration file. Once included, we can apply it using the @layer directive inside the style.css file. This will set the default font family of the website to Poppins.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily:{
        'poppins':['Poppins','sans-serif']
      }
    },
  },
  plugins: [],
};

style.css:

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
    html {
        scroll-behavior: smooth;
    }
    body{
        @apply font-poppins
    }
}

For icons, we will use Remix icons which are easy to use and look elegant on the UI. We will import these icons using the link tag inside the head section.

Remix Icons

We will build the website with one section at a time; let’s start by creating the structure for our website. We will use < section > tags for our 7 content sections, < navbar > for the top navigation bar, and < footer > for the footer. This will help us maintain consistent styling and follow HTML semantic principles.

At the end of the file, we will add a < script > tag to put our JavaScript code. We will need JavaScript to build a menu toggle button and theme switch to toggle between dark and light modes. Here’s what the structure of the site looks like.

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Portfolio</title>


    <!-- Link to the CSS file generated after build process -->
    <link href="./output.css" rel="stylesheet">



    <!-- CDN for Remix icons -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css" rel="stylesheet">



    <!-- Add your Meta tags here -->


</head>




<body>


    <!-- navbar component -->
    <nav>
    </nav>


    <!-- main content section -->
    <main>


            <!-- Home section -->
            <section>
            </section>

            <!-- About Section -->
            <section>
            </section>

            <!-- Work Experience section -->
            <section>
            </section>

            <!-- Works section -->
            <section>
            </section>

            <!-- What I offer section -->
            <section>
            </section>

            <!-- Blogs Section -->
            <section>
            </section>


            <!-- Contact section -->
            <section>
            </section>

            <!-- footer component -->
            <footer>
            </footer>

    </main>


</body>


</html>


<!-- JavaScript for Menu togglers and Dark Mode functionality -->
<script>


//JavaScript goes here


</script>Setting the Alignment and Width
Before we start creating our section, let’s fix the size of our website. For our website, we will give it a maximum width of 1152px or 72rem. This is to restrict the width of website content on extra-large screens. We will apply the maximum width class of max-w-6xl to the main element.

Setting the Alignment and Width

Before we start creating our section, let’s fix the size of our website. For our website, we will give it a maximum width of 1152px or 72rem. This is to restrict the width of website content on extra-large screens. We will apply the maximum width class of max-w-6xl to the main element.

<main class="max-w-6xl dark:text-white">

    <!--Add Content here-->


      </main>

We will also make all the elements inside the body tag as flex-direction: column and place them horizontally at center. We will also set the background color of the body as white and position as relative.

 <body class="relative flex flex-col items-center bg-white">


            <!--Add Content here-->




        </body>

Need a block of text? Use our random paragraph generator to create random paragraphs and add some variety to your content and keep your audience interested.

Navbar

Let’s start by creating our navbar component that will be fixed at the top. The navbar will be divided into three parts. The left part will contain the brand name or logo for the website, the middle part will contain all the links to navigate, and the right part will contain the theme toggler button and menu button.

Here are some features of the navbar:

The navbar will be fixed on top.
A transparent background will give a glass effect on scrolling.
Theme toggler button, which will change from sun icon to moon icon while toggling
Horizontal links tab, which will get hidden on small screens.
The menu button will create a drop-down for links on smaller screens.

Right now, while building the website, we will add styles for dark mode as well. We will activate these classes when working on the dark mode feature.

Here’s what the code for the navbar looks like.

 <!-- navbar component -->
    <nav class="fixed backdrop-blur-md bg-white dark:bg-[#121212] bg-opacity-60 w-full flex flex-row justify-center z-20">
            <div class="flex flex-row justify-between items-center w-[72rem] p-4 ">
                <div class="flex dark:text-white">
                    <p>AG.</p>
                </div>
                <div class="flex flex-row justify-end md:justify-between w-full md:w-auto gap-4 md:gap-10">
                    <!--Links component - Visible on large screens and not on small screens-->
                    <ul class="hidden md:flex flex-row items-center text-sm md:text-base gap-4 md:gap-10 border border-gray-300 dark:border-gray-600 bg-white dark:bg-[#121212] dark:text-white rounded-full px-6 md:px-10 w-auto h-12 md:h-16 ">
                        <li>
                            <a href="#" rel="noopener noreferrer" class="hover:text-purple-600">Home</a>
                        </li>
                        <li>
                            <a href="#about" rel="noopener noreferrer" class="hover:text-purple-600">About</a>
                        </li>
                        <li>
                            <a href="#work" rel="noopener noreferrer" class="hover:text-purple-600">Work</a>
                        </li>
                        <li>
                            <a href="#blogs" rel="noopener noreferrer" class="hover:text-purple-600">Blogs</a>
                        </li>
                        <li>
                            <a href="#contact" rel="noopener noreferrer" class="hover:text-purple-600">Contact</a>
                        </li>

                    </ul>  
                    <!--Button to change theme-->
                    <button onclick="toggleTheme()"
                        class=" flex bg-white w-12 h-12 md:w-16 md:h-16 flex-row justify-center items-center border-gray-300 dark:border-gray-600 dark:bg-[#121212] dark:text-white border rounded-full">
                        <i  id="theme-toggler-moon" class="ri-moon-clear-line text-blue-800 ri-xl" id="sun-icon"></i>
                    </button>

                    </div>
                </div>      
    </nav>

Output:

Navigation bar

Home Section

The home section (or hero section) is a two-column layout. On one side, we will have a headline, name, and what we do. On the other side, we will have a display picture. We will also add a button pointing to the drive link for our resume or CV.

We will build this two-column layout using a flexbox. On large screens, this layout will be horizontal, while on smaller screens, we will stack them on top of each other in a single-column layout.

index.html:

 <!-- Home section -->
            <section class="flex flex-col w-full h-auto min-h-screen justify-center relative px-6 md:px-4">

                <div class="flex flex-col-reverse md:flex-row flex-wrap gap-10 md:gap-0">
                    <div class="w-full md:w-3/5 flex flex-col justify-center items-start dark:text-white">
                        <h1 class="text-4xl md:text-5xl font-semibold">Hey there, I'm Anurag!</h1>
                        <h2 class="text-lg md:text-2xl my-2 md:my-6">A Full Stack Developer and Designer based in India</h2>
                        <p class="text-sm md:text-base dark:text-neutral-300 text-neutral-600">Full-stack developer with a passion for turning code into seamless user experiences!</p>
                        <button
                            class="mt-10 flex flex-row items-center gap-2 border border-gray-400 dark:border-gray-600 py-4 px-8 hover:border-purple-600 rounded-full hover:bg-purple-600 hover:text-white transition-all ease-in-out duration-300">
                            Download CV
                            <i class="ri-arrow-right-up-line ri-xl"></i>

                        </button>
                    </div>
                    <div class="w-full md:w-2/5 flex flex-row justify-center items-center">
                        <img class="w-2/4 md:w-3/4 rounded-full"
                            src="https://www.anuraggharat.tech/images/anurag.jpg" />

                        </div>
                </div>


            </section>

Output:

Home Section

About Section

The about section of the website will contain our personal details like education, history, interests, etc. It will also contain a list of skills for which we will use a pill shape design. Here, I am using my personal details; you can use yours.

HTML:

 <!-- About Section -->
        <section class="w-full py-20 px-6 md:px-4" id="about">
            <h1 class="text-4xl font-semibold">About</h1>
            <p class="mt-10 dark:text-gray-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur saepe fugiat nesciunt fuga.
                Maxime est nisi nulla inventore ab beatae maiores ipsum esse! Quibusdam blanditiis earum ratione harum
                incidunt
                vitae sunt cum officiis illum,
                qui vel totam consectetur voluptates enim voluptatum nemo, voluptatem porro ut sequi et vero quis
                cumque. Nulla
                inventore ab beatae maiores ipsum esse! Quibusdam blanditiis earum ratione harum incidunt
                vitae sunt cum officiis illum.
            </p>
            <p class="mt-10 dark:text-gray-300">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur saepe fugiat nesciunt fuga.
                Maxime est nisi nulla inventore ab beatae maiores ipsum esse! Quibusdam blanditiis earum ratione harum
                incidunt
                vitae sunt cum officiis illum,
                qui vel totam consectetur voluptates enim voluptatum nemo, voluptatem porro ut sequi et vero quis
                cumque.
            </p>
            <div class="flex flex-row justify-start gap-2 flex-wrap">
                <ul class="text-sm flex flex-row gap-2 flex-wrap mt-10">
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out ">
                        HTML</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        CSS</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        SASS</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Bootstrap</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Tailwind CSS</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        JavaScript</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        TypeScipt</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        React</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Next.js</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Angular</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Express</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Node</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        MongoDB</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        MySQL</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Figma</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        Docker</li>
                    <li
                        class="px-5 py-2 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                        AWS</li>
                </ul>
            </div>
        </section>

Output:

About section

Need realistic test data? Use our free online Test Data Generator tool to create realistic data for your testing needs. Get started now and save time and effort.

Work Experience Section

This section includes details about your work history. We will create a simple one-column layout that will display details like place of work, duration, and tasks performed during that work period.

To maintain the hierarchy among texts, we use different combinations of color and size. For example, the heading contains bold and dark (.text-neutral-900) colored text, while the subheading has a lighter shade of grey (.text-neutral-600) with normal size.

HTML:

<!-- Work Experience section -->
<section class="w-full py-20">
    <div class="mb-5 px-6 md:px-4">
        <h1 class="text-4xl font-semibold mb-5">Work Experience</h1>
    </div>
    <div class="flex flex-col p-6 md:p-4">
        <div class="flex flex-row justify-between">
            <div>
                <h3 class="text-2xl font-medium">LTI-Mindtree</h3>
                <p class="text-base font-medium text-gray-700 dark:text-gray-200">Software Engineer</p>
            </div>
            <p>July 2021 - Now</p>
        </div>
        <ul class="text-base list-disc list-outside px-4 mt-2 font-light max-w-4xl dark:text-neutral-300 text-neutral-600">
            <li>
                Working as a Back-end engineer in the Banking and Finance Sector.
            </li>
            <li>Maintaining and adding new features to an Application Portal for an International Bank. Tech stack includes: Java, Spring, MySQL.</li>
        </ul>
    </div>
    <div class="flex flex-col p-6 md:p-4">
        <div class="flex flex-row justify-between">
            <div>
                <h3 class="text-2xl font-medium">Edunomics</h3>
                <p class="text-base font-medium text-gray-700 dark:text-gray-200">Web Developer Intern</p>
            </div>
            <p>May 2020 - July 2020</p>
        </div>
        <ul class="text-base list-disc list-inside mt-2 font-light dark:text-neutral-300 text-neutral-600 max-w-4xl">
            <li>
                Worked with the team for designing and developing products like Wenester.in and CxDeployer.
            </li>
            <li>Single-handedly built and deployed websites like Edunomics.in and Tech.Edunomics.in Tech stack includes: React, Bootstrap, Node, Express, MongoDB.</li>
        </ul>
    </div>
</section>

Output:

Work Experience section

Works/Projects Section

This is the most important and highlighted section of the website. This section will contain images of all our projects along with the name, a short description, and a link to visit.

To display these projects, we will create a 3-column layout consisting of cards. On small screens, we will collapse the 3-column layout into a single-column layout. We will add a hover animation where once the user hovers the mouse above the project, we will change the background color of the card and slightly move it to the top. This adds a 3D elevation effect to the card.

For project images, you can use your own or find the images from the GitHub repository of this project.

HTML:

<!-- Works section -->
<section class="w-full py-20" id="work">
    <div class="mb-5 px-6 md:px-4">
        <h1 class="text-4xl font-semibold mb-5">Works</h1>
    </div>
    <div class="flex flex-col md:flex-row flex-wrap">
        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222] rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="./amazon.jpg" class="rounded-lg" />
            <h1 class="text-xl font-medium mt-4">Amazon Clone</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">A Full Stack Amazon clone application</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 flex flex-row items-center text-sm gap-2 rounded-full hover:text-purple-600">
                <i class="ri-links-fill"></i>
                amazon.com
            </a>
        </div>

        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222] rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="./facebook.jpg" class="rounded-lg" />
            <h1 class="text-xl font-medium mt-4">Facebook Clone</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">A Full Stack Facebook clone application</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 flex flex-row items-center text-sm gap-2 rounded-full hover:text-purple-600">
                <i class="ri-links-fill"></i>
                facebook.com
            </a>
        </div>

        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222] rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="./spotify.png" class="rounded-lg" />
            <h1 class="text-xl font-medium mt-4">Spotify Clone</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">A Full Stack Spotify clone application</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 flex flex-row items-center text-sm gap-2 rounded-full hover:text-purple-600">
                <i class="ri-links-fill"></i>
                spotify.com
            </a>
        </div>

        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222] rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="./netflix.jpg" class="rounded-lg" />
            <h1 class="text-xl font-medium mt-4">Netflix Clone</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">A Full Stack Netflix clone application</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 flex flex-row items-center text-sm gap-2 rounded-full  hover:text-purple-600">
                <i class="ri-links-fill"></i>
                netflix.com
            </a>
        </div>

        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222] rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="./discord.png" class="rounded-lg" />
            <h1 class="text-xl font-medium mt-4">Discord Clone</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">A Full Stack Discord clone application</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 flex flex-row items-center text-sm gap-2 rounded-full  hover:text-purple-600">
                <i class="ri-links-fill"></i>
                discord.com
            </a>
        </div>

        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222] rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="./airbnb.jpg" class="rounded-lg" />
            <h1 class="text-xl font-medium mt-4">AirBnb Clone</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">A Full Stack AirBnb clone application</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 flex flex-row items-center text-sm gap-2 rounded-full hover:text-purple-600">
                <i class="ri-links-fill"></i>
                airbnb.com
            </a>
        </div>
    </div>
</section>

Output:

Works section

What I offer Section

This mini section contains a 3-column layout displaying our services. The 3-column layout collapses into a single column on small screens. We will use our purple accent color for icons.

HTML:

<!-- What I offer section -->
<section class="w-full py-20">
    <div class="mb-5 px-6 md:px-4">
        <h1 class="text-4xl font-semibold mb-5">What I offer</h1>
    </div>
    <div class="flex flex-col md:flex-row justify-between flex-wrap">
        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4">
            <i class="ri-paint-brush-line ri-3x text-purple-600"></i>
            <h1 class="text-xl font-medium mt-4">UI/UX Design</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">Complete User Interface design of a website or an App.</p>
        </div>
        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4">
            <i class="ri-quill-pen-line ri-3x text-purple-600"></i>
            <h1 class="text-xl font-medium mt-4">Technical Writing</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">Writing blogs, guide, or any short content related to Tech.</p>
        </div>
        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4">
            <i class="ri-terminal-box-line ri-3x text-purple-600"></i>
            <h1 class="text-xl font-medium mt-4">Website Development</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">Developing a website from scratch with all the modern tools.</p>
        </div>
    </div>
</section>

Output:

What I offer section

Blogs Section

The blogs section will contain cards similar to the project section. We will add a read more button to make it look different from the project cards. We will implement the same elevation effect and 3-column layout as we did in the project card. For images, we will be using stock photos from Unsplash.

HTML:

<!-- Blogs Section -->
<section class="w-full py-20" id="blogs">
    <div class="p-6 md:p-4 mb-5">
        <h1 class="text-4xl font-semibold mb-5">Blogs</h1>
    </div>
    <div class="flex flex-row flex-wrap">
        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222]  rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="https://images.pexels.com/photos/2440024/pexels-photo-2440024.jpeg?auto=compress&cs=tinysrgb&w=1600" class="rounded-lg" />
            <h1 class="text-xl font-medium mt-4">How to be more Productive at Work?</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">10 Tips on how to work done and be productive.</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 px-4 py-2 border border-gray-200 dark:border-gray-600 flex flex-row items-center text-sm gap-2 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                Read more
                <i class="ri-arrow-right-up-line ri-lg"></i>
            </a>
        </div>

        <div class="flex flex-col items-start w-full md:w-1/3 p-6 md:p-4 hover:-translate-y-1 hover:bg-gray-100 dark:hover:bg-[#222]  rounded-lg transition-all duration-300 ease-in-out cursor-pointer">
            <img src="https://images.pexels.com/photos/6224/hands-people-woman-working.jpg?auto=compress&cs=tinysrgb&w=1600"  class="rounded-lg"  />
            <h1 class="text-xl font-medium mt-4">How better designs help to solve problems</h1>
            <p class="text-sm mt-2 dark:text-neutral-300 text-neutral-600">Know about User Experience and how it helps to solve problems.</p>
            <a href="#" target="_blank" rel="noopener noreferrer" class="mt-4 px-4 py-2 border border-gray-200 dark:border-gray-600 flex flex-row items-center text-sm gap-2 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300 ease-in-out">
                Read more
                <i class="ri-arrow-right-up-line ri-lg"></i>
            </a>
        </div>

        <!-- Add the remaining blog entries with similar structure -->

    </div>
</section>

Output:

Blogs section

Contact Section

The contact section will be a 2-column layout which will contain contact details on one side and a contact form on the other side. We will have 3 rows, which will consist of 3 contact options.

In the form, we will add a name, email input fields, message text area field, and a button to submit it. Similar to previous sections, on smaller screens, the 2-column layout will collapse into a single-column layout. We will add an accent color to the buttons and icons of this section.

HTML:

<!-- Contact section -->
<section class="w-full py-20" id="contact">
    <div class="p-6 md:p-4">
        <h1 class="text-4xl font-semibold mb-5">Contact</h1>
        <p class="dark:text-neutral-300 text-neutral-600">
            I would love to hear from you. Whether you have a question about my services, want to discuss a potential project, or simply want to say hello, don't hesitate to get in touch. I am here to help and excited to start a conversation.
        </p>
    </div>
    <div class="flex flex-col-reverse md:flex-row flex-wrap">
        <div class="w-full md:w-1/2 flex flex-col flex-wrap justify-center gap-4">
            <div class="w-full md:w-2/3 rounded-xl p-6 flex flex-col bg- gap-4">
                <i class="ri-mail-line ri-xl text-purple-600"></i>
                <p>anuraggharat55@email.com</p>
            </div>
            <div class="w-full md:w-2/3 rounded-xl p-6 flex flex-col bg- gap-4">
                <i class="ri-phone-line ri-xl text-purple-600"></i>
                <p>+91-1010101010</p>
            </div>
            <div class="w-full md:w-2/3 rounded-xl p-6 flex flex-col bg- gap-4">
                <i class="ri-map-pin-line ri-xl text-purple-600"></i>
                <p>Mumbai - India.</p>
            </div>
        </div>
        <div class="flex flex-col justify-start items-start gap-4 w-full md:w-1/2 p-6 md:p-10">
            <h2 class="font-medium text-xl">Send me a Message</h2>
            <input type="email" name="name" id="email"
                class="cursor-pointer block w-full border border-gray-300 dark:border-gray-600 rounded-xl bg-transparent py-4 px-6 text-gray-900
                        placeholder:text-gray-400 hover:border-gray-700 hover:dark:border-gray-300 focus:ring-0 sm:text-sm sm:leading-6"
                placeholder="Your Name" />
            <input type="email" name="email" id="email"
                class="cursor-pointer block w-full border border-gray-300 dark:border-gray-600 rounded-xl bg-transparent py-4 px-6 text-gray-900
                        placeholder:text-gray-400 hover:border-gray-700 hover:dark:border-gray-300 focus:ring-0 sm:text-sm sm:leading-6"
                placeholder="Your Email" />

            <textarea rows="3" name="message" id="message"
                class="cursor-pointer block w-full border border-gray-300 dark:border-gray-600 rounded-xl bg-transparent py-4 px-6 text-gray-900
                        placeholder:text-gray-400 hover:border-gray-700 hover:dark:border-gray-300 focus:ring-0 sm:text-sm sm:leading-6"
                placeholder="Your Message"></textarea>

            <button class="flex flex-row items-center gap-4 px-4 py-2 bg-purple-600 text-white rounded-lg text-lg">
                Send
                <i class="ri-send-plane-2-line"></i>
            </button>
        </div>
    </div>
</section>

Output:

Contact section

Footer Component

Our footer component will be placed at the bottom of the webpage. This component will have copyright text on one end and social media icons on the other. We will use flexbox to create this layout.

We will change the background color and position of the icons on hover to add some hover animations. We will use our accent color in the hover effect on Icons. The icons are enclosed within < a > tags. We will paste our social media link for the href=”link” attribute of < a > tags.

HTML:

 <!-- footer section -->
<footer class="flex flex-col-reverse md:gap-0 gap-4 md:flex-row justify-between items-center w-full max-w-6xl border-t border-t-gray-300 py-10">
    <p>
        &#169; 2023 anurag gharat
    </p>
    <div class="flex flex-row gap-2 text-xl">
        <a href="http://" target="_blank" rel="noopener noreferrer" class="flex flex-row justify-center items-center w-12 h-12 border-[1px] border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-[#222] rounded-full hover:bg-purple-600 hover:text-white hover:-translate-y-2
            transition-all ease-in-out duration-300 ">
            <i class="ri-facebook-line"></i>
        </a>
        <a href="http://" target="_blank" rel="noopener noreferrer" class="flex flex-row justify-center items-center w-12 h-12 border-[1px] border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-[#222] rounded-full hover:bg-purple-600 hover:text-white hover:-translate-y-2
            transition-all ease-in-out duration-300 ">
            <i class="ri-twitter-line"></i>
        </a>
        <a href="http://" target="_blank" rel="noopener noreferrer" class="flex flex-row justify-center items-center w-12 h-12 border-[1px] border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-[#222] rounded-full hover:bg-purple-600 hover:text-white hover:-translate-y-2
            transition-all ease-in-out duration-300 ">
            <i class="ri-instagram-line"></i>
        </a>
        <a href="http://" target="_blank" rel="noopener noreferrer" class="flex flex-row justify-center items-center w-12 h-12 border-[1px] border-gray-300 dark:border-gray-600 hover:bg-purple-600 bg-gray-200 dark:bg-[#222] rounded-full hover:text-white hover:-translate-y-2
            transition-all ease-in-out duration-300 ">
            <i class="ri-youtube-line"></i>
        </a>
    </div>
</footer>

Output:

Footer section

Menu List Toggle Component

We have now finished the styling for all the website sections. All the sections are responsive for all screen sizes except the navbar. Let’s start by understanding the logic behind the behavior of our navbar.

For larger screens, we have our horizontally placed links inside our navbar with logo and theme switch buttons on either side. This is the ideal or normal state of our navbar.

Here are the steps we will follow:

Display the links horizontally on larger screens and hide them on smaller ones.
Create a new drop-down component for the links.
Add a menu button in place of the links on smaller screens.
Display the drop-down links component when the user clicks on the menu button.

Navbar in normal state

Let’s start with Step 1. To hide the links on smaller screens, we will use Tailwind CSS breakpoint modifiers. In the < ul > element of the links component, add a class of .hidden and modify the .flex class to .md:flex. This hides the menu links on smaller screens (<786px) and unhides them on bigger screens (>786px)

<!--Links component - Visible on large screens and not on small screens -–>

<ul class="hidden md:flex (..all other classes)">

<!--Links -–>

</ul>

Now, for Step 2, let’s create a copy of the original links component. This will be the same as the original, but instead of .flex-row, we will use the .flex-col class to make the links vertical.

<ul
id="menu-list"
 class="flex flex-col items-center text-sm md:text-base gap-4
 md:gap-10 dark:border-gray-600 dark:text-white
 rounded-sm p-6 md:px-10 w-full h-auto bg-white dark:bg-[#121212]
 transition-all duration-500 ease-out">
<li>
<a href="#" rel="noopener noreferrer"  class="hover:text-purple-600">Home</a>
</li>
<li>
<a href="#about" rel="noopener noreferrer"   class="hover:text-purple-600"> About</a>
</li>
<li>
<a href="#work" rel="noopener noreferrer" class="hover:text-purple-600">Work</a>
</li>
<li>
<a href="#blogs" rel="noopener noreferrer" class="hover:text-purple-600">Blogs</a>
</li>
<li>
<a href="#contact" rel="noopener noreferrer" class="hover:text-purple-600">Contact</a>
</li>
</ul>

Instead of a simple hide-show effect, we will add a slide-down effect to this component whenever we click the button. For this, we will first push the component at the top outside the viewport. Then, once the user clicks the button, we will return it to the viewport. This will create a nice animation of sliding in and out.

To achieve the slide-down effect, we will use placement and position classes from Tailwind. We will add a .fixed class to fix our links in one place and then push it outside the viewport using the .-top-80 and .right-0 classes. Due to the negative value links will be above the visible viewport and hence hidden to the user.

<!-- Drop Down component for Links (Not visible on Large screens) -->
<ul
id="menu-list"
class="fixed flex -top-80 right-0 flex-col items-center text-sm ..
<!-- Code for links 

-->

</ul>

To make these links visible to the user we will change the .-top-80 class to .top-20 class with the help of JavaScript. We will create a JavaScript function that will perform this task of changing the classes. Before writing the JavaScript, let’s create the menu button.

 <button class="flex md:hidden bg-white w-12 h-12 md:w-16 md:h-16 flex-row justify-center items-center border-gray-300 dark:border-gray-600 dark:bg-[#121212] dark:text-white border rounded-full">
    <i id="menu-toggler" class="ri-menu-line ri-xl"></i>
</button>

This button will be displayed on the right of theme switch button only on small screens. On large screens, we will hide it using the .hidden class.

Now, let’s write a toggleMenu() function to add functionality to the drop-down list.

index.html:

<script>

//toggle menu on small screens
function toggleMenu() {
    //create variables for button and list
    const menuButton = document.getElementById('menu-toggler');
    const menuList = document.getElementById('menu-list');

    //toggle class to bring menu inside viewport
    menuList.classList.toggle('-top-80');
    menuList.classList.toggle('top-20');

    //toggle class to change menu icon to cross icon
    menuButton.classList.toggle('ri-menu-line');
    menuButton.classList.toggle('ri-close-line');
}

The above toggleMenu() function toggles between the .-top-80 and top-20 classes. Along with replacing the classes for the menu list, the function also changes the icon for the toggler button.

By default, we will show a three-horizontal line menu icon. Once the drop-down menu is visible, we will show a cross icon. The toggleMenu() function is attached to the onclick=”” handler of the menu button.

<button
    onclick="toggleMenu()"
    class="flex md:hidden bg-white w-12 h-12 md:w-16 md:h-16 flex-row justify-center items-center border-gray-300 dark:border-gray-600 dark:bg-[#121212] dark:text-white border rounded-full">
    <i id="menu-toggler" class="ri-menu-line ri-xl"></i>
</button>

Final Output:

Menu Toggle button on small screens

Need random text for your project? Our Lorem Ipsum Generator lets you easily generate filler text. Choose the number of paragraphs, words, or characters you need.

Theme Switcher feature

Now, with all the components and sections of our website setup, let’s create a dark mode feature. Dark mode in websites and user interfaces is important because it reduces eye strain, saves device battery, improves accessibility, and offers a modern look. All modern websites and apps support the dark mode feature, where the user can choose between the light and dark mode.

Light mode

Dark mode

Currently, our website uses the user’s system preference for setting up the website theme. Hence, if you use a browser with a light mode preference, all the light mode classes will be activated, and you will see a light mode website on your browser. But if your preference is set to dark, the website will automatically activate dark variants of the classes, and a dark mode website will be shown to you.

Along with this automatic switching, we also want to add a manual switch to toggle between themes. For this, we first need to modify the Tailwind configuration file. Open your tailwind.config.js file and add darkMode: “class” line inside the module.exports object.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: "class",
    content: ["./src/**/*.{html,js}"],
    theme: {
       extend: {},
    },
    plugins: [],
};

Moon icon in light mode

Sun icon in dark mode

For the theme switch button, we will have two variations in the form of icons. A Sun icon will be used in the dark mode and act as a button to switch to light mode. Similarly, a Moon icon will be used in the light mode and act as a button to switch to dark mode.

Now, let’s write some JavaScript code to toggle the dark classes based on the user’s preference and at the click of a button.

These are the three functionalities that we need for our feature.

Set an initial theme based on the user system preference value.
Allow manual switching between dark and light modes using a button.
Change the Icon used for the button to differentiate between both modes.

We create three JavaScript functions to handle these three functionalities.

index.html:

// JavaScript for Menu togglers and Dark Mode functionality

// initialize variables for icons
const moonIcon = document.querySelector('#theme-toggler-moon');
const sunIcon = document.querySelector('#theme-toggler-sun');

// function to toggle the state of icons
function toggleIcons() {
    moonIcon.classList.toggle('hidden');
    sunIcon.classList.toggle('hidden');
}

// set initial theme based on local storage and user preference
function setInitialTheme() {
    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
        moonIcon.classList.add('hidden');
        localStorage.setItem('theme', 'dark');
    } else {
        document.documentElement.classList.remove('dark');
        sunIcon.classList.add('hidden');
        localStorage.setItem('theme', 'light');
    }
}

// toggle theme manually
function toggleTheme() {
    if (localStorage.theme === 'dark') {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
        toggleIcons();
    } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
        toggleIcons();
    }
}

// calling function to set initial theme
setInitialTheme();
</script>

Before we test, let’s add a Moon icon inside the button tag of the theme toggler button. Now, our theme toggler button will contain two icons. With the help of the JavaScript code we wrote earlier, we will toggle one based on the current theme.

HTML:

<button onclick="toggleTheme()" class="flex bg-white w-12 h-12 md:w-16 md:h-16 flex-row justify-center items-center border-gray-300 dark:border-gray-600 dark:bg-[#121212] dark:text-white border rounded-full">
    <i id="theme-toggler-sun" class="ri-sun-fill text-yellow-400 ri-xl" id="sun-icon"></i>
    <i id="theme-toggler-moon" class="ri-moon-clear-line text-blue-800 ri-xl" id="sun-icon"></i>
</button>

Output:

Theme toggler

Responsive Testing

Before we finish our demo, let’s test if our website is responsive across all devices. For responsive testing, we will be using the LT Browser by LambdaTest. LT Browser allows us to test our website on 50+ device viewports, including smartphones, tablets, and desktops. The inbuilt performance analyzer makes it easy to analyze the performance metrics of our website.

Catch up with the latest tutorials on mobile app testing, real device testing, and more — Subscribe to the LambdaTest YouTube Channel.

Before testing, follow the best practices below to improve your score.

Add alt property for all < img > elements.
Set loading=’lazy’ to all < img > elements.
Use webp image format instead of png and jpeg.
Add all the necessary meta tags in < head >

Now, let’s test our website on different device viewports. I am choosing a desktop and mobile phone to check if my website is responsive simultaneously.

Responsiveness testing of website

Similarly, let’s check our website performance report.

Performance report

You can further increase your website performance by adding PWA functionality and accessibility practices.

With that, we finished our demo of the Developer Portfolio website. We completed the entire design using Tailwind classes without writing any CSS code. This website is responsive across all devices and supports the dark mode feature.

Final Take on Tailwind CSS

In my opinion, Tailwind is one of the best frameworks for CSS out there and can be used almost everywhere. But then, should we use it everywhere?

Well, it depends. Tailwind will work great for the majority of the use cases. It is a perfect fit for web applications where the developer needs more control over the styling and is ready to spend enough time creating and customizing the components from scratch.

But in the case of applications where styling is not a big factor and developers don’t want to spend time creating components from scratch, Tailwind might not be the ideal solution.

Tailwind could be a great alternative to writing your own CSS. It will speed up your development process. Also, it is fast! Tailwind generates an output file for only the classes that we use. Hence, we only ship the CSS code that we use.

At the core, Tailwind CSS is nothing but regular CSS in the form of classes. Hence, having a thorough knowledge of CSS skills is essential. Tailwind CSS has almost all the CSS properties we need for your project. In addition, if we want anything extra, you can always extend and customize it as per our needs.

While it might take some time to get used to Tailwind CSS in the beginning, the payoff for the efforts is worth it!

So, should we learn Tailwind CSS? Yes absolutely! Tailwind CSS is one of the hottest technologies in the market, and many organizations use it. Hence, knowing Tailwind CSS could be a huge bonus for your career.

Tailwind CSS vs Bootstrap: What’s the Difference?

Tailwind CSS vs. Bootstrap: which one’s better? It is the most popular argument on the internet. Let’s first understand the main differences between both and what points you should consider while choosing one for your next project.

Bootstrap

Bootstrap is a popular component-based CSS framework for creating fast and responsive websites. Bootstrap comes with predefined component classes that can be used to create components like cards, navbars, and forms. This makes the website styling process easy and fast because all the components are preconfigured. However, since the components are prebuilt, the level of customization is low. All the components carry fixed styling, which might not go with all UI designs.

Whereas, in Tailwind, you have plenty of utility classes to customize your application. You are not confined within the styles already provided by the framework. You have plenty of options even if you don’t have a suitable style. You can always extend it.

Bootstrap has certain limits to customization and offers less flexibility than Tailwind CSS. Bootstrap also generates a large output file by default consisting of all the CSS and JavaScript code, whether we use it or not. This can affect the performance of the website.

But then how do you choose? See, the answer to this question is pretty simple. If, as a developer, you want something that is quick to set up and comes with components already built for you. Go with Bootstrap! Bootstrap will save a lot of time because it will handle a lot of UI-side things behind the scenes.

If you want customization and freedom to style however you want, go for Tailwind CSS. You will have to build everything from scratch, but then you will have more control over the styling of your website.

Wrapping Up

That’s a wrap for this blog. Thank you for reading. I hope this blog helped you get familiar with Tailwind CSS and how to use it in a project. In this blog, we explored Tailwind CSS, why we need it, and how to use it. In the end, we also created a beautiful Portfolio website using Tailwind, which you can use as your personal Developer Portfolio.

I hope you enjoyed this tutorial and are now comfortable creating your websites using Tailwind CSS. So go ahead and show your creativity.

An Intuitive Guide To CSS Glassmorphism

Anuraggharat651 — Tue, 27 Jun 2023 07:29:15 +0000

Glassmorphism is the newest addition to the web design trends and is getting increasingly popular in the community. Even If you haven’t heard about it, the chances are that you’ve come across it and used it somewhere.

Using Glassmorphism can help create amazing digital experiences. Combined with colorful images and shapes, transparency and blurred backgrounds make Glassmorphism more eye-catching. Adding frost and translucent elements to designs adds depth and dimension and makes the user experience more immersive and engaging. — top tech giants like Apple, Microsoft use Glassmorphism in their products.

If you have an iPhone or iPad, go to your home screen or open your notifications panel, or if you use a Windows machine, go to the Start menu. Do you notice the frosted glass effect around the menu and widgets? That’s Glassmorphism!

Get ready for your Mocha interview questions with our expert-curated list of Mocha interview questions tips. Impress your potential employer and land your dream job.

An Example of Glassmorphism on iOS in Apple products.

An Example of Glassmorphism on Windows 11 in Microsoft products.

Glassmorphism is a UI design style that uses transparency and background blur to achieve a glass-like effect in UI. This glass effect is further enhanced by placing the UI elements over highly vivid backgrounds. This effect is often termed the “Frosted Glass Effect”.

Glassmorphism design style got popular in late 2021 when Michal Malewicz, who also introduced the Neumorphism UI design style, wrote an article where he combined all the frosted glass effect styles under one name — “Glassmorphism.”

I created Neumorphism, Glassmorphism, Neubrutalism and a couple others because I'm curious and noticing things around me.

I noticed a shift in the UI styles again and it's time to start digging deeper into it.

.com already purchased 😎

— Michal Malewicz (@michalmalewicz) October 9, 2022

In this guide on CSS Glassmorphism, we will learn about Glassmorphism, a little history behind it, and how we can achieve the effect using CSS.

Boost your testing skills with Pytest interview questions. Beginner, intermediate, and advanced levels covered. Prepare and excel in your interviews.

What is Glassmorphism?

Glassmorphism UI contains cards with a frosted glass effect, floating freely on colorful and vivid backgrounds. The main highlight of this design style is the frosted glass texture and depth achieved with the help of layers.

The Glassmorphism effect enables designers to combine layers using the glass effect while still retaining a distinct separation between separate subjects. This design style is commonly seen in dashboards, smartphone UIs, and mobile apps. Popular brands like Apple and Microsoft already use it in their design system.

Let’s see how Microsoft and Apple use Glassmorphism in their Windows 11.

Microsoft uses a frosted glass effect in Windows 11. You can notice the blur effect in the Start menu, Taskbar, Settings menu, Notification boxes, and some Microsoft apps. Microsoft included this blur effect in their fluent design system under the name “Acrylic.”

Acrylic is a fluent design system component that adds physical texture and depth to your app design using the blur effect. Microsoft uses this Acrylic effect in its Windows 11 user interface and some Microsoft applications.

In the case of Apple, iOS, and macOS have been using the glass effect in their UI. Take a look at this control center on macOS Big Sur. The glass effect is clearly visible in the design of the controls. You can notice a similar glass effect in the App Drawer, Notifications, Widgets, etc.

Further, this glass effect is also implemented in iOS. Take a look at this design of notifications on an iPhone lock screen. This design looks aesthetically pleasing and easy for users to interact with.

Glassmorphism is quite common in Operating System UIs and Android / iOS applications. But recently, with the increased support for the backdrop-filter property in CSS, many websites are moving to CSS Glassmorphism design.

Ace your QA interviews with our comprehensive guide on 60+ SpecFlow Interview Questions and Answers. Boost your BDD knowledge and showcase your SpecFlow expertise.

Here are some popular websites using CSS Glassmorphism.

1. Design + Code

2. Amazon Music

Here, I have used LT Browser 2.0 — a complementary tool by LambdaTest to render the websites.

LT Browser 2.0 is a Chromium-based mobile-friendly tester offered by LambdaTest — a continuous quality cloud testing platform for manual and automation testing for web and mobile. With LT Browser 2.0, you can test your website’s responsiveness on over 50+ device viewports. It supports responsive testing on the mobile, tablet, desktop, and even laptops.

The main strength of CSS Glassmorphism design is the balance of Blur, Transparency, Backgrounds, and borders.

History of Glassmorphism

Surprisingly, the Glassmorphism design trend in UI Design is not new. It first appeared in the year 2013 on iOS 7 and Windows Vista. Remember the transparent Windows menu? Yes, that was the first instance of Glassmorphism.

During those days, there were a lot of accessibility and readability issues, so it was slowly removed with the next updates. After almost eight years, in 2021, Apple reintroduced Glassmorhphism with the launch of the Big Sur update for macOS. Microsoft also came up with its Glassmorphism design on Windows 11 update in the same year.

Since then, it has regained popularity and got every designer talking about it. It became one of the most popular modern web design trends, so many products started incorporating it into their design system.

Here are some popular CSS Glassmorphism designs on Dribbble.

Creative Cloud App Redesign by Mikołaj Gałęziowski.
Sidebar Menu Design by Anton Olashyn
Messenger app by Mikołaj Gałęziowski
Cryptocurrency Website by Azie Melasari

Characteristics of CSS Glassmorphism

In this section, we will explore the characteristics of CSS Glassmorphism.

Translucency
Vivid backgrounds
Hierarchy using Shadows and Light Borders

When combined in the right proportion, the above effects create a beautiful and visually appealing Glassmorphism effect that can make any user an instant fan.

Now that we know the characteristics of Glassmorphism, let us look at how to create this effect using CSS.

Here’s Top 30 Robot Framework Interview Questions and Answers that will help you boost your confidence in an Interview.

Creating Glassmorphism Using CSS

Glassmorphism is very easy to create using CSS. The main idea behind Glassmorphism is to create Glass panels on a colorful background. This Glass effect is achieved using CSS Opacity and backdrop-filter properties.

Following are the steps to achieve CSS Glassmorphism:

Add a vivid background to the root element.
Apply an opacity to the object in focus.
Add a background blur using the backdrop-filter property.
Add a light border and border radius.
Apply shadow using the CSS Box Shadow property.

Using the above steps, let’s create a simple Credit card effect shown below.

We will first create our entire structure using HTML and CSS and then move to the Glassmorphism effect.

HTML:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>


<body>
    <section>
        <div class="circle-1"></div>
        <div class="circle-2"></div>
        <div class="circle-3"></div>
        <div class="card">
            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>
            </div>
            <p>
                07/27
            </p>
                <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    background: #0f0c29; 
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29); 
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); 
}
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.circle-1 {
    position: absolute;
    top: 15%;
    left: 30%;
    background: #4776E6;
    background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);
    background: linear-gradient(to right, #8E54E9, #4776E6);   
    height: 350px;
    width: 350px;
    border-radius: 50%;
}
.circle-2{
    position: absolute;
    bottom: 5%;
    right: 35%;
    background: #bc4e9c;
    background: -webkit-linear-gradient(to right, #f80759, #bc4e9c);
    background: linear-gradient(to right, #f80759, #bc4e9c);
    height: 400px;
    width: 400px;
    border-radius: 50%;
}
.circle-3 {
    position: absolute;
    top: 30%;
    right: 35%;
    background-color: #FF3CAC;
    background: #ff9966;
    background: -webkit-linear-gradient(to right, #ff5e62, #ff9966);
    background: linear-gradient(to right, #ff5e62, #ff9966);
    height: 150px;
    width: 150px;
    border-radius: 50%;
}
.card {
    height: 300px;
    width: 500px;
    border-radius: 20px;
    background: rgba(255,255,255);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;


}
.card > i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card > div > p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}


.card > p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}


.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

Output:

I used a dark gradient background and, upon that, added some colored circles to add depth. I have used the position: absolute property in CSS to position the objects. I have placed the objects exactly behind the card so that when we add the frosted glass effect, these colored objects will be partially visible. I have used an online tool called WebGradients for generating gradient background color.

For styling the card, I aligned the card perfectly at the center using CSS Flexbox and used remix icons for the VISA icon shown on top. Currently, I have added a black background to the card, but we will change it in the next steps.

Regarding the root section’s background, you can go with any primary pastel color or mesh gradient background. Choose one which suits your project requirement and goes well with the frosted glass effect.

The blur effect in CSS is achieved using the backdrop-filter property. This property is used to apply graphical effects such as blurring, color shifting, or inverting the background.

In our case, backdrop-filter: blur(40px) applies a blur to the element’s background. Let’s add this property to the .card element.

This questionnaire of Jasmine Interview questions will aid you in giving good insight about Jasmine and how to crack the interview.

.card {
    /* other styles */
    backdrop-filter: blur(40px);
    /* fallback cross browser compatibility */
    -webkit-backdrop-filter: blur(40px);


}

Output:

As you can see, there is no change to the card. This is because the card still needs to be transparent. The backdrop-filter property is combined with opacity to provide that partial transparency effect. Let’s decrease the opacity of our card.

To decrease the opacity, you can use the opacity property separately or the rgba() input type for the background property.

.card {
    /* other styles */
    background: rgba(39, 39, 39, 0.1);
    backdrop-filter: blur(60px);
    /* fallback for old browsers */
    -webkit-backdrop-filter: blur(60px);
}

Output:

There you have it, a Glass card using just CSS. We are still not done yet. We haven’t added a border and shadow to the card. The border and shadow will create a clear distinction between the card and background objects. Let’s add them.

CSS:

.card {
    border-radius: 20px;
    /* other styles */
    background: rgba(39, 39, 39, 0.1);
    backdrop-filter: blur(60px);
     /* fallback for old browsers */
    -webkit-backdrop-filter: blur(60px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}

Output:

Mission accomplished! That’s our Glassmorphism effect using just CSS. You can also add some animation to the background elements to enhance the effect. I used keyframes to move the objects.

CSS:

.circle-1{
        animation: bounce 4s linear infinite;
}
.circle-2{
    animation: bounce 4s linear infinite 1s;
}
.circle-3 {
    animation: bounce 4s linear infinite 2s;
}
@keyframes bounce {


    0% {
        transform: translateY(0px);
    }


    25% {
        transform: translateY(10px);
    }


    50% {
        transform: translateY(0px);
    }


    75% {
        transform: translateY(-10px);
    }


    100% {
        transform: translateY(0px);
    }

}

Output:

CodePen:

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>

<body>
    <section>
        <div class="circle-1"></div>
        <div class="circle-2"></div>
        <div class="circle-3"></div>
        <div class="card">
            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>
            </div>
            <p>
                07/27
            </p>
                <i class="ri-visa-line"></i>
        </div>
    </section>
</body>

You can make a lot of variations of the CSS Glassmorphism effect using different backgrounds.

Here are some variations of our Credit Card project.

CSS Glassmorphism with Stock Background Image:

HTML:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>


<body>
    <section>
        <div class="card">
            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>
            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    font-family: 'Noto Sans', sans-serif;
}
body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    background: url('https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&w=1600');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.card {
    height: 300px;
    width: 500px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    z-index: 10;
 display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}
.card>i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card>div>p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}
.card>p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}
.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

Output:

CodePen:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>

<body>
    <section>
        <div class="card">

            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>

            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>

</body>

CSS Glassmorphism with Simple Gradients:

HTML:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>


<body>
    <section>
        <div class="card">


            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>


            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>
</body>
</html>

CSS:

* {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    font-family: 'Noto Sans', sans-serif;
}
body {
    width: 100%;
    height: 100%;
    background: #fff;
    font-family: 'Noto Sans', sans-serif;
    background: #396afc;
    background: -webkit-linear-gradient(to right, #2948ff, #396afc);
    background: linear-gradient(to right, #2948ff, #396afc);
}
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.card {
    height: 300px;
    width: 500px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
}
.card>i {
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 2.5rem;
}
.card>div>p {
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 28px;
    font-family: 'Courier New', Courier, monospace;
}


.card > p {
    position: absolute;
    bottom: 10%;
    fill: #fff;
    letter-spacing: 3px;
    word-spacing: 10px;
    margin-top: 10px;
    font-size: 20px;
}


.card>div>h1 {
    font-weight: lighter;
    font-size: 16px;
}

Output:

CodePen:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS GlassMorphism Card</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
            <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>

<body>
    <section>
        <div class="card">

            <div>
                <h1>ANURAG GHARAT</h1>
                <p>1892 1232 1242 0099</p>

            </div>
            <p>
                07/27
            </p>
            <i class="ri-visa-line"></i>
        </div>
    </section>

</body>

Tips to achieve the best CSS Glassmorphism

In the previous section; we discussed how to create Glassmorphism using CSS. Now let’s look at some tips that will help you effectively implement Glassmorphism in your designs.

Use vivid backgrounds that blend nicely with the glass effect. You can go with CSS Gradients, Mesh gradients, Geometrical Designs, 3D objects, and stock images.
Add some user animations and interactions, like hover effects, to make the UI playful.
To add depth to your design, you can include floating assets like circles or objects of any shape.
Don’t forget the border and shadow for the card.
Don’t apply this effect to user Interaction elements like buttons, toggles, and inputs.
Don’t overuse Glassmorphism.

Prepare to ace your NUnit interviews questions with our thorough set of solutions that will enable you to prove your command of the NUnit testing framework.

Wrapping up

Glassmorphism design makes your UI more modern and minimalist. I feel this new UI style is here to stay, and many products will incorporate it in their design style.

That’s it. I hope you found this guide on CSS Glassmorphism. In this guide, we saw Glassmorphism and understood its history and main characteristics. We later created a Glassmorphism design of a Credit Card using CSS and saw some variations.

If you love the new CSS Glassmorphism trend, try creating some cool projects with it and share them in the comments.

Happy Coding!

CSS Website Layout For CSS Website Layout For Dual Screen And Foldable Devices

Anuraggharat651 — Mon, 26 Jun 2023 06:34:30 +0000

With more and more Dual Screen phones being introduced in the market, it is fair to say that we are entering an “Era of Dual Screen Devices.” And why not? Dual Screen phones are so much better for productivity and media consumption.

Dual Screen (or Foldable) phones come with all form factors to suit every user’s needs. In Dual Screen devices, you can have a phone that can be folded into a size that fits in your palm, while on the other side, you can have a phone which unfolds into the size of a regular tablet.

According to a report in 2021, Dual Screen phones have a 0.5 percent share of the total smartphone market. This is expected to grow by 69.9 percent CAGR by 2025. So it’s fair to say that this decade we will see a lot of foldable and multiscreen phones in the market, and in no time, they will be mainstream.

But with new form factors comes a new screen resolution and compatibility issues for the front-end developers. So now, with the already existing devices in the market, a front-end developer also has to make his website responsive on Dual Screen Devices and Foldables.

Hence looking at this growing adoption of multi-screen or Foldable devices, in 2020 Microsoft announced new Web APIs specially designed for Dual Screen phones. These new Web APIs include CSS Screen Spanning Media Feature and JavaScript Visual Viewport Segment API, which help developers to enhance their website experience on Dual Screen phones.

In this blog on CSS Website Layouts, we will dive deep into these newly announced Dual Screen Web APIs and learn how to use them to make your website responsive. In the end, we will take an example of a Blog page and make it responsive for Dual Screen and Foldable phones. If you are new to Responsive web design, check the guide on Responsive Design.

In this Selenium with Java tutorial, you will learn everything you need to know to kick start your journey in Selenium automation testing Java.

Styling on a Foldable or Dual Screen device

You can categorize Foldables or Dual Screen devices into two categories:

Two separate screens joined by a mechanical hinge.
One Single Screen where the actual screen folds from the middle.

A Foldable or Dual Screen device can have 4 Possible orientations

Single Screen Portrait mode.
Single Screen Landscape mode.
Dual Screen Portrait Mode.
Dual Screen Landscape Mode.

So as you can see, you must consider many viewport scenarios while constructing your queries. The second issue with the Dual Screen display is the position of the hinge.

Dual Screen phones like Microsoft Duo 2 have a mechanical hinge that divides the display into two logical screens. The position of the hinge is exactly in the middle, so any centered content gets hidden behind the hinge.

React is a javascript-based mobile app development framework. Learn how to use Appium and Jest for React Native Automation testing tools for apps on iOS and Android.

Let’s consider our favorite YouTube website and see how it looks on a Dual Screen device.

As you can see, the screen gets divided at the center; hence any object present behind the hinge is lost. This issue gets worse in the case of modals or buttons that are placed exactly at the center.

So we need to design the website in such a way that it breaks the content into two separate sections and avoids showing any content at the center, something similar to a book. This design is great for improving User Experience and Productivity.

By breaking the content into separate sections, we can fit in more information than a usual Single Screen device.

Before we move onto the crux of the topic, let’s talk about browser availability and how to test the output on a Dual Screen device in your Browser.

In this Selenium with Java tutorial, you will learn everything you need to know to kick start your journey in Selenium automation testing using Java.

Browser Support and Availability

Currently, the Dual Screen APIs are available in all the latest versions of all Chromium browsers like Microsoft Edge and Google Chrome but are still in the experimental phase. You need to enable these features in your browser settings to use them.

To enable these features, go to Chrome://flags if you are on chrome or Edge://flags if you are using Edge. In the search bar, type Experimental Web Platform features and change the disabled flag to enable and relaunch the browser.

You can test the queries using the developer tools in Chrome or Edge, as we do for other devices.

Open your website in Google Chrome and press CTRL+SHIFT+I to open the Developer tools panel. You can choose a Dual Screen Device in the output panel to show your output. If you can’t find a Dual Screen Device, click on the edit option on the bottom and add Microsoft Surface Duo as a new device.

Here’s 295+ Selenium Interview Questions with Answers that will help you boost your confidence in an Interview.

Dual Screen Web APIs

Looking at the rise of Foldables and Multiscreen Devices in the market, Microsoft announced two new Web APIs in 2020. These APIs integrate with the existing CSS Media Queries and JavaScript Visual Viewport API so that developers can work more towards utilizing the Dual Screen space for a better user experience than learning an entirely new feature from scratch. These Dual Screen Web APIs include

CSS Screen Spanning Media Feature.
JavaScript Segments Enumeration API.

In the next section of this blog on CSS Website Layouts, we will discuss the CSS Screen Spanning Media feature.

CSS Screen Spanning Media Feature

CSS Screen Spanning Media feature consists of specifically designed media queries to help front-end developers optimize the content for Dual Screen or Foldable devices. This new Media feature is an addition to the existing CSS Media queries we use to add responsiveness to our website.

If you don’t know what a Media Query in CSS is,

Media Query is a CSS rule used to apply a set of CSS properties based on some conditions. CSS Media queries form an integral part of Responsive Web Design.

The CSS screen-spanning media query detects whether your website is opened on a multi-screen device and applies styles based on that. This Query has two variations:

horizontal-viewport-segments
vertical-viewport-segments

Horizontal Segments Media Query

This CSS screen-spanning query is used to check the number of Horizontal screens available on the Output device. This query is triggered when the Foldable device is held in Dual Screen Portrait Mode (Like a Book) where the fold or hinge is vertically in the middle.

Syntax:

 @media (horizontal-viewport-segments: count) {
    /* CSS Styles for this posture  */
 }


 /*Here count is the number of screens in this mode */

Example:

Let’s design a media query where the background color of the body will change to red if the Device is opened in Dual Screen Portrait mode and has 2 screens horizontally beside each other.

CSS Media Query:

@media (horizontal-viewport-segments: 2) {
    body {
        background-color: red;
    }
 }

Vertical Segments Media Query

Vertical Segments query is used to check the number of Vertical screens available on the output device. This query is triggered when the Foldable device is held in Dual Screen Landscape Mode (Like a Vertical Book) where the fold or hinge is present horizontally in the middle.

Syntax:

 @media (vertical-viewport-segments: count) {
    /* CSS Styles for this posture  */
  }


/* Here count is the number of screens in this mode */

Let’s design a media query where the background color of the body will change to red if the Device is opened in Dual Screen Landscape mode and has 2 screens vertically above each other.

Example:

 @media (vertical-viewport-segments: 2) {
    body {
        background-color: red;
    }
  }

Get ready to ace your JUnit interviews question in 2023 with our comprehensive list of 90 questions and answers that will help you sharpen your testing skills.

Chaining Multiple Queries

You can also chain CSS Screen Spanning media queries with additional conditions like the width or height of the viewports.

Here we are writing a query where the styles will be applied if the vertical viewport segments are 2 and the minimum width of the segment is 400px.

 @media (vertical-viewport-segments: 2) and (min-width: 400px) {
    /* Styles to be applied for this specific condition */
 }

CSS Environment Variables

Along with Web APIs, developers can also utilize 6 newly introduced CSS Environment variables to calculate the Geometry of the display region on the screens. These variables can be used to

Get the display area of the screen
Calculate the geometry of the hinge (if present)
Align the content on the screen

/* Get segment Width */
env(viewport-segment-width <x> <y>);


/* Get segment Height */
env(viewport-segment-height <x> <y>);


/* Get position of top */
env(viewport-segment-top <x> <y>);


/* Get position of left */
env(viewport-segment-left <x> <y>);


/* Get position of bottom */
env(viewport-segment-bottom <x> <y>);


/* Get position of right */
env(viewport-segment-right <x> <y>);

The x and y position represent the coordinates of the 2D grid with the center(0,0) in the top-left corner. Using these positions, the screen can be divided into two separate regions denoted by 0 and 1.

Example:

Represents the width of the left screen in Dual Portrait mode:

  env(viewport-segment-width 0 0);

Represents the width of the right screen in Dual Portrait mode.

 env(viewport-segment-width 1 0)

Represents the width of the top screen in Dual Landscape mode.

  env(viewport-segment-width 0 0);

Represents the width of the bottom screen in Dual Landscape mode.

  env(viewport-segment-width 0 1);

Similarly, we can get the height and the corner positions using these variables. Let’s look at how we can calculate the hinge width when the device is used in Dual Screen Portrait mode.

To get the width of the hinge, we must first get the position of the left-top and right-top corners of the hinge.

env(viewport-segment-right 0 0);
/* Top left corner of hinge*/


env(viewport-segment-left 1 0);
/* Top right corner of hinge*/

Subtracting the left corner of the right screen from the right corner of the left screen will get you the width of the hinge.

width of hinge=calc(env(viewport-segment-left 1 0) - 
               env(viewport-segment-right 0 0))

Similarly, you can get the height of the hinge by

height of hinge = calc(env(viewport-segment-top 0 1) -     
                       env(viewport-segment-bottom 0 0))

You can pass the height as a value to a CSS property.

div{
    margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
}

This exhaustive list of TestNG interview questions will aid you in strengthening your position as a candidate for the TestNG interview.

JavaScript Visual Viewport Segments API

In cases where the developer is unable to use CSS to detect a Foldable or Dual Screen Device, he can make use of JavaScript visualViewport.segments API.

Source

In the initial draft, a completely new JavaScript API called JavaScript Windows Segment Enumeration API was proposed. But after getting feedback from the developer community, they decided to implement it in the existing Visual Viewport API.

The VisualViewport API represents the visual viewport for the screen. The API has properties like

visualViewport.width — returns the viewport width
visualViewport.height — returns the viewport height
visualViewport.scale — returns the scaling factor
visualViewport.offsetLeft — returns the offset of the left edge
visualViewport.offsetTop — returns the offset of the top edge
visualViewport.pageLeft — returns the x coordinate of the top edge
visualViewport.pageTop — returns the y coordinate of the top edge

In addition to the existing properties, a new property named visualViewport.segments was introduced. This property provides the count of segments available on the device where the browser is being used.

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visual Viewport API DEMO.</title>


</head>


<body>
    <script>


    let screens = window.visualViewport.segments;


    console.log(screens);

    </script>
    <h1>Check Console</h1>


</body>


</html>

Output:

The window.visualViewport.segments property returns an array containing the DOMRects across which the browser is spanned. Each DOMRect object contains the height and width of each screen along with its x, y, left, right, top, and bottom coordinates. Using these coordinates, you can easily calculate the width and height of the hinge. The query will return a null value if the number of displays is 1.

So in the case of a Microsoft Surface Duo, which is open in Dual Screen Portrait mode, the value returned from window.visualViewport.segments will be an array with 2 values representing the screens. The first object represents the left/top screen, and the second object represents the right/bottom screen. For a single viewport (Desktop, Mobile, Laptop), the value of segments will be null.

The value returned is an immutable snapshot of the device’s state when the object property was queried. So in case the device is rotated, or the state of the displays is changed, the value will no longer be valid. In such cases, we can add an event listener for ‘resize’ and pass a function that will calculate the number of segments available.

Example:

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dual Screen APIs.</title>


</head>


<body>


    <h1>JavaScript's Viewport segment API for Dual Screen devices</h1>


</body>


</html>
    <script>


        let screens;


        // runs every time the user resizes the window
        window.addEventListener('resize', () => {
            screens = window.visualViewport.segments;
            //to check if screens array is null(If null it means its a single screen device)
            if (screens) {
                console.log(screens.length);
            }
            else {
                console.log("Opened in Single Screen mode")
            }
        });


    </script>

Output:

let screens;

        // runs everytime the user resizes the window
        window.addEventListener('resize', () => {
            screens = window.visualViewport.segments;
            //to check if screens array is null(If null it means its a single screen device)
            if (screens) {
                console.log(screens.length);
            }
            else {
                console.log("Opened in Single Screen mode")
            }
        });

This questionnaire of Jasmine Interview questions will aid you in giving good insight about Jasmine and how to crack the interview.

Demonstration: Building a simple Blog page using CSS Website Layouts

In this section of this blog on CSS Website Layouts, we will demonstrate how to build a simple blog page using CSS Website Layouts.

Now that we know about Dual Screen Web APIs let’s test our knowledge by building a small project. We will build a simple Blog page that we will try to make responsive for Dual Screens. Let’s take a look at the design first.

Let’s start with the HTML first. We have a heading, an image, some dummy content, and 3 image cards.

HTML:

<body>
<section>
    <main>
        <h1 class="heading">This is my first blog about my trip to the mountains</h1>
         <img
                src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1600" />
        </main>


    <article>
        <p class="itallic">
            "Some Dummy Content Here"
        </p>
        <p class="content">
            <!--Some Dummy Content here-->
        </p>
        <p class="content">
            <!--Some Dummy Content here-->
        </p>
        <p class="content">
            <!--Some Dummy Content here-->
        </p>
        <h2>Recent Posts</h2>
        <div class="row">
            <div class="card">
                    <img src="https://images.pexels.com/photos/1021808/pexels-photo-1021808.jpeg?auto=compress&cs=tinysrgb&w=1600"
  pre                      alt="">
                    <p>My First trip to the mountains</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/457878/pexels-photo-457878.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the beach</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the space</p>
                </div>


        </div>
    </article>
</section>


</body>

For CSS, I am using Flexbox to align the content. If you are more comfortable with Grid, you can use CSS Grid.

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'DM Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}
section {
    max-width: 1200px;
    padding: 3rem 0;
}
img {
    width: 100%;
    border-radius: 10px;
}
h1 {
    font-size: 4rem;
}
.heading,
.itallic,
.content,
h2 {
    margin: 2rem 0;
}
.itallic {
    font-style: italic;
    color: gray;
}
.row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.card {
    width: 30%;
}
.card p {
    font-size: 1.2rem;
}

This is what we have finished until now. Clean and simple design.

Prepare to ace your NUnit interviews questions with our thorough set of solutions that will enable you to prove your command of the NUnit testing framework.

The basic layout of the blog is done. Time to add responsiveness to our blog. Let’s start with adding media queries for mobile and tablet devices.

/* media queries for mobile devices */
@media screen and (max-width: 480px) {
    section {
        padding: 1rem;
    }


    h1 {
        font-size: 2rem;
    }


    .row {
        display: flex;
        flex-direction: column;
    }


    .card {
        width: 100%;
        margin: 1rem 0;
    }
}


/* media queries for tablet and small laptops*/
@media screen and (min-width:480px) and (max-width: 1200px) {
    section {
        padding: 2rem;
    }
    h1 {
        font-size: 3rem;
    }
}

Output:

I am using the LT Browser to check the output of CSS Website Layouts on various device viewports. As you can see, I can test the responsiveness on a laptop and a mobile viewports side by side.

LT Browser is a mobile-friendly test tool that enables you to conduct responsive testing of your CSS Website Layouts and guarantee your layout’s adaptability across different device viewports. Using LT Browser, you can assess your website’s responsiveness on more than 50 pre-configured device viewports, comprising smartphones, tablets, laptops, and desktops.

Navigate your Laravel interview questions with ease! Our guide covers over 190 questions to help you land your ideal tech job.

Now let’s move on to the objective of this tutorial on CSS Website Layouts, which is Dual Screen Responsiveness. But before that, let’s see how our Blog page looks without adding Media queries for Dual Screen display in the next section of this tutorial on CSS Website Layouts.

As you can see, the content is getting blocked by the hinge. Here’s a design of how I want the website to look on Dual Screen Display.

We are starting with Dual Screen Portrait mode and then moving to Dual Screen Landscape mode.

First, we need to change the flex-direction of the blog content to row format so that we can get a two-column layout with an image and heading on the left and content on the right.

@media (horizontal-viewport-segments: 2) {
    section {
        display: flex;
        padding: 0;
    }
}

Output:

As you can see, the content is flexed in a row but still not as we want it. Let’s set the width of the element that contains an image and heading equally to the width of the left screen. We will use env variables to get the width of the left screen.

main {
    min-width: env(viewport-segment-width 0 0);
}

We will do the same with text content. We will set the minimum content width equal to the screen’s width on the right.

article {
    min-width: env(viewport-segment-width 1 0);


}

Output:

The result looks far better than we started with in this blog on CSS Website Layouts, but still, the design needs improvement. If you look closely, the left part of the content is blocked by the hinge. It’s behind the hinge; hence it’s cropped from the screen.

We can solve that by adding a margin-left to the article tag. This margin value should be equal to the width of the hinge.

article {
    margin-left: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
    width: env(viewport-segment-width 0 1);
    padding: 1rem;
}

Output:

There you go, we have made our Blog page responsive for Dual Screen devices. You can check the code for the Simple Blog here on my CodePen. Now let’s move on to the second mode — Dual Screen Landscape mode. Here we need to do some alignment to display the content properly.

CSS:

/* Media queries for double portrait mode: ( Dual Screen Book mode) */
@media (vertical-viewport-segments: 2) {
    section {
        padding: 0;
    }  
    main {
        width: env(viewport-segment-width 0 0);
        text-align: center;
        min-height: env(viewport-segment-height 0 0);
        padding: 1rem;
    }
    h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    main>img{
        width: 80%;
    }
    article {
        width: env(viewport-segment-width 0 1);
        padding: 1rem;
        margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
    }
    .row {
        display: flex;
    }
    .card {
        width: 30%;
    }
    .card img{
        width: 100%;
    }
}

In this section of this blog on CSS Website Layouts, the top is spanned across the entire top screen and added a margin-top for the content present on the bottom screen so that the text does not get hidden behind the hinge.

Output:

  <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
<body>

    <section>
        <main>
            <h1 class="heading">This is my first blog about my trip to the mountains</h1>
            <img
                src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1600" />
        </main>
        <article>
            <p class="itallic">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque expedita asperiores laudantium natus
                enim, placeat iure! Iure sapiente fugiat iusto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                maxime accusamus eius repellendus dolor modi esse temporibus, amet voluptas itaque!"</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Error sequi quibusdam, esse illo distinctio quas culpa
                aspernatur nostrum, et veritatis neque sapiente! Ducimus tempore maxime obcaecati modi, deleniti commodi possimus
                cupiditate, veniam architecto voluptatibus ipsa cum tempora nobis dolorem explicabo ipsum aliquid, non molestias
                veritatis quam consectetur quia fugit? Laborum, laboriosam voluptatem. Sit corporis quod cumque cupiditate
                dignissimos, aliquam nulla voluptas ea autem debitis dolorum sunt, ratione doloremque velit porro accusantium
                consequuntur et? Enim dolorum iure officia, animi nam rem quas distinctio at aliquam ipsum quos deleniti placeat.
                Quas nisi cumque eligendi sapiente, dolorum consectetur provident quos itaque magni porro.</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dicta vitae voluptates, saepe accusamus labore nisi
                qui repellat asperiores quaerat, unde sint quae? Eos sed voluptatibus consectetur ducimus, quaerat illo similique
                nemo iure perferendis corrupti quidem quasi explicabo architecto id debitis recusandae eum ab molestias assumenda
                animi nesciunt vero ut!
            </p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eius? Facilis pariatur, fugit doloremque eveniet
                temporibus quisquam nesciunt architecto accusantium aut neque magnam nemo excepturi. Temporibus, a rerum quae
                expedita sapiente est voluptates, laborum qui, explicabo molestiae corrupti atque fugit quam laudantium cupiditate
                nihil minima unde non dolorum esse numquam culpa. Quas libero optio doloremque debitis adipisci vero mollitia.
                Tenetur autem quasi consequatur dicta, aliquid non?
            </p>
            <h2>Recent Posts</h2>
            <div class="row">
                <div class="card">
                    <img src="https://images.pexels.com/photos/1021808/pexels-photo-1021808.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the mountains</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/457878/pexels-photo-457878.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the beach</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the space</p>
                </div>

            </div>
        </article>
    </section>

</body>

Ace your Unit testing interviews with our comprehensive interview questions and solutions for unit testing, covering topics from syntax to advanced techniques.

Now in most cases, what we did would be enough. But I want to go one step up and think about the UX. In this section of this blog on CSS Website Layouts, we haven’t fully utilized the multi-screen setup.

Both screens are scrolled together in Dual Screen Portrait mode when we scroll. Hence the image is lost and the left screen is blank. It would be better if we stick the image and heading on one screen and allow the user to scroll only the textual region (right screen).

Final Output:

In my opinion, this looks better than the previous ones. I could keep the image in focus fixed on one side of the display while allowing the user to read the content from another side.

CSS (for the above output):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'DM Sans', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}


section {
    max-width: 1200px;
    padding: 3rem 0;
}


img {
    width: 100%;
    border-radius: 10px;
}


h1 {
    font-size: 4rem;
}


.heading,
.itallic,
.content,
h2 {
    margin: 2rem 0;
}


.itallic {
    font-style: italic;
    color: gray;
}


.row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}


.card {
    width: 30%;
}


.card p {
    font-size: 1.2rem;
}


/* media queries for mobile devices */
@media screen and (max-width: 480px) {
    section {
        padding: 1rem;
    }


    h1 {
        font-size: 2rem;
    }


    .row {
        display: flex;
        flex-direction: column;
    }


    .card {
        width: 100%;
        margin: 1rem 0;
    }
}


/* media queries for tablets and small laptops*/
@media screen and (min-width:480px) and (max-width: 1200px) {
    section {
        padding: 2rem;
    }


    h1 {
        font-size: 3rem;
    }
}
/* Media queries for double portrait mode: ( Dual Screen Book mode) */
@media (horizontal-viewport-segments: 2) {
    section {
        display: flex;
        padding: 0;
        position: relative;
    }


    main {
        width: env(viewport-segment-width 0 0);
        padding: 1rem;
        height: env(viewport-segment-height 0 0);
        position: fixed;
    }


    article {
        margin-left: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + env(viewport-segment-width 0 0));
        width: env(viewport-segment-width 0 1);
        padding: 1rem;
        overflow: scroll;


    }


    .row {
        display: flex;
        flex-direction: column;
    }


    .card {
        width: 100%;
        margin: 1rem 0;
    }
}


/* Media queries for double landscape mode: ( Dual Screen laptop mode) */
@media (vertical-viewport-segments: 2) {
    section {
        padding: 0;
        position: relative;
    }


    main {
        width: env(viewport-segment-width 0 0);
        text-align: center;
        height: env(viewport-segment-height 0 0);
        padding: 1rem;
        position: fixed;
        background-color: #fff;
    }


    h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }


    main>img {
        width: 80%;
    }


    article {
        width: env(viewport-segment-width 0 1);
        padding: 1rem;
        margin-top: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0) + env(viewport-segment-height 0 0));
    }


    .row {
        display: flex;
    }


    .card {
        width: 30%;
    }


    .card img {
        width: 100%;
    }
}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Blog.</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
        <link rel="stylesheet" href="./style.css">
</head>

<body>

    <section>
        <main>
            <h1 class="heading">This is my first blog about my trip to the mountains</h1>
            <img
                src="https://images.pexels.com/photos/147411/italy-mountains-dawn-daybreak-147411.jpeg?auto=compress&cs=tinysrgb&w=1600" />
        </main>
        <article>
            <p class="itallic">"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque expedita asperiores laudantium natus
                enim, placeat iure! Iure sapiente fugiat iusto. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
                maxime accusamus eius repellendus dolor modi esse temporibus, amet voluptas itaque!"</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Error sequi quibusdam, esse illo distinctio quas culpa
                aspernatur nostrum, et veritatis neque sapiente! Ducimus tempore maxime obcaecati modi, deleniti commodi possimus
                cupiditate, veniam architecto voluptatibus ipsa cum tempora nobis dolorem explicabo ipsum aliquid, non molestias
                veritatis quam consectetur quia fugit? Laborum, laboriosam voluptatem. Sit corporis quod cumque cupiditate
                dignissimos, aliquam nulla voluptas ea autem debitis dolorum sunt, ratione doloremque velit porro accusantium
                consequuntur et? Enim dolorum iure officia, animi nam rem quas distinctio at aliquam ipsum quos deleniti placeat.
                Quas nisi cumque eligendi sapiente, dolorum consectetur provident quos itaque magni porro.</p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt dicta vitae voluptates, saepe accusamus labore nisi
                qui repellat asperiores quaerat, unde sint quae? Eos sed voluptatibus consectetur ducimus, quaerat illo similique
                nemo iure perferendis corrupti quidem quasi explicabo architecto id debitis recusandae eum ab molestias assumenda
                animi nesciunt vero ut!
            </p>
            <p class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eius? Facilis pariatur, fugit doloremque eveniet
                temporibus quisquam nesciunt architecto accusantium aut neque magnam nemo excepturi. Temporibus, a rerum quae
                expedita sapiente est voluptates, laborum qui, explicabo molestiae corrupti atque fugit quam laudantium cupiditate
                nihil minima unde non dolorum esse numquam culpa. Quas libero optio doloremque debitis adipisci vero mollitia.
                Tenetur autem quasi consequatur dicta, aliquid non?
            </p>
            <h2>Recent Posts</h2>
            <div class="row">
                <div class="card">
                    <img src="https://images.pexels.com/photos/1021808/pexels-photo-1021808.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the mountains</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/457878/pexels-photo-457878.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the beach</p>
                </div>
                <div class="card">
                    <img src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1600"
                        alt="">
                    <p>My First trip to the space</p>
                </div>

            </div>
        </article>
    </section>

</body>

Dual Screen APIs are still in the experimental phase; hence these APIs won’t work in real-world devices. In such a case, you can use Viewport Segments Polyfill. This Polyfill is an alternative to JavaScript Viewport Segments API. There is still no alternate API for CSS Spanning Media Queries.

Another option will be to make your website perfectly responsive for handheld devices like phones. Hence, users can view the website on a Single Screen instead of spanning it across both screens.

This questionnaire intends to provide a list of some of the most frequently asked Jenkins interview questions to assist job seekers in preparing for interviews.

UX in Dual Screen displays

With the introduction of new form factors for devices, there are new challenges for the developers to build their apps and websites that adapt and work well on such devices. But along with the challenges, there are new opportunities to showcase their creativity and use the extra space. But how can you make your website or app better for Dual Screens?

First, think about how you can fully utilize the Dual Screens. Dual Screen means extra screen real estate to fit your content. Think about making life easy for the User by showing more content and better accessibility.

Example:

Let’s say you are creating an app or websites like Instagram or Facebook. In such apps, you can create a single photo screen such that the post image is fixed on the left while the image caption, comments, and likes are shown on the right screen. This allows users to absorb more content than regular design. The user does not need to scroll below to see the comments. He can check the comments with the image still on the screen.

Similar things can be done for Video playing websites like YouTube, where you can play a Video on one screen and comments, descriptions, and other important metadata related to the post on the other screen. Thus improving the User Experience.

Here’s Top 30+ CI/CD Interview Questions and Answers that will help you boost your confidence in an Interview.

Wrapping it Up

In 2022, more than 60% of the web traffic was through mobile devices. Every developer and designer must adapt to the changes as the devices evolve.

In this blog on CSS Website Layouts, we discussed a new generation of devices, the Foldable and Dual Screen Devices. We understood why designing a Foldable or Dual Screen device is difficult and how the new CSS Media query solves our problem. We then saw examples of the new queries and how to use them. Later, we built a small Blog page and made it responsive for Dual Screen devices.

So next time you are working on your website, don’t forget to test the responsiveness of your CSS Website Layouts on Dual Screen devices. I hope you found this blog on CSS Website Layouts helpful. Happy Coding!

A Complete Guide To CSS Houdini

Anuraggharat651 — Wed, 24 May 2023 07:01:50 +0000

As a developer, checking the cross browser compatibility of your CSS properties is of utmost importance when building your website. I have often found myself excited to use a CSS feature only to discover that it’s still not supported on all browsers. Even if it is supported, the feature might be experimental and not work consistently across all browsers. Ask any front-end developer about using a CSS feature whose support is still in the experimental phase in most prominent web browsers. 🙁

However, some CSS features outshine others, even though they are in the experimental phase. In the end, developers would want to be early adopters of technology. Talking about early adoption, you should check out CSS Houdini. Like me, many front-end developers are super excited about it since it is considered the future of writing code with CSS. It is considered the most exciting development in CSS since CSS Flexbox and grid.

The first question that comes to mind is, “What is so special about CSS Houdini”? Well, it literally gives you the super-power through which you can have tighter control over the styling of web pages. So, let’s look at how you can do much more as a front-end developer with CSS Houdini!

There have been many advancements in HTML and JavaScript in the last few years. You can now extend HTML and create your components and custom properties. But CSS, there’s nothing much yet! As a developer, you have a lot of constraints while working with CSS. You can only use the properties supported by the browser and have limited control over the styling and layout of the webpage.

Imagine the possibilities if we are allowed to extend CSS using JavaScript. No restrictions and no rules! Extend CSS as you wish! Adding new features which will be performant and consistent across all browsers will be easy for developers.

Mobile emulators online from LambdaTest allows you to seamlessly test your mobile applications, websites,and web apps on mobile browsers and mobile devices.

But what will CSS Houdini do?

Let’s consider that you want to implement an angled border button in your website, but the existing browsers don’t support it. So instead of waiting for the browser to provide support, you can import the paint worklet directly into your project and apply the angled border and clipping property to your buttons without worrying about browser compatibility. This is as easy as installing a plugin for a feature. You can create a worklet by yourself or use one already created by other developers.

Like the paint worklet, we have a layout worklet to implement masonry layout, animation API to implement custom animations, and properties API to register custom properties with type checking.

In this blog, learn what CSS Houdini is, how it handles web page rendering issues, the CSS Houdini APIs, and some practical examples.

Introduction to CSS Houdini

CSS Houdini is an umbrella term for browser APIs that expose certain parts of the CSS rendering engine to the developers. This allows developers to extend CSS without compromising on performance. We can add new features using JavaScript and share them as project modules. Hence developers are no longer restricted to using only the properties supported by the browser.

For the first time, the developers can extend the various stages present in the browser’s rendering pipeline.

The main goal of CSS Houdini is to present a set of new APIs to the developers so that they can attach (hook) their code in the CSS engine. This allows the developers to extend the existing CSS with features not yet available on some browsers.

You might wonder what CSS Houdini has to do with your small website.

Think of the bigger picture!

Wouldn’t it be nice if you could get more control over the rendering of your website, use the latest features in CSS without worrying about cross browser compatibility, and import CSS features just like you import modules in JavaScript? This is what Houdini is trying to achieve!

A Houdini task force comprised engineers from top companies like Google, Microsoft, Apple, HP, and IBM. The aim of this task force was simple:

How can we improve the developer experience by giving them better control of the rendering process of the web page?

The ultimate goal was to give developers more control over the browser’s rendering process and improve CSS capabilities without compromising performance.

They achieved this by exposing parts of the CSS engine, allowing developers to build APIs that hook directly into the browser. I have covered the same in the section where the focus is on the problems Houdini is trying to solve. By opening up these parts, developers can extend the stages in the pipeline with JavaScript and add new features.

So, which are these parts? I will dive deep into it in the subsequent sections of the blog.

Before we dive deeply into CSS Houdini, let’s understand why we need CSS Houdini in the first place and what problem it is trying to solve.

New Selenium IDE supports cross browser testing and parallel tests for automation along with record and replay function. Here’s why you shouldn’t miss out on it.

Why use CSS Houdini?

You might have noticed that it has taken a lot of time for a CSS feature to be available in all browsers since its announcement. Alas, cross browser compatibility issues arise since not all the web browsers (and browser versions) support all the available CSS properties (including the ones in the experimental phase).

In JavaScript, features are added and adopted very quickly, but in CSS, it’s the exact opposite. Ask any CSS developer 😣 It takes a lot of time to propose a new feature, approve it, and wait for all browsers to adopt it and then use it. It took years for our favorite CSS Grid to be available in all browsers.

The other problem is that you might want to use a feature, but it might not be supported in all browsers. In such a case, you choose another workaround which is CSS polyfill.

Polyfill is a piece of JavaScript code that provides modern features in the older browser that lack support. It acts as a browser fallback for missing properties in older browsers. For example, a polyfill code can provide the CSS outline property in Internet Explorer 7, where the property is not supported.

As interesting as CSS polyfill sounds, it has a lot of drawbacks.

The main downside of using a CSS polyfill is that it negatively impacts the browser’s performance. The polyfill code is never as efficient as the native CSS code. Hence it can never work as a replacement.

To understand the drawback and why CSS Houdini is important, we must first know how a browser loads a web page.

Role of Browser Rendering Pipeline

The below image depicts various stages present in the browser rendering engine pipeline. A web page goes through all these stages before it is displayed on the screen.

Let’s understand each stage in detail

DOM and CSSOM

Whenever a request is sent from the browser, the server returns a web page. This web page is an HTML document. While loading this web page, the browser scans the HTML code and generates a JavaScript object called a Node for every HTML element.

For example, every ‘div’ generates a JavaScript object from the HTMLDivElement class function. After the browser has gone through the entire page, it builds a tree-like structure of the nodes from the entire document. This tree-like structure is called a DOM (Document Object Model).

JavaScript has access to this DOM with the help of DOM APIs. Using these APIs, a developer can manipulate the DOM.

Automated Functional Testing tests helps to ensure that your web app works as it was intented to. Learn more about functional tests, and how automating them can give you a faster release cycle.

![image](https://cdn-images-1.medium.com/max/800/0*bYRjzkzBOQrcwxZF.png

Here’s a simple example of how we can change the text inside the < p > tag using JavaScript.

HTML:

<div>

    <p id="text">Hi, there!</p>

    <button onclick="changeText()">
        Change Text
    </button>

</div>

JavaScript:

function changeText() {

    document.getElementById("text").innerHTML = "Hello World!";

}

Output:

<div>

  <p id="text">Hi, there!</p>

  <button onclick="changeText()">
    Change Text
  </button>

</div>

After reading the HTML file and constructing the DOM, the browser collects all the CSS styles from all the existing sources and builds a CSSOM (Cascading Style Sheet Object Model).

CSSOM is a CSS representation of DOM. Each node in CSSOM contains the style that will be applied to that particular node in DOM that the CSS Selector is targeting.

First, a final CSS is generated by considering the specificity (overriding some styles if they are repeated); only then is the CSSOM created. CSSOM does not contain elements that are not printed on the screen.

Render Tree

In the third step, we combine the DOM and CSSOM to form a render tree. While creating the render tree, the browser checks every node from the root and determines the styles attached to it. Only the elements that are supposed to be present on the screen are added in the render tree nodes.

If there’s a node with a property display set as none, that node and its descendants are not added to the render tree. Similarly, the head section of the web page contains no visible information and hence is not included in the render tree.

Layout

The layout operation is responsible for calculating the position and dimensions of each node from the render tree. The layout is the process by which the width, height, and location of all nodes in the render tree are determined. In this step, the browser determines the width, height, location, and geometry of each node present in the render tree and creates a layout.

Layout operation is also called browser reflow. This operation runs every single time the browser viewport is changed.

Through this usability testing tutorial, you will learn how usability testing is a great way to discover unexpected bugs, find what is unnecessary or unused before going any further, and have unbiased opinions from an outsider.

Paint

Up until now, the browser has created layers of each element separately. In paint operation, the browser works on each layer and fills them with visual elements like borders, colors, backgrounds, fonts, shadows, etc.

This process is performed on each layer separately. Paint operation is also called rasterization.

Composition

In this step, we combine all the layers generated till now and draw them on the screen as a single web page. After the composition operation, the web page is displayed on the browser.

This sequence of events is called the critical rendering path.

So let’s quickly summarise

DOM is generated from the HTML code.
CSSOM is created based on the stylesheets (Internal and External).
DOM and CSSOM are combined to form the render tree.
Layers are created based on the render tree in the layout operation.
Visual factors are added to each layer in the paint operation.
Layers are combined in the composition process and presented on the screen.

Once all the critical rendering path steps are completed, JavaScript attached to the code is loaded. However, there is a slight issue with the web page rendering that we typically face. In the next section of this blog, we will explore the issues with the rendering of a web page.

What’s the issue with the rendering of a web page?

As seen above, a developer has limited access to DOM and CSSOM. (The degree of access to CSSOM is unspecified in the official docs)

So if you ever have to write a polyfill for CSS, you cannot plug it into CSSOM directly since you don’t have access to it. You can only plug it inside the DOM.

This means you have to update the DOM, resulting in a re-rendering of the complete web page. The browser will reinitiate the rendering process whenever you make any DOM changes.

Re-rendering your website once or twice after you initially load it might sound like a small dent in your website performance. But consider a case where you have written a polyfill that will run every time you scroll. This will make your webpage load multiple times, significantly affecting performance.

For example, let’s say you created a CSS smooth scroll polyfill function that brings CSS smooth scroll property in old browsers and Internet Explorer. This polyfill function runs every time the browser detects scroll. This makes the web page reload whenever the function is invoked, hence affecting the performance.

So we need to find a way to modify or extend the CSS without triggering the re-render. That means modifying the rendering cycle without touching the DOM.

Black Box testing? Don’t worry; we will be covering what is Black box testing, merits, demerits, types & techniques.

How does CSS Houdini handle web page rendering issues?

Houdini introduces a new set of APIs that lets the developers access the parts of the browser rendering pipeline. For the first time, you will have access to the layout, painting, and other processes of the website. Developers can go above the regular CSS styling and create their properties, layout, and animations.

This extension of the CSS engine is possible due to CSS Houdini APIs. CSS Houdini is a set of APIs that expose parts of the CSS engine.

CSS Houdini APIs

CSS Houdini consists of two sets of APIs.

Low-Level APIs
High-Level APIs

These APIs (low-level and high-level) make it easier for developers to create extensions for CSS. These extensions might be to polyfill features that are not yet available in a browser, experiment with new layout methods, or add creative borders or other effects.

These extensions act as polyfill to provide features that are not yet available in the browser. Using these APIs, developers extend the stages of the CSS rendering pipeline by adding custom JavaScript code and creating custom features like layouts, borders, backgrounds, etc.

Low-Level APIs

These APIs form the foundation of the High-level APIs.

Worklets
Typed Object Model API
Custom Properties API
Font Metrics API

High-Level APIs

These High-level APIs represent the four stages of the browser’s rendering pipeline.

Paint API
Layout API
Animation Worklet API
Parser API

As of November 2022, only paint API, custom properties API, and typed object model API is supported in Chromium-based browsers and will be available soon in Firefox and Safari. So only use these supported browsers to check the output of the explained examples.

Following is the browser support for Houdini APIs.

Source

A comprehensive User Acceptance Testing (UAT) tutorial that covers what User Acceptance Testing is, its importance, benefits, and how to perform it with real-time examples.

Worklets

A worklet is a lightweight version of a web worker and acts as an extension point of the browser rendering engine for the developers. Each worklet runs in a separate context and has no access to the window, document objects, or high-level functions.

Worklets run independently of the main thread and can be invoked at any point of the rendering pipeline. Worklets are the JavaScript modules that attach themselves to the browser and make the high-level APIs work. They are imported and registered using a single line of JavaScript.

Currently, CSS Houdini supports three worklets.

Paint Worklet
Layout Worklet
Animation Worklet

Importing a paint worklet:

CSS.paintWorklet.addModule("url-of-worklet");

Using an imported worklet:

    body{
     background-color: paint(confetti)
     }

Typed Object Model API

CSS values come with a variety of units. We have px, rem, em, ch, cm, and more! Interacting with so many units is difficult for any developer. Currently, the only way for developers to read and modify CSS values using JavaScript is by parsing them into Strings. This makes it difficult to perform arithmetic operations, and code is more prone to errors.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lambda Test</title>
</head>
<body>
    <section>
        <div style="height: 100px;" id="heading">
            <h1>Lambda Test</h1>
        </div>
    </section>
</body>
</html>
<script>
    var heading = document.getElementById('heading')
    console.log(heading.style.height)
    console.log(typeof heading.style.height)
</script>

Output:

As you can see in the above example, the 100px value is a string. So to add any value to it, we need first to parse it into an Integer, perform our operation, and convert it back to a String. This gets even tougher when the unit used is relative, like %, vh/vw.

Typed Object Model API adds more semantics to the CSS by exposing them as JavaScript objects. Hence instead of taking a CSS value and parsing it into a String, Typed OM APIs provide you with a JavaScript Object with value and unit property. This approach is faster, and the code is more maintainable and less prone to errors.

Using computedStyleMap() we get an object which consists of the value and the unit. It is easier to perform the calculations and work with a numerical value.

Here is how we use Typed Object Model API.

    //select the container using javascript
var elem = document.getElementById('container')
console.log("Using Typed OM ")
console.log("Height : " + elem.computedStyleMap().get("height"));
console.log("Type of Height = " + typeof elem.computedStyleMap().get("height").value);

Output:

computedStyleMap() method is used for parsing computed properties and attributeStyleMap is used for parsing and modifying inline styles.

Typed Object Model API performs type checking. So if you pass a wrong data type, it will show an error in the console.

Here’s an example showing how easy it is to interact with CSS properties using the Typed Object Model API.

HTML:

<body>
    <div id="container">
        <h1 id="heading">Typed OM using CSS Houdini</h1>
        <p>Open the console log</p>
    </div>
</body>

CSS:

body {
    background-color: #fefefe;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    font-family: 'Courier New', Courier, monospace;
    font-size: 30px;
}
div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 800px;
}

JavaScript:

//select the container using javascript
var elem = document.getElementById("container");

elem.style.height = 500;
console.log(typeof elem.style.height);
//String

//getting styles using Typed OM
console.log(elem.computedStyleMap().get("height"));
console.log(elem.computedStyleMap().get("height").value);
console.log(typeof elem.computedStyleMap().get("height").value);
console.log(elem.computedStyleMap().get("height").unit);

//setting styles using Typed OM
var elemTwo = document.getElementById("heading");
elemTwo.attributeStyleMap.set("font-size", CSS.px(50));

//getting inline-styles
console.log(elemTwo.attributeStyleMap.get("font-size"));

//an error will be thrown if we pass a non string value
//elemTwo.attributeStyleMap.set('font-size', CSS.px(asd))

//Clear all the styles
console.log(elemTwo.attributeStyleMap.clear);
//delete font-size style
console.log(elemTwo.attributeStyleMap.delete("font-size"));
//check if style is present
console.log(elemTwo.attributeStyleMap.has("font-size"));

Output:

<div id="container">
        <h1 id="heading">Typed OM using CSS Houdini</h1>
  <p>Open the console log</p>
    </div>

Here I am using LT Browser — a complementary tool by LambdaTest, to test my output.

LT Browser is a mobile-friendly tester offered by LambdaTest — a continuous quality cloud testing platform for manual and automated testing for web and mobile. With LT Browser, you can test your website’s responsiveness on over 50+ device viewports. It supports responsive testing on the mobile, tablet, desktop, and even laptops.

Check out the following tutorial for more details.

Subscribe to the LambdaTest YouTube channel for tutorials around Selenium testing, Playwright, Cypress, and more.

LT Browser provides tons of amazing features like

Check the mobile view of your websites.
Compare the side-by-side view of the website on different viewports
Generate performance reports of your websites.
Network simulation to test websites across varying networks.
Perform one-click bug logging and video recording of test sessions.

We recently went live with the beta version of our all-new Chromium-based LT Browser 2.0, which has several new features and enhancements.

Run your Selenium online Automation Testing scripts on the LambdaTest cloud grid. Test on 3000+ desktop & mobile environments. Try it for free.

Along with the Object, we also get useful methods like clear, delete, and has.

  //Clear all the styles
  console.log(elemTwo.attributeStyleMap.clear)
  //delete font-size style    
  console.log(elemTwo.attributeStyleMap.delete('font-size'))
  //check if style is present        
  console.log(elemTwo.attributeStyleMap.has('font-size'))

Custom Properties and Values API

Custom properties and values API allows developers to create CSS properties with data types, initial values, and inheritance rules. Developers can register these properties using the ‘registerProperty()’ method or the ‘@property’ rule.

CSS Custom Properties API extends the CSS variables and adds Type checking. You can add a variable in the ‘:root{}’ block and use it throughout your CSS file.

  :root {
   --primary-color: blue;
}
body {
    background-color: var(--primary-color);
}

One of the downsides of using a regular CSS variable is that there is no type checking. So if the browser encounters a value that does not match the expected property value type. It directly discards the property.

The other drawback of using a regular CSS variable is that we can’t animate the property. The browser does not know what the expected type of the property is hence it is unable to handle the animations. But registered properties allow us to handle CSS animations since they come with a type.

You can create your custom CSS property in two ways:

Using the registerProperty() method in your JavaScript file.

  CSS.registerProperty({
    name: "name-of-property",
    syntax: "<property-type>",
    inherits: false / true,
    initialValue: "initial-value",
  });

Using @property in your CSS file

  @property --property-name {
      syntax: "<property-type>";
      inherits: false/true;
      initial-value: initial-value;
  }

Let’s take an example to understand CSS custom property. In this example, we will create two custom properties. One with the registerProperty() method and another with the @property rule.

HTML:

<body>

    <h1>CSS CUSTOM PROPERTY</h1>

</body>

CSS:

@property --primaryColor {
    syntax: "<color>";
    inherits: false;
    initial-value: teal;
}

body {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primaryColor);
    color: var(--textColor)
}

JavaScript:

CSS.registerProperty({
  name: "--textColor",
  syntax: "<color>",
  inherits: false,
  initialValue: "orange",
});

Output:

<body>

  <h1>CSS CUSTOM PROPERTY & VALUES API</h1>

</body>

Font Metrics API

According to the documentation, font metrics API will contain methods that will allow the developers to measure the dimensions of the textual elements that are being rendered on the screen. For example, using this API, you can perform text truncation on multiple line text elements.

Currently, this API is still in a very early stage of development, so there is a high chance that the specifications and features may change.

Run your Selenium Automation Testing scripts on the LambdaTest cloud grid. Test on 3000+ desktop & mobile environments. Try it for free.

Paint API

CSS paint API allows developers to generate graphics using JavaScript functions during the Paint stage of the browser’s rendering pipeline. This is achieved with the help of Paint Worklet. In the Background, Paint API uses the CanvasRenderingContext2D, which is the subset of HTML5 Canvas API.

Using a paint worklet, you can create custom backgrounds, borders, outlines, and more! You can define your own custom painting functions or use the existing worklets created by other developers.

This API has the best support and is enabled in all the Chromium-based browsers, under consideration for Firefox and in the development stage for Safari. You can use the paint() function as a value to the CSS properties and pass the registered Paint worklet.

Here the developers define the paint functions and use them as CSS properties in their CSS file.

Steps

Create your own worklet using the registerPaint() method or link an already created worklet using CDN.

registerPaint("name-of-worklet", {
  //..code
});

CSS.paintWorklet.addModule(“path-to-worklet.js-file”);

Use the paint() function as a CSS value to the background property.

.demo {
    background: paint(name-of-worklet);
}

Add a polyfill script to ensure the worklet runs on all old browsers.

<script src="cdn-link-to-polyfill-file.js"></script>

So, let’s take an example and show you the possibilities of paint API. For this example, we will use already created worklets. There are lots of cool worklets to choose from. I loved the static gradient one, so I’ll use that.

HTML:

<section>
    <div class="demo">
        <h1>PAINT WORKLET - CSS Houdini</h1>
    </div>
</section>
<script src="https://unpkg.com/Houdini-static-gradient/worklet.js"></script>

CSS:

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #222;
}

section {
    height: 100vh;
    width: 100%;
}

div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo {
    background: paint(static-gradient);
    --static-gradient-size: 5;
    --static-gradient-color: #7743DB;
    --static-gradient-direction: to-bottom;
}

h1 {
    font-size: 3rem;
    color: #fff;
}

JavaScript:

  CSS.paintWorklet.addModule('https://unpkg.com/Houdini-static-gradient/worklet.js')

Output:

<section>
        <div class="demo">
            <h1>PAINT WORKLET - CSS Houdini</h1>
        </div>
    </section>

<script src="https://unpkg.com/houdini-static-gradient/worklet.js"></script>

You can get a lot creative with the paint API. The possibilities are limitless. Check out these two examples that I created using paint API. I went a step ahead and added keyframes animation to it.

Example 1

Here is the code for our first example.

HTML:

<section>
    <div class="demo">
        <h1>CSS Houdini is Awesome!</h1>
    </div>
</section>

<script src="https://unpkg.com/extra-confetti/worklet.js"></script>

CSS:

 body {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        background-color: #222;
    }

    section {
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    div {
        width: 1000px;
        height: 500px;
        background-color: aquamarine;
        display: flex;
        align-items: center;
        justify-content: center;


    }

    .demo {
        background: paint(extra-confetti);
        --extra-confettiNumber: 20;
        --extra-confettiLengthVariance: 20;
        --extra-confettiWeightVariance: 10;
        animation: animateConfetti 1s infinite;
    }

    h1 {
        font-size: 5rem;
        color: #fff;
    }

    @keyframes animateConfetti {
        0% {
            --extra-confettiNumber: 20;

        }

        50% {
            --extra-confettiNumber: 60;
        }

        100% {
            --extra-confettiNumber: 100;
        }
    }

JavaScript:

CSS.paintWorklet.addModule("https://unpkg.com/extra-confetti/worklet.js");

Output:

<section>
        <div  class="demo">
            <h1>CSS Houdini Paint API Example!</h1>
        </div>
    </section>

   <script src="https://unpkg.com/extra-confetti/worklet.js"></script>

Example 2

Now let’s look at the code for our second example.

HTML:

<section class="demo">

</section>

<script src="https://unpkg.com/Houdini-alien@0.1.1/AlienPainter.js"></script>

CSS:

 body {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    section {
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .demo {
        background-image: paint(alien);
        --alien-bg-color: #222;
        --alien-fg-color: #f321f1;
        --alien-grid-size: 2;
        animation: animateAlien 2s infinite;

    }

    @keyframes animateAlien {
        0% {
            --alien-grid-size: 2;
        }

        25% {
            --alien-grid-size: 3;
        }

        50% {
            --alien-grid-size: 4;
        }

        75% {
            --alien-grid-size: 3;
        }

        100% {
            --alien-grid-size: 2;
        }
    }

JavaScript:

CSS.paintWorklet.addModule(
  "https://unpkg.com/Houdini-alien@0.1.1/AlienPainter.js"
);

Output:

<section class="demo">

    </section>
    <script>
        CSS.paintWorklet.addModule('https://unpkg.com/houdini-alien@0.1.1/AlienPainter.js')
    </script>
<script src="https://unpkg.com/houdini-alien@0.1.1/AlienPainter.js"></script>

Layout API

CSS layout API allows the developers to create their own Display properties. This API extends the layout stage of the browser’s rendering pipeline. Layout API will make creating new and complex layouts easy for developers.

Similar to the paint API, the layout worklet needs to be registered before it can be used.

registerLayout(
  "mylayout",
  class {
    //code for the layout
  }
);

Once registered, you can add the layout API in your HTML file using the add method.

CSS.layoutWorklet.addModule('path-to-layout-worklet');

Finally, use the layout function against the display property in your CSS file.

.container {
    display: layout(mylayout);
}

Currently, layout API is not supported in all browsers; hence we won’t be able to see a working demo.

Animation API

Animation API improves the performance of web animations by running them on their own worklet. This API is the extension of the Composite stage of the browser’s rendering pipeline. The API allows the developers to generate KeyframeEffect animations based on user inputs like a scroll, hover, and click. These animations are non-blocking and more performant than the existing ones since they run off the main thread(on their own worklet).

Similar to the other worklets, the animation worklet needs to be registered first.

registerAnimator(
  "myanimation",
  class {
    //code for custom animation
  }
);

Then add it as a module in your main JavaScript file.

CSS.animationWorklet.addModule("path-to-animation-worklet");

Animation API has partial support in Chromium-based browsers and is not supported by Firefox and Safari, so we won’t be able to see a working demo.

This Cypress test automation tutorial will help you learn the benefits of Cypress automation, and how to install Cypress and execute Cypress automation testing over scores of browsers and operating systems online.

Parser Worklet

Parser worklet extends the parsing stage of the browser’s rendering pipeline and is built on top of the Typed Object Model. The goal of this API is to allow the Developer access to the Rendering Engine’s Parser. With this API, you can create new rules, perform nesting, extend CSS and apply external properties.

Currently, this API is not implemented; hence the specifications aren’t clear. But this API has a massive scope since developers can extend the CSS parsing phase and directly tell the browser what CSS property follows.

Conclusion

I am very excited about CSS Houdini APIs. How cool is it that the developers get access to all the rendering pipeline stages? This means more control and power in the hands of the developers. All these new APIs and worklets have opened a new world of possibilities. You are now not restricted to the browser-supported CSS properties. You can create your own CSS property polyfills or use the ones already created without worrying about browser compatibility. This will make the developer experience a lot better.

CSS Houdini is still in the early stages of development but has shown the potential to change how developers write the styles. This is still the surface; there are a lot more APIs that are yet to be announced. As a developer, the CSS Houdini project is one of the most exciting projects to look forward to in the upcoming years.

I hope you learned something new and exciting from this blog. CSS has always been a tricky topic for all developers. So many new features are coming up, and it is vital to stay updated on them. It’s time to use some of the APIs mentioned above in your projects!

CSS Content-Visibility: A Game-Changer For Web Page Loading Speed

Anuraggharat651 — Tue, 25 Apr 2023 09:18:02 +0000

The adage “First Impression is the Last Impression” is one that I’m pretty sure you’ve heard before. Well, I don’t know if it’s true in the case of people, but it applies to websites. A visitor’s first impression of a website is generally based on how fast the site loads and how smoothly it interacts. A slow or sluggish website stays in the visitors’ minds and might affect their decision to revisit the site.

According to developer Mozilla documentation, visitors on a website generally expect a website to load within a couple of seconds and abandon the site if it takes more than 3 seconds. Hence as a developer, we need to make a maximum impact in the minimum time to make the visitor stay on the site.

Website performance is an essential factor in determining whether the visitors stay on our website or move to another one. With so many businesses going online, a website becomes a focal point for gaining customers and creating an online identity. In such cases, a poorly performing website can negatively impact the business. Whereas a highly performant and optimized website results in better conversion rates and better customer retention.

Hence as a developer, improving the performance of our website must be our topmost priority. Web Optimization is a process of improving the performance and experience on a site using optimization techniques, strategies, and technologies to drive more audience and meet the business goals.

Website Optimization techniques can be performed on the client and server sides. Techniques such as lazy loading images, improving database read/write times, and caching JavaScript files are popular among developers. As per the HubSpot survey, you can reduce your website’s initial render time by more than 80% using a single line of CSS code.

The new CSS content-visibility property directly interacts with the browser’s rendering process to improve the website’s performance. In this blog, we will understand how to leverage the CSS content-visibility property to enhance the website’s performance.

Which are the most wanted tools for automation testing that have climbed the top of the ladder so far? Let’s take a look

Why does Website Performance matter?

Having a website that works well is beneficial. An interactive website with quick responses draws visitors more readily. Visitors will go to another website if yours takes longer to load. A user will trust a website that loads quickly. One finding is that a fast website has a higher rate of customer retention.

Here are some reasons website performance matters:

User experience: Users expect websites to load swiftly and without interruption. High bounce rates can result from users becoming impatient with a slow or poorly functioning website. As a result, users may be less likely to revisit your website, harming your brand’s reputation.
Search engine rankings: Website speed affects rankings on search engines like Google. In addition to making it more difficult for users to find your site, a slow website can harm your search engine rankings.
Conversion rates: Having a website that loads quickly and responds to user input can increase conversion rates. Visitors are more likely to purchase or complete the desired action on a website that is quick and simple to use.
Mobile responsiveness: Website performance is increasingly important as mobile users use these devices to access websites. Mobile users anticipate quick page loads and seamless browsing.
Optimize images: Your website may load slowly if the images are large. Make sure to optimize your images by minimizing their file size without compromising on quality.
Minimize HTTP requests: Every file request made by a website takes time to load. You can minimize HTTP requests by combining multiple files into one, using CSS sprites, and using browser caching.
Use a content delivery network (CDN): A CDN can help improve website performance by caching content on multiple servers worldwide, reducing the distance between the server and the user.
Minify CSS and JavaScript: Minifying CSS and JavaScript files by removing whitespace and comments can reduce file sizes and speed up website load times.
Use a fast and reliable web hosting service: The speed of a website can be significantly impacted by its web host. Use a fast, dependable web hosting service that can manage the traffic to your website.
Implement lazy loading: Your website may load slowly if the images are large. Make sure to optimize your images by minimizing their file size without compromising on quality.
Use responsive design: Your website must have a responsive design to look good and work properly across all platforms, including desktops, tablets, and mobile phones.
Test your website regularly: Regularly testing your website’s performance can help you identify and fix issues before they become significant problems.

By implementing these tips, you can enhance the functionality of your website, which will raise user engagement, boost search engine rankings, and increase conversion rates.

Which are the most wanted automation testing tools that have climbed the top of the ladder so far? Let’s take a look.

Meanwhile, you can also go through the below LT Browser 2.0 tutorial.

Introduction to CSS content-visibility property

The CSS content-visibility property introduced in Chromium 85 is one of the most impactful properties for improving a website’s performance. This property allows the developers to decide which part of the webpage should render and which part should be skipped on the initial render.

When we talk about content on websites, we can divide it into two parts or sections. One section is directly visible and accessible to the user on the initial load, and the other is only visible after user interaction, like scrolling down.

Here I have taken a screenshot of the LambdaTest website. As shown in the above image, the section above the red threshold is directly visible to the user whenever he opens the website. All the HTML elements present in this section of the website can be called onscreen elements.

Whereas the section below the red threshold line is not directly visible to the user. The user has to scroll down to view it. The HTML elements in this section of the website that are not visible directly can be called offscreen elements.

Hence by only rendering the content above the threshold and delaying the rendering process of the content present below the threshold, we can speed up the overall rendering of the website. A reduced rendering time will result in better load times and better performance on the initial render.

This is exactly what the CSS content-visibility property is all about. Using this property, a browser can skip the rendering of a part of the webpage which is not present directly in the user’s viewport. This indicates that if the element is present in the user’s viewport at the time of the first load, it is rendered; otherwise, it is skipped until the element is brought into the user’s viewport. We can think of this as a lazy load for all the content on the website.

The CSS content-visibility property allows browsers to defer the layout and rendering work of off-screen elements, making the initial page load faster. Our offscreen content will only be loaded once we visit it. This results in improved initial load time, and our on-screen content is quickly available for the user to interact with.

A Critical Rendering Path in a browser is a series of stages, like layout, styling, painting, etc., that a browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. The CSS content-visibility property reduces the number of elements to be rendered during the render phase of the critical rendering path.

The CSS content-visibility property accepts one of the below three values.

 content-visibility: [visible | auto | hidden];

content-visibility: visible

.container{
    content-visibility: visible;
}

This is the default value and does not affect the rendering of the webpage. The entire webpage is loaded on the initial load.

content-visibility: hidden

.container{
    content-visibility: visible;
}

This CSS content-visibility value is the perfect mixture of two different CSS properties — visibility: hidden and display: none. Using content-visibility: hidden, the browser hides the element, but the render state is still preserved in the cache. As a result, whenever the property changes, the browser does not have to re-render the element, reducing load time.

We can use this property when showing an element that is initially hidden but has to be shown quickly on screen after some user interaction. A modal would be a perfect use case for content-visibility: hidden property.

Perform browser automation testing on the most powerful cloud infrastructure. Leverage LambdaTest automation testing for faster, reliable and scalable experience on the test automation cloud.

content-visibility: auto

.container{
    content-visibility: auto;
}

If this property is applied to the element and the element is not present in the user’s viewport, the browser simply skips the rendering of that element. This property turns on layout, style, and paint containment.

But unlike CSS content-visibility: hidden, the element is still available to the user on screen. Hence search and find operations can still be performed on the elements.

Using CSS content-visibility property to Improve Website’s Performance

Normally, the browser loads the entire webpage on the initial load. This means that all the elements on the webpage go through the scripting, rendering, layout, and painting stages in the Critical Rendering Path. Hence the browser takes a lot of time to load the website for the first time. The load time can increase more if the website is multimedia-heavy and has a lot of scripts running in the background.

The CSS content-visibility: auto property solves this problem for us. When CSS content-visibility is set as auto for an element, the browser skips the rendering phase of that element on the initial load. The element is only loaded when it enters the user’s viewport. Until then, the browser only calculates the dimensions of the elements. Hence only the elements that are required on the initial load and visible to the user are rendered.

This boosts the website performance because the browser can now defer the rendering of the elements until they are required.

Even after using the CSS content-visibility: auto property, our content is still available in the DOM tree. Therefore we can still search for our content and navigate to it before it even loads without sacrificing the performance.

Difference between Content-Visibility and Lazy Loading

A website’s images are an essential component. In some cases, they even account for the bulk of the website’s content. Although necessary and unavoidable, images also contribute to the website’s lag time. Bulky images can make it take longer for the page to load overall.

Source

The above image is taken from Addy Osmani and perfectly demonstrates the difference between default behavior vs. when the lazy load is applied. Instead of fetching all the images together, only the required images are fetched; hence the page load is completed in half the time.

The Lazy loading technique is used in websites to improve performance by delaying the fetch request of the images present on the site. Hence, images not directly present in the user’s viewport can be fetched later using the loading=”lazy” attribute.

<img src="link-to-image" loading="lazy">

Although the CSS content-visibility and lazy loading properties are both website optimization techniques and sound similar, there is a lot of difference between them.

Lazy loading can only be applied to the images, while CSS content-visibility can be applied to any HTML element.
Lazy loading delays the request of images, whereas CSS content-visibility requests the data but delays the rendering until it’s needed.
Lazy loading is an HTML image tag attribute, whereas CSS content-visibility is a property.

How to use CSS content-visibility property?

Before using the CSS content-visibility property, we must first identify which parts of the website are directly visible to the user and which are accessible only after the scroll. The parts directly in the user’s viewport can usually be rendered. In contrast, for the ones which are off-screen and not directly visible to the user, we can apply content-visibility: auto.

In this section, we will take an existing website and analyze its performance using Chrome DevTools. Then we will add the CSS content-visibility property and check the improvement in the rendering time.

In an example or demo, we will use a CodePen example of a dummy travel blog website from Una Kravets. This is a pretty simple Single Page Website (SPA) with lots of images and content, which is perfect for our demo.

Run your Selenium Automation Testing scripts on the LambdaTest cloud grid. Test on 3000+ desktop & mobile environments. Try it for free.

Before using the CSS content-visibility property

Before measuring the performance, it is essential to note that the final output of the website’s performance might vary depending on your Internet speeds. The following numbers were achieved on my browser with the Internet speed, as shown below.

Let’s check the initial performance of the website without any optimization. To check the website performance, we will load our website in the Chrome browser and open the DevTools using Ctrl + Shift + I. Now we will switch to the performance tab to calculate the performance.

Click on the reload button to record the page load statistics. The browser will run the initial load for the website. Here is what the website performance looks like in my browser without applying any optimizations.

Now, checking for the initial render time, we got these values.

As shown in the image above, the rendering time is 340 ms, and the total load time is

74673 ms. Let’s understand what happens behind the screen.

The server receives a request from the browser and returns a webpage consisting of an HTML file. This HTML file is parsed, and a DOM and CSSOM are generated. Later on, during the rendering stage of the process, a render tree is created by combining the DOM and CSSOM. Once the render tree is generated, the browser performs the remaining layout and painting operations and displays the webpage on the screen.

During the rendering stage of the process, the browser does not check if the content is visible to the user or if the content is needed by the user on the initial load. It continues the operation until the entire webpage is loaded and resources are downloaded.

The rendering time will be even more if our webpage has even more images and content since it will take more time for the assets to be downloaded from the network and placed in their place.

Run your Selenium online Automation Testing scripts on the LambdaTest cloud grid. Test on 3000+ desktop & mobile environments. Try it for free.

Now let’s see how we can improve the performance of our webpage using the CSS content-visibility property.

First, we will break down the page into two parts –

Visible to the user
Not visible to the user

In the above image, we have broken down the page into parts/sections. If we analyze the website properly, we can see that we only need the first fold and the main section on the initial load. All the other content below it can be rendered later once the user scrolls since they don’t fall directly into the user’s viewport on the initial load.

After using the CSS content-visibility property

We will add an off-screen class to all the div tags we want to skip during the render stage. For all these off-screen elements, we will set the CSS content-visibility as auto-using the off-screen class.

.off-screen{
    content-visibility: auto;
}

Now, let’s measure the web page’s performance after using the CSS content-visibility property.

Now here, measuring the performance of the travel blog after optimization using the CSS content-visibility property.

That’s an 8X performance boost using a single line of CSS code. We brought the initial render time down from 340 ms to 60 ms. We reduced the render time by almost 80%! But what caused such a huge impact?

Here the browser still performs the same operations as it did before. The entire web page goes through the Critical Rendering Path as it did before. But the only difference is during the rendering stage. During the rendering stage, once the browser encounters the CSS content-visibility property applied to the element, it simply skips the rendering of that element.

The browser will render only the elements on-screen, i.e., visible to the users. The other elements (with class ‘off-screen’) only go through the styling and layout stage and will only be rendered on the screen once they appear in the user’s viewport. Using this technique, rendering of a large portion of the webpage is skipped, and hence we get such a big jump in rendering time and overall performance.

HTML:

<!-- Website -->
<nav>
  <a href="#">My Travel Site</a>
  <ul class="grid-3">
    <li>Home</li>
    <li>About</li>
    <li>Archive</li>
  </ul>
</nav>
<article>
  <h1>The Ultimate Weekend Road Trip Guide</h1>

<figure class="hero">
  <img src="https://source.unsplash.com/1600x980" alt="">
  <figcaption>This Demo Uses Images from the <a href="https://unsplash.com">Unsplash</a> API.</figcaption>
</figure>

<p class="leading">Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<blockquote>Harum quo <i>distinctio facilis</i> dolorem. Consectetur iste repellendus impedit</blockquote>

<p>Harum quo distinctio facilis dolorem. Consectetur iste repellendus impedit, odio, corrupti aliquid officia molestiae hic mollitia, omnis aperiam quos enim alias doloribus sint libero ipsa numquam reprehenderit laudantium voluptatibus voluptates!</p

<figure>
  <img src="https://source.unsplash.com/random/1600x920" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<h2>Make sure you're stocked up on snacks</h2>
<div class="off-screen">

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/410" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/411" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/430" alt="">
</figure>
</div>

<p>Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. <i>Sint, qui doloremque sit voluptate quis voluptatum</i>, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<iframe src="https://codepen.io" style="width: 100%; height: 500px" frameborder="0"></iframe>

<p>Ex provident eos expedita odio quas, et rem nemo voluptatibus necessitatibus ab, voluptatum nam nesciunt impedit sint repellendus, dolorem cumque vero! Ipsa minus perspiciatis dolores! Magnam assumenda quidem itaque totam?</p>

<ul>
  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
  <li>Aut expedita magni, provident tenetur non voluptatem culpa nesciunt deleniti dolor amet ducimus a quis veniam nisi odit ex cupiditate sunt.</li>
  <li>Fugit illo illum sapiente neque id soluta sunt error harum nulla qui blanditiis, nemo perspiciatis nesciunt, voluptate voluptates excepturi ipsa sequi vero vitae.</li>
  <li>Debitis aperiam ipsa hic quibusdam animi ipsum.</li>
</ul>

<p><a href="#">Atque similique</a> quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/620" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/610" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/800x400" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, <a href="#">doloremque debitis</a> deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1600x900">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam modi tempora perferendis. Repellendus, facere accusamus. Distinctio, sit! Cupiditate voluptatibus at id eos nulla consequuntur, dicta animi aut, reiciendis minus hic?</p>

</div>
<h2>Don't forget to plan your stay</h2>
<div class="off-screen">

<p>Quo sed quis <a href="#">fuga atque</a> aliquid iste optio sunt voluptatum, laudantium enim dicta explicabo animi ipsa necessitatibus itaque hic ab rem dolor temporibus harum iure? Itaque minima quos architecto quia.
Velit soluta error, fugiat placeat deleniti tempore voluptatum consectetur repudiandae. Sit sed nihil numquam itaque facere labore earum neque, officia reiciendis non ea deserunt magnam tenetur! Magnam officiis vitae quidem?</p>

<figure>
  <img src="https://source.unsplash.com/random/1200x800" alt="">
  <figcaption>Sunt dignissimos impedit corrupti aliquam adipisci quisquam est reprehenderit illum aspernatur alias, commodi neque ipsam eveniet odio amet nemo harum hic voluptatem optio quod culpa. Fugiat totam eaque excepturi amet.
  </figcaption>
</figure>

<blockquote>Minus accusamus explicabo voluptatum at exercitationem aliquam aspernatur odit corrupti!</blockquote>

<p>Velit ipsum eum quos? Voluptatum, quidem veniam repellat rerum impedit ducimus! <b>Provident perferendis</b>, nostrum dolorum nesciunt earum amet dicta repellat ad vitae, laudantium iste assumenda fuga mollitia nobis, consequatur adipisci?</p>

<div class="p-group-flex">
<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<p>Velit ipsum eum quos? Voluptatum, quidem veniam repellat rerum impedit ducimus! <b>Provident perferendis</b>, nostrum dolorum nesciunt earum amet dicta repellat ad vitae, laudantium iste assumenda fuga mollitia nobis, consequatur adipisci?</p>

<iframe src="https://css-tricks.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/650" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/400" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/350" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/700" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/600" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/550" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1200x600" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

</div>
<h2>Choose your travel partners wisely</h2>
<div class="off-screen">

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/670" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/600" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<div class="grid-3">
<figure>
  <img src="https://source.unsplash.com/random/300" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/301" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/302" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1600x910" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1600x940" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>


<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>  

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/650" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/680" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/690" alt="">
</figure>
</div>


<p>Perferendis accusamus asperiores nihil repudiandae, dignissimos sint natus, cumque consectetur maxime ducimus voluptates, nesciunt repellat! Rerum in totam voluptatibus quidem numquam perspiciatis fugiat delectus laboriosam praesentium explicabo, officiis, magnam perferendis?</p>

<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, nemo veritatis.</blockquote>

</div>
<h2>Don't forget to take photos!</h2>
<div class="off-screen">

<p>Corporis deleniti consequuntur corrupti dolor sit tempora assumenda, quia quos modi aliquam, ex exercitationem asperiores est magni iste repellendus voluptatibus, alias maxime? Amet nostrum voluptates nam odio eius reprehenderit accusantium!</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/530" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/535" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<div class="p-group-flex">

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1600x950" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<figure>
  <img src="https://source.unsplash.com/random/1200x600" alt="">
  <figcaption>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#">Doloremque</a>, praesentium.</figcaption>
</figure>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

<iframe src="https://smashingmagazine.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1600x900" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/450" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/450" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/450" alt="">
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>
<h2>Hello World</h2>
<div class="off-screen">

<div class="p-group-flex">
<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<p>Velit ipsum eum quos? Voluptatum, quidem veniam repellat rerum impedit ducimus! <b>Provident perferendis</b>, nostrum dolorum nesciunt earum amet dicta repellat ad vitae, laudantium iste assumenda fuga mollitia nobis, consequatur adipisci?</p>

<iframe src="https://css-tricks.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/650" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/400" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/350" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/700" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/600" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/550" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/621" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/620" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

</div>
<h2>Travel Together</h2>
<div class="off-screen">

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<div class="grid-3">
<figure>
  <img src="https://source.unsplash.com/random/611" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/609" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/610" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1620x910" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1610x940" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1240x700" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/689" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/681" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/691" alt="">
</figure>
</div>


<p>Perferendis accusamus asperiores nihil repudiandae, dignissimos sint natus, cumque consectetur maxime ducimus voluptates, nesciunt repellat! Rerum in totam voluptatibus quidem numquam perspiciatis fugiat delectus laboriosam praesentium explicabo, officiis, magnam perferendis?</p>

<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, nemo veritatis.</blockquote>

<p>Corporis deleniti consequuntur corrupti dolor sit tempora assumenda, quia quos modi aliquam, ex exercitationem asperiores est magni iste repellendus voluptatibus, alias maxime? Amet nostrum voluptates nam odio eius reprehenderit accusantium!</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/603" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/604" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<div class="p-group-flex">

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1602x950" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<figure>
  <img src="https://source.unsplash.com/random/1234x640" alt="">
  <figcaption>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#">Doloremque</a>, praesentium.</figcaption>
</figure>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

</div>
<h2>Fruit and Food for the Road</h2>
<div class="off-screen">

<iframe src="https://smashingmagazine.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1601x900" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/452" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/453" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/451" alt="">
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

</div>
</article>

<footer>
  Footer. Thank you!
</footer>

CSS:

html {
  font-size: 20px;
}

.off-screen {
  content-visibility: auto;
  contain-intrinsic-size: 100px 1000px;
}

body {
  background: #fdfbf5;
  margin: 0 auto;
  padding: 0 2rem;
  font-family: 'system-ui', sans-serif;
  box-sizing: border-box;
  max-width: 1000px;
  line-height: 1.4;
}

blockquote {
  padding: 2rem;
  border:  3px double hotpink;
}

p {
  max-width: 52ch;
}

h1 {
  text-align: center;
  font-size: 2.75rem;
}

a {
  color: mediumvioletred;
}

ul {
  list-style: none;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  list-style: none;
}

figure {
  width: 100%;
  margin: 0;
}

img {
  width: 100%;
}

ul {
  list-style: circle;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.grid-2 figcaption {
  float: none;
  margin: -1rem auto 1rem;
}

.leading {
  font-size: 120%;
}

.leading::first-letter {
  font-size: 150%;
  font-weight: 800;
}

.hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hero figcaption {
  margin: -1rem auto 0;
}

figcaption {
  font-size: 80%;
  background: mistyrose;
  padding: 1rem;
  margin: -1rem 0 1rem -1rem;
  z-index: 1;
  position: relative;
  width: 80%;
  max-width: 400px;
}

figure + figure figcaption {
  float: right;
  margin: -1rem -1rem 1rem 0;
}

figure img:not(.hero) {
  background: pink;
}

footer {
  font-style: italic;
  text-align: center;
  padding: 3rem;
  color: gray;
}

.p-group-flex {
  display: flex;
}

.p-group-flex p {
  margin: 1rem;
}

<!-- Website -->
<nav>
  <a href="#">My Travel Site</a>
  <ul class="grid-3">
    <li>Home</li>
    <li>About</li>
    <li>Archive</li>
  </ul>
</nav>
<article>
  <h1>The Ultimate Weekend Road Trip Guide</h1>

<figure class="hero">
  <img src="https://source.unsplash.com/1600x980" alt="">
  <figcaption>This Demo Uses Images from the <a href="https://unsplash.com">Unsplash</a> API.</figcaption>
</figure>

<p class="leading">Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<blockquote>Harum quo <i>distinctio facilis</i> dolorem. Consectetur iste repellendus impedit</blockquote>

<p>Harum quo distinctio facilis dolorem. Consectetur iste repellendus impedit, odio, corrupti aliquid officia molestiae hic mollitia, omnis aperiam quos enim alias doloribus sint libero ipsa numquam reprehenderit laudantium voluptatibus voluptates!</p

<figure>
  <img src="https://source.unsplash.com/random/1600x920" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<h2>Make sure you're stocked up on snacks</h2>
<div class="off-screen">

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/410" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/411" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/430" alt="">
</figure>
</div>

<p>Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. <i>Sint, qui doloremque sit voluptate quis voluptatum</i>, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<iframe src="https://codepen.io" style="width: 100%; height: 500px" frameborder="0"></iframe>

<p>Ex provident eos expedita odio quas, et rem nemo voluptatibus necessitatibus ab, voluptatum nam nesciunt impedit sint repellendus, dolorem cumque vero! Ipsa minus perspiciatis dolores! Magnam assumenda quidem itaque totam?</p>

<ul>
  <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
  <li>Aut expedita magni, provident tenetur non voluptatem culpa nesciunt deleniti dolor amet ducimus a quis veniam nisi odit ex cupiditate sunt.</li>
  <li>Fugit illo illum sapiente neque id soluta sunt error harum nulla qui blanditiis, nemo perspiciatis nesciunt, voluptate voluptates excepturi ipsa sequi vero vitae.</li>
  <li>Debitis aperiam ipsa hic quibusdam animi ipsum.</li>
</ul>

<p><a href="#">Atque similique</a> quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/620" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/610" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/800x400" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, <a href="#">doloremque debitis</a> deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1600x900">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam modi tempora perferendis. Repellendus, facere accusamus. Distinctio, sit! Cupiditate voluptatibus at id eos nulla consequuntur, dicta animi aut, reiciendis minus hic?</p>

</div>
<h2>Don't forget to plan your stay</h2>
<div class="off-screen">

<p>Quo sed quis <a href="#">fuga atque</a> aliquid iste optio sunt voluptatum, laudantium enim dicta explicabo animi ipsa necessitatibus itaque hic ab rem dolor temporibus harum iure? Itaque minima quos architecto quia.
Velit soluta error, fugiat placeat deleniti tempore voluptatum consectetur repudiandae. Sit sed nihil numquam itaque facere labore earum neque, officia reiciendis non ea deserunt magnam tenetur! Magnam officiis vitae quidem?</p>

<figure>
  <img src="https://source.unsplash.com/random/1200x800" alt="">
  <figcaption>Sunt dignissimos impedit corrupti aliquam adipisci quisquam est reprehenderit illum aspernatur alias, commodi neque ipsam eveniet odio amet nemo harum hic voluptatem optio quod culpa. Fugiat totam eaque excepturi amet.
  </figcaption>
</figure>

<blockquote>Minus accusamus explicabo voluptatum at exercitationem aliquam aspernatur odit corrupti!</blockquote>

<p>Velit ipsum eum quos? Voluptatum, quidem veniam repellat rerum impedit ducimus! <b>Provident perferendis</b>, nostrum dolorum nesciunt earum amet dicta repellat ad vitae, laudantium iste assumenda fuga mollitia nobis, consequatur adipisci?</p>

<div class="p-group-flex">
<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<p>Velit ipsum eum quos? Voluptatum, quidem veniam repellat rerum impedit ducimus! <b>Provident perferendis</b>, nostrum dolorum nesciunt earum amet dicta repellat ad vitae, laudantium iste assumenda fuga mollitia nobis, consequatur adipisci?</p>

<iframe src="https://css-tricks.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/650" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/400" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/350" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/700" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/600" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/550" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1200x600" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

</div>
<h2>Choose your travel partners wisely</h2>
<div class="off-screen">

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/670" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/600" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<div class="grid-3">
<figure>
  <img src="https://source.unsplash.com/random/300" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/301" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/302" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1600x910" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1600x940" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>


<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>  

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/650" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/680" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/690" alt="">
</figure>
</div>


<p>Perferendis accusamus asperiores nihil repudiandae, dignissimos sint natus, cumque consectetur maxime ducimus voluptates, nesciunt repellat! Rerum in totam voluptatibus quidem numquam perspiciatis fugiat delectus laboriosam praesentium explicabo, officiis, magnam perferendis?</p>

<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, nemo veritatis.</blockquote>

</div>
<h2>Don't forget to take photos!</h2>
<div class="off-screen">

<p>Corporis deleniti consequuntur corrupti dolor sit tempora assumenda, quia quos modi aliquam, ex exercitationem asperiores est magni iste repellendus voluptatibus, alias maxime? Amet nostrum voluptates nam odio eius reprehenderit accusantium!</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/530" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/535" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<div class="p-group-flex">

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1600x950" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<figure>
  <img src="https://source.unsplash.com/random/1200x600" alt="">
  <figcaption>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#">Doloremque</a>, praesentium.</figcaption>
</figure>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

<iframe src="https://smashingmagazine.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1600x900" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/450" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/450" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/450" alt="">
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>
<h2>Hello World</h2>
<div class="off-screen">

<div class="p-group-flex">
<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<p>Velit ipsum eum quos? Voluptatum, quidem veniam repellat rerum impedit ducimus! <b>Provident perferendis</b>, nostrum dolorum nesciunt earum amet dicta repellat ad vitae, laudantium iste assumenda fuga mollitia nobis, consequatur adipisci?</p>

<iframe src="https://css-tricks.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/650" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/400" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/350" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/700" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/600" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/550" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1200x700" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Atque similique quia eos cupiditate, repellat quibusdam rerum, facilis quisquam eius beatae omnis excepturi. Sint, qui doloremque sit voluptate quis voluptatum, distinctio sunt eaque voluptas placeat praesentium amet error nostrum!</p>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/621" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/620" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

</div>
<h2>Travel Together</h2>
<div class="off-screen">

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<div class="grid-3">
<figure>
  <img src="https://source.unsplash.com/random/611" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/609" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/610" alt="">
</figure>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1620x910" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>

  <figure>
  <img src="https://source.unsplash.com/random/1610x940" alt="">
  <figcaption>Perspiciatis modi reprehenderit quisquam suscipit ipsum totam labore, voluptatibus illum adipisci inventore quos dolorum velit!</figcaption>
</figure>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1240x700" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/689" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/681" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/691" alt="">
</figure>
</div>


<p>Perferendis accusamus asperiores nihil repudiandae, dignissimos sint natus, cumque consectetur maxime ducimus voluptates, nesciunt repellat! Rerum in totam voluptatibus quidem numquam perspiciatis fugiat delectus laboriosam praesentium explicabo, officiis, magnam perferendis?</p>

<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, nemo veritatis.</blockquote>

<p>Corporis deleniti consequuntur corrupti dolor sit tempora assumenda, quia quos modi aliquam, ex exercitationem asperiores est magni iste repellendus voluptatibus, alias maxime? Amet nostrum voluptates nam odio eius reprehenderit accusantium!</p>

<div class="grid-2">
  <figure>
  <img src="https://source.unsplash.com/random/603" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
  <figure>
  <img src="https://source.unsplash.com/random/604" alt="">
  <figcaption>Facilis nesciunt perferendis porro incidunt, doloremque debitis deleniti blanditiis eum ab fuga magnam asperiores provident.</figcaption>
</figure>
</div>

<div class="p-group-flex">

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae. Temporibus, eum!</p>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>
</div>

<figure>
  <img src="https://source.unsplash.com/random/1602x950" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<figure>
  <img src="https://source.unsplash.com/random/1234x640" alt="">
  <figcaption>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <a href="#">Doloremque</a>, praesentium.</figcaption>
</figure>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

</div>
<h2>Fruit and Food for the Road</h2>
<div class="off-screen">

<iframe src="https://smashingmagazine.com" style="width: 100%; height: 500px" frameborder="0"></iframe>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

<figure>
  <img src="https://source.unsplash.com/random/1601x900" alt="">
  <figcaption><a href="#">Lorem ipsum</a> dolor sit amet consectetur, adipisicing elit. Doloremque, praesentium.</figcaption>
</figure>

<div class="grid-3">
  <figure>
  <img src="https://source.unsplash.com/random/452" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/453" alt="">
</figure>
<figure>
  <img src="https://source.unsplash.com/random/451" alt="">
</figure>
</div>

<p>Recusandae, eveniet? Pariatur voluptatibus voluptatem ad aut iusto rem officia eum, repudiandae facere ratione ipsum id cumque molestias placeat laboriosam quis iure excepturi suscipit quia maiores, provident beatae.</p> 

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores placeat corrupti vel harum. Omnis inventore, eum quo obcaecati at iusto voluptate explicabo soluta, nisi quisquam asperiores ratione, possimus ea totam?</p>

</div>
</article>

<footer>
  Footer. Thank you!
</footer>

This CSS content-visibility property is very useful for improving the performance of blog pages, news articles, or any webpage that is long and has a lot of images and content.

When we use CSS content-visibility: auto, a large portion of our webpage is not rendered. Hence the browser considers the webpage to be smaller than the actual length. This makes a snappy scrollbar effect where the scrollbar adjusts the position every time we scroll down. Because as we scroll down, new content is rendered, and hence the length is recalculated.

This problem can be easily solved using the contain-intrinsic-size property.

The ‘contain-intrinsic-size’ property

The contain-intrinsic-size property is a CSS shorthand property for the contain-intrinsic-width and contain-intrinsic-height properties. This property applies size containment to the element. In simple words, this property is used to provide the estimated size for the elements that the browser has not rendered yet.

/* contain-intrinsic-size: width height; */


.container {
    contain-intrinsic-size: 100px 1000px;
}

The contain-intrinsic-size property is combined with CSS content-visibility to provide a fallback size for all the elements whose render phase is skipped. Hence the browser knows the length of the web page, and hence the scrollbar does not reposition itself when we scroll down.

For our example, we will give a rough estimate of 100px width and 1000px height for all the off-screen elements.

.off-screen {
    content-visibility: auto;
    contain-intrinsic-size: 100px 1000px;
}

Browser Support

The content-visibility property was added in Chromium 85 and is currently available in all the latest Chrome, Edge, and Opera versions. This property is still in the consideration stage for Firefox and Safari.

So if you plan to use ‘content-visibility: hidden’ in the production website, don’t forget to use feature detection and combine it with the ‘display: hidden’ property. On the other hand, ‘content-visibility: auto’ enhances the performance of your website and has no negative impact if the browser does not support it. Hence you can use this property without worrying about its support.

The ‘contain-intrinsic-size’ property supports newer versions of Chrome, Edge, Firefox, and Opera. It is still in the preview phase on Safari Browser.

To test your website or web app’s working or functionality on different browsers, LambdaTest is a unified intelligent digital experience testing platform that allows developers and testers to perform cross browser compatibility testing over more than 3000+ different browsers and OS combinations.

Run your Selenium Automation Testing scripts on the LambdaTest cloud grid. Test on 3000+ desktop & mobile environments. Try it for free.

Furthermore, LambdaTest also provides powerful features, such as automated screenshot testing, visual regression testing, and geolocation testing. These features allow developers to test their websites in different scenarios and identify any issues that may impact browser compatibility.

To get started with LambdaTest, you just need to follow these simple steps:

Register for free and sign in to your LambdaTest account.
Choose a Realtime Testing card from the modal box.
Enter the test URL, choose your preferred browser’s version, OS, and resolution, and select either web or mobile tab. Then click START.

It will launch a cloud-based machine that runs on the operating system and real browsers. Now, you can test your website by leveraging powerful features like one-click bug logging, video recording, different network conditions, and others.

Refer to the below video to get started with real-time testing on LambdaTest.

You can also subscribe to our LambdaTest YouTube Channel to stay up-to-date on software testing topics around Selenium testing, Cypress testing, Playwright, and more.

Wrapping Up!

It’s almost magic how one single line of CSS code can make such a huge impact on a website’s performance. If you want to make your website more performant, don’t miss out on the CSS content-visibility property.

In this blog, we understand why website performance is important. We checked the new CSS content-visibility property and its values and saw how by using this property, we can boost our website performance. We then applied the property to an existing blog page and brought the rendering time down by 80%. I hope you found it helpful.