Forem: Tahera Alam

How to Use Selenium for Record and Playback

Tahera Alam — Fri, 27 Jun 2025 13:21:11 +0000

Selenium is a popular test automation framework that comes with a robust suite of tools, simplifying everything from writing test scripts to executing them.

You can also use Selenium for record and playback tests with one of its components, the Selenium IDE. With Selenium IDE, you can create automated tests without writing a single line of code.

What Is Selenium IDE?

Selenium IDE is a browser extension that simplifies the process of creating automated tests for web applications. It allows you to record your actions on a website in the browser and playback those actions to verify the expected functionality.

It provides a user-friendly interface that allows you to quickly create and run test cases directly within your browser without requiring any technical expertise.

What Is Record and Playback in Selenium?

When it comes to codeless test automation, the record and playback feature in Selenium allows you to record your interactions with a website, and then you play them back to see if everything works as expected.

The record and playback feature is available within its ecosystem through the Selenium IDE. When you enable recording, the IDE captures every action you perform in the browser and translates it into a sequence of commands.

These commands are then saved as a test script, which can be executed later to replicate the same interactions. It also eliminates the need for repetitive manual testing and ensures consistency in test execution.

How to Record and Playback With Selenium?

Now, let’s look at how to use Selenium for record and playback tests.

Install the Selenium IDE

Important: When writing this blog, the Selenium IDE extension is no longer available for the Chrome browser on the Chrome Web Store as it didn’t align with Chrome extension best practices.

You can still access the Selenium IDE extension on other browsers, such as Brave.

To demonstrate how to use Selenium for record and playback, we’ll use the Brave browser to run our tests.

Install the Selenium IDE Chrome extension.
Open the Selenium IDE and click on Create a new project.

3. Give it a name and click OK.

Create a New Test

Now that we have a project ready, let’s create our first test in this project. For this purpose, we will use the LambdaTest eCommerce Playground website.

Currently, this is how our workspace looks like:

Click on the Add new test button in the top left side and give the test a name:

2. Click ADD and now we are ready to actually record the test and play it back.

Record the Test

Before you can start recording, you need to enter the URL of the website you want to test. To demonstrate this, we’ll use the LambdaTest eCommerce Playground. So, go ahead and paste this URL https://ecommerce-playground.lambdatest.io/ in the playback base URL field.

Once you enter the URL, click the recording button (at the top right in red). Selenium will open the website in a new tab and start recording all your interactions.

As you navigate through the website, Selenium records every action. This includes clicking buttons, filling out forms, selecting dropdown options, and navigating between web pages.

Now that recording is active, let’s follow the below steps will help you understand how Selenium IDE captures user interactions.

Search for an iMac, check the results, and open a product page — Selenium IDE records each step.
Click on the search bar, type “iMac,” and press Enter or click the search button.

The Search results page appears, and Selenium IDE captures the navigation.

3. Click on any iMac product to open its details page — this click is also recorded.

4. Once you have completed the actions, return to Selenium IDE and stop the recording.

Now, let’s move on to the next step — playing back the test to see if it works as expected.

Playback the Test

Playing back a test in Selenium IDE allows you to automatically re-run the recorded steps and check whether the interactions you recorded work as intended.

Now, let’s see how we can playback the test we just recorded in the previous step.

Here, at the top of the Selenium IDE window, you can see a Run current test button. Click it, and Selenium IDE will automatically execute each recorded action step by step.

You can also run multiple tests in a sequence by clicking the right arrow next to each test. This will execute every test in your project one after another.

It becomes useful when verifying multiple workflows or features in a web application. Since our project has a single test, both buttons will have the same effect.

As the test runs, you’ll see the browser automatically repeat the recorded steps- navigating to the website, searching imac, viewing the results, and opening the product page just as you did while recording.

When this playback takes place, Selenium IDE offers feedback in real-time. If the test passes, all steps will run without errors. Selenium identifies a failed step and highlights it (for instance, if an element is not found or there are changes in the structure of the page). This makes it possible to quickly debug the test.

At the bottom of Selenium IDE’s window, you’ll see the test log showing the steps executed along with their timestamps and a message saying everything was executed successfully.

Now that we know how to record and playback a test, let’s explore how to export your test so it can be used in Selenium or other test automation frameworks.

Export a Test

Selenium IDE supports exporting tests in various programming languages and frameworks.

Let’s see how you can export your test:

Click on the three dots menu located in the top left corner of the Selenium IDE window:

2. Choose your preferred language/framework and other optional configurations, and click Export.

After selecting the format, simply save the file on your local machine and you are done.

The exported file will contain the test script in your chosen programming language. This script includes the commands and steps that Selenium IDE recorded.

You can now import this file into your development environment (e.g., Eclipse, IntelliJ IDEA, VS Code) and integrate it with your Selenium WebDriver project.

How to Run Selenium IDE Tests on the Cloud?

Up until now, we have learned how to record, playback, and export tests using the Selenium IDE. However, there are limitations to running tests on only your local browser. For instance, if you need to test on several browsers and operating systems to check how your website functions?

This is where cloud testing platforms like LambdaTest come into play. It is an AI-native test execution platform that enables you to execute Selenium IDE tests on a cloud-based grid.

LambdaTest provides you with access to various combinations of browsers and operating systems (Chrome, Firefox, Edge, Safari on Windows/macOS, etc.), which can help you run your tests in parallel, enabling faster software release cycles.

Now, let’s see how we can run the Selenium IDE tests on LambdaTest with just a few simple steps.

Install Node.js.
Connect Selenium IDE with LambdaTest. For that, you’ll need your Username and Access Key. To get the access, head over to your Account Settings > Password & Security.
Install the Selenium IDE Runner (or the SIDE Runner) using the below given command:

npm install -g selenium-side-runner

This will help you run the tests outside the browser.

4. Open Selenium IDE and click on the save project icon to save it to your local machine.

This file contains your recorded test case, which will be used to run tests on LambdaTest. You can also access the exported Selenium IDE project in this GitHub repository.

5. To direct your tests to the platform, you’ll need the LambdaTest Username and Access Key in the LambdaTest grid URL. In this URL, replace user-name and access-key with your actual LambdaTest credentials.

https://user-name:access-key@hub.lambdatest.com/wd/hub

6. Desired capabilities are a set of key-value pairs that let you define the specific environment for test execution.

So, in this step, specify the browsers and operating systems you want to test against. You can also use LambdaTest Automation Capabilities Generator to simplify this process.

For instance, to test on Chrome with Windows 11, we will use the following configuration for Selenium 4:

options = ChromeOptions()
options.browser\_version = "latest"
options.platform\_name = "Windows 11"

7. Open your terminal, navigate to the directory containing your .side file, and run the following command, replacing the user-name and access-key with your actual values:

selenium-side-runner "your-test-file.side" --server
https://user-name:access-key@hub.lambdatest.com/wd/hub -c " options =
ChromeOptions() options.browser\_version = "latest" options.platform\_name = "Windows 11""

Ensure to replace your-test-file.side with the accurate file name of your Selenium IDE project.

With these steps, your Selenium IDE test is now running on the LambdaTest online Selenium Grid.

You can now check the test execution results directly from the LambdaTest Web Automation dashboard.

Best Practices to Use Selenium for Record and Playback

Record and playback is an easy way to automate tests without writing test scripts, but to make the most of this functionality, you’ll need to follow below best practices.

Avoid using XPath whenever possible. It tends to break when a webpage’s structure changes. Instead, choose more reliable options like IDs, class names, or data attributes.
Split your tests into smaller, reusable chunks. Instead of cramming multiple actions into a single test, create separate test cases for common tasks like logging in or form submissions.
Web applications aren’t always static, so use control flow commands like if, while, and times to handle changing conditions. This helps make your tests more adaptable.
Testing isn’t just about running actions — it’s about verifying results. Add assertions to check that the application behaves as expected at key points in your test.
Automated tests often fail because they move too fast. Adding wait commands ensures the script pauses until elements are ready, preventing unnecessary failures.
Recorded scripts aren’t perfect. Instead of relying on them as-is, take the time to refine them, adding logic to handle dynamic content and edge cases.

Conclusion

If you are just getting started with test automation, then there is nothing better than using Selenium IDE to record and playback tests. It lets you record and replay tests, which makes it ideal for accelerating repetitive tasks.

That said, the record and playback feature is not without its limitations. It is good for simple tests and relatively static websites but not ideal for complex workflows or dynamic elements that update often.

You’ve just learned the fundamentals; now let’s get into Selenium IDE and automate some web tests!

Happy testing!

CSS Grid Best Practices: Guide With Examples

Tahera Alam — Fri, 04 Oct 2024 09:03:35 +0000

CSS Grid is a layout system that allows you to create complex and responsive grid-based layouts with ease. It provides a two-dimensional grid-based layout system, making it particularly powerful for handling both rows and columns.

To ensure your layouts are both flexible and responsive, it’s essential to adhere to certain CSS Grid best practices. It enhances maintainability, making your code easier to understand and modify.

CSS Grid Best Practices

When working with CSS Grid, following best practices is key to creating responsive, maintainable layouts. Check out some of the CSS Grid best practices that you can incorporate into your web designs.

Use Flexible Units for Grid Track Sizes

Instead of specifying fixed pixel values for your grid track sizes, use flexible units like fr or minmax. This is one of the core CSS Grid best practices that will make your layout more responsive to different screen sizes.

When you specify grid track sizes using fixed pixel values, you’re essentially setting a rigid structure for your layout. As screen sizes vary, fixed pixel values can lead to distorted layouts, causing elements to overlap or stretch excessively.

To overcome these limitations, CSS Grid provides flexible units like fr and minmax, which enable your layouts to adapt gracefully to different screen sizes.

These units dynamically adjust their dimensions based on the available space, ensuring that your layout remains consistent and visually appealing across various devices.

For instance, in a scenario like the above, you could use minmax() to say that the cards should have a minimum width of 200px and maximum width of 1fr.

CSS Grid is a layout system that allows you to create complex and responsive grid-based layouts with ease. It provides a two-dimensional grid-based layout system, making it particularly powerful for handling both rows and columns.

To ensure your layouts are both flexible and responsive, it’s essential to adhere to certain CSS Grid best practices. It enhances maintainability, making your code easier to understand and modify.

CSS Grid Best Practices
When working with CSS Grid, following best practices is key to creating responsive, maintainable layouts. Check out some of the CSS Grid best practices that you can incorporate into your web designs.

Use Flexible Units for Grid Track Sizes
Instead of specifying fixed pixel values for your grid track sizes, use flexible units like fr or minmax. This is one of the core CSS Grid best practices that will make your layout more responsive to different screen sizes.

When you specify grid track sizes using fixed pixel values, you’re essentially setting a rigid structure for your layout. As screen sizes vary, fixed pixel values can lead to distorted layouts, causing elements to overlap or stretch excessively.

To overcome these limitations, CSS Grid provides flexible units like fr and minmax, which enable your layouts to adapt gracefully to different screen sizes.

These units dynamically adjust their dimensions based on the available space, ensuring that your layout remains consistent and visually appealing across various devices.

For instance, in a scenario like the above, you could use minmax() to say that the cards should have a minimum width of 200px and maximum width of 1fr.

.cards-container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 grid-gap: 1rem;
}

Here, the grid-template-columns property uses minmax(200px, 1fr) to specify that the cards should have a minimum width of 200px and a maximum width of 1fr.

As a result, on smaller screens, the cards will maintain a minimum width of 200px, while on larger screens, they can expand to fill the available space up to a maximum width of 1fr. This approach ensures a flexible and responsive card layout.

Use Appropriate Grid Structure

Another important aspect of CSS Grid best practices is to use appropriate grid structure. When working with CSS Grid, a fundamental decision revolves around choosing between an explicit and implicit grid for defining the layout of grid items within a grid container.

With an explicit grid, you have precise control over how you structure your content. However, with an implicit grid, you have less control as it adapts to content without specific column or row definitions. You can still have some degree of control, though, using properties like grid-auto-rows and grid-auto-columns.

Explicit Grid

Explicit grids offer precise control over layout structures and foster predictability in design. It is particularly beneficial for components with fixed items, such as navigation bars or pricing cards.

In the above example, we used an explicit grid layout to create a pricing card component that seamlessly adapts to different screen sizes and devices.

The combination of using auto-fit and minmax ensures that the layout adapts seamlessly to different screen sizes and devices. Since we know we want three pricing cards, we used grid-template-columns to define the same.

  .pricing-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
     justify-content: center;
     margin: 50px;
    }

Implicit Grid

Implicit grids automatically adjust based on your content, making them ideal for dynamic situations where the amount of content can vary.

In the below example, we have a product page that allows a user to add products dynamically by clicking the Add Product button. Each product has a name, an image, and a price.

Here, since our elements are being dynamically generated and the amount of content can vary, we used an implicit grid in combination with an explicit grid to define the layout.

First, we defined the columns explicitly using the grid-template-columns property:

Here, since our elements are being dynamically generated and the amount of content can vary, we used an implicit grid in combination with an explicit grid to define the layout.

First, we defined the columns explicitly using the grid-template-columns property:

.product-list {
 grid-template-columns: repeat(
   auto-fill,
   minmax(250px, 1fr)
 ); /* Explicit grid for columns */
}

This creates a flexible grid with columns that are at least 250px wide but can grow to occupy available space. The use of auto-fill and minmax(250px, 1fr) lets you create as many columns as can fit in the container, each at least *250px *wide but able to grow 1fr if there is extra space.

Next, we used an implicit grid to set the size of rows because our content may have varying heights:

    grid-auto-rows: minmax(
       300px,
       auto
     ); /* Implicit grid for rows with dynamic sizing */

This ensures that the implicit rows will have a minimum height of 300px, but if the content requires more space, they can grow dynamically based on the content’s height (auto).

So, we combined both explicit grid (for columns) and implicit grid (for rows with dynamic sizing) in the .product-list grid container. It allows us to have a structured column layout while providing flexibility in the row heights based on the content.

Select Positioning Methods

One of the CSS Grid best practices is to carefully select positioning methods that align with your layout’s requirements.

One question that arises when using grid layouts is whether to use grid-template-area*s or *grid-template-columns/rows for positioning the elements. The short answer to that is to use them based on the complexity and nature of your layout.

By complexity and nature of a layout, we mean that if you want your layout to be straightforward and easy to understand, especially when you have different sections with specific purposes, then it might be helpful to use grid-template-areas.

    .container {
     display: grid;
     grid-template-areas:
       "header header header"
       "nav main sidebar"
       "footer footer footer";
     min-height: 100vh;
    }

In the above example, we have a layout that has a header, a navbar, a main section, a sidebar, and a footer. To name the specific sections of the layout that the grid items will occupy, we used grid-template-areas.

In this case, it specifies three rows and three columns for the grid.

The first row is for the header and spans all three columns.
The second row has areas for a navbar, main content, and a sidebar.
The third row is for the footer and spans all three columns.

    .container {
     display: grid;
     grid-template-areas:
       "header header header"
       "nav main sidebar"
       "footer footer footer";
     min-height: 100vh;
    }

Now that we have named grid areas, it’s time to assign elements to these areas. To place content in grid areas, we use the grid-area property:

This instructs the content inside the ‘specific element’ to go into the area named ‘that element’ in the grid. For instance, in the case of header, it basically says that the content inside the HTML element with the <header> tag should go into the area named ‘header’ as defined in the grid template areas.

Now, if you’re more about having precise control and keeping things simple, especially when it comes to the size and position of each part, then the grid-template-columns or grid-template-rows property is the way to go.

    .container {
     display: grid;
     grid-template-columns: 1fr 2fr;
     align-items: center;
     padding: 0 60px;
     gap: 20px;
     min-height: 100vh;
    }

In the above example, we have an image on the right and some text on the left. To position it, we used grid-template-columns and defined two columns of 1fr and 2fr, which makes the first column take up 1 fraction of the available space and the second column take up 2.

Nest Grid As Needed

There’s a misconception that nesting grids is not good practice. However, it’s absolutely acceptable to nest grids. You can make any grid item a grid container and have grid items within it.

This approach enables the creation of subgrids, providing precise control over the layout within specific areas of the parent grid. It is helpful when dealing with complex structures or nested content that might be challenging to manage using a single-grid method.

    .outer-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     padding: 20px;
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     margin: 20px auto;
     max-width: 800px;
    }


    .inner-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
    }


    .item {
     border: 1px solid #ddd;
     padding: 20px;
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     text-align: center;
    }

In this example, we have a container div with the class outer-grid and several child divs. Inside the outer-grid, there is another div with the class inner-grid that contains two additional items.

The outer-grid represents the main grid container, and divides its content into three columns using the grid-template-columns. Inside the main outer-grid, we nest another grid called the inner-grid. This means we create a smaller grid within one of the columns of the main grid and divide its content into two columns.

This nesting allows for a more intricate layout where certain items are grouped and follow a different grid structure compared to the items in the parent grid.

Add Multiple Grids on One Page

This is something even I used to think of as a bad practice. However, contrary to popular belief, there is nothing wrong with having more than one grid on a page.

Traditionally, there has been a tendency to associate a single grid with an entire layout. However, using multiple grids on a page can enhance the overall structure and flexibility of the layout.

For example, you can use a grid for the main layout while using additional grids for smaller components like featured sections or sidebars. This not only simplifies the design process but also makes it easier to manage and update specific sections without affecting the entire layout.

Applying grids to smaller components allows for a modular approach. Each section can have its own layout structure, making it easier to manage and update independently.

The above example shows how you can have multiple grids on one page, each with its individual layout structure and purpose.

Moreover, you can also create 12-column CSS Grids. Want to know how? Refer to this blog on 12 Column CSS Grid.

Use Grid With Flexbox

Combining Grid with Flexbox is one of the recommended CSS grid best practices. CSS Grid is useful for creating flexible and responsive layouts, but it’s not always the best solution for every situation. In some cases, it may be more effective to combine grid layout with other layout mechanisms, such as flexbox or floats.

One common practice is to combine Grid with CSS Flexbox, such as in a card layout. CSS Grid sets up the primary structure of the layout, defining the overall grid and positioning of major elements. Flexbox is then used within each grid cell to manage the internal arrangement of items.

While CSS Grid is good for setting up rows and columns, Flexbox is useful for neatly arranging elements in a row or column, especially when they’re different sizes.

By employing both methodologies, you can use CSS Grid to provide the overall framework while relying on Flexbox to handle the finer details within each section of your layout. This combination allows you to offer a balance between high-level structure and granular control, resulting in a clean and efficient way to organize content.

In this example, we created a responsive card-based layout using CSS Grid and Flexbox.

The .grid-container class defines the grid layout, which starts as a single-column layout and switches to a two-column layout on screens wider than 500px *and a four-column layout on screens wider than *850px.

    .grid-container {
      width: 90%;
      max-width: 1240px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-gap: 20px;
    }

The .card class represents the individual card component. The .card element is a flex container, and it has a flex-direction: column property that specifies that the flex items should be arranged in a column.

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

The .card article class is also a flexbox container for the card’s textual content, arranging the content in a column with even spacing between its elements.

    .card article {
      display: flex;
      flex: 1;
      justify-content: space-between;
      flex-direction: column;
      padding: 20px;
    }

Confused about CSS Grid vs Flexbox? Discover which layout tool is right for your project. Read this full comparison of CSS Grid vs Flexbox now!

Test CSS Grids for Responsiveness

One of the crucial CSS Grid best practices is testing CSS Grids for responsiveness. This is to ensure your layout adapts seamlessly across various screen sizes and devices. Responsive grids help maintain a consistent user experience, regardless of the device being used. By testing, you can identify and fix issues like overlapping content or poor alignment early in the development process.

Tools like LT Browser provide a simple way to perform mobile website testing of CSS Grids on different viewports, helping you optimize your layout for a wide range of device viewports and ensure a smooth browsing experience for all users.

Download LT Browser now and start testing your grid responsiveness 👇

Conclusion

CSS Grid is extremely powerful when it comes to designing modern web layouts. It allows you to create two-dimensional layouts with rows and columns by providing a more flexible and efficient way to design layouts compared to traditional methods like floats or positioning.

By incorporating the CSS Grid best practices, you can leverage the full potential of CSS Grid and create flexible, responsive, and visually stunning modern web layouts.

You can also check out these CSS Grid layout generators and start building stunning layouts today.

Best 20 CSS Libraries for Developers and Designers [2024]

Tahera Alam — Fri, 16 Feb 2024 19:07:14 +0000

In software development, there’s a famous saying: Don’t reinvent the wheel. This means that it is often smarter to use existing solutions, such as frameworks and libraries, rather than starting from scratch.

When it comes to web development, CSS plays a pivotal role in shaping the visual aspects of the web. It defines how the content of a website should look. According to a report by W3Techs, CSS is used by 97.3% of all existing sites. But, despite its crucial role in web development, CSS is one of those technologies that gets a lot of criticism because of its tricky nature.

Writing and maintaining CSS can be complex and time-consuming, especially for dynamic and large-scale websites. Developers often get challenges such as repetitive styling, unorganized code, browser issues, responsiveness issues, long lines of code, unexpected errors, and design-breaking issues. These challenges can lead to increased development time and frustration.

CSS libraries can help developers and designers overcome these challenges by providing pre-written code and reusable components for common elements of websites. This can save time and effort, produce more organized and maintainable code, and help avoid common CSS pitfalls, making the development process faster and more efficient.

In this blog, we’ll explore the best 20 CSS libraries you can leverage today. These CSS libraries cover a wide range of use cases, from helping you create amazing web designs to ensuring a uniform user experience across browsers, from providing beautiful animations to ensuring your website renders seamlessly across devices — these CSS libraries cover it all. We’ll also explore libraries with specific use cases, such as helping you create sleek demo sites or beautiful retro UIs.

We will explore each of these CSS libraries, covering their features and use cases along with practical examples. So, let’s dive in.

A complete tutorial on retesting that sheds light on its features, importance, pros and cons, and how to perform it.

What are CSS Libraries?

CSS libraries are pre-written collections of CSS code and styles you can use to quickly and easily style your web projects. They are reusable components created by other developers to help solve common issues. It typically includes styles for common elements such as buttons, forms, and navigation bars. They may also have styles for more specialized elements, such as graphs, charts, animations, etc.

The term “library” is often used interchangeably with “framework”. While both aim to make development efficient by providing pre-built solutions for common tasks, they differ. Let’s take a look at them.

Libraries vs Frameworks

As freeCodeCamp defines it best,

Libraries are like going to Ikea: Imagine you have a house but need some furniture. You don’t want to build everything from scratch, so you go to Ikea. At Ikea, you can choose different furniture pieces like tables, chairs, and shelves. You’re in control of what you want to use, and you can arrange the furniture in your home however you like.

Frameworks are like building a model home: Suppose you want to build a brand new house. You have a set of plans or blueprints and must follow some specific rules and designs. You don’t get to decide everything. There’s a contractor in charge who follows those plans closely. They’ll tell you where you can make changes, but they mostly control how the house is built.

In a nutshell:

CSS libraries give you individual pieces to use as you want, like furniture from Ikea.
Frameworks provide a structured plan, and you work within that plan, like building a model home with a contractor in charge.

Using a library gives you more control over your application’s flow. You can choose which functions to use from the library, when, and where to use them. But, when using a framework, you must follow its conventions and predefined structure. The framework controls the main flow of execution and dictates how the code should be structured.

For instance, take jQuery and Ruby on Rails as examples. jQuery is a JavaScript library, while Ruby on Rails is an open-source full-stack framework. jQuery doesn’t care where you use it in your JavaScript code or how the codebase is organized in terms of files. But this isn’t the case with Ruby on Rails. You will have to follow Rails’ conventions and structure, which dictates how files, dependencies, functions, etc., should be organized.

The difference between a library and a framework is that a library is a collection of code you can use to add specific features to your website. In contrast, a framework is a collection of code that you can use to build your website from scratch. Frameworks provide a complete structure and control the flow of the program, unlike libraries.

Here is a table that summarizes the key differences between libraries and frameworks:

Discover 32 top test automation tools in 2023 for powerful and efficient testing solutions.

Advantages of Using CSS Libraries

CSS libraries offer an array of advantages over writing custom CSS. They provide a solid foundation for building visually appealing, responsive, and user-friendly websites while saving time, reducing errors, and promoting design consistency, ultimately reducing maintenance costs.

Here are some of its advantages:

Faster development: One of the primary benefits of using CSS libraries is that it significantly reduces the time to get up and running with a project. Instead of coding everything from scratch, you can use prebuilt components for different page elements. This significantly speeds up the development process.

For example, you can use a CSS library like Picnic instead of writing complex CSS code to create a responsive navigation menu. Picnic’s navbar component provides a fully responsive navigation bar with just a few lines of HTML and CSS classes. This saves you time and effort, letting you focus on more important things.

Consistency: CSS libraries often come with consistently designed elements and style guidelines. This ensures a cohesive look and feel across a website, which is crucial for branding and user experience.

For instance, you can use CSS libraries like Blaze UI to ensure that buttons look and behave the same throughout your website, enhancing the overall user experience.

Responsive design: CSS libraries often include responsive design features, making creating websites that adapt to different screen sizes and devices easier. This is essential for modern web development, where mobile devices generate more than 60% of global website traffic — *similarweb*.

For example, you can use a CSS library like Pure CSS with a responsive grid
system. Applying grid classes to your HTML elements allows you to create layouts that adapt to different screen sizes easily.

Try iOS emulator online by LambdaTest for free. It allows you to test your websites and webapps on latest to legacy devices, OS versions and browsers.

Below is a demonstration of a responsive layout using Pure CSS.

To test the responsiveness of the layout, we used LT Browser, a free and easy-to-use tool that lets you preview your website on various device viewports and screen sizes. This means you can see how your website will look and function on different devices before it goes live, ensuring a great user experience for everyone.

LT Browser comes with 50+ pre-installed device viewports with different screen resolutions, so you can easily test your designs in different screen sizes. You can also create custom viewports to test specific devices or screen sizes.

To use the LT Browser, you can check out the tutorial below.

Performance optimization: At a time when one in four visitors would leave a website if it takes more than four seconds to load, optimizing the performance of websites has become more important than ever. –Source > Selenium WebdriverIO is Javascript based test automation framework built over nodeJs. Learn with this guide how to use webdriverIO to perform web automation testing.

Many CSS libraries are designed with performance in mind. They use techniques like minification and efficient CSS code to ensure that web pages load quickly. This reduces the file size and enhances the website’s loading speed, leading to a better user experience and improved SEO rankings.

For example, here are the file sizes of a few popular CSS libraries, minified and gzipped:

Improved accessibility: Another significant advantage of utilizing CSS libraries is their focus on accessibility. Many CSS libraries prioritize accessibility, ensuring that their styles and components comply with accessibility standards such as WCAG (Web Content Accessibility Guidelines).

These CSS libraries often incorporate best practices such as using semantic HTML, maintaining proper color contrast, and using descriptive labels for form fields. These practices are essential for creating web content that is accessible to all users, including those with disabilities. So, by using these CSS libraries, you can ensure that your website is more inclusive and usable by a wider audience.

Cross Browser Compatibility

Cross browser compatibility is a significant advantage of using CSS libraries. These libraries are typically tested, providing CSS code that works consistently across web browsers. This eliminates the need to debug and fix browser-specific issues, which can be time-consuming and frustrating.

For instance, consider the CSS library Normalize.css. It’s designed to reset and normalize the default styles of various HTML elements, ensuring a consistent starting point for your web design. Using Normalize.css helps ensure that default styles are consistent across different web browsers and operating systems.
For example, below is a demo showcasing the implementation of Normalize.css.

Discover 32 best automation testing tools in 2023 for powerful and efficient testing solutions.

The Top 20 CSS Libraries

CSS libraries are the secret sauce behind some of the most captivating and user-friendly websites on the Internet. But, choosing ideal CSS libraries for your application can be challenging. There are many factors to consider, such as ease of use, responsiveness, popularity, and accessibility.

Here is a list of the best CSS libraries widely known for these qualities:

Animate.css

Animations make a website feel alive. In a world with short attention spans, animations can draw users’ attention, highlight important information, guide users visually through a process, or simply make their experience more engaging.

For example, you can use a slide-in animation like below to make content pop up nicely as a user scrolls through a page. This helps keep the user engaged and enhances their experience.

**Output:

Selenium is an open-source suite of tools and libraries to automate web browsers. Delve into its architecture, benefits, and more through our detailed Selenium guide.

However, creating animations like this can be time-consuming and complex. That’s where Animate.css comes in. It makes the process of adding animations simpler than ever before.

Animate.css provides a collection of pre-made CSS animations that can be easily integrated into a project. It allows you to add animations by simply adding CSS classes to HTML elements, making it easy to incorporate eye-catching animations without having to write extensive CSS code from scratch.

It is among the most popular CSS libraries, with over 79k+ Stars on GitHub and a staggering 360k+ weekly downloads on npm trends.

According to W3Techs, Animate.css is used in about 39.5% of all websites with a known CSS framework. That’s a big deal because it means nearly 10% of all the existing websites use Animate.css for their animations. Let’s now look at an example of using Animate.css.

HTML:

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />


    <div class="container">
      <h1 class="animate__animated animate__bounce">LambdaTest</h1>
      <p>
        Discover the next-generation mobile apps and cross-browser testing
        cloud.
      </p>
      <button class="replay-button" onclick="replayAnimation()">
        Replay Animation
      </button>

CSS:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #eef5ff;
  font-family: Work Sans, sans-serif;
}


.container {
  text-align: center;
}


h1 {
  font-size: 72px;
  margin: 0;
  color: #191919;
}


p {
  font-size: 1.1rem;
  color: #666666;
}


.replay-button {
  background-color: #0ebac5;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  margin-top: 20px;
  border-radius: 5px;
  cursor: pointer;
}


.replay-button:hover {
  background-color: #0c9ea7; /* Darker blue on hover */
}

Output:

Test your native app and website on real iOS and Android devices hosted on the cloud. LambdaTest is a convenient, cost-effective and centralised solution for running realtime and Automated test on real devices cloud.

In the example above, we used the bounce animation from Animate.css to add a bouncing effect to the < h1 > element.

To do it, we first included Animate.css in our project by linking its CDN in the HTML document:

<link rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />

Next, we applied the animation by adding the animate__bounce class to the < h1 > element, with the animate__animated prefix. That’s it. This will give our < h1 > element a smooth, bouncing animation.

By default, animations will trigger when the page loads and the element becomes visible in the viewport. However, you can control when animations occur using JavaScript or dynamically adding additional classes.

For example, we used JavaScript to trigger the animation when the *replay *button is clicked:

<button class="replay-button" onclick="replayAnimation()">
        Replay Animation
 </button>

function replayAnimation() {
  const header = document.querySelector("h1");
  header.classList.remove("animate__animated", "animate__bounce");
  void header.offsetWidth; // Trigger reflow to restart the animation
  header.classList.add("animate__animated", "animate__bounce");
}

Animate.css is a great choice for adding animations to web projects, especially when you need quick and simple animations without having to code them from scratch. However, using CSS animations judiciously is important, as excessive use can clutter and distract users.

Advantages of Animate.css:

Ease to use: Animate.css is incredibly easy to use. You simply include the library, apply the appropriate class to an HTML element, and the animation is ready to go. This makes it accessible to both beginners and experienced developers.
Cross-browser compatible: It is cross-browser compatible, so you can be sure your animations function perfectly on all latest and legacy browsers.
Lightweight: Animate.css is very lightweight, so that it won’t add a lot of bloat to your website.
Customizable: You can customize the animations by changing the duration, delay, and easing.

Limitations of Animate.css:

Lack of specific import options: There is no way to import only the necessary animation classes. To use just a few animations across your app, you would need to install the entire collection. > Experience real-time Android device test online with our platform. Ensure compatibility and performance on real devices instantly. Start testing now!

CSS Wand

CSS Wand is another versatile CSS library that offers an array of stunning animations you can easily incorporate into your project. It is a simple and intuitive tool that anyone can use, even if they don’t have any prior experience with CSS.

The best thing about CSS Wand is that it provides the CSS code for all the effects, which you can simply copy and paste into a project. You don’t need to install or write specific classes to apply those animations. All it takes is just the code provided by CSS Wand.

As you can see below, clicking on the grow animation presents ready-made code to add to your project easily.

CSS Wand provides a wide variety of animation effects, including

Hover animations
Loading animations
Growing and shrinking animations
Opacity animations
Rotation animations
Shape animations
Shadow animations
Swing animations
Ripple animations
Press-down animations

Perform manual or automated cross browser device testing on 3000+ browsers online. Deploy and scale faster with the most powerful cross browser testing tool online.

Below is an example of using the *Grow *animation from CSS Wand that we incorporated into a card:

HTML:

<div class="card">
      <div class="card-content">
        <h2 class="card-title">Cross-Browser Testing Made Easy</h2>
        <p class="card-description">
          LambdaTest is a cloud-based cross-browser testing platform that helps
          you ensure your website or web application looks and functions
          correctly across multiple browsers and devices.
        </p>
      </div>
      <div class="card-footer">
        Learn more at
        <a href="https://www.lambdatest.com/" target="_blank">LambdaTest</a>
      </div>
    </div>

CSS:

body {
  font-family: Arial, sans-serif;
}
/* Style for the card container */
.card {
  width: 300px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 30px auto;
  padding: 20px;
  background-color: #ffffff;
  text-align: center;
  transition: all 0.2s ease-in-out; /* copied from CSS Wand*/
}


.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: scale(1.1); /* copied from CSS Wand*/
}


/* Style for the card title */
.card-title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}


/* Style for the card description */
.card-description {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}


/* Style for the card footer */
.card-footer {
  margin-top: 20px;
  text-align: center;
}


/* Style for the link in the card footer */
.card-footer a {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}


.card-footer a:hover {
  color: #0056b3;
}

Output:

In this example, we used the “Grow” animation from CSS Wand. The animation is applied to the .card class, which is used to style the card container. The animation makes the card grow in size when the user hovers over it.

The important part of the CSS code is the transition*: all 0.2s ease-in-out;* and transform: scale(1.1); rules. The transition rule specifies that the animation will take 0.2 seconds to complete and use the ease-in-out timing function. While the transform rule specifies that the card will scale by 1.1 when the user hovers over it.

In this guide to device compatibility testing, learn how to build compatible software applications for different platforms and environments.

Now that we have considered an example let’s move on to the advantages and limitations of CSS Wand.

Advantages of CSS Wand:

Customizable: CSS Wand is highly customizable. You can customize the animations to your liking by adjusting the properties of the CSS code. This makes it easy to create animations that are unique and eye-catching.
Easy to use: It is very easy to incorporate. Simply hover your mouse over the elements to see the effect and click on the one you like. CSS Wand will then generate the CSS code for that animation.

Limitations of CSS Wand:

Limited number of animations: CSS Wand is very limited in its animations, as it only provides styles for hover states and spinners.

Destyle.css

Different browsers have different default styles for HTML elements, which can lead to inconsistencies in how web pages are displayed across browsers. This can make achieving a consistent look and feel for a website challenging.

That’s exactly where Destyle.css comes into play. It’s a lightweight CSS reset library that removes the default styles for HTML elements. This allows you to start from a clean slate and apply your custom styles to all browsers.

Destyle.css removes all of the default styles added by browsers, such as margins, padding, and font sizes, so you can be sure that your styles will look the same in all browsers. Destyle.css is a popular reset library choice with over 30k+ monthly downloads on Yarn and 9k+ weekly downloads on npm trends. It is also maintained, with 540+ Forks and 752+ Stars on GitHub, and regularly updated to support new browsers and features.

Let’s look at an example to understand how an HTML page would look like when using Destyle.css:

HTML:

 <link href="
https://cdn.jsdelivr.net/npm/destyle.css@4.0.0/destyle.min.css
" rel="stylesheet">
<h1>This is a Heading</h1>
    <p>This is a paragraph of text.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
  <a href="#">This is a link</a>

Output:

In the example above, we have some HTML elements that represent a heading, a paragraph, an unordered list, and a link.

Without Destyle.css, these elements would have default styles applied to them, such as margins, padding, and font sizes. However, because we have Destyle.css imported using the CDN, these elements will have no default styles applied to them.

This means that the heading will have no margin or padding, the paragraph will have the default font size and color, the unordered list will have no bullets, and the link will have no underline.

Advantages of Destyle.css:

Ensures consistency: Destyle.css helps ensure browser consistency. You simply add a link to the Destyle.css file in your HTML, and it will automatically remove the default styles for all HTML elements. This ensures that your web page will look consistent across all browsers.
Saves time and effort: Destyle.css eliminates the need to remove the default styles for each browser manually. This can save you time and effort, especially if you are working on a large-scale website.
Small in size: It is made for modern browsers only, which means that it is small in size (~0.95KB). This makes it a lightweight CSS file that can be easily integrated into any website using a CDN or importing.

Shortcomings of Destyle.css:

Can be too restrictive: Destyle.css removes all of the default styles for HTML elements, which can be too restrictive for some websites. If you need to retain some of the default styles, you will need to manually add them back in.
Not as customizable as other CSS reset files: Other CSS reset files offer more customization options than Destyle.css.
Can break some websites: Destyle.css can break some websites relying on the default HTML elements styles. If you are unsure whether Destyle.css is compatible with your website, it is best to test it on a staging environment first.

Test your native app and website on real iOS and Android devices cloud. LambdaTest is a convenient, cost-effective and centralised solution for running realtime and Automated test on real device cloud.

Picnic CSS

Picnic CSS is one of the most popular recent libraries out there, with popular websites like Dribble, CodePen, and Product Hunt using it. Picnic CSS is a lightweight CSS library that is perfect for creating modern and responsive websites. It provides a set of neatly styled components ranging from buttons to cards, forms to tables, modals to navigation bars that you can easily incorporate into your project.

It is built on top of Normalize.css, providing a solid foundation for your HTML5 markup. It is a great choice when you want to create professional and performant websites without having to write a lot of CSS code. It is also an ideal choice when you want to start a project quickly and easily, letting a library handle the UI components.

Despite being released just two years ago, Picnic CSS has rapidly gained popularity. It has over 3.7k Stars on GitHub and receives over 600 weekly downloads via npm trends.

*Source*

Let’s now look at an example of using Picnic CSS to create an image tab.

HTML:

<link
      href="
https://cdn.jsdelivr.net/npm/picnic@7.1.0/picnic.min.css
"
      rel="stylesheet"
    />
    <div class="tabs four">
      <input id="tabC-1" type="radio" name="tabGroupC" checked />
      <input id="tabC-2" type="radio" name="tabGroupC" />
      <input id="tabC-3" type="radio" name="tabGroupC" />
      <input id="tabC-4" type="radio" name="tabGroupC" />
      <div class="row">
        <div>
          <img
            src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60"
          />
        </div>
        <div>
          <img
            src="https://images.unsplash.com/photo-1509773896068-7fd415d91e2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGxha2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60"
          />
        </div>
        <div>
          <img
            src="https://plus.unsplash.com/premium_photo-1661884752233-eac0b5efe655?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fGFpciUyMGJhbG9vbnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60"
          />
        </div>
        <div>
          <img
            src="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHN1bnNldHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60"
          />
        </div>
      </div>
      <label for="tabC-1"
        ><img
          src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60"
      /></label>
      <label for="tabC-2"
        ><img
          src="https://images.unsplash.com/photo-1509773896068-7fd415d91e2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fGxha2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60"
      /></label>
      <label for="tabC-3"
        ><img
          src="https://plus.unsplash.com/premium_photo-1661884752233-eac0b5efe655?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fGFpciUyMGJhbG9vbnN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60"
      /></label>
      <label for="tabC-4"
        ><img
          src="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHN1bnNldHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=600&q=60"
      /></label>
    </div>

Output:

In the example, we created a simple and mobile-friendly image tab component. When you click on one of the tab images, it will seamlessly switch the main image to the corresponding tab, regardless of the screen size.

This component is implemented using a div *element with the class tabs *four, which tells Picnic CSS to create a tab component with four tabs.

<div class="tabs four">
      <input id="tabC-1" type="radio" name="tabGroupC" checked />
      <input id="tabC-2" type="radio" name="tabGroupC" />
      <input id="tabC-3" type="radio" name="tabGroupC" />
      <input id="tabC-4" type="radio" name="tabGroupC" />

Inside the tabs element, there are four input elements with the type radio *and the name *tabGroupC. These input elements represent the different tabs in the tab component.

Next, there is a *div *element with the class row. This class tells Picnic CSS to create a row of tabs. Inside the row element, there are four div elements, each containing an image. The images represent the content of each tab.

<div class="row">
        <div>
          <img
            src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60"
          />
        </div>..

Finally, there are four *label *elements, each with the *for *attribute set to one of the input elements. These labels represent the tab labels.

<label for="tabC-1"
        ><img
          src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Zm9yZXN0fGVufDB8fDB8fHww&auto=format&fit=crop&w=600&q=60"
      /></label>..

Advantages of Picnic CSS:

Lightweight and mobile-friendly: Picnic CSS is lightweight and mobile-friendly, with a compressed size of only 10kb for a better and faster mobile load. This makes it a great choice for building mobile-first websites.
Responsive: It is responsive, so your website will look great on all devices, from desktops to mobile phones. This is important for ensuring that your website is accessible to everyone.
Documented: Picnic CSS has comprehensive documentation that makes it easy to learn and use. The documentation includes tutorials, examples, and references, making it easy to find the information you need to start with Picnic CSS.

Limitations of Picnic CSS:

Limited features: Picnic CSS is a lightweight library, so it does not have all of the features of a full-featured CSS framework. As you may have already noticed, this library is similar to Bootstrap except that it is less versatile and less flexible.
Not as widely used as other frameworks: Picnic CSS is a relatively new library, so it is not as widely used as other frameworks.

This tutorial focuses on Playwright visual test, providing a reliable way to test web applications and ensure that they look and behave correctly across different browsers and platforms.

Balloon.css

*Balloon.css is a toolt*ip library that lets you add tooltips to elements without writing any JavaScript code.

Tooltips are important because they provide additional information about a UI element by explaining its function or purpose. They are a lightweight way to communicate information about a button, icon, or other element without adding a lot of text to the page.

Balloon.css makes the creation of tooltips simpler than ever before. With Balloon.css, you just need to add an attribute to your preferred tooltip element, and it’s done. You can easily customize the tooltip’s position with properties like up, down, left, right, up-left, up-right, etc. You can also customize its color, length, font size, etc. Balloon.css is open-source and is one of the most popular tooltip libraries with over 5k+ Stars on GitHub and a staggering 30k+ weekly downloads on npm trends. It is also maintained, with 460+ Forks on GitHub.

*Source*

Let’s look at an example of using Balloon.css:

HTML:

<link
      rel="stylesheet"
      href="https://unpkg.com/balloon-css/balloon.min.css"
    />
    <div class="container">
      <button aria-label="Whats up!" data-balloon-pos="up" class="button">
        Hover me!
      </button>
    </div>

CSS:

/* Style the button */
button {
  padding: 10px 45px;
  background-color: #b71212;
  color: #ffffff;
  border: none;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}
/* Center the button */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Convert Octal numbers to binary format with ease using our free online Octal to Binary Converter tool. Perfect for developers, engineers, and students. Give it a try!

Output:

Advantages of Balloon.css:

Lightweight: Balloon.css is a lightweight library, weighing only about 1.1KB when minified, which helps keep your load times fast.
Documentation: Balloon.css is documented with a detailed explanation of how to use the library. This makes it easy to start with Balloon.css, even if you are unfamiliar with CSS.
Pure CSS, so no JavaScript dependencies: It is a pure CSS library, meaning it does not require any JavaScript. This makes it a good choice for websites that want to avoid using JavaScript.
Highly customizable: Balloon.css is highly customizable, with various options available to change the appearance of the tooltips. This includes the ability to change the color, font size, position of the tooltips, etc.
Programmatic control: It allows you to programmatically show tooltips even when user interaction isn’t happening, providing flexibility in tooltip display.

Limitations of Balloon.css:

Limited compatibility with self-closing elements: Balloon.css relies on pseudo-elements to render tooltips. However, self-closing elements such as < img >, < input >, and < hr > do not support pseudo-elements. This means you can not use Balloon.css if you want tooltips for these elements.
Potential conflicts with existing pseudo-elements: If an element already uses pseudo-elements for other purposes, integrating Balloon.css tooltips may lead to conflicts. This is because Balloon.css also uses pseudo-elements. In such cases, careful consideration and testing are required to ensure proper functionality.
Limited complexity: Balloon.css is designed for simple tooltips and may not be suitable for more complex tooltip requirements, such as tooltips with interactive content.

Water.css

If you’re building a simple static web page or a quick demo site and don’t want to style it manually, you might want to consider using Water.css.

Water.css is a lightweight and minimalistic CSS framework designed to enhance the styling of simple websites without requiring you to write additional CSS classes. It’s an ideal choice when you don’t want to spend time styling a page but also don’t want the ugliness of default styles.

The best thing about Water.css is that it doesn’t require any classes. You just include it in your HTML < *head *>, and it silently makes everything nicer.

Water.css is a very popular choice for making simple websites, and it has almost 8k stars on GitHub. Let’s take a look at an example of using Water.css to create a page:

HTML:

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css"
    />
  </head>
  <body>
    <header>
      <h1>Testing Made Easy with LambdaTest</h1>
      <p>Your Solution for Cross-Browser Testing</p>
    </header>


    <div class="main-content">
      <h2>Introduction to LambdaTest</h2>
      <p>
        LambdaTest is a cloud-based testing platform that makes it easy for
        developers and testers to ensure their web applications work seamlessly
        across various browsers and operating systems.
      </p>
      <img
        src="https://www.lambdatest.com/resources/images/main/home_banner.webp"
        alt="lambdatest-home-banner"
      />
      <h2>Key Features</h2>
      <ul>
        <li>Real-time testing on 2000+ browsers and devices.</li>
        <li>Automated testing with Selenium and other frameworks.</li>
        <li>Integrated debugging tools for quick issue resolution.</li>
        <li>Collaboration features for cross-functional teams.</li>
        <li>Test your locally hosted web pages.</li>
      </ul>


      <h2>Try LambdaTest Today!</h2>
      <p>
        Ready to streamline your testing process? Click the button below to sign
        up for a LambdaTest account and start testing your web applications
        effortlessly.
      </p>
      <a href="https://www.lambdatest.com/" class="btn" target="_blank"
        >Get Started with LambdaTest</a
      >
    </div>
  </body>

Don’t waste time decoding binary data manually. Try our Binary to Text Converter tool to convert binary data to text. No more tedious manual conversion needed!

Output:

In the example above, we just included Water.css CDN in < *head *> and boom! All the styles become incredibly neat and nicer without writing a single line of CSS! Isn’t it incredible?

To surprise you even more, Water.css is fully responsive, so you get a responsive page that works seamlessly on all devices without writing any media queries.

To help you visualize better, below are two screenshots of the above demo with and without using Water.css.

With Water.css

Without Water.css

Advantages of Water.css:

Easy to use: Water.css is easy to use, even for beginners. You don’t need to incorporate any classes or dependencies for using water.css. You just stick one of these in HTML , and you are done.

Lightweight: Water.css is only 2 KB in size, which means it will not slow down your website.
Responsive: Water.css comes with out-of-the-box responsiveness, so your pages look great on any device.
Dark mode support: Water.css supports dark mode so that you can choose the preferred mode.

Limitations of Water.css:

Not ideal for complex websites: Water.css can only be used for simple/static websites. Unfortunately, building complex, interactive websites is not possible with this library. > Looking for a way to convert CSV to XML? Use our CSV to XML converter tool to convert CSV files to XML format effortlessly. Get fast and accurate results with just a few clicks.

Hover.css

Hover effects are a great way to enhance user experience and add interactivity to a website.

When a user hovers their mouse over an element, having a subtle effect can provide immediate visual feedback, indicating that the element is interactive. This feedback helps users understand that they can click, tap, or interact with that element, which is crucial for user interface design.

However, creating neat hover effects for various elements can be time-consuming. That’s where Hover.css comes into play. Hover.css is a collection of pre-designed animations and transitions that you can easily apply to elements like links, buttons, logos, SVGs, images, and more.

With Hover.css, you can effortlessly make buttons grow when hovered over, images zoom in, backgrounds change color from left to right, navigation menus dynamic with a bounce, form inputs respond to user actions with a subtle pulse, and even add flair to social media icons.

When it comes to incorporating Hover.css in your project, you have more than one option of adding it. You can either copy and paste a specific effect’s CSS code into your stylesheet or reference the entire Hover.css stylesheet.

When to opt for which?

Copy and Paste an Effect: If you only plan to use a few effects, it’s a good practice to copy and paste the effect into your own stylesheet, reducing the need for users to download the entire Hover.css file.

For example, let’s say you want to use the “Grow” effect:

Download Hover.css.
In css/hover.css, find the Grow CSS code, which is clearly marked with a comment.

Copy the effect and paste it into your own stylesheet.
In your HTML file where you want the effect to appear, add the class “.hvr-grow” to the chosen element:

Submit

**Reference Hover.css: **If you plan to use many Hover.css effects, it is ideal to reference the entire Hover.css stylesheet.

Download hover-min.css.
Add hover-min.css to your website’s files, typically in a directory named css.
Link the hover-min.css in the < head > section of the HTML page where you want to apply the Hover.css effects.
Assuming you want to use the Grow *effect in the HTML file, add the class of *.hvr-grow to your chosen element.

Hover.css is among the most popular CSS libraries, with over 28.9k+ Stars on GitHub and almost 4,000 weekly downloads through npm trends.

Let’s now look at an example of using Hover.css in a navigation menu:

HTML:

<nav class="navbar">
      <div class="navbar-logo">
        <img
          src="https://www.lambdatest.com/resources/images/logos/logo.svg"
          alt="lambdatest"
        />
      </div>
      <ul class="navbar-items">
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/feature"
            class="navbar-link"
            target="_blank"
            >Platform</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/enterprise"
            class="navbar-link"
            target="_blank"
            >Enterprise</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/blog"
            class="navbar-link"
            target="_blank"
            >Resources</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/support/docs/getting-started-with-lambdatest-automation/"
            class="navbar-link"
            target="_blank"
            >Developers</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://billing.lambdatest.com/billing/plans"
            class="navbar-link"
            target="_blank"
            >Pricing</a
          >
        </li>
      </ul>
      <ul class="navbar-items">
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://accounts.lambdatest.com/dashboard"
            class="navbar-link"
            target="_blank"
            >Dashboard</a
          >
        </li>
        <li class="navbar-item">
          <a 
            href="https://billing.lambdatest.com/billing/plans"
            class="navbar-button"
            target="_blank"
            id="upgrade"
            >Upgrade</a
          >
        </li>
        <li class="navbar-item">
          <a 
            href="https://www.lambdatest.com/demo"
            target="_blank"
            class="navbar-button"
            id="bookDemo"
            >Book a Demo</a
          >
        </li>
      </ul>
    </nav>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* Navbar styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-family: Arial, sans-serif;
  color: #333333;
  background-color: #eef5ff;
}


.navbar-logo {
  margin-right: 20px;
}
img {
  height: 35px;
}


.navbar-items {
  display: flex;
  align-items: center;
}


.navbar-item {
  margin-right: 20px;
}


.navbar-item:last-child {
  margin-right: 0;
}


.navbar-link {
  text-decoration: none;
  color: inherit;
  padding: 0 5px;
}


.navbar-button {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
  padding: 12px 16px;
  border-radius: 5px;
}
#bookDemo {
  background-color: linear-gradient(91.88deg, #2c57f3 0.88%, #a506d8 98.71%);
  background-image: linear-gradient(
    91.88deg,
    rgb(44, 87, 243) 0.88%,
    rgb(165, 6, 216) 98.71%
  );
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  color: #fff;
}
#upgrade {
  border: 1.5px solid #2c57f3;
  padding: 10px 16px;
}
/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  position: relative;
  padding-bottom: 7px;
}


.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #333333;
  height: 3px;
  width: 0;
  transition: width 0.3s ease-out;
}
.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
  width: 100%;
}

Make the conversion from YAML to JSON quick and easy with our free online converter YAML to JSON converter tool. No signup or installation required. Try it now!

Output:

In the example above, we have a navbar with a few links inside it. On hovering over each link element, we want to show an underline that transitions from the center. So, we utilized the underline from the center effect from Hover.css.

However, in the original effect, there’s no space between the element and the underline, so we customized the effect to fit our needs where we have some space between the element and the underline. This ability to customize styles makes Hover.css an excellent choice for adding unique effects that apply to our own project requirements.

Advantages of Hover.css:

Easy to use: Hover.css is a self-contained library, so you can easily copy and paste the effects you want to use in your own stylesheet.
Wide browser support: Hover.css supports a wide range of browsers, including Chrome, Firefox, Safari, Edge, and Opera.
Customizable: You can customize the hover effects to fit your needs.

Limitations of Hover.css:

Not all effects are supported in older browsers: Some of the hover effects in Hover.css rely on CSS3 features that are not supported in older browsers.
Performance issue: While Hover.css simplifies adding animations, too many hover effects on a single page can increase the page’s load time. It can also make your website look cluttered and distracting.

Simplify the process of converting JSON to HTML with our efficient online JSON to HTML converter to convert your JSON data to HTML code quickly and easily.

pattern.css

pattern.css is a collection of stunningly beautiful patterns that you can easily incorporate into your projects. You can apply those patterns as hero backgrounds, text fills, separators, and more.

It provides various patterns, including horizontal and vertical lines, checks, zigzags, dots, cross dots, grids, diagonal patterns, horizontal stripes, vertical stripes, etc. It is also highly customizable and allows you to change the size of each pattern with Bootstrap-like classes such as sm, md, lg, xl, etc.

Note that pattern.css is built with two colors only — transparent and currentColor. currentColor is the current active text color inside an element. To change the color, just change the text color property. To change the other color, just change the background color, and the background color will be visible through a transparent color

pattern.css is open source, with over 3.8k Stars and 100+ Forks on GitHub. It also has 900+ weekly downloads, according to npm trends.

Let’s consider an example of using pattern.css to create a hero page:

HTML:

<link href="https://unpkg.com/pattern.css" rel="stylesheet" />
    <div class="container pattern-vertical-lines-md">
      <h1 class="">
        Next-Generation Mobile Apps and <br />
        Cross Browser <span>Testing Cloud</span>
      </h1>
      <p>
        Deliver unparalleled digital experience with our next-gen AI-powered
        testing cloud platform. Ensure exceptional user experience across all
        devices and browsers.
      </p>
      <button>
        <a href="https://www.lambdatest.com/" target="_blank">Try now</a>
      </button>
    </div>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Roboto, sans-serif;
}
.container {
  color: #fde482;
  background-color: #facb0e;
  padding: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h1 {
  font-size: 3rem;
  color: #000;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.4;
}


span {
  background: linear-gradient(180deg, rgba(250, 255, 255, 0) 50%, #00b4d8 50%);
}
p {
  color: #333;
  width: 60%;
  text-align: center;
  line-height: 1.4;
  font-size: 1.1rem;
  margin-bottom: 25px;
}


button {
  padding: 15px;
  width: 200px;
  font-size: 1rem;
  background-color: #111111;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: capitalize;
}
a {
  text-decoration: none;
  color: inherit;
}

Want to convert ASCII to hexadecimal? With our ASCII to hex converter to convert text to its hexadecimal equivalent. Get started today and streamline your workflow!

Output:

In the example above, we utilized pattern.css to add vertical lines pattern background to our hero page. To begin with, we first imported the pattern.css library using a CDN within the HTML document.

<link href="https://unpkg.com/pattern.css" rel="stylesheet" />
<div class="container pattern-vertical-lines-md">

The main HTML content is enclosed in the < div > element with the class .container. To generate a background with vertical lines, we use the pattern.css pattern-vertical-lines-md class on the container element. This class applies a vertical line pattern to the element with a medium size.

To define the color of the pattern, we set color and background-color properties to the container element.

.container {
color: #fde482;
background-color: #facb0e;

As we mentioned earlier, you can also use patterns to fill texts, to make separators, or to create a subtle border effect around images. Here’s an example of a border around the image:

Advantages of pattern.css:

Easy to use: It is easy to use, even if you have no prior knowledge of CSS. Simply include the pttern.css stylesheet in your HTML document and add pattern.css classes to your HTML elements to apply the desired patterns.
Compatible with frameworks like Bootstrap: It can be used alongside CSS frameworks, such as Bootstrap. This allows the mixing and matching of different CSS components to create unique and custom designs.
Dynamic patterns: pattern.css patterns are not static PNG files but CSS code. This means you can customize the patterns to match your preferences, such as color, size, and opacity.

Limitations of pattern.css:

Limited compatibility with other CSS frameworks: pattern.css does not support or with other popular CSS frameworks, such as Tailwind CSS. This can be a limitation for users who want to use pattern.css in conjunction with other CSS frameworks. > Make your data tamper-proof with our Whirlpool Hash Calculator. Create secure hashes quickly and easily with just a few clicks. Try it out now!

Fluiditype

In today’s digital landscape, the significance of responsive web design cannot be emphasized. It plays a pivotal role in ensuring that websites adjust seamlessly to an array of screen sizes and devices.

A key aspect of this responsive design is typography in CSS. You want to make sure that the text on your website is always readable, regardless of the screen size. This is especially important for text-based websites like blogs, documentation, and eCommerce websites.

Traditional CSS methods for setting font size using fixed values, such as with pixels, can make it challenging to achieve responsive typography. This is because the same font size may be too large or too small on different devices and screen sizes.

That’s where Fluiditype comes in. It is a small CSS library that helps you create fluid typography. Fluid typography is a design approach that allows the size of your text to adapt based on the viewport’s width. This means that your text will always be readable, regardless of the device or screen size on which your users view your website.

Fluiditype works by using the vw unit, which stands for viewport width. The vw unit is a relative unit, meaning that when you set the font size of an element to 1*vw*, it will be equal to 1% of the viewport width.

An important thing to note is that Fluiditype works only on elements that are directly linked to the typography on your page. For example, elements like headings (h1 — h6), paragraphs, text styles (blockquotes, bold, underline), lists (ordered and unordered), code snippets, links, and hyperlinks will be affected by Fluiditype.

Below is an example of using Fluiditype:

Hamburgers

Hamburger menus are a popular way to display navigation links on mobile devices and smaller screens. They are also becoming increasingly popular on desktop websites, as they can be used to create a more compact and minimalistic navigation bar.

However, creating hamburger menus with beautiful, subtle animations can be time-consuming. That’s where Hamburgers library comes in.

Hamburgers provide a collection of animated hamburgers that you can use to create a beautiful and responsive hamburger menu for your website. The subtle animation of the hamburger can significantly enhance the user experience of your website.

Additionally, Hamburgers is modular and customizable, so you can easily change the appearance of your hamburger menu to match your website’s design.

Hamburgers are popular for creating animated hamburgers with over 16k+ weekly downloads on npm trends and almost 8k Stars on GitHub.

Need to create MD5 hashes quickly? Our MD5 hash calculator create reliable, one-way hashes quickly and keep your information secure. Try it out now!

Let’s look at an example of using Hamburgers.

HTML:

<nav class="navbar">
      <button class="hamburger hamburger--squeeze" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"> </span>
        </span>
      </button>
      <div class="navbar-logo">
        <img
          src="https://www.lambdatest.com/resources/images/logos/logo.svg"
          alt="lambdatest"
        />
      </div>
      <ul class="navbar-items">
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/feature"
            class="navbar-link"
            target="_blank"
            >Platform</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/enterprise"
            class="navbar-link"
            target="_blank"
            >Enterprise</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/blog"
            class="navbar-link"
            target="_blank"
            >Resources</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://www.lambdatest.com/support/docs/getting-started-with-lambdatest-automation/"
            class="navbar-link"
            target="_blank"
            >Developers</a
          >
        </li>
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://billing.lambdatest.com/billing/plans"
            class="navbar-link"
            target="_blank"
            >Pricing</a
          >
        </li>
      </ul>
      <ul class="navbar-items" id="second-list">
        <li class="navbar-item hvr-underline-from-center">
          <a 
            href="https://accounts.lambdatest.com/dashboard"
            class="navbar-link"
            target="_blank"
            >Dashboard</a
          >
        </li>
        <li class="navbar-item btn" id="upgrade">
          <a href="https://billing.lambdatest.com/billing/plans" target="_blank"
            >Upgrade</a
          >
        </li>
        <li class="navbar-item btn" id="bookDemo">
          <a href="https://www.lambdatest.com/demo" target="_blank"
            >Book a Demo</a
          >
        </li>
      </ul>
    </nav>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* Navbar styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-family: Arial, sans-serif;
  color: #333333;
  background-color: #eef5ff;
}


.navbar-logo {
  margin-right: 20px;
}
img {
  height: 35px;
}


.navbar-items {
  display: flex;
  align-items: center;
}


.navbar-item {
  margin-right: 20px;
}


.navbar-item:last-child {
  margin-right: 0;
}


.navbar-link {
  text-decoration: none;
  color: inherit;
  padding: 0 5px;
}


.btn {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
  padding: 12px 16px;
  border-radius: 5px;
}
.btn a {
  text-decoration: none;
  color: inherit;
}
#bookDemo {
  background-color: linear-gradient(91.88deg, #2c57f3 0.88%, #a506d8 98.71%);
  background-image: linear-gradient(
    91.88deg,
    rgb(44, 87, 243) 0.88%,
    rgb(165, 6, 216) 98.71%
  );
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  color: #fff;
}
#upgrade {
  border: 1.5px solid #2c57f3;
  padding: 10px 16px;
}


/* hamburger menu */
.hamburger {
  padding: 15px 15px;
  display: none;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  position: absolute;
  right: 0;
  top: 6px;
}
.hamburger:hover {
  opacity: 0.7;
}
.hamburger.is-active:hover {
  opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #000;
}


.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}


.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}
.hamburger-inner::before {
  top: -10px;
}
.hamburger-inner::after {
  bottom: -10px;
}


.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
  transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
  transition: bottom 0.075s 0.12s ease,
    transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}


.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease,
    transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


@media only screen and (max-width: 768px) {
  .hamburger {
    display: inline-block;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }


  .navbar-logo {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .navbar-items {
    flex-direction: column;
    align-items: start;
    display: none;
  }
  .navbar-items.menu-active {
    display: flex;
  }
  .navbar-item {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

JavaScript:

// select .hamburger
const hamburger = document.querySelector(".hamburger");
// Select menu container
const menuContainer = document.querySelectorAll(".navbar-items");


// On click
hamburger.addEventListener("click", function () {
  // Toggle class "is-active"
  hamburger.classList.toggle("is-active");
  // Toggle 'menu-active' class on the menu container to show/hide it
  menuContainer.forEach(function (container) {
    container.classList.toggle("menu-active");
  });
});

Stop worrying about data security. Our SHA512 hash calculator can help you protect your information from unauthorized access. Create secure hashes quickly and easily.

In this example, we used the squeeze hamburger from Hamburgers library, which is a responsive hamburger menu that collapses into a three-line icon on smaller screens, to display the navigation links.

To use Hamburgers, we first need to download and include the CSS file in the < head > of the HTML document like this:

<link href=”dist/hamburgers.css” rel=”stylesheet” />

Note that, for the purpose of this example, I just copied related CSS from the dist folder.
Once we have linked the file, we will add the base hamburgers markup to the HTML, followed by the class name of the type of hamburger we want to use:

<button class="hamburger hamburger - squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"> </span>
</span>
</button>

In this case, we wanted to use the “Squeeze” hamburger, so we added hamburger–squeeze to it. Next, we modify the navbar style for smaller screens using properties like flex-direction: column; which will make navbar items stack vertically.

Lastly, we toggle the active class on click of the hamburger icon using JavaScript:

// On click
hamburger.addEventListener("click", function () {
// Toggle class "is-active"
hamburger.classList.toggle("is-active");

With this, we have an animated hamburger menu that will be visible on smaller screens, which users can toggle to see the navigation links.

Advantages of Hamburgers:

Sass and Rails support: The Hamburgers library provides source files for Sass, a popular CSS precompiler. It is also available as a Ruby gem for Rails applications.
Modular: The Hamburgers library is modular, so you can download and include only the library parts you need.
Easy to use and customize: The Hamburgers library is easy to use and customize. It includes various hamburger types to choose from, and you can easily change the appearance of your hamburger to match your website’s design.

Limitations of Hamburgers:

Can be challenging to debug: If something goes wrong with your hamburger menu, it can be difficult to debug the issue. This is because the Hamburgers library uses a lot of CSS animations, which can be challenging to track down and fix.
No JavaScript: The Hamburgers library only provides the CSS styling for the hamburger menu. You will need to write your own JavaScript to toggle the menu open and close.
Limited browser support: The Hamburgers library is not supported in older browsers like Internet Explorer 9 and Opera Mini.

Want to compare two texts side-by-side? Our free online Difference Checker helps you quickly compare two texts and highlight the differences in seconds.

Pure CSS

Pure CSS is a lightweight library that provides a set of basic CSS modules for building responsive, accessible, cross-browser-compatible websites and web applications. It is a good choice for projects where speed and performance are important, or you need complete control over the CSS.

Pure CSS uses a mobile-first approach, which makes it an excellent choice for projects where you need to focus on mobile devices. It includes modules for forms, buttons, menus, tables, navigation bars, etc. These modules come with out-of-box responsiveness, automatically adapting to various screen sizes and devices. Pure CSS is built on top of Normalize.css, which will fix cross-browser compatibility issues for you.

The best thing about Pure CSS is that it’s incredibly lightweight, weighing just 3.5KB when minified and gzipped. This means that it will not slow down your website. Pure CSS is also very unopinionated, so you can easily customize it to match your design.

Pure CSS is one of the most popular choices for building fast and performant websites, with over 23.2k+ Stars on GitHub and 21k+ weekly downloads on npm trends. It’s also used by several websites, such as Speedtest, Flickr, and Pixaby.

Tired of manually sorting list? Sort any list of names, strings, or numbers with our hassle-free online sorting tool. Try our automated list sorting tool now!

Let’s look at an example of using Pure CSS to create a pricing page:

HTML:

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"
      integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css"
    />
    <div class="banner">
      <h1 class="banner-head">
        LambdaTest Manual Testing Pricing.<br />
        Try before you buy.
      </h1>
    </div>


    <div class="pricing-container">
      <div class="pricing-tables pure-g">
        <div class="pure-u-1 pure-u-md-1-3">
          <div class="pricing-table pricing-table-free">
            <div class="pricing-table-header">
              <h2>Free</h2>


              <span class="pricing-table-price">
                $0 <span>per month</span>
              </span>
            </div>


            <ul class="pricing-table-list">
              <li>Live real time testing</li>
              <li>200+ Desktop Browsers</li>
              <li>10 Screenshot Tests per month</li>
              <li>10 Responsive Test per month</li>
              <li>3 sessions of Native App Testing on Emulators/Simulators</li>
            </ul>


            <a 
              class="button-choose pure-button"
              href="https://www.lambdatest.com/pricing"
              target="_blank"
              >Choose</a
            >
          </div>
        </div>


        <div class="pure-u-1 pure-u-md-1-3">
          <div class="pricing-table pricing-table-biz pricing-table-selected">
            <div class="pricing-table-header">
              <h2>Live</h2>


              <span class="pricing-table-price">
                $15 <span>per month </span>
              </span>
            </div>


            <ul class="pricing-table-list">
              <li>Unlimited Live Real Time Testing</li>
              <li>3000+ Desktop Browsers</li>
              <li>Unlimited Screenshot Testing</li>
              <li>Unlimited Responsive Testing</li>
              <li>Emulators / Simulators for web and app testing</li>
              <li>Geolocation Testing</li>
              <li>Web and mobile debugging tools</li>
              <li>Integrate with JIRA, Asana, Slack</li>
            </ul>


            <a 
              class="button-choose pure-button"
              href="https://www.lambdatest.com/pricing"
              target="_blank"
              >Choose</a
            >
          </div>
        </div>


        <div class="pure-u-1 pure-u-md-1-3">
          <div class="pricing-table pricing-table-enterprise">
            <div class="pricing-table-header">
              <h2>Real Device</h2>


              <span class="pricing-table-price">
                $25 <span>per month </span>
              </span>
            </div>


            <ul class="pricing-table-list">
              <li>Real Mobile devices</li>
              <li>Test native, hybrid, and web apps</li>
              <li>App Uploads</li>
              <li>Natural gestures and interactions</li>
              <li>Network Throttling</li>
              <li>Detailed device and app/crash logs</li>
              <li>
                Integrate with AppStore,PlayStore, AppCenter and TestFlight
              </li>
              <li>GPS based geolocation testing and more</li>
            </ul>


            <a 
              class="button-choose pure-button"
              href="https://www.lambdatest.com/pricing"
              target="_blank"
              >Choose</a
            >
          </div>
        </div>
      </div>
    </div>

CSS:

body {
  color: #526066;
}


h2,
h3 {
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
}
/* styles for banner */
.banner {
  background: transparent
    url("https://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg")
    0 0 no-repeat fixed;
  text-align: center;
  background-size: cover;
  height: 200px;
  width: 100%;
  margin-bottom: 3em;
  display: table;
}


.banner-head {
  display: table-cell;
  vertical-align: middle;
  margin-bottom: 0;
  font-size: 2em;
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 1px black;
}
/*pricing table wrapper*/
.pricing-tables {
  max-width: 980px;
  margin: 0 auto;
  margin-bottom: 3.125em;
  text-align: center;
}


.pricing-table {
  border: 1px solid #ddd;
  margin: 0 0.5em 2em;
  padding: 0 0 3em;
}
.pricing-table-free .pricing-table-header {
  background: #519251;
}


.pricing-table-biz .pricing-table-header {
  background: #2c4985;
}
.pricing-table-header {
  background: #111;
  color: #fff;
}
.pricing-table-header h2 {
  margin: 0;
  padding-top: 2em;
  font-size: 1em;
  font-weight: normal;
}


/*
 * -- PRICING TABLE PRICE --
 * Styles for the price and the corresponding <span>per month</span>
 */
.pricing-table-price {
  font-size: 6em;
  margin: 0.2em 0 0;
  font-weight: 100;
}
.pricing-table-price span {
  display: block;
  text-transform: uppercase;
  font-size: 0.2em;
  padding-bottom: 2em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.pricing-table-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}


/*
 * -- PRICING TABLE LIST ELEMENTS --
 * Styles for the individual list elements within each pricing table
 */
.pricing-table-list li {
  padding: 0.8em 0;
  background: #f7f7f7;
  border-bottom: 1px solid #e7e7e7;
}
/* PRICING TABLE BUTTON */
.button-choose {
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  border-radius: 2em;
  font-weight: bold;
  position: relative;
  bottom: -1.5em;
}


@media (min-width: 767px) {
  .banner-head {
    font-size: 4em;
  }
  .pricing-table {
    margin-bottom: 0;
  }
}


@media (min-width: 480px) {
  .banner {
    height: 400px;
  }
  .banner-head {
    font-size: 3em;
  }
}

**Text Uppercase is a free online tool for converting text into uppercase. Enter your text and click the convert button to make all lowercase letters upper case.**

Output:

In the example above, we used Pure CSS to create a pricing page that has three pricing cards.

To begin with, we include Pure CSS in our project using the CDN. Notice that we are linking two CDNs, this is because the grid system is not part of the base Pure CSS library. This means that if you want to use the grid system, you need to include the separate grids CSS file.

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css"
      integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css"
    />

In the above snippet, the first < link > tag includes the base Pure CSS framework and the second < link > tag includes the grid system CSS file.

The Pure CSS components we use in this example are the grid system and button — grid is for the responsive pricing cards layout, and the button component is for the choose button inside each pricing card.

To create the grid layout, we first add the .pure-g class to the .pricing-tables element, which lays out the child elements inside it in a grid layout. This .pricing-tables element has three child elements responsible for the three pricing cards.

To control the positioning of these child elements, we utilize two pure classes in these individual card elements. The first class is the .pure-u-1, which creates a column that spans the full width of the grid. This makes each card take the full width of the grid and stack vertically on smaller screens.

The second class we apply is .pure-u-md-1–3, which makes a column take one-third of the width on medium and large screens. So, in medium and large screens, the grid’s width gets divided into 3 columns, allowing the three pricing cards to take one-third of the grid layout.

The last Pure CSS component we use is the buttons. To add a pure button, we just need to add a .pure-button class to any < a/ > or < button />. In our case, we add it to the anchor tag of each pricing card.

 <a class="button-choose pure-button"
              href="https://www.lambdatest.com/pricing"
              target="_blank"
              >Choose</a
            >

Note that in addition to the Pure CSS components, we also added a few more style rules to enhance the visual appearance of the page.
Advantages of Pure CSS:

Lightweight: Pure CSS is very lightweight, with the entire set of modules weighing just 3.5KB minified and gzipped. This means that websites built with Pure CSS will load quickly and efficiently.
Accessible: It is designed to be accessible to all users, including users with disabilities. Pure CSS uses CSS best practices and follows the W3C’s Web Content Accessibility Guidelines (WCAG).
Flexible and customizable: Pure CSS is designed to be unopinionated, allowing you to customize it to match your design requirements.
Responsive: Pure CSS includes a responsive grid system that will automatically adjust to different screen sizes and devices.
Cross-browser compatible: It is cross-browser compatible, so your website will look good and function on all browsers.

Limitations of Pure CSS:

Less features than other CSS frameworks: Pure CSS is a lightweight framework, so it does not have as many features as some other CSS frameworks, such as Bootstrap and Foundation. > **XML Minify your code with our efficient and reliable online free tool for better website performance. Get faster page load times and better results today.**

Three Dots

Loading states are an essential part of any website. When users request data from remote sources, there is a delay between sending and receiving the request. This delay is known as the loading state

In a loading state, to retain the user’s attention and prevent them from abandoning the page, designers often use eye-catching loading animations. Three Dots makes creating and implementing these loading animations for your website easy.

Three Dots brings you a wide range of loading animations that you can easily incorporate into your project. All you need is a single element and a class from Three Dots.

Three Dots has 1.3k Stars on GitHub and 2000+ weekly downloads through npm trends.

*Source*

Let’s look at an example of using Three Dots:

HTML:

 <link
      href="
https://cdn.jsdelivr.net/npm/three-dots@0.3.2/dist/three-dots.min.css
"
      rel="stylesheet"
    />
 <div class="container">
<div class="dot-bouncing"></div>
</div>

CSS:

body {
  background-color: #010617;
}
.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Tired of unorganized YAML code? Our YAML Beautifier tool makes YAML code easy to read and understand. Simply paste your code and produce well-formatted document in seconds!

Output:

In this example, we added Three Dots library using the CDN and then applied a bouncing dots loading animation by adding the class .dot-bouncing to a div element. The CSS we have just sets a background color and centers the loader.

Advantages of Three Dots:

Easy to incorporate: Three Dots is extremely easy to incorporate in a project. You just need to install the library and add your preferred loading animation class to an element. For instance, to add a falling dot animation, you would add the .dot-falling class to an element.
Customizable with Dart Sass API: With the Dart Sass API, you can change the default values for the style variables and customize the loading animations to suit your preferences

Limitations of Three Dots:

Can add bloat to a website: Three Dots does not provide the option to install and import only the required loading animation. So, for an app that may need only one loader, you would have to install the entire library, which can result in increasing bloat of your app.
Not easily customizable: Three Dots does not provide an easy way to customize the loaders that can be a consideration when you want loader color to be the same as your brand color.

Struggling with messy Lua scripts? Our Lua Beautifier tool provides clean and structured formatting. Beautify your code and Improve readability today!

Magic CSS

Magic CSS is a lightweight animation library that allows you to add unique and complex animation effects to your websites. Magic CSS has a lot of animations that are unique to it, which sets it apart from the animated CSS libraries we have covered so far.

With Magic CSS, you can incorporate animations that are not very straightforward.

Magic CSS uses JavaScript and jQuery to apply animations to elements. You just need to copy the animation name from the library and paste it into your JavaScript code.

Here’s an example of adding a Puffin animation from Magic CSS:

HTML:

<link
      href="
https://cdn.jsdelivr.net/npm/magic.css@1.4.8/dist/magic.min.css
"
      rel="stylesheet"
    />


<div class="container">
      <div class="element"></div>
 </div>

CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.animated-element {
  width: 150px;
  height: 150px;
  border-radius: 4px;
  background-color: rgb(235, 19, 116);
}

JavaScript:

const selector = document.querySelector(".element");
selector.classList.add("magictime", "puffIn");

Output:

In this example, we are adding a Puffin animation to a < div/ > element on load. To do that, we first link the Magic CSS CDN and then use the querySelector() method to select the < div > element with the class .animated-element.

Next, we add the animation using classList.add() method which adds two classes to the < div > element — magictime and puffIn. The magictime class is required for all Magic CSS animations, and the puffIn class is the animation name we want.

Magic CSS is a popular choice in animation libraries because of its easy-to-use nature. It has 8.2k Stars on GitHub and 1000+ weekly downloads through npm trends.

Advantages of Magic CSS:

Wide range of options: Magic CSS provides a wide range of animations for you to choose from. Be it fades, flips, slides, rotations, or complex animations like perspectives or space-outs, Magic CSS has it all.
Customizable: It allows you to customize the duration of the animations using CSS, which can be very handy in certain scenarios.

Limitations of Magic CSS:

Does not support Opera Mini: Magic CSS does not support Opera Mini, which is a popular mobile browser with a market share of 2.7%. So, if you need to support users of Opera Mini, you might want to consider using an alternative. > Struggling with messy PHP Formatter & Beautifier Online scripts? Our PHP Beautifier & Formatter Online tool provides clean and structured formatting. Beautify your code and Improve readability today!

Spectrum CSS

Spectrum CSS is an open-source CSS library developed by Adobe. It includes components and resources to make web applications more cohesive. Spectrum is used by all of Adobe’s products, including Creative Cloud, Document Cloud, and Acrobat. It is also used by other organizations, including The New York Times, Slack, and Airbnb.

It is a CSS-only library, meaning that it does not require any JavaScript to use. It provides a wide range of components, including buttons, menus, modals, tables, and forms that you can easily incorporate into your project. Spectrum CSS also includes a variety of utilities, such as typography, colors, and spacing.

With Spectrum CSS, you can quickly and efficiently create consistent and aesthetically pleasing user interfaces without spending excessive time on design and styling.

Advantages of Spectrum CSS:

Comprehensive: Spectrum CSS is an all-in-one library that gives you everything you need to build a modern web application. From buttons to menus, modals to tables, cards to forms, date pickers to calendars, Spectrum CSS has it all.
Modular: It is highly modular, with each component released on NPM as a separate package. This means you can use only the components you need for your project without installing everything. This makes your project smaller and faster and your code reusable and maintainable.
Documented: Spectrum CSS is well-documented with clear and concise examples of using the library. This makes it easy to learn and incorporate into a project.

Limitations of Spectrum CSS:

Opinionated: Spectrum CSS comes with limitations, especially if you need to significantly customize your application’s look and feel. > Don’t let encoding IDNs slow you down. Save time and hassle with our IDN Encode free online tool to quickly and easily converts internationalized domain names. Try it now!

Skeleton

Skeleton is a minimal and lightweight CSS library that provides a basic set of styles and layout templates for building responsive web pages. It is designed to be a starting point for your project rather than a complete UI library that provides pre-built components to build a page from end to end.

UI libraries often provide a wide range of components and styles, which can be useful for saving time and effort. However, this can also make them less flexible and customizable.
Skeleton, on the other hand, is designed to be more lightweight and flexible.

With Skeleton, you have a simple set of styles that will help you build a web page quickly while providing the flexibility to customize and create your unique design.

Skeleton includes a number of classes for styling typography, buttons, forms, and other common elements of a webpage. It is a good choice for developers who want to have complete control over the styling of their websites or for websites where performance is a critical concern. Skeleton is a popular lightweight library choice with over 18.9k+ Stars and 3.2k+ Forks on GitHub. However, it’s been inactive for the last few years, with its last update in 2014.

Using Skeleton is incredibly straightforward. To get started, simply download the Skeleton boilerplate and leverage the provided Foundation to build your web projects. Let’s look at an example of using Skeleton to create a landing page:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta charset="utf-8" />
    <title>Skeleton: Responsive CSS Boilerplate</title>
    <meta name="description" content="" />
    <meta name="author" content="" />


    <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />


    <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link
      href="//fonts.googleapis.com/css?family=Raleway:400,300,600"
      rel="stylesheet"
      type="text/css"
    />


    <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/skeleton.css" />
    <link rel="stylesheet" href="./css/custom.css" />
  </head>
  <body>
    <div class="section hero">
      <div class="container">
        <div class="row">
          <div class="one-half column">
            <h4 class="hero-heading">
              Stop relying on dev tools for ensuring responsiveness. Transform
              how you make responsive websites.
            </h4>
            <a
              class="button button-primary"
              href="https://www.lambdatest.com/lt-browser"
              >Try LT Browser</a
            >
          </div>
          <div class="one-half column phones">
            <img
              class="phone"
              src="http://getskeleton.com/examples/landing/images/iphone.png"
            />
            <img
              class="phone"
              src="http://getskeleton.com/examples/landing/images/iphone.png"
            />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

.button {
  border-radius: 100px;
}


.section {
  padding: 8rem 0 7rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}


.phones {
  position: relative;
}
.phone {
  position: relative;
  max-width: 80%;
  margin: 3rem auto -12rem;
}
.phone + .phone {
  display: none;
}


@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: -7rem;
    right: 3rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: 0;
    z-index: 2;
    max-height: 338px;
  }
  .hero-heading {
    font-size: 2.4rem;
  }
}


@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }


  .phone {
    top: -14rem;
    right: 5rem;
    max-height: 510px;
  }
  .phone + .phone {
    top: -12rem;
    max-height: 472px;
  }
}


@media (min-width: 1000px) {
  .section {
    padding: 20rem 0 19rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3rem;
  }
  .phone {
    top: -16rem;
    max-height: 615px;
  }
  .phone + .phone {
    top: -14rem;
    max-height: 570px;
  }
}

Output:

In this example, we created a landing page with an image on the right and some text followed by a CTA button on the left. In smaller screens, both text and image stack vertically, and in larger screens, both stack side by side.

To do this, we used Skeleton as a boilerplate, which provides an index.html file and a folder called css. We changed the content of index.html and created a new file inside the css folder where we added the above lines of CSS.

These custom CSS styles are applied to enhance the page’s visual appeal. Buttons are styled with rounded edges, sections have padding and alignment, and phone images are positioned with specific dimensions. We also used media queries to adjust the minor details of the layout, like padding, height, and font size based on the screen width.

In the HTML markup, we used Skeleton classes like row to create a row, one-half column to create a column that takes half of the space of the row, and button-primary with the button prefix to generate a primary button.

Advantages of Skeleton:

Lightweight: Skeleton is very lightweight. The minified and gzipped CSS file is only 4.2KB, which will load quickly and not slow down your website.
Easy to customize: Skeleton is easy to customize. The library is documented and provides many classes that you can use to style your website. You can also override any default styles to create your custom look.
Responsive: Skeleton includes a grid system and other features that make it easy to create responsive websites. This means that your website will look good and function properly on all devices, including desktop computers, laptops, tablets, and smartphones.

Limitations of Skeleton:

Not suitable for larger projects: Skeleton provides a boilerplate that might not be suitable for larger projects with complex file structures. > Don’t let internationalized domain names (IDNs) slow you down. Our free online IDN Decode tool makes it easy to convert any IDN to its ASCII representation. Decode IDs in seconds!

Basscss

Basscss is a lightweight and modular CSS library that provides a set of utility classes to help you quickly and easily style your web projects. It follows the principle of utility-first CSS, which means that instead of writing custom CSS rules for each element and component, you use predefined utility classes to apply styles directly to the HTML elements.

These predefined utility classes typically have names that describe their purpose, such as .bg-blue for setting a blue background color or .m1 for adding a margin to an element.

One of the best things about Basscss is that it’s modular. You can choose which parts of the library you want to use, so you don’t end up with a lot of unnecessary code. It’s a flexible and straightforward way to make your web pages look great without the complexity of larger CSS libraries.

Basscss has 5.8k Stars and 300+ Forks on GitHub. It also has 7000+ weekly downloads according to npm trends.

Let’s look at an example of using Basscss.

HTML:

 <link
      href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css"
      rel="stylesheet"
    />
    <div class="p2 m2 border rounded" style="border-color: #ccc">
      <p class="bold">Bold</p>
      <p class="regular">Regular</p>
      <p class="italic">Italic</p>
      <p class="caps">Caps</p>
      <p class="left-align">Left align</p>
      <p class="center">Center</p>
      <p class="right-align">Right align</p>
      <p class="justify">
        Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock
        filet mignon shoulder hamburger pig venison.
      </p>
      <p class="nowrap">No wrap</p>
      <p class="underline">Underline</p>
      <p class="truncate">Truncate</p>
      <p class="font-family-inherit">Font Family Inherit</p>
      <p class="font-size-inherit">Font Size Inherit</p>
      <a class="text-decoration-none">Text Decoration None</a>
    </div>

Output:

Advantages of Basscss:

Modularity: Basscss is designed with a modular approach, so you can pick and choose which parts of the framework to include in your project. This reduces bloat and allows for faster load times.
Responsive design: It includes responsive design classes that allow you to create layouts that adapt to different screen sizes and devices.
Speed and clarity: Basscss provides clear, humanized naming conventions that make it quick to internalize and easy to reason about. This can lead to faster development times and more readable code.
Flexibility and control: Basscss provides basic building blocks that can be used to create any design. This gives you complete control over your CSS and allows you to create custom designs that meet your specific needs.
No side effects: Basscss utilities are immutable, meaning they can be used without worrying about unexpected behavior.

Limitations of Basscss:

Limited component library: Unlike more extensive CSS libraries like Foundation, Basscss does not have a library of pre-designed UI components (e.g., modals, navigation menus). You’ll need to build or style these components from scratch.
Learning curve: While using utility classes can be efficient, it may have a learning curve, especially for developers who are used to writing custom CSS. It can take time to become proficient in using the utility classes effectively.
Community and updates: The popularity and maintenance of Basscss may not be as extensive as some larger CSS frameworks, which could impact the availability of community support and updates over time.

Looking for a way to convert your CSS code to SCSS? Look no further than our CSS to SCSS Converter to easily convert your CSS code to SCSS. Give it a try today!

98.css

98.css is a CSS library for building interfaces that look like Windows 98. It is a design system that provides a set of consistent styles for all of the common elements of a web UI, such as buttons, menus, forms, and dialog boxes.

Many developers want to build retro UIs but don’t have the time or expertise to create their own styles. 98.css solves this challenge by providing a ready-made set of styles that can be used to create any kind of retro UI.

98.css is built on the principles of accessibility and semantic HTML. This means that it is easy to use 98.css to create websites accessible to people with impairments, and it is also easy to customize the styles of your website without breaking the overall design. 98.css is a relatively new CSS library that has quickly gained popularity. It has 8.2k Stars on GitHub and 3000+ weekly downloads on npm trends.

*Source*

Let’s look at an example of using 98.css.

HTML:

<link rel="stylesheet" href="https://unpkg.com/98.css" />
    <div class="container">
      <h1 class="title">An example of using 98.css</h1>
      <button>Click me</button>
      <input type="submit" />
      <input type="reset" />
    </div>

CSS:

.container {
  text-align: center; /* Center the content horizontally */
  height: 100vh; /* This centers the content vertically within the viewport */
}

Output:

Advantages of 98.css:

Unique: 98.css is one of the few CSS libraries that help you create retro UIs. This makes it a unique and valuable resource for developers who want to build UIs with a retro look and feel.
Accessibility and Semantic HTML: 98.css is built on the principles of accessibility and semantic HTML. This means that websites built with 98.css will be accessible to people with disabilities.
Compatible with any front-end framework: It is compatible with any front-end framework. This means developers can use 98.css to build retro UIs with their favorite front-end frameworks, such as React, Vue.js, or Angular.

Limitations of 98.css:

Limited use cases: It is only suitable for building UIs with a retro look and feel. This means that it has a limited use case and is unsuitable for building all types of websites. > Optimize your data management workflow with our SQL to YAML Converter. Convert SQL queries to YAML files and easily manage and share data configurations

Blaze UI

Building websites is easy, but building scalable and maintainable websites is not.

Blaze UI tackles this challenge by providing a solid structure for building websites quickly with a scalable and maintainable foundation. It does this by providing a set of consistent CSS styles for all of the common elements of a web UI. It also offers several features that make it easy to customize the look and feel of a website without breaking it.

The best thing about the Blaze UI is its flexibility. It is a framework-free UI toolkit, meaning you can use it with or even without any JavaScript framework. This makes it a great choice for projects where you want complete control over the code and build custom solutions.

Blaze UI has 1.6k Stars on GitHub and 300+ weekly downloads through npm trends.

Let’s look at an example of using Blaze UI.

HTML:

<link
      rel="stylesheet"
      href="https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"
    />


    <ul class="o-timeline o-timeline--alternate o-timeline--loading">
      <li class="c-timeline-item c-timeline-item--left">
        <div class="c-timeline-item__body">Nothing</div>
      </li>
      <li class="c-timeline-item c-timeline-item--brand">
        <div class="c-timeline-item__body">
          Big bang


          <p class="c-paragraph u-text--quiet u-small">
            Widely considered to be how the universe began
          </p>
        </div>
      </li>
      <li class="c-timeline-item c-timeline-item--info c-timeline-item--left">
        <div class="c-timeline-item__body">Galaxies go everywhere</div>
      </li>
      <li class="c-timeline-item c-timeline-item--warning">
        <div class="c-timeline-item__body">Solar systems form</div>
      </li>
      <li
        class="c-timeline-item c-timeline-item--success c-timeline-item--left"
      >
        <div class="c-timeline-item__body">Earth appears</div>
      </li>
      <li class="c-timeline-item c-timeline-item--error">
        <div class="c-timeline-item__body">Human infestation occurs!</div>
      </li>
      <li class="c-timeline-item c-timeline-item--left c-timeline-item--last">
        <div class="c-timeline-item__body">
          All this has happened before, and will happen again
        </div>
      </li>
      <li class="c-timeline-item c-timeline-item--loading">
        <div class="c-timeline-item__body">...Evolution</div>
      </li>
    </ul>

Output:

In this example, we used Blaze UI to create a timeline. Timelines are often used to illustrate a connected set of events that have happened or are planned to happen. However, creating a timeline using CSS requires much work, as you need to style each element individually.

With the Blaze UI timeline component, we can create timelines with just a few lines of code. The timeline component is also fully responsive and will look good on all devices.

Advantages of Blaze UI:

Accessible: All of the components in Blaze UI are accessible so that everyone can use your website.
Framework-free: Blaze UI is not tied to any specific framework, so you can use it with or without your favorite JavaScript library or framework. This gives you the flexibility to choose the best tools for your project.
Scalable: It is designed to be scalable, so you can use it to build small websites or large complex web applications.
Responsive: All of the components in Blaze UI are responsive, so your website will look great on any device.

Limitations of Blaze UI:

Small community: Blaze UI has a smaller community than some other CSS libraries, so less support and resources may be available. > Looking for an easy way to convert your HTML files to JADE? Try our free online HTML to JADE converter tool to convert your HTML files to JADE format in seconds.

Woah.css

Woah.css is an animation library that is designed to be fun and unique. It comes with various fun and showy CSS3-powered animations that can be easily applied to HTML elements.

Woah.css provides various animation classes, including

wowsers: A flashy animation that makes your element appear to explode from the page.
comeInStyle: A smooth animation that makes your element slide into view from the top left corner of the page.
rotateComplex: A complex animation that makes your element rotate and flip in place.
flyOut: An animation that makes your element fly out of the page to the right.
flyIn: An animation that makes your element fly into the page from the left.
blackMirror: An animation that makes your element glitch and flicker, like from the TV show Black Mirror.
spin3D: An animation that makes your element spin 360 degrees on the Y axis.
simpleEntrance: A simple animation that makes your element fade in from 0% to 100% opacity.
scaleOut: An animation that makes your element scale down to 0%.
starWars: An animation that makes your element appear to fly through space like a Star Wars ship.
blazingStar: An animation that makes your element appear like a blazing star.
pulse: An animation that makes your element pulse in and out.
shaker: An animation that makes your element shake back and forth.

Woah.css is a great choice for developers who want to add excitement to their websites. Many of the animations it provides are unconventional and out of the box, which can be ideal for projects where you want to add some playful touch.

Below is an example of Woah.css animations.

Advantages of Woah.css:

Easy to use: Woah.css comes with a variety of pre-built animations that can be applied to HTML elements with just a few lines of code.
Lightweight: It is a relatively small library, which makes it a good choice for websites that need to minimize their file size.
Flexible: Woah.css animations can be combined to create custom animations, and they can also be easily customized to match the specific needs of a website

Limitations of Woah.css:

Limited number of animations: Woah.css has fewer animations than some other CSS animation libraries.
Relatively new library: Woah.css is a relatively new library, so it may not be as fully supported.

Need YAML data for testing? No need to stress about YAML data — Try our Random YAML Generator for a quick and effortless way to generate YAML data in seconds.

RaisinCSS

RaisinCSS is a utility-first CSS library that provides a wide range of pre-built utility classes that can be used to build custom and responsive websites.

Utility classes are small, specific, and reusable CSS classes that can be used to style any element on a page. For example, a utility class might add a margin to an element, change its font color, or make it responsive.

RaisinCSS is modular, which allows developers to pick and choose only the components they need, reducing the overall file size and improving the loading speed of web pages. It is also documented and beginner-friendly, making it a great choice for developers of all skill levels.

Advantages of RaisinCSS:

Supports CSS grid and flexbox: RaisinCSS supports modern layout techniques like CSS grid and CSS flexbox, ensuring your projects align with contemporary web design practices. This allows you to create complex layouts with ease and flexibility.
Highly customizable: RaisinCSS is highly customizable because of its modular structure. So you can quickly adapt styles and components to match your needs and project requirements.
Lightweight: It is a lightweight library that does not add unnecessary bloat to your website.
Easy to use: RaisinCSS is easy to learn and use, even for developers who are new to CSS.
Documentation: RaisinCSS comes with clear and concise documentation that is easy to follow.

Limitations of RaisinCSS:

Limited number of components: RaisinCSS does not come with a lot of pre-built components, such as navigation bars and forms. However, there are a number of third-party RaisinCSS components available online.
Relatively new library: It is relatively new, so it may not be as fully supported as other CSS libraries.

Normalize.css

Normalize.css is a lightweight CSS library that helps make the default styles of web browsers more consistent and in line with modern standards. Normalize.css is one of the most popular CSS libraries with over 50k Stars on GitHub and is used by thousands of websites, including some renowned names like Twitter, GitHub, Medium, etc.

It is a modern alternative to traditional CSS resets. Unlike a traditional CSS reset, Normalize.css does not remove all default styles. Instead it preserves useful defaults and tries to normalize only the necessary styles across browsers. This makes it a good starting point for any web development project, as it can significantly help reduce cross-browser compatibility issues.

Normalize.css is also maintained and regularly updated, making it a reliable and trustworthy choice for developers. It has 11k Forks on GitHub and a staggering million+ weekly downloads through npm trends.

The below CodePen shows the usage of Normalize.css with various HTML elements.

Advantages of Normalize.css:

**Improves cross-browser consistency: **Normalize.css helps to ensure that your website looks the same across all major browsers. This can save you a lot of time and effort, as you don’t have to manually test your website on every browser.
Fixes common browser bugs: Normalize.css fixes common desktop and mobile browser bugs that can affect the appearance of your website. This includes bugs related to HTML5 elements, preformatted text, SVG overflow, and forms.
Doesn’t use multiple selectors: Normalize.css uses targeted styles and avoids using multiple selectors in rulesets. This makes it easier to debug your CSS and identify the source of any issues.
Modular and easy to customize: Normalize.css is broken down into relatively independent sections. This means you can easily add or remove specific styles depending on your needs.

Limitations of Normalize.css:

Lack of opinionated styles: Normalize.css focuses on resetting or normalizing default styles without providing opinionated design choices. While this is a strength for flexibility, you’ll need to write your own custom CSS to create a unique design.
Maintenance: It requires updating with evolving web standards and browser changes. You may need to update it periodically to address new issues or changes in browser behavior.

Need decimal fractions for your project or testing? Use our free and fast online Random decimal Fraction Generator to generate random decimal fractions in seconds!

Criteria for Selecting CSS Libraries

Selecting the best CSS libraries for your project is crucial for efficiency, maintainability, and achieving your design goals. However, with a plethora of CSS libraries available, it can be challenging to pick the best one for your specific needs.

Note that the best library for your project will vary depending on your specific project requirements. However, to assist you in making an informed choice, here are some key criteria to consider when selecting the right CSS libraries:

Performance considerations

One of the most important things you should consider when choosing a library is its performance.

Look for libraries that are optimized for speed and efficiency. A good library should not add unnecessary bloat to your website, which could slow it down. Check if the library’s code is minified or compressed, as smaller file sizes load faster.

Also, check if the library follows best practices for reducing render-blocking resources, which can improve page load times.

If you don’t know what render-blocking resources are, they are elements like stylesheets and scripts that can slow down the loading of a web page. When a browser encounters these resources, it often stops rendering the page temporarily to fetch and process them. This pause can make the page appear slower to users.

To prevent it, some libraries follow practices like loading only the necessary parts first and deferring the rest until after the page is visible. So, when a library follows such best practices, it helps the web page load faster.

Compatibility and browser support

The success of your website depends heavily on its ability to function flawlessly across a wide range of browsers and devices. So, ensuring the CSS library you pick works with popular web browsers is crucial. This is important for several reasons:

**Wider audience: **Every web browser has its own group of users. By ensuring compatibility across these browsers, you can reach a broader audience.
User experience: Users have different preferences and expect your website to work without glitches on their preferred browser. A website that functions flawlessly across different browsers improves user experience.
Search Engine Optimization(SEO): Search engines like Google consider user experience an important ranking factor. A website with good browser compatibility will likely rank higher, improving its visibility.

So, when choosing CSS libraries, selecting one that prioritizes compatibility and browser support is important.

To ensure your libraries are compatible with the latest browser versions, you can test your website using a cross browser testing platform like LambdaTest. LambdaTest is an AI-powered test orchestration and execution platform that allows you to test your website on an online browser farm of 3,000+ browsers and operating systems. You can also test your website on mobile phones, tablets, and more.

Ease of use and documentation

The documentation should provide clear step-by-step instructions, examples, and practical usage guidelines. This way, you can quickly understand how to maximize the library’s capabilities without hassle. A good library will simplify your development and save you time.

Customizability and flexibility

Every project has its unique design requirements. A good CSS library should allow for customization and flexibility.

To recap, when selecting the best CSS libraries, consider factors like performance, compatibility, ease of use, and customization. A library that excels in these areas will help you build efficient, cross-browser-compatible, and visually appealing websites while saving you time and effort in the development process.

Wrap it up!

CSS libraries are a robust way of building modern and inclusive websites. By choosing the right library for your web project, you can streamline your workflow, produce high-quality, maintainable code, and deliver a seamless user experience worldwide.

However, with the vast number of CSS libraries available, choosing the right one for your project can be challenging. So, in this blog, we have handpicked the best 20 CSS libraries for you to leverage. While choosing these libraries, we considered factors like ease of use, popularity, use cases, clear documentation, browser support, and flexibility.

Hope this blog has been helpful to you and helped you discover some useful CSS libraries. Until next time, happy coding!

Looking for an easy way to generate random octal numbers? Use our online Random Octal Generator tool to generate random numbers in octal format. Try it now for free.

Frequently Asked Questions (FAQs)

What are libraries in CSS?

CSS libraries are collections of pre-written CSS codes that offer common styling elements like buttons and forms to speed up web development.

Which is the best CSS library?

The best CSS library depends on project needs; popular choices include Bootstrap for its extensive components, Foundation for flexibility, and Materialize for material design aesthetics.

Is Bootstrap a library for CSS?

Yes, Bootstrap is a widely-used CSS library known for its comprehensive set of ready-to-use components for responsive web design.

Creating a 12 Column CSS Grid: A Complete Tutorial

Tahera Alam — Tue, 19 Dec 2023 08:36:20 +0000

Creating layouts has always been the most important aspect of web design because they determine how a website looks across different devices. Be it mobiles, tablets, laptops, or desktops, the way your web app looks across these devices is mainly controlled by the structure of your layout.

In the earlier days of the Internet, things like tables and positioning were used to create layouts. But they were mere hacks rather than actual layout modules.

With the introduction of CSS Grid, we had our first actual layout creation module. With CSS Grid, we can create complex, grid-based layouts that adapt seamlessly to different screen sizes and devices. As grid-based layouts gained popularity, a framework called a 12 column CSS grid came into the picture.

Today, popular platforms like Twitter, Medium, Stripe, Dribble, etc., use a 12 column CSS grid on their websites. But what exactly is a 12 column layout?

A 12 column CSS grid is a layout system that divides the width of a container into 12 equal columns, providing a framework for arranging content and elements on a webpage.

The concept behind a 12 column CSS grid is to break down the horizontal space into a set number of columns, allowing developers and designers to allocate different numbers of columns to different sections or elements within the layout. This system provides a consistent and structured approach to organizing content, regardless of the device or screen size used.

With a 12 column CSS grid, each column typically occupies a fraction of the container’s width. For example, if a container is 1200 pixels wide, each column would be 1/12th of that width, resulting in columns that are 100 pixels wide. We can then assign any number of columns to an element using CSS classes.

A 12 column CSS grid revolutionizes the way we approach layout creation. It has become a widespread choice due to its flexibility, ease of implementation, and compatibility with responsive design principles.

In this blog, we look at creating a 12 column CSS grid layout that adapts gracefully to various screen sizes and devices. By the end of this blog, you will have a solid understanding of how to create a 12 column CSS grid, allocate different widths to specific elements within the grid, or rearrange columns for smaller screens.

So, let’s get started!

Discover 31 top automation testing tools list in 2023 for powerful and efficient testing solutions.

What is a 12 Column CSS Grid?

A 12 column CSS grid refers to a layout system that divides a web page into 12 equal-width columns, providing a framework for creating flexible and responsive designs. In this system, the horizontal space is divided into 12 equal columns, and you can then use those columns to position elements within the layout.

By default, each column gets a width of 1fr, which means it takes up 1 fraction of the container’s total width. This means if a grid is 1200 pixels wide, each column would be 1/12th of that width, resulting in columns that are 100 pixels wide.

This allows for flexibility in designing the layout, as the columns can be combined or resized according to the specific needs of the webpage. For example, you can have a single element spanning the entire width of the grid by using all 12 columns, or you can divide the space into multiple smaller sections by assigning different numbers of columns to each element.

This way of organizing content provides a convenient and efficient framework for creating responsive designs that adapt to different screen sizes and devices.

Real-World Examples of 12 Column CSS Grid

Because of its flexibility and versatility, the 12 column CSS grid has become popular in modern web design. Let’s take a look at some famous names that utilize the 12 column CSS grid system in their website layouts:

AirbnbAirbnb, a popular online marketplace for vacation rentals and lodging, utilizes the 12 column CSS grid in its layout to organize property listings, search results, and filters, allowing users to navigate and explore available accommodations easily.

Airbnb, a popular online marketplace for vacation rentals and lodging, utilizes the 12 column CSS grid in its layout to organize property listings, search results, and filters, allowing users to navigate and explore available accommodations easily.

The New York Times

The New York Times, a prominent news organization, uses the 12 column CSS grid system to arrange its articles, advertisements, and various sections, ensuring a cohesive and responsive design.

Bootstrap

Bootstrap, a widely popular front-end framework, employs the 12 column CSS grid system to create responsive and flexible website designs.

Amazon

Amazon, one of the largest eCommerce platforms globally, incorporates the 12 column CSS grid layout to organize its products.

Adobe

Adobe, a leading organization known for its creative tools, utilizes the 12 column CSS grid on its website to provide a clear and structured presentation of its various products, tutorials, and resources.

Automation testing uses tools and scripts to automate software test case execution. Dive deep into our detailed blog to learn the types of automation testing, its benefits, best practices, and more.

Browser Compatibility of CSS Grid Layout

We know that browser compatibility is an important aspect of web development. Every property we use to develop a website should be tested to ensure compatibility across browsers.

When it comes to CSS Grid, most major browsers have support for CSS Grid. Chrome offers full support starting from version 57, Firefox from version 52, Safari from version 10.1, and Edge from version 16.

The below visualization provides a detailed overview of the support for CSS Grid:

Once you create a 12 column CSS grid, you can test its browser compatibility across different browsers, browser versions, devices, and platforms. For this, you can leverage cloud testing platforms like LambdaTest.

LambdaTest is an AI-powered test orchestration and execution platform that allows you to perform browser testing of your 12 column CSS grid for compatibility on an online browser farm of 3000+ browsers, devices, and OS combinations.

Here is a sample screenshot of a browser compatibility test done on macOS Sonoma running Safari 17.

Selenium is an open-source framework designed for automating web browsers for testing web applications. Delve into automation testing selenium architecture, benefits, and more through our detailed tutorial for enhanced cross-browser testing.

Quick Recap: Basics of CSS Grid

To understand how to create a 12 column CSS grid, we first need a basic understanding of CSS Grid fundamentals.

In this section, let’s do a quick recap of the fundamentals of CSS Grid. This will provide a solid foundation for building the 12 column CSS grid layout you will learn in this blog.

Additionally, if you want to master CSS Grid and learn it in detail, I recommend checking out this comprehensive guide on CSS Grid.

CSS Grid is a grid-based layout system that allows us to create two-dimensional layouts on the web. It utilizes rows and columns for controlling the layout. This two-dimensional structure of the grid enables us to have precise control over the placement and alignment of elements.

The specification for CSS Grid introduced several new terminologies that are important to understand to work with grid-based layouts. Let’s take a look at them:

Grid Container

A grid container is an HTML element used to create a grid layout. It establishes a grid formatting context and allows you to organize child elements into a grid structure. It serves as the parent element that contains the grid items.

To create a grid container, you can use the display property with the value grid or inline-grid. Here’s an example of creating a basic grid container:

.grid-container {
display: grid;
}

Grid Item

Grid items refer to the individual elements that are direct children of a grid container. They are the building blocks of the grid structure and are positioned within the horizontal (grid columns) and vertical (grid rows) tracks defined by the grid container.

By default, a container has one grid item for each grid cell. However, using various grid properties, you can control the number of cells a grid item occupies.

Below is an example of a grid container with 15 grid items where item one spans four columns:

HTML:

<div class="grid-container">
      <div class="first-grid-item">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
    </div>

CSS:

.grid-container {
  background-color: #f4f4f4;
  padding: 20px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(6, 1fr);
  width: 80%;
  margin: 0 auto;
  border: 2px dotted #999;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.first-grid-item {
  background-color: salmon !important;
  grid-column: 1 / 5;
  color: white;
}


.grid-container > div {
  background-color: #ffffff;
  padding: 20px;
  text-align: center;
  font-size: 18px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

Grid Lines

Grid lines are the dividing horizontal and vertical lines created when we define the grid. They are used to position elements within the grid.

The lines in the grid are numbered starting from 1 at the start edge of the grid. The numbering follows the writing style and direction of the document or component. This means that in a left-to-right language like English, column line 1 will be on the left side, while in a right-to-left language like Arabic, it will be on the right.

There are two types of grid lines: column lines and row lines. The lines between columns are called column lines, and the lines between rows are called row lines.

The highlighted blue line in this image is column line 3

Grid Tracks

Grid tracks define the columns and rows in a grid container. Each row track represents the space between two row lines, and similarly, each column track represents the space between two column lines.

These tracks are made by giving them a size when we create our grid. Here’s how we can create grid tracks:

HTML:

 <div class="grid-container">
      <div class="grid-item">
        <h3>Testimonial by Ben Pritchard</h3>
        <p>
          Super top notch customer support from @lambdatesting - just throwing
          it out there if you're looking for a decent browser testing platform,
          they get my full double thumbs up. Thumbs upThumbs up :-)
        </p>
      </div>
      <div class="grid-item">
        <h3>Testimonial by Faisal Khatri</h3>
        <p>
          Thank you LambdaTest for providing free open source license to run the
          web and mobile tests of our open source projects for free on
          Lambdatest platform.
        </p>
      </div>
      <div class="grid-item">
        <h3>Testimonial by Michael Horne</h3>
        <p>
          Really superb customer service from Arpit @lambdatesting tricky
          Automation problem using Selenium in Python and they talked me through
          it and got me up-and-running. Awesome. :-)
        </p>
      </div>
      <div class="grid-item">
        <h3>Testimonial by Mat Gargano</h3>
        <p>
          LambdaTest is fantastic. Cross browser and device testing frustration
          is minimized. You can't get rid of clients that need ie11 nor can you
          own every device but LambdaTest bridges that gap.
        </p>
      </div>
    </div>

CSS:

body {
  background-color: #222;
  font-family: Arial, sans-serif;
}


.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Creates three equal columns */
  grid-template-rows: 200px 300px; /* First row 200 pixels, second row 300 pixels */
  gap: 10px; /* Gap of 10 pixels between grid items */
}


.grid-item {
  background-color: #333;
  border-radius: 5px;
  padding: 20px;
  color: #fff;
}


.grid-item h3 {
  margin-top: 0;
  font-size: 18px;
}


.grid-item p {
  margin-bottom: 0;
  font-size: 14px;
}

Improve your software testing process with our automation testing tutorial. Discover the benefits of automation testing, learn about the best tools and techniques, and get expert insights on optimizing your testing strategy.

In this example, we have a grid container with three columns and two rows. We use grid-template-columns and grid-template-rows properties to specify the size and number of rows and columns of the grid.

These properties can be set to a length value, a percentage value, or a fr value. The fr value is a special value representing a fraction of the available space in the grid.

In our example, the grid-template-columns property sets the width of each column using the 1fr unit, which divides the available space equally among the columns. Similarly, the grid-template-rows property specifies the height of the rows, with the first row being 200px and the second row being 300px.

The .grid-item class represents the individual items within the grid. In this example, we have four grid items, each having a background color of #333 and some basic styles defined.

In addition to specifying track sizes individually, the CSS Grid layout module provides a convenient way to repeat track patterns using the repeat function. The repeat function allows us to define a repeated pattern for grid tracks in a shorter syntax.

In the above grid layout, instead of specifying three equal columns using 1fr 1fr 1fr, we can use repeat(3, 1fr). This will repeat the 1fr value three times, resulting in the same effect of three equal columns.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Visualization of a grid track between third and fourth-row grid lines

Discover the 17 key benefits of automation testing, which will help you decide whether this is the right call for your SDLC. Find out more.

Grid Area

A grid area is a named region in a grid layout. The grid-area property assigns grid items to named grid areas within the grid container. By defining named grid areas, we can easily position and place grid items in specific grid areas.

Let’s look at an example:

HTML:

<div class="container">
      <header>Header</header>
      <main>main</main>
      <nav>nav</nav>
      <aside>aside</aside>
      <footer>footer</footer>
    </div>

CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
header {
  grid-area: header;
}
nav {
  grid-area: nav;
}
main {
  grid-area: main;
}
aside {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}
header,
footer,
main,
aside,
nav {
  background-color: #3a86ff;
  color: #fff;
  border: 1px solid #fff;
  padding: 20px;
}
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "nav footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 70px 2fr 50px;
  height: 100vh;
}

In this example, we have a grid container with three columns and three rows. We use the grid-area property to assign specific grid areas to the grid items. The grid-template-areas property defines a named grid area layout, where each row represents a grid line, and each area name is enclosed in quotation marks.

The area names defined in grid-template-areas match the grid-area values assigned to the elements. This association automatically allows the elements to occupy designated areas within the grid layout.

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

Grid Cell

A grid cell is the smallest unit within the grid layout, representing a space bordered by two neighboring rows and two neighboring column grid lines. If you create a grid but don’t place any items in it, each grid cell will automatically be filled with one item.

Visualization of a grid cell between row grid lines 2 and 3 and column grid lines 1 and 2

Gaps

Gaps refer to the space between grid items. They can be easily controlled using the grid-gap property, which allows us to define the gap size between rows and columns in a grid. (Note that this property was renamed “gap” in CSS3).

New to CSS3? Check out this complete CSS3 tutorial.

The grid-gap property serves as a shorthand for the grid-row-gap and grid-column-gap properties. The grid-row-gap property is responsible for controlling the size of the gap between rows, while the grid-column-gap property controls the size of the gap between columns.

Note that the grid-row-gap and grid-column-gap properties were renamed to row-gap and column-gap respectively.

.container {
  row-gap: 20px; /* sets the gap between rows*/
}

Below is a visualization of a 20-pixel row gap in a grid layout:

.container {
  gap: 20px; /* sets both row gap and columns gap*/
}

Here’s another visualization with a 20-pixel gap between both rows and columns:

How to Create a 12 Column Grid With CSS

In the previous sections, we explored the concept of a 12 column CSS grid, its significance, and the essential considerations before getting started. We also looked at its browser compatibility and saw examples of popular websites that use it in their layouts.

In this section, let’s dive into the practical implementation steps and create the 12 column CSS grid.

To demonstrate this, we will create a web page with a header, a product page, and a featured product section. We will also make it responsive to ensure it renders seamlessly across various devices and screen sizes.

One of the key considerations for responsiveness is the effective use of CSS media queries. Media queries allow us to define specific CSS rules that will be triggered when certain screen widths are met.

In our implementation, we will define CSS breakpoints at various screen widths to address common device categories like mobile phones, tablets, and desktops. By adjusting our CSS rules within these breakpoints, we can optimize the layout for each device category.

But before we proceed, here’s a sneak peek of our webpage:

We will create a 12 column CSS grid clone of a popular eCommerce website. The website is implemented keeping responsiveness and cross-browser & cross-platform compatibility in mind.

Here are some of the renders captured on different view-port sizes using LT Browser.

Desktop view:

Mobile view:

In case you want to get your hands dirty by experimenting with the responsive eCommerce website, feel free to download the source code.

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

Demo: Creating a 12 Column CSS Grid

Now, let’s move on to setting up the HTML structure for our webpage. The HTML structure serves as the foundation for our layout and content. It provides the necessary elements and tags that will define the structure and organization of our page.

Our page will have a header, a section containing some products, followed by a section with a featured product. (Please note that in this context, by the term “section,” we refer to a general area of content rather than the specific HTML < section > element.)

First, we have a header that contains the logo, search input, and some nav links, including a cart.

<header>
      <div class="grid-item-brand">
        <a href="#" class="logo">
          <img src="./assets/logo.svg" alt="LambdaTest" />
        </a>
      </div>
      <div class="grid-item-search">
        <input
          type="text"
          class="search-input"
          placeholder="Search for products"
        />
        <button class="search-button">
          <img src="./assets/search-icon.png" alt="search-icon" />
        </button>
      </div>
      <div class="grid-item-account">
        <a href="#" class="nav-link">Sign in</a>


        <a href="#" class="nav-link cart-link">
          Cart
          <span class="cart-count">0</span>
        </a>
      </div>
    </header>

In the above HTML, we divided our header items into three sections. The first section is the logo, the second section is the search-related elements, and the third is account-related elements like sign-in and the cart.

So, in CSS, when we make the header element a grid, each section will be a grid item because they are direct children of the header. We can then style our grid items to occupy the desired space.

After the header element, we have our main element, which contains a theme image, a section on the products, and a section on the featured product. Let’s first look at the products section structure:

<main>
<img class="theme-image" src="./assets/theme-img.jpg" alt="Theme Image" />
      <div class="products-container">
        <div class="product">
          <h1>Kindle E readers</h1>
          <img src="./assets/kindle.jpg" alt="Kindle E readers" />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
        <div class="product">
          <h1>Shop Laptops & Tablets</h1>
          <img src="./assets/laptops.jpg" alt="Shop Laptops & Tablets" />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
        <div class="product">
          <h1>Home refresh ideas</h1>
          <img src="./assets/homeRefreshIdeas.jpg" alt="Home refresh ideas" />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
        <div class="product">
          <h1>For your Fitness Needs</h1>
          <img src="./assets/fitness.jpg" alt="For your Fitness Needs" />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
        <div class="product">
          <h1>New arrivals in Toys</h1>
          <img src="./assets/toys.jpg" alt="New arrivals in Toys" />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
        <div class="product">
          <h1>Shop activity trackers and smartwatches</h1>
          <img
            src="./assets/smartwatch.jpg"
            alt="Shop activity trackers and smartwatches"
          />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
        <div class="product">
          <h1>Create with strip lights</h1>
          <img src="./assets/light.jpg" alt="Create with strip lights" />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
        <div class="product">
          <h1>Shop Pet supplies</h1>
          <img src="./assets/pets.jpg" alt="Shop Pet supplies" />
          <a href="https://www.amazon.com/">Shop now</a>
        </div>
      </div>

In the above HTML, we have a main element, and within that element, we have a theme image and a products section with the class .products-container, which lists all our products.

Inside that container, we have 8 products with the class .product. Each product has an h1, an image, and an anchor tag. That’s it about our products section.

Let’s look at the second section of the main element, which has our featured product.

 <div class="featured-section">
        <img src="./assets/featured-product.jpg" alt="featured-product" />
        <div class="banner-text">
          <h1>Snap 12x18 Black Wood Wall Photo Frame</h1>
          <p>
            A timeless flat black frame that holds a 12x18 image without a mat.
            Contemporary narrow frame profile and flex tab back opening allowing
            you to easily add and remove photos or art. Each frame includes
            ready-to-hang durable hangers on the back for vertical or horizontal
            hanging options.Frame is crafted from durable solid wood.
            Lightweight protective glass will keep your favorite photos looking
            great for years.
          </p>
        </div>
      </div>
    </main>

In the above HTML, we have a parent div with the class .featured-section. Inside that section, we have an image followed by a div element with the class .banner-text that introduces the product. Finally, we close our main tag that started from the products section.

Now that we have our HTML structure in place, let’s move to the fun part of building the 12 column CSS grid layout to style our page.

Online browser compatibility testing of your website & web app with a Device Farm on cloud. Get instant access of Browsers like Safari, Chrome, Firefox, Opera, Yandex. 3000+ mobile and desktop environments.

Building the 12 Column Grid Layout

Before we proceed to write any style, let’s first reset the browser defaults using the below lines:

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

This will set the margin to , 0 padding to 0, and box-sizing to border-box on every element of the page.

Next, we will enhance the body element by adding a background color, font color, and font style to it:

body {
  background-color: #f0f2f2;
  color: #0f1111;
  font-family: "Roboto", sans-serif;
}

Header: 12 Column CSS Grid

Now, let’s begin with our actual layout. The first section of our layout is the header.

In the header, we have 3 main sections. First is the logo, second is the search element, and third is the account-related elements. Notice how the search input is centered, taking the most space.

To achieve this layout, we will make the header element a 12 columns CSS grid and then divide these columns between the 3 items accordingly to make them take up the needed space. Let’s look at the entire code first, and then we will break it down.

/* header styles */
header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  align-items: center;
  background-color: #131921;
  color: #fff;
  padding: 10px;
}
/* Logo wrapper styles */
.grid-item-brand {
  grid-column: span 2;
  justify-self: center;
}


/* Logo img */
.logo img {
  height: 45px;
}


/* Search input wrapper styles */
.grid-item-search {
  display: flex;
  align-items: center;
  grid-column: 4 / span 6;
}


/* Search input styles */
.search-input {
  flex: 1;
  padding: 12px;
  font-size: 14px;
  outline: none !important;
  border: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}


/* Search button styles */
.search-button {
  background-color: #f8c06c;
  color: #fff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  width: 10%;
  padding: 8.2px;
  outline: none !important;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.search-button img {
  width: 20px;
  object-fit: contain;
}
/* Account wrapper styles */
.grid-item-account {
  grid-column: span 3;
  justify-self: center;
}
/* Navigation link styles */
.nav-link {
  color: #fff;
  text-decoration: none;
  margin-right: 30px;
  font-size: 16px;
}


/* Cart link styles */
.cart-link {
  position: relative;
}


.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-block;
  background-color: #ff4444;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
}

Let’s break down the important parts of the code and understand how we are laying out the header elements using a 12 column CSS grid.

First, we set up the grid on the header element using the display: grid property. This makes the header a grid container. Next, we define the grid to be 12 columns using the grid-template-columns: repeat(12, 1fr) property. This creates 12 columns, each having an equal fraction of the available space (1fr means one fraction). So, the grid now gets divided into 12 equal-width columns.

To create spacing between the grid items, we set the grid-gap property to 10px. This adds a 10-pixel gap between the grid items both horizontally and vertically. So, when you want to add space in grid items, you can use this property in the grid container.

Next, we want to vertically align the items within the grid container. The align-items: center property ensures that the items are centered vertically.

We also specify some visual styles for the header, such as setting the background-color to #131921 (a dark color) and the text color to #fff. Additionally, we add padding: 10px to create some space inside the header.

Moving on to the grid items within the header, the first item is the logo with the class .grid-item-brand.

Find a AWS device farm pricing alternative for better performance, coverage & support at a fraction of cost. Try LambdaTest for free!

To add content in grid columns, you can use the grid-column property. In this case, we make the .grid-item-brand element span 2 columns using the grid-column: span 2 property. So, out of our 12 columns header, we allocate 2 columns to the logo.

To ensure the logo is visually centered within these two columns, we apply the justify-self: center property. This brings symmetry to the layout by aligning the logo horizontally.

The next item in the header is the search container with the class .grid-item-search. It has an input and a button element within it.

This container is set to span 6 columns starting from the 4th column using grid-column: 4 / span 6. If you are confused about what’s happening here, let’s break it down.

We know that our logo took 2 columns out of 12, so next, we skipped column 3 to have a space and then started the search container from column 4 and spanned it across 6 columns. That means the logo takes 2 columns, the search container takes 6 columns, and skipping 1 column adds up making 9 columns occupied. Now we have 3 columns left.

You may also have noticed the display: flex on the search container. This makes the container a flex container, allowing us to align its contents easily. We could have achieved the same using just the grid, but since combining both CSS Flexbox and grid in creating layouts is a common practice, it’s good to know where this might fit in.

The last element in our grid is the grid item with the class .grid-item-account, which has two anchor tags inside it.

It spans 3 columns using grid-column: span 3; and is centered horizontally within the allocated columns using justify-self: center.

With LambdaTest’s Smart Visual UI Testing, ensure visual perfection and deliver seamless websites and web applications 3000+ devices. Try now!

Main Container: Theme Image

Now that we are done with creating and styling the header layout. Let’s move on to the next element of the page, which is our main container. The main container has 3 sections. First is a theme image, second is the product container, and third is a featured product section.

Let’s start by laying out the theme image.

main .theme-image {
width: 100%;
}

In this case, we simply set the image’s width to 100%. Here, using a grid is unnecessary. One of the essential principles of writing CSS is to avoid unnecessary complexity. If a task can be accomplished without a grid, keeping the code concise and efficient is considered best practice.

Products: 12 Column CSS Grid

The next element in our main container is the products section. It has 4 cards in each row with a subtle gap between each of them.

Here is how we have created the layout:

.products-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 0 20px;
  margin: 3em 0;
}


.product {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}


.product:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.product h1 {
  margin-bottom: 10px;
  font-size: 21px;
  line-height: 27.3px;
}


.product img {
  width: 100%;
  height: 300px; /* Set a fixed height of 300px for the images */
  object-fit: cover;
  margin-bottom: 10px;
}


.product a {
  display: block;
  margin-top: auto;
  color: #007185;
  text-decoration: none;
}


.product a:hover {
  text-decoration: underline;
  color: #ff9900;
}

Let’s break down the code:

In the above snippet, we first set up the grid on the div element that has the class . products-container by using display:grid. This tells the browser to treat this container as a grid element.

Next, we define the columns of our grid using the grid-template-columns property. In this case, we use repeat(4, 1fr), which means we want four columns, each occupying an equal fraction of available space (1fr). This ensures that our grid can accommodate four product item cards in a single row. Each column will dynamically adjust its width to evenly distribute the available space.

Then, we add some spacing between grid items using the grid-gap property. By setting it to 20px, we create a gap of 20 pixels between each grid item.

Moving on, we have div elements with the class .product, representing each item within the products container grid. This class is responsible for styling individual product elements within the layout.

In this Selenium C# tutorial, we are going to help you set up Selenium Visual Studio and run your first Selenium C# example script for automated browser testing of your web-application.

Firstly, we set the background color of each product element to white (#fff) and apply a padding of 20px to create some space inside the element. To give the elements a subtle shadow effect, we use the box-shadow property with specific values.

Next, we utilize flexbox properties to control the layout of the product elements. By setting the display to flex and flex-direction to column, we ensure that the content within each product is arranged vertically.

Finally, we set the grid-column property with the value span 3, which indicates that each product element will occupy three columns of the 12 column grid container. This means that we will have a total of four products placed horizontally in each row of our grid layout.

Within each product, we have an h1 element for the title, an image element for the product image, and an anchor element for the link. To ensure a harmonious design, we apply some basic styles to these elements. For instance, the h1 element receives a margin-bottom of 10px, a font size of 21px, and a line height of 27.3px.

Similarly, we set the img element to occupy the full width of its container using width: 100% while maintaining a fixed height of 300px. The object-fit property is applied with the value of “cover” to ensure the image retains its aspect ratio and fits neatly within the allocated space. Additionally, we add a bottom margin of 10px to provide a subtle spacing between the image and the anchor element.

Next, we style the anchor tags by setting a color, removing the text decoration, and adding the margin-top: auto. Note that this margin top is crucial in positioning the links within each product card. It ensures that the links are consistently aligned at the bottom of each card, regardless of the content inside.

Without this property, the links would be positioned in different vertical locations within each card, resulting in an uneven layout.

With these styles in place, we are done creating and styling the layout for the second section of our main container.

This tutorial focuses on Playwright visual regression testing, providing a reliable way to test web applications and ensure that they look and behave correctly across different browsers and platforms.

Featured Products: 12 Column CSS Grid

Now, we can move on to the last and final part which is designing the featured products section. This section is relatively straightforward, so let’s dive right in.

We have the product image on the left and some text on the right. Below is our CSS to achieve this:

main .featured-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
}


main .featured-section img {
  grid-column: span 6;
  width: 100%;
  border-radius: 6px;
}


main .featured-section .banner-text {
  grid-column: 8 / span 5;
}
main .featured-section .banner-text h1 {
  margin-bottom: 20px;
  font-size: 3rem;
}


main .featured-section .banner-text p {
  line-height: 28px;
  font-size: 1.1rem;
}

To begin with, we establish a grid container on the .featured-section class element. Then, we define the columns of the grid by setting the grid-template-columns: repeat(12, 1fr) property. This creates 12 equally sized columns using the repeat() function.

Next, to control the overall width of the featured section, we set the max-width to 1200px. This limits the container width to 1200 pixels. Then we set the margin: 60px auto, which centers the section horizontally within its container, creating some space around it. Additionally, we apply a padding of 20px to add some space between the content and the edges of the section.

The featured section contains an image that occupies half of the container’s width. To achieve this visually, we assigned the image to span six columns using grid-column: span 6. By doing so, the image effectively takes up 50% of the available space within the 12 column grid.

Next to the image, we have the banner text represented by the class .banner-text. To position it correctly, we skip column 7 and allocate five columns starting from the eighth column of the grid. This ensures the banner text occupies columns 8 to 12, using the available space.

Explore the best 25 visual regression testing tools for a seamless user experience in 2023. Find your perfect tool today with our comprehensive list.

Lastly, we provide some basic styles to the h1 and the p tag of the .banner-text element to enhance their appearance.

With the completion of this section, we have successfully built and styled the 12 column CSS grid layout for our web page.

However, we must address an important aspect that’s currently missing. Its responsiveness! Right now, our layout is not optimized for smaller screens, resulting in a not-so-seamless experience.

So, in the next section, we will dive right into making web pages responsive. The best part? It’s remarkably simple! By implementing a few changes, we’ll ensure our web page looks seamless on every device.

Responsiveness in 12 Column CSS Grid

In this section, we focus on making the layout more adaptable in smaller screen sizes. To achieve this, we will utilize media queries, which allow us to apply specific styles based on the screen width.

Responsive Testing using LT Browser

Realizing Responsive Header

Let’s begin with the header.

@media screen and (max-width: 868px) {
  header {
    display: flex;
    padding: 5px;
    justify-content: space-between;
  }
 .logo img {
    height: 25px;
  }
  .grid-item-search {
    flex: 1;
    align-items: end;
  }
  .search-input {
    width: 100%;
  }
  .search-button {
    width: 30px;
  }
  .grid-item-account {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .nav-link {
    margin-right: 10px;
  }
}

In the above code snippet, we use a media query to target screens with a maximum width of 868 pixels or less. Within this media query, we made a few changes to enhance the layout of the header to make it more adaptable on smaller screens.

Firstly, we reduced the padding of the header to 5 pixels. This adjustment helps in conserving space and creates a more compact appearance.

Secondly, we switched from a grid layout to a flexbox by setting the header’s display property to flex. By doing so, the header items are aligned in a row, allowing them to better fit within the limited space.

To ensure optimal positioning of the items, we set justify-content: space-between. This aligns the items at the beginning and end of the header, creating space between them and effectively placing them on opposite sides.

Next, we’ll decrease the logo image height from 45px to 25px and apply some simple styles to the search container to ensure it occupies less space.

Moving on to the account section, we targeted the element with the class .grid-item-account and changed its display property to flex, enabling its contents to be displayed in a row instead of occupying separate grid columns. We also set justify-content to the end and align-items to the center. These adjustments optimize the presentation of account elements on smaller screens, efficiently using the available space.

We also reduce the margin-right of individual items to 10 pixels.

If there were multiple items in this section, we could implement a menu to allow the user to toggle between them. However, since we only have two items, a menu is unnecessary for our case.

Boost your testing efficiency with LambdaTest’s Test Intelligence. Gain valuable insights, flaky test trends, and accelerate your release cycles. Try LambdaTest today!

Realizing Products Section Responsiveness

Now that we are done with making our header responsive, let’s move on to the next section of our web page, i.e., the products section.

The above screenshots were rendered using LT Browser — a responsive website checker by the LambdaTest platform.

LT Browser is a responsive testing tool for testing mobile-friendliness. It enables you to conduct responsiveness tests on webpages to ensure they function flawlessly on various screen sizes. With LT Browser, you can access over 50 different device viewports.

Read through the blog to understand what is test observability and how it can improve your testing process.

Catch up on the latest testing tutorials around Selenium automation, Cypress testing, and more. Subscribe to the LambdaTest YouTube Channel for quick updates.

These viewports can be used to assess and fine-tune the responsiveness of your webpage. LT Browser provides viewports for both Android and iOS device viewports, allowing you to test and optimize your 12 column CSS grids.

Check the documentation — Getting Started With LT Browser.

@media screen and (max-width: 968px) {
  .products-container {
    max-width: 100%;
    width: 500px;
    margin: 3em auto;
    gap: 40px;
    grid-template-columns: 1fr;
  }
}

For the products section, we target all the screens with a width of 968px or less.

To begin with, we select the .products-container and set a max-width of 500 pixels to it. This ensures that our container doesn’t take more than 500 pixels width on smaller screens. Next, we adjust the margin to 3em auto. This adds a margin of 3em on top and bottom and auto on the left and right, which centers the container horizontally.

Additionally, we increase the spacing between the items by setting the gap to 40px. Next, we change our layout from 12 columns to 1 column.

By doing this, we ensure that each product takes up the entire container width, allowing it to stack vertically rather than being arranged horizontally. Lastly, we define the columns to be 1fr, which specifies that the grid container should have a single column with a flexible width that occupies the entire available space.

Realizing responsiveness of the ‘Featured Product’

Moving on to the next section of our web page, we have the featured product section.

To optimize its display for smaller screen sizes, let’s add a responsive breakpoint.

@media screen and (max-width: 868px) {
  .featured-section img {
    grid-column: 2 / span 10; /* start at column 2 and span 10 columns*/
    margin-bottom: 20px;
  }


  .featured-section .banner-text {
    grid-column: 3 / span 8; /* start at column 3 and span 8 columns*/
    text-align: center;
  }


  .featured-section .banner-text h1 {
    font-size: 2rem;
  }


  .featured-section .banner-text p {
    line-height: 24px;
    font-size: 1rem;
  }
}

Similar to our header breakpoint, this code snippet also utilizes a media query to target screens with a width of 868 pixels or less. Let’s break it down:

This article sheds light on the best cross browser testing tools to look for in 2023.

Within this media query, we start by targeting the image element within the featured section. We use the grid-column property to specify that the image should start at column 2 and span across 10 columns. This adjustment ensures that the image occupies a significant portion of the available space, making it more prominent on smaller screens.

Additionally, we add a 20px margin at the bottom of the image, creating spacing between the image and the text.

Next, we modify the styles of the banner text element. Using the grid-column property again, we set it to start from column 3 and span across 8 columns. By doing this, we allocate a narrower space for the text content, allowing it to fit more appropriately within the smaller screen size. To ensure better alignment, we also apply the text-align: center property to center the text horizontally.

In order to further optimize the typography within the banner text, we have made some additional adjustments. The font size of the h1 heading is set to 2rem, which ensures it is appropriately sized for smaller screens. To enhance readability, we have also reduced the line height of the paragraph (p) to 24px, which reduces the spacing between lines.

Furthermore, we have adjusted the font size of the paragraph to 1rem, ensuring it remains small and legible on smaller screens.

With these modifications in place, our 12 column CSS grid layout is now fully responsive and adapts seamlessly to all screen sizes.

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

Wrap it up!

A 12 column CSS grid is a powerful tool for creating modern, flexible, and responsive layouts. In this tutorial, we learned everything you need to know about 12 column CSS grids, from the basics of CSS grids to how to create a responsive 12 column grid layout.

We started by discussing what a 12 column grid is, and some real-world examples that use 12 column CSS grids. Then we discussed the prerequisites for 12 column CSS grids. With a 12 column grid layout, we built a fully responsive web page. Additionally, we learned how to make these layouts responsive for different devices. We also discussed browser support for CSS Grids to ensure our grid layout works across all browsers.

I hope this blog has given you a thorough understanding of the 12 column CSS grid and equipped you with the ability to create them.

It’s time for you to make some amazing websites utilizing the power of this incredible layout module!

Until next time, happy coding!

Frequently Asked Questions (FAQs)

What is the 12 column grid structure?

The 12 column grid structure is a design framework used in web development. It divides a webpage into 12 equal-width columns, providing a flexible layout system. Designers can assign different numbers of columns to various page elements, making it easy to create responsive and visually pleasing layouts.

A Complete Guide To CSS Cascade Layers

Tahera Alam — Thu, 20 Jul 2023 09:45:14 +0000

In our increasingly diverse online world, developing websites that cater to different languages and audiences is crucial. In today’s era, a one-size-fits-all approach is no longer sufficient.

CSS — the style language of the web was developed with the English language in mind, and English is written from left to right. But, that’s not the case with all languages. Different languages have different writing directions. Arabic, for example, is written from right to left. Similarly, languages like Japanese and Chinese are written vertically.

The issue arises when our websites need to be localized or cater to multilingual audiences. Conventional CSS properties are based on the physical dimension of the viewport.

We define styles using properties like left, right, top, and bottom. So, when the writing direction changes, they no longer meet our needs.

To fix this problem, we can either manually adjust our styles for different directions or create separate stylesheets for each direction. If you are wondering what’s the problem with this approach, let me give you an example.

Suppose you have an image and some text. You want the image on the left side and the text on the right.

Automate Cypress testing and perform browser automation testing with LambdaTest. Our cloud infrastructure has 3000+ desktop & mobile environments. Try for free!

You can use float:left on the image, and it will work. But, when the direction changes from Left-to-Right (LTR) to Right-to-Left (RTL), you will need to change this float:left to float:right because now our text flows from right to left and we wanted the image to be on the left side.

This means we need to adjust our styles for different languages and directions, and there’s no way we can reuse them.

CSS logical properties provide an alternative approach by allowing us to write styles that adapt based on the logical flow of a document rather than its physical dimension. This means you can apply a float right to the image in a default LTR language like English; however, when that direction changes to RTL, this floating will automatically adjust and act as a float left.

This revolutionary flexibility in styling approach allows us to create adaptive designs that automatically adjust based on the user’s language, reading direction, and layout preferences, thereby eliminating manual adjustments.

In this blog, we look at how you can leverage CSS logical properties to create designs that flawlessly adapt across different writing directions. By the end of this blog, you will have a strong understanding of CSS logical properties and be able to craft designs that seamlessly adjust to various writing modes and directions without requiring manual adjustments.

So, let’s dive right in!

Why do we need CSS Logical Properties?

Before we dive into CSS logical properties, let’s take a step back to understand why we even need logical properties. This will help you better grasp the problem that CSS logical properties are meant to solve.

The problem with traditional CSS properties is that they are based on the physical directions of the viewport. For instance, in CSS, we typically describe boxes by specifying their width, and height, and position them using the top and left attributes. This works well in the case of LTR languages like English, but when the writing direction changes(such as in RTL languages), these properties fail to adapt to that content flow.

Run your Playwright automated testing scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud. Read more.

Let’s look at a simple example to understand this scenario:

In this example, we have two cards that contain an avatar and some text. The first card follows the LTR direction, and the second card follows the RTL direction. Notice the margin between the avatar and the text. For the first card, the margin is on the right of the avatar. So, for the second card, this margin should be flipped to the left.

With conventional CSS properties, we can do this:

.avatar {
  margin-right: 1rem;
}


.rtl .avatar {
  margin-right: 0;
  margin-left: 1rem;
}

In the second card’s avatar, we first set margin-right to 0 since it’s not needed there and then added margin-left to have a margin between the avatar and the text, just like the first card. With this, the second card’s avatar also has a margin, but instead of being on the right side like the first card, it is on the left side because we have an RTL direction here.

It’s fine in our case but imagine doing that for a large-scale project! It would be nearly impossible to tweak every property to adapt to different writing directions.

That’s where CSS logical properties come in. CSS logical properties provide a way to write styles that adapt automatically based on the writing mode of the content. For example, to achieve the above scenario where our margin adapts based on the writing direction, we can use the following CSS logical properties:

.avatar {
margin-inline-end: 1rem;
}

We just set this property on the avatar, and it sets the margin right when the direction is LTR and the margin-left when the direction is RTL. This means our margin adapts based on the direction. Isn’t it incredibly powerful?

Let’s now look at another example where we utilize CSS logical properties in a grid-based layout:

HTML:

<div class="container">
      <h1>
        Supercharge Your Testing with
        <a href="https://www.lambdatest.com/">LambdaTest</a>
      </h1>
      <div class="toggle-container">
        <input type="checkbox" id="toggleButton" class="toggle-input" />
        <label for="toggleButton" class="toggle-label"></label>
        <div class="toggle-text">Toggle Writing Mode</div>
      </div>


      <div class="grid">
        <a href="https://www.lambdatest.com/cross-browser-testing" class="item"
          >Cross-Browser Testing</a
        >
        <a href="https://www.lambdatest.com/responsive-testing" class="item"
          >Responsive Testing</a
        >
        <a href="https://www.lambdatest.com/selenium-testing" class="item"
          >Selenium Testing</a
        >
        <a href="https://www.lambdatest.com/real-time-testing" class="item"
          >Real-Time Testing</a
        >
        <a href="https://www.lambdatest.com/playwright-testing" class="item"
          >Playwright Testing</a
        >
        <a href="https://www.lambdatest.com/cypress-testing" class="item"
          >Cypress Testing</a
        >
      </div>
    </div>

CSS:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f5f5f5;
}


.container{
  margin: 0 auto;
  padding: 30px;
  text-align: center;
}


h1 {
  font-size: 28px;
  color: #111;
  margin-bottom: 40px;
}




a {
  color: #1a73e8;
  text-decoration: none;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  width: 800px;
  margin: 0 auto;
  writing-mode: horizontal-tb;
}


.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}




.toggle-input {
  display: none;
}
.toggle-label {
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background-color: #ccc;
  position: relative;
  cursor: pointer;
}
.toggle-label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.3s ease;
}
.toggle-input:checked + .toggle-label {
  background-color: #1a73e8;
}
.toggle-input:checked + .toggle-label:before {
  transform: translateX(20px);
}


.toggle-text {
  margin-left: 10px;
  font-size: 17px;
  color: #111;
}
.item {
  background-color: #fff;
  border-radius: 4px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  transition: background-color 0.3s ease;
}


.item:hover {
  background-color: #f5f5f5;
}

*Inspect web elements to help developers and testers to debug UI flaws or make modifications in HTML or CSS files. Learn how to inspect element on mac. *

Output:

In this example, we have a grid container with the class .grid. The container has a width of 800px. When the writing mode property is set to horizontal-tb, the grid layout appears as expected. The grid items are arranged in three columns.

However, when you toggle the writing mode button to vertical-rl, the grid layout gets affected. While the grid items still maintain their alignment, the appearance of the grid changes. This issue arises from the container’s width, which remains fixed at 800 pixels and fails to adapt to the vertical flow of content. As a result, the grid appears misaligned within the vertical writing mode.

To address this issue, instead of using width on the .grid container, we can use the inline-size property:

.grid {
inline-size: 800px;
}

This ensures that the container’s width adjusts dynamically based on the content flow, allowing the grid to adapt correctly to the vertical writing mode.

These examples should give you a clear understanding of the importance of CSS logical properties.

Additionally, here are a few leading names in the industry that leverage CSS logical properties to make their designs more flexible and adaptable across different languages and writing directions:

Need a great testing solution for Safari browser for Windows? Forget about emulators or simulators — use real online browsers. Try LambdaTest for free!

Amazon

This multinational eCommerce company demonstrates its commitment to catering to a global audience by offering localized versions of its website in various languages.

Here are two prominent examples showcasing Amazon’s commitment to serving diverse markets:

Amazon Arabic
Amazon Japanese

BBC

This international media organization strives to bridge linguistic and cultural gaps by offering tailored experiences to its global audience.

Below is an illustration of BBC Arabic:

Test native, hybrid, and web apps on any mobile OS with our free online emulator Android . Sign up to optimize app performance.

Wikipedia

This collaborative online encyclopedia’s dedication to inclusivity is evident through its localized versions in different languages.

One such version is Wikipedia Arabic:

Block and Inline Dimension

We now know that CSS logical properties are based on a flow-relative approach rather than the physical direction. Block and inline dimensions are the building blocks of this flow-relative approach. Let’s explore what they mean.

Block dimension is the dimension in which blocks of content are placed. You can think of the block dimension as the direction in which blocks, such as paragraphs, display one after the other. In an English document, the block flow is top-to-bottom.

The inline dimension refers to how the text flows in a sentence. For instance, the inline dimension is horizontal in English or Arabic documents with horizontal text flow.

Note that the meaning of inline and block can change depending on the writing mode. For languages like English, the inline is the horizontal dimension, whereas the block is the vertical one. For languages like Japanese, the inline is the vertical dimension, and the block is the horizontal one.

Below is a visualization of the block and inline dimensions in horizontal and vertical writing modes:

The key idea behind inline and block dimensions is that instead of focusing on the element’s physical directions, you need to consider them as either inline or block.

To illustrate this, let’s consider the common practice of centering an element using margin-right and margin-left:

.element {
  margin-left: auto;
  margin-right: auto;
}

Instead of focusing on the individual right and left margins; we can achieve the same result with a single line of code using the margin-inline logical property. This property sets both the margin-left and margin-right simultaneously:

.element {
  margin-inline: auto;
}

Output:

Test native, hybrid, and web apps on any mobile OS with our free online android emulator. Sign up to optimize app performance.

Similarly, the margin-block property sets both margin-top and margin-bottom. In addition, CSS logical properties provide us with similar shorthands for controlling borders and paddings.

For instance, if you have a design that requires borders only on the sides, you can use the border-inline property instead of individually specifying each physical direction. This allows for a more efficient approach to styling.

Below is a visualization that shows physical border and padding properties along with their logical shorthand alternative:

CSS Logical Properties for Floating and Positioning

Floating and positioning are commonly used techniques in web design to control the layout. Traditionally, CSS has relied on physical properties, such as float *and *clear, based on the direction of the writing mode (e.g., left-to-right or right-to-left).

The CSS logical properties aim to provide a more flexible and intuitive approach to element positioning by decoupling them from the specific writing direction.

The specification for CSS logical properties introduces a set of properties that can be used to control the floating and positioning of elements.

The below table shows these logical properties along with their corresponding physical properties:

CATEGORY	LOGICAL PROPERTY	PHYSICAL PROPERTY
Floating and Clearing	float: inline-start	float: left
	float: inline-end	float: right
	clear: inline-start	clear: left
	clear: inline-end	clear: right
Insets	inset-inline-start	left
	inset-inline-end	right
	inset-block-start	top
	inset-block-end	bottom
Text Alignment	text-align: start	text-align: left
	text-align: end	text-align: right

In addition to these CSS logical properties, the specification also introduces some additional shorthand properties that leverage the ability to address block and inline dimensions.

These shorthand properties provide convenient ways to simultaneously set values for both the inline and block dimensions, except for the inset property, which has a physical mapping for multi-value settings.

Below are these additional shorthand properties:

SHORTHAND PROPERTY	DESCRIPTION
inset-inline	Sets values for both inset-inline-start and inset-inline-end properties simultaneously, addressing the inline dimension.
inset-block	Sets values for both inset-block-start and inset-block-end properties simultaneously, addressing the block dimension.
inset	Sets values for all four inset properties (inset-inline-start, inset-inline-end, inset-block-start, and inset-block-end) simultaneously, with a physical mapping when using multiple values.

Explore our comprehensive guide on GUI Testing, uncovering its vital role in software development. Learn about its different types, best practices, and steps for effective implementation to enhance your software’s user interaction.

Now, let’s look at some practical examples of using these CSS logical properties to ensure you have a solid understanding.

Example of float and clear

You might be wondering about the relevance of using the float property in 2023. However, when we encounter a situation where we need some text to wrap around a shape, the good old float remains the best approach.

In this example, we have two cards. To wrap our text around the image, we can do the following:

img {
  float: left;
  margin-right: 20px;
}

We floated the image to the left and added a margin-right. But this will work only for the LTR layout card. To make this work in the RTL card, we will need to adjust it like this:

html[dir="rtl"] img {
  float: right;
  margin-right: 0;
  margin-left: 20px;
}

Here, we floated the image to the right because our layout is right-to-left. We then set margin-right to 0 and added margin-left of 20px.

Here’s how we can achieve the same using float:inline-start and margin-inline-end CSS logical properties, and it will work irrespective of our writing direction:

img {
  float: inline-start;
  margin-inline-end: 20px;
}

In the case of an LTR direction, inline-start floats the image to the left, and in the case of an RTL direction, it floats the image to the right. In the case of LTR, margin-inline-end adds a margin to the right; in the case of RTL, it adds a margin to the left.

This dynamic behavior of CSS logical properties demonstrates its flexibility, which is fascinating.

Looking to manage your tests more efficiently? In this blog, explore a variety of test case management tools and select the one that suits your team’s needs.

Example of CSS Logical Properties for positioned layout

In web development, positioning elements are crucial for creating visually appealing and user-friendly interfaces. One common use case of positioning is the creation of a floating sidebar that remains fixed in a specific position as the user scrolls through a webpage.

Traditionally, we have used properties like top, right, bottom, and left to achieve this effect. These properties allow us to position an element relative to its containing block and control its placement on the screen. However, with the introduction of CSS logical properties, we now have additional options for positioning elements based on text flow in different writing modes.

Let’s look at an example where we utilize the CSS logical properties inset-block-start and inset-inline-end to create a floating sidebar that adapts based on the direction.

HTML:

<div class="sidebar">
      <div class="product">
        <img
          src="https://www.lambdatest.com/resources/images/hyperexecute/hyperlogo.svg"
          alt=""
          class="logo"
        />
      </div>
      <div class="links">
        <h2>Why HyperExecute?</h2>
        <ul>
          <li>Ai-powered workflows</li>
          <li>Dependency caching</li>
          <li>Customizable test environments</li>
          <li>Automatic tunnel management</li>
        </ul>
      </div>
    </div>
    <main>
      <h1>
        Ai-powered blazing fast <br />
        end-to-end test orchestration cloud
      </h1>
      <p class="info-text">upto <span>70% faster</span> than any cloud grid.</p>
      <div class="buttons">
        <a 
          href="https://hyperexecute.lambdatest.com/quickstart?origin=try-now"
          class="button"
          id="tryNow"
          target="_blank"
          >Try it now</a
        >
        <a 
          href="https://www.lambdatest.com/demo?type=Hyperexecute"
          class="button"
          id="bookDemo"
          target="_blank"
          >Book a demo</a
        >
      </div>
      <h2 class="features">Features you must know about</h2>
      <div class="cards-container">
        <div class="card">
          <div class="heading">Runs on Linux containers, macOS and Windows</div>
          <p>
            HyperExecute platform comes with feature-packed hosted runners for
            every major OS including Windows, MacOS, and Linux containers. The
            runners come with pre-installed support for all major programming
            languages and frameworks including Java, Node.js, Python, PHP, GO,
            C#, Rust, and Ruby.
          </p>
          <a 
            href="https://hyperexecute.lambdatest.com/hyperexecute"
            class="button"
            target="_blank"
            >Try it now</a
          >
        </div>
        <div class="card">
          <div class="heading">AI-Powered Test Orchestration</div>
          <p>
            Through a simple YAML file, HyperExecute allows you to group and
            distribute tests intelligently across runner environments. The
            AI-powered test orchestration takes into account past test run data,
            and automatically reorders the test runs to surface failures faster
            and cuts down developer feedback time.
          </p>
          <a 
            href="https://hyperexecute.lambdatest.com/hyperexecute"
            class="button"
            target="_blank"
            >Try it now</a
          >
        </div>
        <div class="card">
          <div class="heading">Real Time Console and Execution Logs</div>
          <p>
            In legacy test clouds you get separate terminal and test execution
            logs, stitching them together is an ETL nightmare. With
            HyperExecute, you get a single automation dashboard view with both
            terminal logs of test commands and complete test execution logs. All
            test execution logs like terminal logs, test run video, network log,
            commands, exceptions, and more, all available in a single intuitive
            dashboard. 
          </p>
          <a 
            href="https://hyperexecute.lambdatest.com/hyperexecute"
            class="button"
            target="_blank"
            >Try it now</a
          >
        </div>
        <div class="card">
          <div class="heading">Automatic report generation</div>
          <p>
            With all test execution data available in a single place,
            HyperExecute enables developers and testers to truly analyze the
            quality of their builds on a single platform through AI-powered
            automatic reports generated for each build run. Eliminate the need
            of gathering data from multiple sources and building extensive
            reporting frameworks.
          </p>
          <a 
            href="https://hyperexecute.lambdatest.com/hyperexecute"
            class="button"
            target="_blank"
            >Try it now</a
          >
        </div>
      </div>
    </main>

CSS:

body {
  writing-mode: horizontal-tb !important;
  writing-mode: vertical-rl;
  background-color: #05010c;
  color: #ffffff;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}


.sidebar {
  block-size: 100%; /* Equivalent to height in vertical direction */
  inline-size: 30%; /* Equivalent to width in vertical direction */
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  background-color: #0e1117;
  overflow-y: auto;
}


.product {
  margin-inline: 20px;
  margin-block: 30px;
}


.logo {
  max-width: 200px;
  height: auto;
}
a {
  text-decoration: none;
  color: inherit;
}
.links {
  margin: 20px;
}


h2 {
  font-size: 20px;
  margin-block-end: 30px;
  color: #ffffff;
}


ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}


li {
  display: flex;
  align-items: center;
  margin-block-end: 20px;
  color: #ffffff;
  cursor: pointer;
}


main {
  margin-inline-start: 30%;
  padding: 30px;
  padding-top: 40px;
}


h1 {
  font-size: 38px;
  margin-bottom: 20px;
  line-height: 1.3;
}


.info-text {
  font-size: 20px;
  margin-bottom: 30px;
}
span {
  background: -webkit-linear-gradient(left, #ff10bc, #ffb501);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 1px;
}


.button {
  padding: 10px 18px;
  width: auto;
  font-size: 16px;
  background-color: #0dbcc4;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
}
.buttons {
  display: flex;
  gap: 12px;
  flex-direction: row;
}
@media only screen and (max-height: 468px) and (writing-mode: vertical-rl) {
  .buttons {
    flex-direction: column;
  }
}
#tryNow {
  background-color: #ffffff;
  color: #0e1117;
  padding: 12px 18px;
}


#bookDemo {
  background-color: transparent;
  border: 1px solid #aaa;
  padding: 12px 18px;
}


.features {
  font-size: 28px;
  margin-bottom: 30px;
}


.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
}


.card {
  padding: 20px;
  background-color: #0e1117;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  justify-content: space-between;
  transition: transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}


.heading {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #a0a0a0;
}


.card p {
  margin-bottom: 20px;
  line-height: 1.5;
  color: #a0a0a0;
}

The ultimate guide to software testing metrics: definition, types, and examples explained for informed decisions. Enhance your testing process now!

In the above example, we have a sidebar and a main section. The sidebar remains fixed on the left side of the screen as the user scrolls through the main content. We utilized the logical properties inset-block-start and inset-inline-end to create this sidebar.

The inset-block-start property positions the sidebar relative to the top edge of its containing block, while the inset-inline-end property positions it relative to the right edge.

If we change the writing-mode property of the body to vertical-rl by uncommenting the following line, the floating sidebar will adapt to the new text flow direction and position itself to the vertical left making our layout responsive.

body {
writing-mode: horizontal-tb !important;
}

To ensure responsive design for any layout, you can refer to the detailed tutorial on Responsive Design that covers the basics of designing responsive layouts.

In addition to designing a responsive layout, it’s crucial to conduct responsiveness tests on various viewports. To simplify this process, you can take advantage of LT Browser 2.0, offered by LambdaTest. This dev-friendly tool provides over 50 pre-installed viewports with different screen resolutions, allowing you to test your website’s responsiveness effortlessly. Additionally, LT Browser 2.0 offers a range of advanced developer tools that you can utilize.

For more information about LT Browser 2.0, we have an informative tutorial available. Feel free to explore the following tutorial, which provides detailed insights into LT Browser 2.0 and its features.

Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around Selenium testing, Playwright testing, and more.

This guide explores Digital Transformation, its benefits, goals, importance and challenges involved in Digital Transformation.

Example of CSS Logical Properties for text-align

When it comes to aligning text in CSS, logical values are available that take text direction inot account. Instead of relying on the traditional left and right values, we can leverage the more versatile start and end values. Let’s see an example to understand how these logical values work for text alignment.

HTML:

<div class="toggle-container">
      <input type="checkbox" id="toggleButton" class="toggle-input" />
      <label for="toggleButton" class="toggle-label"></label>
      <div class="toggle-text">Toggle the direction</div>
    </div>


<div class="container">
      <div class="block block1">
        <h3>Block 1</h3>
        <p>
          This block uses <code>text-align: right;</code> to align text to the
          physical right.
        </p>
      </div>
      <div class="block block2">
        <h3>Block 2</h3>
        <p>
          This block uses <code>text-align: end;</code> which aligns the text to
          the logical right based on the text direction.
        </p>
      </div>
    </div>

CSS:

body {
  font-family: Arial, Sans-serif;
}
.container {
  display: flex;
  justify-content: center;
  gap: 30px;
}


.block {
  direction: ltr /change it to *rtl*/;
  width: 300px;
  height: 150px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 20px;
}


.block1 {
  text-align: right;
}


.block2 {
  text-align: end;
}

In this article, we will delve into the fundamentals of Quality Assurance, its key principles, methodologies, and its vital role in delivering excellence.

In the above example, we have two text blocks. In the first block, we align the text to the right using the property text-align: right, while in the second block, we use text-align: end, to do the same. By default, when the text direction is set to left-to-right (ltr), both blocks appear aligned to the right.

However, things get interesting when we toggle the text direction from LTR to RTL in the .block class. Despite this change, the alignment of the first block remains consistent and stays on the right side, which is its logical end in the RTL direction. On the other hand, the second block adapts to the logical end and aligns itself to the left side, according to the LTR direction.

CSS Logical Properties for Margins, Borders, and Paddings

Margins, borders, and paddings are some of the first concepts we learn in CSS. They have the highest significance when it comes to creating well-designed layouts.

The CSS logical properties specification introduces a set of properties dedicated to margins, borders, and paddings, allowing us to create flexible layouts that adapt to different directions. The specification also defines how logical values are mapped to their corresponding physical values.

Assuming a horizontal-tb writing mode from left to right, the CSS logical properties margin-inline-start is equivalent to margin-left because the inline direction runs horizontally from left to right.

However, it’s important to note that the mappings change depending on the writing mode and text direction. If the writing mode remains horizontal-tb, but the text direction changes to right-to-left, margin-inline-start would be equivalent to margin-right because now the inline direction runs horizontally but from right to left.

In a vertical writing mode, margin-inline-start would be equivalent to using margin-top.

Here is a table illustrating the mappings between CSS logical properties and their corresponding physical properties in a horizontal-tb writing mode with an LTR direction:

LOGICAL PROPERTY	PHYSICAL PROPERTY
border-block-end	border-bottom
border-block-end-color	border-bottom-color
border-block-end-style	border-bottom-style
border-block-end-width	border-bottom-width
border-block-start	border-top
border-block-start-color	border-top-color
border-block-start-style	border-top-style
border-block-start-width	border-top-width
border-inline-end	border-right
border-inline-end-color	border-right-color
border-inline-end-style	border-right-style
border-inline-end-width	border-right-width
border-inline-start	border-left
border-inline-start-color	border-left-color
border-inline-start-style	border-left-style
border-inline-start-width	border-left-width
border-start-start-radius	border-top-left-radius
border-end-start-radius	border-bottom-left-radius
border-start-end-radius	border-top-right-radius
LOGICAL PROPERTY	PHYSICAL PROPERTY
border-end-end-radius	border-bottom-right-radius
margin-block-end	margin-bottom
margin-block-start	margin-top
margin-inline-end	margin-right
margin-inline-start	margin-left
padding-block-end	padding-bottom
padding-block-start	padding-top
padding-inline-end	padding-right
padding-inline-start	padding-left

This detailed guide explains how to detect flaky tests, its causes, strategies to reduce flakiness and much more.

Additionally, some shorthand properties target both blocks or both inline edges of the box simultaneously. These shorthands have no physical equivalent:

PROPERTY	DESCRIPTION
border-block	Sets border-color, border-style, and border-width for both block borders.
border-block-color	Sets border-color for both block borders.
border-block-style	Sets border-style for both block borders.
border-block-width	Sets border-width for both block borders.
border-inline	Sets border-color, border-style, and border-width for both inline borders.
border-inline-color	Sets border-color for both inline borders.
border-inline-style	Sets border-style for both inline borders.
border-inline-width	Sets border-width for both inline borders.
margin-block	Sets all block margins.
margin-inline	Sets all inline margins.
padding-block	Sets block padding.
padding-inline	Sets inline padding.

Now that we are familiar with the CSS logical properties of margins, borders, and paddings, let’s apply some of them to a few practical examples.

Example of margin

Let’s look at an example where we utilize the CSS logical properties to set flow relative margin, which adapts based on the writing direction.

HTML:

<p class="direction-text">Left to Right (LTR)</p>
    <div class="card">
      <div class="avatar">
        <video
          src="https://www.lambdatest.com/resources/images/hyperexecute/1stanimation.webm"
          autoplay
          loop
        ></video>
      </div>
      <div class="content">
        <h2>HyperExecute</h2>
        <p>HyperExecute is an AI-powered blazing fast end-to-end test orchestration cloud.</p>
      </div>
    </div>


    <p class="direction-text">Right to Left (RTL)</p>
    <div class="card rtl">
      <div class="avatar">
        <video
          src="https://www.lambdatest.com/resources/images/hyperexecute/1stanimation.webm"
          autoplay
          loop
        ></video>
      </div>
      <div class="content">
        <h2>HyperExecute</h2>
        <p>HyperExecute هو سحابة لتنظيم الاختبارات من البداية إلى النهاية ، وهو مدعوم بالذكاء الاصطناعي ويتميز بسرعة فائقة.
        </p>
      </div>
    </div>

CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
}


.direction-text {
  text-align: center;
}


.card {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px auto;
  max-width: 500px;
}


.rtl {
  direction: rtl;
}


.avatar {
  margin-inline-end: 1rem;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: lightblue;
  overflow: hidden;
}


.avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.content {
  flex: 1;
}


h2 {
  font-size: 24px;
  margin-bottom: 10px;
}


p {
  font-size: 16px;
  color: #666;
  line-height: 1.4;
}

Deep dive to learn about test automation, its uasage, types and also gain insights on how to get started with automated testing.

In the above example, we have two cards with an avatar and some text. For the first card, which has an LTR direction, the margin between the avatar and the text should be on the right of the avatar. While for the second card, which has an RTL direction, this margin should be on the left.

To achieve this, we used the margin-inline-end property to set a 1rem margin between the avatar and text, which effectively adapts to writing directions. For the LTR direction card, margin-inline-end acts as margin-right and sets the margin on the right side of the avatar; for the RTL direction card, it acts as margin-left and sets the margin on the left side of the avatar.

Example of border

Let’s look at an example of a logical border property that caters to different writing directions:

In the above illustration, we have a left border on both cards, as highlighted in blue. To achieve this with conventional CSS properties, we would do the following:

For the LTR card:

.card {
  border-left: 6px solid blue;
}

For the RTL card:

html[dir="rtl"] .card {
  border-left: 0;
  border-right: 6px solid blue;
}

For the RTL card, we set the border left to 0 and applied a border right of 6px solid blue.

To achieve the same without requiring any manual adjustments, we can utilize the border-inline-start logical property. This will set the border left in the LTR direction and the border right in the RTL direction.

.card {
  border-inline-start: 6px solid blue;
}

Using logical properties not only streamlines our CSS but also improves efficiency in managing styles across various writing directions.

Discover what load testing is and why it’s critical in ensuring optimal system performance. Understand its role in identifying bottlenecks, enhancing scalability, and improving user experience.

Example of padding

Below is an example that utilizes logical padding to cater to different writing directions:

In this example, we have two cards: the first one with a left-to-right (LTR) direction and the second one with a right-to-left (RTL) direction.

In the LTR direction card, we highlighted the right and left padding, which is set to 3rem *and *1rem, respectively(this padding variation is for easier visualization only. It’s not recommended to use inconsistent padding.). For the second card, which has a right-to-left direction, the padding needs to be flipped to *3rem *on the left and 1rem on the right.

Let’s see how we would manage this without CSS logical properties:

For the LTR card:

.card {
  padding-left: 3rem;
  padding-right: 1rem;
}

For the RTL card:

html[dir="rtl"] .card {
  padding-right: 3rem;
  padding-left: 1rem;
}

We are manually tweaking padding for the RTL card which is not feasible especially when we have a large set of styles. Let’s now achieve the same more effectively using CSS logical properties:

.card {
  padding-inline-start: 3rem;
  padding-inline-end: 1rem;
}

Just these two lines, and our right and left padding will adjust based on the writing direction! Isn’t it powerful?

CSS Logical Properties for Sizing

Sizing is an important aspect of web design. It allows us to determine the dimensions and proportions of elements on a webpage. Conventionally, in CSS, we use properties like *width *and *height *to define an element’s size. However, with logical properties for sizing, we now have a more flexible and contextual approach.

The below table shows these CSS logical properties alongside corresponding physical properties. It’s important to note that the mappings between logical and physical properties depend on the writing mode. For instance, in a horizontal writing mode like English or Arabic, the logical property inline-size sets the width of an element.

Similarly, the block-size property sets the height.

On the other hand, if you were in a vertical writing mode, the CSS logical properties inline-size would be mapped to the physical property height. And the block-size property would be equal to the width.

LOGICAL PROPERTY	PHYSICAL PROPERTY
inline-size	width
block-size	height
min-inline-size	min-width
min-block-size	min-height
max-inline-size	max-width
max-block-size	max-height

Example of width:

Here’s an example that showcases how inline-width and block-width behave in case of different writing directions:

HTML:

<div class="toggle-container">
      <input type="checkbox" id="toggleButton" class="toggle-input" />
      <label for="toggleButton" class="toggle-label"></label>
      <div class="toggle-text">Toggle Writing Mode</div>
    </div>
    <div class="container">
      <div class="card">
        <p>
          This card uses the logical property <code>inline-size</code> and
block-size</code> to define its size.
        </p>
      </div>
    </div>

CSS:

body {
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  writing-mode: horizontal-tb;
}

.card {
  border: 1px solid #ccc;
  padding: 20px;
  inline-size: 300px;
  block-size: 200px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.card p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 0;
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px;
}

.toggle-input {
  display: none;
}
.toggle-label {
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background-color: #ccc;
  position: relative;
  cursor: pointer;
}

.toggle-label:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.toggle-input:checked + .toggle-label {
  background-color: #1a73e8;
}

.toggle-input:checked + .toggle-label:before {
  transform: translateX(20px);
}

.toggle-text {
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
}

Deep dive to learn about test automation, its uasage, types and also gain insights on how to get started with automated testing.

In this example, we defined the size of the .card element using inline-size and block-size logical properties. Initially, when the writing direction is horizontal, the inline-size property sets the width to 300px, and block-size sets the height to 100px.

When we toggle the writing mode and change the direction to vertical, it behaves oppositely. The inline-size property now sets the height to 300px, and the block-size sets the width to 200px.

Browser Support for CSS Logical Properties

One of the key factors to consider when working with CSS is browser compatibility. Testing browser compatibility of the CSS properties helps ensure a consistent experience of our website across different platforms.

To test browser compatibility and to know how your CSS properties would behave in real-world browser environments, you can use LambdaTest, a unified digital experience testing platform that allows you to test your website on an online browser farm of 3000+ real browsers and operating systems.

By utilizing LambdaTest, you can identify any compatibility issues and make the necessary adjustments to ensure your CSS properties function smoothly across multiple browsers. Now, to talk about the support for CSS logical properties, fortunately, its support has significantly improved across major modern browsers.

Today, all leading browsers, like Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, etc., have varying support for CSS logical properties.

Let’s look at the support provided by some of these browsers in detail.

Support on Chrome

In Chrome versions 4 to 68, CSS logical properties are supported partially with the prefix -webkit-. This support includes -before and -end values for -block-start and -block-end properties and start and end values for text-align, margin, border, and padding properties.

.element {
  -webkit-text-align: start;
}

Moving on to 69 to 86 versions of Chrome, there is a lack of support for properties like margin-block, margin-inline, padding-block, padding-inline, and all the inset shorthand properties.

Furthermore, Chrome versions 69 to 86 do not support border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius properties.

Similarly, Chrome versions 87 to 88 also lack support for the border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius properties.

Fortunately, starting from version 89, Chrome offers full support for all these properties, resolving the earlier limitations.

Learn the best practices and techniques for effective code review. Improve code quality, software development processes with expert tips and insights.

Support on Edge

In Edge versions 79 to 86, there is no support for margin-block, margin-inline, padding-block, padding-inline, or any of the inset shorthand properties. However, like in newer Chromium browsers, these properties can be enabled in newer versions of Edge by using the #enable-experimental-web-platform-features flag.

Furthermore, in Edge versions 79 to 86, the properties border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius are not supported. However, starting from version 99, Edge offers full support for CSS logical properties, including these border-radius properties.

Support on Firefox

In Firefox versions 41 to 65, there is no support for properties such as margin-block, margin-inline, padding-block, padding-inline, or any of the inset shorthand properties. But you can support these properties in newer Chromium browsers by enabling the #enable-experimental-web-platform-features flag.

Additionally, in Firefox versions 41 to 65, border-start-start-radius, border-start-end-radius, border-end-start-radius, and border-end-end-radius properties are not supported.

However, starting from version 66, Firefox provides full support for all CSS logical properties.

Now that we have explored the browser compatibility of logical properties across some major browsers, you can check out the rest in the below illustration that shows a detailed overview of its support across all relevant browsers versions:

By utilizing LambdaTest’s Real Time Browser Testing functionality, you can conduct cross browser testing of the websites for CSS logical properties on various combinations of browsers and operating systems.

For further details, please refer to the documentation on Real Time Browser Testing.

Learn the essential concepts, techniques, and strategies for high-quality software through effective Software Quality Assurance. This guide covers its importance, benefits, practical tips, and best practices.

Advantages of using CSS Logical Properties

When styling our web pages, CSS logical properties provide us with a powerful and flexible approach. They offer a range of advantages that make our lives as developers easier and more efficient. In this section, we’ll explore some of the key benefits of using logical properties.

Adaptability and Flexibility

With CSS logical properties, we can create layouts that adapt seamlessly to different writing modes and language directions. Instead of relying on specific directions like left or right, we can use properties such as start and end to ensure consistent alignment regardless of the text direction.

This flexibility significantly enhances the accessibility and user experience of the websites.

Improved Localization Experience

CSS logical properties can be instrumental in accelerating the development (particularly content) of websites with a global audience. Using logical properties, we can empower websites to be easily localized for various languages and regions.

Since logical properties adjust automatically based on the text direction, we no longer need to modify our stylesheets when translating content into languages that read RTL or any other direction. This saves time and effort, making localization a smoother process.

Reduced Maintenance Efforts

One of the significant advantages of using CSS logical properties is the reduction in maintenance efforts. We can streamline our CSS code and minimize redundancy by utilizing CSS logical properties. Instead of duplicating styles for each text direction, we can consolidate them into a single rule, making maintenance and updates much more efficient.

When a change or update is required, we only need to modify the CSS logical properties, and the styles will automatically adapt to different text directions. This simplifies the maintenance process, as we no longer have to update multiple instances of physical properties.

Instead, by utilizing CSS logical properties, we can achieve results across multiple writing modes with fewer lines of code, reducing potential errors and easing future maintenance.

Consistency in styling

We can use CSS logical properties to maintain consistency across different languages and writing directions. For instance, instead of relying on physical properties such as border-left and border-right to create borders on specific sides of an element, we can use CSS logical properties like border-start and border-end. This approach ensures consistent border styling across different text directions.

Using CSS logical properties, you can ensure that spacing, alignment, and positioning remain consistent, regardless of the text direction.

Wrap it up!

As we strive to make internet and web browsing an inclusive place, logical properties play a pivotal role in letting us achieve that. By writing styles that can adapt to diverse languages and their requirements, we can ensure that our users worldwide have a seamless experience catered to their linguistic needs.

In this blog, we learned CSS logical properties in detail, including exploring practical examples of their needs. We looked at physical alternatives of floating and positioning, margins and paddings, borders and sizings which are fundamental aspects of CSS. We learned how logical properties revolutionize the way these properties work by providing powerful alternatives that adapt to different writing modes and directions.

We also covered some significant advantages of using logical properties, followed by ensuring their compatibility across browsers. I hope this blog has given you a thorough understanding of CSS logical properties.

It’s time for you to make powerful websites that can adapt to different directions without any manual adjustments!

Until next time, happy building!

Discover the ins and outs of UX testing with this comprehensive guide. Explore various testing methods, tools, and best practices for measuring success.

Frequently Asked Questions (FAQs)

What are the logical properties of CSS?

Logical properties define direction‐relative equivalents of their corresponding physical properties.

Why use CSS logical properties?

Code can be made more legible and understandable using CSS logical properties. For instance, based on the direction of the content, we can utilize logical values like inline-size and block size to establish the size of elements rather than using physical properties like width and height.

What are CSS properties with examples?

A CSS property assigns a style or behavior to an HTML element. Examples include color, border, margin, font-style, and transform.

A Complete Guide To CSS Cascade Layers

Tahera Alam — Tue, 04 Jul 2023 07:24:45 +0000

“Design is not just what it looks like and feels like. Design is how it works,” — Steve Jobs.

These words perfectly capture the essence of creating captivating websites that not only appear visually appealing but also function seamlessly. When it comes to designing complex websites with multiple sources of style, CSS Cascade Layers play a vital role in creating a balance between how things look and how they work.

When designing websites with multiple sources of style, the complexity of managing styles can escalate rapidly. As the number of stylesheets increases, it becomes increasingly challenging to ensure consistency and avoid conflicts in the styling rules applied to various elements. This is where CSS Cascade Layers come in, providing an elegant solution to the problem of conflicting style rules by establishing a clear order of priority.

In this blog on CSS Cascade Layers, we will cover the concept of CSS Cascade, the key steps in the Cascade process, and delve into creating CSS Cascade Layers. We’ll explore named and anonymous layers, Nested Cascade Layers and use media and feature queries for conditional styling. By the end of this blog, you’ll gain a thorough understanding of CSS Cascade Layers and how they can improve your stylesheet organization and maintenance.

Are you new to CSS? Here is our ultimate CSS Cheat Sheet.

So, let’s get started!

What is CSS Cascade?

Before we dive into the CSS Cascade Layers, let’s take a moment to grasp the concept of CSS Cascade. Understanding Cascade before CSS Cascade Layers is crucial because layers are built upon the concept of the Cascade.

The CSS Cascade refers to the process of determining how conflicting styles are resolved and applied to elements on a web page. To determine the values assigned to each property for every element, the user agent follows a series of defined steps. Let’s briefly go over these steps.

Run your Playwright test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud. Read more.

Key steps of the CSS Cascade Process

The Cascade process is an important part of CSS because it determines how styles are applied to different elements on a webpage. Understanding the key steps of the CSS Cascade process is essential for creating effective and efficient stylesheets.

Relevance: The CSS Cascade process begins by gathering all the applicable style rules from various sources, including user-defined styles, author stylesheets, and browser defaults. In this step, the user agent (browser) identifies all the style declarations that match the selectors for each element. For example, if we have an h1 tag on our page, the user agent will find all style declarations that match the h1 selector.
Importance: In this step, the CSS Cascade prioritizes rules based on whether they are normal or important, with the latter having the !important flag set. Important styles take precedence over normal styles.
Origin: In this step, the CSS Cascade sorts the style rules based on their source — author, user, or user-agent(browser).
Layers: After sorting the styles based on origin, the CSS Cascade organizes the styles within each origin based on the CSS Cascade Layer. There are six layers for normal declarations ordered from the first layer created to the last, followed by normal unlayered styles. For important styles, the layer order is inverted, with important unlayered styles having the lowest precedence.
Specificity: Sorts declarations by specificity for conflicting styles in the origin layer that have precedence.
Order of appearance: Finally, if multiple selectors within a single origin layer have the same specificity, the property value from the last declared selector with the highest specificity takes precedence. It’s important to note that order of appearance becomes relevant only when competing declarations in the origin of precedence have the same specificity. Let’s look at an example:

HTML:

<div class="card">
      <h1 class="title">FREE ONLINE CONFERENCE</h1>
      <h2 class="subtitle">Testμ Conference</h2>
      <p class="description">
        Join the free online conference to decode the future of testing!
      </p>
      <p class="date">22 - 24 August, 2023</p>
      <a href="#" class="button">Register for Free</a>
    </div>

CSS:

/* targets <div> element with the class "card" that is a descendent of <body> */
body .card {
  background-color: lightgreen;
}
/*targets the <div> element with the class "card"*/
div.card {
  background-color: #f5f5f5;
}

A comprehensive end-to-end Testing tutorial that covers what e2e Testing is, its importance, benefits, and how to perform it with real-time examples.

At each step, only the declarations that are still relevant proceed to the next step. If there is only one declaration remaining, it becomes the final style, and the subsequent steps become irrelevant.

Origin and Cascade

In CSS, there are three types of origins for styles:

user-agent stylesheets (styles provided by the browser by default)
user stylesheets (additional styles the user may have set)
author stylesheets (styles written by the developer)

These origins determine the source of the styles and their importance. The Cascade organizes these styles into six buckets based on origin and importance.

There are eight levels of precedence in the CSS Cascade. They start with the lowest precedence, which includes normal user-agent styles, and go up to the highest precedence, which includes styles being transitioned. The order of precedence is as follows:

User-agent normal styles
User normal styles
Author normal styles
Styles being animated
Author important styles
User important styles
User-agent important styles
Styles being transitioned

The user-agent refers to the browser itself, the user is the visitor to the website, and the author is the developer. User-agent normal styles have the lowest precedence, while user-agent important styles have the highest precedence.

In this Appium Automation tutorial, learn about Appium and its benefits for mobile automation testing. Take a look at how Appium works and see how to perform Appium testing of your mobile applications.

Origin and Specificity

Multiple origins provide style declarations for the same element. So for each property, the declaration that wins is the one from the origin with the highest precedence. Precedence is determined by the weight assigned to each origin, which can be either normal or important. Declarations with important weight have higher precedence than those with normal weight. So, the value that gets applied is the one from the origin with the highest precedence.

We now know that the value from the origin with the highest precedence gets applied. And if that winning origin has more than one property declaration for the same element, this is where specificity comes into play. For those competing property values, the selector’s specificity is compared, and since every selector has a specificity value associated with it, the one with the highest value wins. Note that specificity weight is never compared between selectors from different origins.

Let’s take a look at an example to understand this better.

HTML:

<div class="container">
      <button>This button has the user agent styles applied.</button>
      <button classname="btn">
        This button has the author styles applied.
      </button>
  </div>

CSS:

button:nth-of-type(2) {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
}

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

In the above example, we have two buttons. The first button doesn’t have any styles applied by the author, so only the user-agent styles (styles provided by the browser) are applied. Additionally, if you have any personal user styles set, they would be applied as well.

The second button, despite having a selector in the author stylesheet with a specificity of 0–0–0 (indicating lowest specificity), applies some styles from the author stylesheet. This seems surprising because we know that styles with higher specificity override styles with lower specificity.

The author styles “win” in this case because when there are conflicting styles from different origins, the CSS Cascade gives precedence to the origin with higher precedence, regardless of the specificity of the styles within that origin.

In our case, the author styles have higher precedence over the user-agent styles. So, even though the specificity of the selector in the author stylesheet is low, the author styles still take precedence over the user-agent styles because of their origin and the CSS Cascade’s priority rules. Origin precedence always wins over selector specificity.

Now that we have a solid grasp of the CSS Cascade process and its steps, let’s dive into the concept of cascade layers.

What are CSS Cascade Layers?

Cascade Layers in CSS provide a means of establishing a hierarchical structure for applying styles to elements on a web page. Similar to how we have six levels of priority based on origin and importance, CSS Cascade Layers allow us to create sub-origin levels of priority within any of those origins. To provide a quick recap, those six levels of priority are:

User-agent normal styles
User normal styles
Author normal styles
Styles being animated
Author important styles
User important styles

In this System testing tutorial, learn why System testing is important and all the intricacies of the System testing process.

With CSS Cascade Layers, we can define sub-levels of priority within any of these origin buckets.

Within each of these origin buckets, multiple CSS Cascade Layers can exist. The order in which these layers are created is crucial because it determines their precedence within their respective origin. This precedence order determines styles that will be prioritized over others during the styling process.

As the order in which layers are created holds great significance, let’s take a moment to understand the precedence order for different origins before we dive into the creation of CSS Cascade Layers.

In normal origin buckets, the sorting of layers follows a simple rule: the styles in the first layer created have the highest precedence, followed by the styles in subsequent layers. On the other hand, unlayered normal styles, which are not assigned to any specific layer, find themselves at the bottom of the priority list, having the lowest precedence.

However, things work differently when it comes to important styles. Unlayered important styles are grouped into a special layer that takes precedence over all non-transitioning normal styles. While these unlayered important styles have less precedence than important styles in specific layers, they still take precedence over normal styles.

Additionally, the order in which layers are declared also plays a role. Important styles in earlier declared layers have higher precedence than important styles in later declared layers within the same origin. This ensures that the most recently declared important styles will be able to follow earlier ones.

Below is a demonstration of the layer order with !important styles:

In the above illustration, we have two layers, namely @theme, and @utilities, followed by an unlayered style block. In this case, the !important style in the @theme layer has the highest precedence, followed by !important styles in the @utilities layer. Next is the !important *unlayered styles which get higher precedence than normal unlayered styles. Lastly, we have the normal *@layer style followed by the normal @theme style, which gets the lowest precedence.

For the rest of this tutorial, we will mainly discuss CSS Cascade Layers in the author stylesheet, but it’s important to remember that cascade layers can also exist in user and user-agent stylesheets.

In this Ad hoc testing tutorial, let’s deep dive into what Ad hoc testing is, its advantages, disadvantages, types, characteristics, and their best practices.

How to create CSS Cascade Layers?

There are different ways to create layers in CSS. Let’s first take a look at the different methods briefly and then we will elaborate on each of them.

*The *@layer statement: *By using the *@layer at-rule followed by one or more layer names, you can create named layers without assigning any styles to them.
The @layer block: With this approach, you can enclose a block of styles within the @layer at-rule. All the styles within the block will be added to a specific named or unnamed layer. This allows you to group related styles within a layer, enhancing code readability and organization.
The @import rule: By utilizing the @import at-rule with the layer keyword or the layer() function, you can import the contents of an external file into a designated layer.

Each method creates a layer, but only if a layer with the specified name hasn’t been created yet. If you don’t provide a layer name in the @layer at-rule or @import with layer(), a new unnamed layer is automatically created.

The @layer statement rule for named layers

The @layer statement rule allows you to create named layers and establish the order of precedence when multiple CSS Cascade Layers are present.

The order of layers is defined by the sequence in which they are declared. One way to establish a layer order is by using @layer followed by the names of one or more layers without assigning any styles initially. For instance, using the @layer statement with the following syntax declares three layers in the order specified:

theme
layout and
utilities

@layer theme, layout, utilities;

It’s common practice to place the @layer declaration as the first line of your CSS. For instance, if the above declaration is the first line of your CSS, then the layer order will be theme, layout, and utilities. This means the theme layer will take precedence over the layout layer, and both the theme and layout layers will take precedence over the utility layer.

If some layers already exist before this declaration, the new layers will be added to the end of the existing layer list as long as there are no conflicting layer names. However, if a layer with the same name already exists, the @layer statement will create only the remaining new layers. For instance, if “layout” is an existing layer, only “theme” and “utilities” will be created. In this case, the final layer order will be layout, theme, and utilities.

The @layer block at-rule for named and anonymous layers

The @layer block at-rule is a powerful feature for creating both named and anonymous layers in CSS. With this rule, we can group and organize our styles within a block and assign them to specific layers.

Before we learn how to create named and anonymous layers with @layer block, let’s look at some great cases where we can utilize the @layer block:

Component-based styling: When building a complex web application with reusable components, the @layer rule can be used to define a layer for each component. This allows for clear separation and encapsulation of styles, making it easier to maintain and modify individual components without affecting the rest of the styles.
Theming: @layer can be used to define layers for different themes or variations of a website or application. By assigning styles to specific layers, you can easily switch between themes or apply styles selectively based on the active theme.
Performance optimization: By grouping related styles together in @layer blocks, you can leverage CSS preprocessors or build tools to include only the required styles selectively. This can reduce the size of the CSS output and improve performance by minimizing unused styles.

Let’s explore how to create named and anonymous types of layers with some examples.

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

Creating Named Layers

To create a named layer, simply enclose your styles within a @layer block, followed by the desired layer name. For example:

@layer myLayer {
  /* Styles specific to the 'myLayer' named layer */
  /* ... */
}

The identifier after the @layer acts as the layer name, and the styles within the at-rule are added to that layer. If the specified layer name doesn’t exist, a new layer will be created. However, if a layer with the same name already exists, the styles will be added to that existing layer. Here’s another example:

/* Creating a named layer: 'header' */
@layer header {
  h1 {
    font-size: 24px;
    color: #333;
  }
}


/* Adding styles to the existing 'header' layer */
@layer header {
  h2 {
    font-size: 18px;
    color: #666;
  }
}

In the above example, we first create a named layer called “header” and assign styles to it. Then, we append additional styles to the same header layer. Reusing the layer name doesn’t create a new layer; it adds styles to the existing layer.

Named layers are useful when you want to categorize and organize styles that are specifically related to a certain section or component of your website. They provide a structured approach to managing styles and make it easier to understand and maintain your codebase.

Creating Anonymous Layers

If you want to create an anonymous layer, simply use the @layer block at-rule without specifying a name. You can only add styles to an unnamed layer during its creation.

Here’s an example:

/* Creating an unnamed, anonymous layer */
@layer {
  p {
    margin: 0;
  }
}

In the above example, we create an unnamed, anonymous layer and add styles to it. Please note that anonymous layers cannot be referenced or have additional styles added to them once created.

Anonymous layers provide flexibility when you want to group styles without assigning them to a specific name. They can be useful for organizing styles that don’t necessarily belong to a named layer but still need to be grouped together.

An Implicit Layer of unlayered styles

As mentioned earlier, this concept refers to the combination of all unlayered styles.
This is not an explicitly created layer but a layer that CSS Cascade creates automatically, combining all the unlayered styles.

Styles declared outside of any layer are combined into an implicit layer. This implicit layer contains unlayered styles and takes precedence over normal layered declarations. It’s always positioned at the end of the layer stack. Let’s take a look at an example.

/* Unlayered styles */
body {
  background-color: #f5f5f5;
  color: #333;
}
/* Creating an unnamed, anonymous layer */
@layer {
  p {
    margin: 0;
  }
}

In the example above, we have unlayered styles (body styles) declared outside of any @layer block. These styles form an implicit layer, which will take precedence over normal layered declarations, even if they have a lower specificity or appear earlier in the code.

Additional considerations

It’s important to note that the order in which layers are created determines their stacking order. Once layers are declared, their order cannot be changed. Additionally, subsequent use of @layer with no layer name creates additional unnamed layers; it does not append styles to a previously existing unnamed layer.

Let’s look at an example to demonstrate how layer order affects the styles:

HTML:

<div class="testimonial-card">
      <p class="testimonial-text">
        <a href="https://www.lambdatest.com/">@lambdatesting</a> is fantastic.
        Cross browser and device testing frustration is minimized. You can't get
        rid of clients that need ie11 nor can you own every device but
        LambdaTest bridges that gap.
      </p>
      <p class="testimonial-author">- Mat Gargano</p>
    </div>

CSS:

@layer page {
  .testimonial-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 400px;
    margin: 0 auto;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
    line-height: 24px;
  }
  .testimonial-text {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .testimonial-author {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }
}


@layer site {
  .testimonial-card {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 400px;
    margin: 0 auto;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
    line-height: 24px;
  }


  .testimonial-text {
    font-size: 18px;
    margin-bottom: 15px;
  }


  .testimonial-author {
 font-size: 16px;
    font-weight: bold;
    color: #333333;
  }
}
/* This has no effect */
@layer site, page;

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

In the above example, we created two layers and defined the styles for the page layer and the site layer using the @layer rule. The styles for the page layer are defined first, followed by the styles for the site layer.

Notice the background-color property of the card in both layers; it is the only property that is different in both layers. In the page layer, we set it to #ffffff, and in the site layer, we set it to #f5f5f5. The last line, @layer site, page; doesn’t do anything in this context. Since the layers site *and *page *were already created and named in the previous *@layer rules, declaring them again on the last line doesn’t have any effect. This line is redundant because the layers are already defined.

Now, if you were to move the last line, @layer site, page; to the first line of the code, the background color of the card changes from #f5f5f5 to #ffffff. This is because when you move the line to the beginning, you are declaring the layers’ site and page before defining the styles for each layer. This change in order affects the cascading behavior of the styles.

The cascading behavior of styles follows a “last-declared, first-applied” order. So, when you move the @layer site, page; line to the beginning, the styles defined in the site layer will take precedence over the styles defined in the page layer. This means that the h1 heading will be underlined and have a green color because the styles from the site layer will take precedence over the styles from the page layer.

Importing style sheets into named and anonymous layers with @import

The @import rule is a powerful feature that allows you to bring in external style sheets and incorporate them into both named and anonymous layers. This capability enhances your ability to organize and manage your styles effectively.

To import style sheets using @import, it’s important to note that the @import statement should be placed before any CSS styles or <style> blocks. However, it can be preceded by an @layer at-rule, which allows you to create layers without immediately assigning styles to them.

Let’s look at some simplified examples to understand better how @import can be used with named and anonymous layers.

Importing into Named Layers

We can import a style sheet into a named layer to group related styles together. Here’s an example:

@import url(“button-styles.css”) layer(buttons);

In the above example, we import the “button-styles.css” file into a named layer called “buttons.” By doing so, we bring in the styles defined in the imported file and associate them specifically with the “buttons” layer.

Importing into Anonymous Layers

If you want to import styles without assigning them to a named layer, you can use an anonymous layer. Consider the following example:

@import url(“common-styles.css”) layer();

We can speed up the software validation process and boost testing coverage by adopting automated testing. However, there are a lot of challenges in applying test automation. In this article on the top 9 challenges in automation testing, we look at the various obstacles and how to deal with them.

In this example, we import the styles from “common-styles.css” into an anonymous layer. This allows the imported styles to be accessible and applied throughout your CSS codebase without being tied to a specific named layer.

Combining Imports in a Single Layer

You can import multiple CSS files into a single layer, making it convenient to manage related styles together. Let’s say we have separate style sheets for comments and social media icons. By importing both files into the “social” layer, we keep the styles for comments and social media icons organized and easily maintainable within a single layer.

@import url("comments.css") layer(social);
@import url("sm-icons.css") layer(social);

Conditional imports with media and feature queries

The @import rule can be a powerful tool when combined with CSS media queries and feature queries, allowing us to import styles based on specific conditions. Media queries are a fundamental component of responsive web design. According to a survey, in the first quarter of 2021, mobile devices alone generated 54.8 percent of global website traffic. This report clearly highlights the importance of a responsive website.

Learn why Python is the top choice for automation testing. This comprehensive tutorial provides a step-by-step guide to automation testing using python to help you streamline your testing process.

However, making a responsive website is not that straightforward. There are multiple involved in it and one such crucial step is responsiveness test on multiple view ports. To test that, you can leverage LT Browser 2.0 by LambdaTest that makes it easier to test a websites’ responsiveness by providing 50+ pre-installed viewports with multiple screen resolutions. Additionally, LT Browser 2.0 also offers a number of sophisticated developer tools that you can leverage.

For further information on LT Browser 2.0, you can check out our tutorial. Feel free to go through the tutorial provided below for LT Browser 2.0.

Catch up on the latest testing tutorials around Selenium automation, Cypress testing, and more. Subscribe to the LambdaTest YouTube Channel for quick updates.

Now that we understand the importance of media queries, let’s see how we can use @import with media queries to import a style conditionally.

Let’s take a look at an example:

@import url("mobile-styles.css") layer(responsive) screen and (max-width: 768px) and (hover: none);
@import url("desktop-styles.css") layer(responsive) screen and (min-width: 769px) and (hover: hover);

In the above example, we are importing style sheets into a named layer called “responsive” based on different screen widths. The first line imports “mobile-styles.css” into the “responsive” layer when the screen width is 768 pixels or less, and the device does not support hover interactions, targeting mobile devices. The second line imports “desktop-styles.css” into the same “responsive” layer when the screen width is 769 pixels or more, and the device supports hover interactions.

By utilizing media queries and feature queries within @import, we can dynamically load stylesheets that respond to specific device conditions, such as different screen sizes, orientations, or supported features. This flexibility allows us to create styles optimized for the features and specifications of the user’s device.

Learn why Python is the top choice for automation testing. This comprehensive tutorial provides a step-by-step guide to python for automation testing to help you streamline your testing process.

What are Nested Cascade Layers?

Nested CSS Cascade Layers allow you to create layers within a named or anonymous layer, providing a hierarchical structure for your styles. This concept is similar to nesting elements within HTML or nesting selectors in CSS, but with CSS Cascade Layers, you can nest entire layers.

Each CSS Cascade Layer, including an anonymous one, can contain nested layers. When a layer is imported into another layer, the imported layer becomes a nested layer. Let’s take a look at the benefits of nested CSS Cascade Layers.

Benefits of Nested Cascade Layers

Enhanced style organization: Nested Cascade Layers bring an additional level of organization to our styles. By creating layers within layers, we can group related styles, making it easier to find and manage specific sets of styles. This hierarchical structure promotes a more intuitive and structured approach to CSS code.
Improved style scope: Nested CSS Cascade Layers provide a clear scoping mechanism for your styles. Styles defined within a nested layer have a narrower scope, limiting their impact to specific elements or components. This prevents unintended style conflicts and allows for more targeted styling, resulting in cleaner and more maintainable code.
Reusability and modularity: By nesting Cascade Layers, you can encapsulate styles within specific contexts or components. This promotes reusability, as you can easily reuse layers with their associated styles in different parts of your project. It also enhances modularity, allowing you to isolate and manage styles for individual components or sections of your application.

In this Appium tutorial, learn about Appium and its benefits for mobile automation testing. Take a look at how Appium works and see how to perform Appium automation testing of your mobile applications.

Creating Nested Cascade Layers

We can create nested cascade layers using the same methods as regular layers. The @layer at-rule is used, followed by the names of one or more layers, utilizing dot notation to indicate nesting. Multiple dots and layer names signify multiple levels of nesting. Let’s see how it works:

@layer page {
  /* Styles for the overall page layer */


  @layer header {
    /* Styles for the nested header layer within the page */
  }


  @layer main-content {
    /* Styles for the nested main-content layer within the page */
  }
}

In this example, we have a named layer called “page,” and within it, we create two nested layers: “header” and “main-content.” Each nested layer can have its own specific set of styles, ensuring a logical separation and hierarchy within the overarching page layer.

In addition to creating nested layers using the @layer at-rule, we can also achieve nesting through the @import rule. Let’s take a look at an example:

@import url("components.css") layer(components);
@import url("components-narrow.css") layer(components.narrow);

Run your Playwright browser testing scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud.

In this case, the first line imports the “components.css” file into the “components” layer. If the imported file contains any layers, they become nested layers within the “components” layer.

The second line imports the “components-narrow.css” file into the “narrow” layer, which is a sub-layer of the “components” layer. This way, the nested “components.narrow” layer is created within the “components” layer, allowing you to further organize and customize your styles based on different contexts or screen sizes.

Nested CSS Cascade Layers also offer the flexibility to target individual elements or components within these nested layers. Once you have established named nested layers within your cascade layers, you can apply styles exclusively to those layers using CSS’s dot notation. Let’s look at an example of how you can add styles to named nested layers:

@layer example.layout {
  main {
    width: 80vw;
  }
}

Given an example, we have a named nested layer called “layout” within the parent layer “example.” By using the @layer at-rule followed by the dot notation (example.layout), we create and target the specific nested layer.

Within the nested layer, we further target elements using selectors, such as main, in this case. Here, we set the width of the main element to 80vw, indicating that it should occupy 80% of the viewport width. This level of customization allows you to tailor the appearance and layout of elements within the named nested layer to align with your design requirements seamlessly.

Inspect web elements to help developers and testers to debug UI flaws or make modifications in HTML or CSS files. Learn how to inspect on Mac.

Determining precedence based on the order of layers

When dealing with cascading style sheets, it’s important to recognize that the order of layers directly affects the order of precedence. It is the primary factor in determining the order of precedence. In the previous sections, we briefly touched upon the significance of layer order and how it affects precedence, but let’s dive deeper into this topic to gain a better understanding.

The precedence order of Regular Cascade Layers

In the context of the regular CSS Cascade Layers, let’s consider the below example:

@import url(A.css) layer(layerOne);
@import url(B.css) layer(layerTwo);
@import url(C.css);

Here we create two named layers, “layerOne” and “layerTwo,” along with one unnamed layer. Let’s assume that the files A.css, B.css, and C.css do not contain additional layers. In that case, the following list shows how styles are sorted according to their precedence, from lowest (1) to highest (10):

Normal styles in “layerOne” (A.css)
Normal styles in “layerTwo” (B.css)
Normal styles in the unlayered sheet (C.css)
Inline normal styles
Animating styles
Unlayered important styles (C.css)
Important styles in “layerTwo” (B.css)
Important styles in “layerOne” (A.css)
Inline important styles
Transitioning styles

Normal styles declared within layers get the lowest priority and are sorted based on the order of layer creation. That means normal styles within the first created layer have the lowest priority, while normal styles in the last created layer have the highest priority. So, in our case, normal styles declared within “layerOne” will be overridden by any subsequent stylings in the list if conflicts arise.

Moving on, we have styles that are declared outside of any layers. These are the styles present in C.css, which were not imported into a specific layer. These unlayered styles take precedence over any conflicting styles from the “layerOne” and “layerTwo” named layers. It’s worth noting that normal styles declared outside of a layer always have higher precedence than normal-importance(styles that don’t have !important) styles within named layers.

Next, we have inline styles, declared using the style attribute, take precedence over normal styles found in both unlayered and layered style sheets (“layerOne” — A.css, “layerTwo” — B.css, and C.css).

Animating styles hold higher precedence than all normal styles, including inline normal styles. Now, we have important styles, denoted by property values with the !important flag, taking precedence over the previously mentioned styles. They are sorted in reverse order of normal styles. Important styles declared outside of a layer have less precedence than those declared within a layer.

Within layers, important styles are also sorted based on the order of layer creation. For important styles, the last created layer possesses the lowest precedence, while the first created layer has the highest precedence among the declared layers.

Inline important styles, once again, have higher precedence than important styles declared elsewhere.

Lastly, we have transitioning styles which hold the highest precedence. When a normal property value is being transitioned, it takes precedence over all other property value declarations, even overriding inline important styles. However, it’s important to note that this precedence applies only during the transition process.

Perform manual or automated cross browser test on 3000+ browsers online. Deploy and scale faster with the most powerful cross browser testing tool online.

The precedence order of Nested Cascade Layers

The precedence order for nested CSS Cascade Layers is similar to that of regular CSS Cascade Layers; the only difference is that they are nested within layers. Let’s break down the precedence rules for nested layers:

Non-nested styles

Styles defined outside of any nested layers take precedence over all other styles. These styles have the highest specificity and affect the entire document unless overridden by more specific styles. Let’s look at an example.

:root {
  --theme: red;
}


/* Later in the stylesheet */
:root {
  --theme: blue;
}

In this example, the later rule overrides the earlier rule, and the value of the — *theme *will be blue because it is defined in the last non-nested layer.

Normal nested styles

Within a parent layer, styles defined in nested layers follow the order in which they are created. If multiple nested layers define conflicting styles for the same element, the style defined in the last-created nested layer takes precedence. Here’s an example:

@layer components {
  :root {
    --theme: red;
    font-family: serif !important;
  }
}


/* Later in the stylesheet */
@layer components.narrow {
  :root {
    --theme: blue;
    font-family: sans-serif !important;
  }
}

If the components.narrow layer is active, the value of the –theme will be blue, and the font-family will be sans-serif because the nested layer defined later takes precedence over the non-nested layer.

Test native, hybrid, and web apps on any mobile OS with our free android online emulator. Sign up to optimize app performance.

Important styles

When an important style is applied within a nested layer, it takes precedence over non-nested styles. In this case, the specificity order is reversed, and the important style within the nested layer overrides non-nested styles. Let’s look at an example:

@layer components {
  :root {
    --theme: red;
    font-family: serif !important;
  }
}


/* Later in the stylesheet */
@layer components.narrow {
  :root {
    --theme: blue !important;
    font-family: sans-serif;
  }
}

In this example, even though the font-family is specified in the nested layer, the –theme variable will have the value of blue because it is marked as !important. The important style within the nested layer takes precedence over the non-nested layer.

Specificity weight within nested layers

The specificity weight between nested layers does not directly affect the precedence order. Instead, conflicting styles within a nested layer are resolved based on the normal specificity rules. The style with the highest specificity, including selector specificity and inline styles, takes precedence within that nested layer. Here’s an example:

@layer components {
  :root {
    --theme: red;
    font-family: serif !important;
  }
}


/* Later in the stylesheet */
@layer components.narrow {
  :root {
    --theme: blue;
    font-family: sans-serif !important;
  }
}

Assuming the components.narrow layer is active, and both rules have the same specificity. In this case, the later rule defined within the nested layer takes precedence, so the value of the –theme will be blue.

To summarize, non-nested styles have the highest precedence, followed by normal nested styles in the order of their creation. Important styles within nested layers override non-nested styles. The specificity weight between nested layers does not impact the precedence, but it matters for conflicting styles within a nested layer.

In this article, we take a look at some aspects of simulation and discuss some ways through which we can use ios emulator for pc.

Browser support for CSS Cascade Layers

The support for CSS Cascade Layers varies across different browsers. In Chrome, versions 4 to 95 do not have native support for CSS Cascade Layers. However, starting from version 96 to 98, you can enable support by using the — enable-blink-features=CSSCascadeLayers runtime flag. It’s worth noting that Chrome provides full support for CSS Cascade Layers starting from version 99.

In Firefox, CSS Cascade Layer support is not available in versions 2–93. However, starting from version 94, you can enable CSS Cascade Layer support by using the layout.css.cascade-layers.enabled feature flag in about:config. From version 97 onwards, they are fully supported.

The below illustration provides a detailed overview of the browser support for CSS Cascade Layers:

Source

Ensuring consistent rendering and functionality across different web browsers is of utmost importance in web development. Similar to all CSS properties, when it comes to cascade layers, browser support, and fallbacks play a crucial role in achieving this goal. By testing browser compatibility and providing appropriate fallback options, you can effectively address potential rendering and functionality issues, resulting in a robust and reliable web experience.

To test browser compatibility, you can use a unified digital experience testing platform like LambdaTest that offers an online browser farm of numerous real browsers and operating systems combinations to test your websites and web apps. It lets you perform tests at scale to detect cross browser issues and fix them so that your website or web app works seamlessly across different browsers & OS combinations.

Using LambdaTest’s Real Time Browser Testing feature, you can perform cross browser testing across different browser and OS combinations.

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Selenium testing, Cypress E2E testing, CI/CD, and more.

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

Wrapping up

Congratulations on making it here!! You’re a great learner!

In this blog on CSS Cascade Layers, we have covered the concept of cascade along with its steps. We then learned CSS Cascade Layers and the various methods of creating them. Additionally, we explored nested cascade layers and the advantages they provide, followed by a way of creating them. Finally, we learned how to determine the precedence of layers based on their order.

CSS Cascade Layers are extremely important when working with large codebases with multiple stylesheets from different third parties. They allow us to keep things modular and maintainable by eliminating conflicts and establishing a clear order of priority. By understanding the key steps of the cascade process and learning how to create cascade layers effectively, you now possess a powerful set of tools to manage and easily control stylesheets.

Remember, design is not just about appearance but also about how it works. Cascade Layers allow you to strike that balance, ensuring that your designs captivate and engage users while functioning flawlessly. I hope this guide has been helpful to you in understanding CSS Cascade Layers and how they help us manage stylesheets effectively.

So, go forth and create websites that utilize the power of CSS Cascade Layers.

Until next time, happy styling!

Frequently Asked Questions (FAQs)

What are cascade layers in CSS?

Web developers can prioritize specific CSS sections by using CSS Cascade Layers, which are explicit specificity containers that offer easier and more control over the CSS declarations.

What are the four components of the cascade CSS?

Relevance.
Origin and importance.
Specificity.
Order of appearance

A Complete Guide To CSS Overflow

Tahera Alam — Mon, 20 Mar 2023 08:40:54 +0000

You know content positioning in web design is important, right? Centering a div is literally the most famous topic in the web developer community. Yes, I am not lying : (

CSS has a concept named the “box model,” which says every element has a box of its own. You might be wondering why we are talking about this box model concept.

So here’s your answer — When designing a modern website, you’ll likely run into issues where your content won’t fit within an element as intended. For example, an element may be a div or a paragraph tag, and content may be the text within it. So when content doesn’t fit in the element’s box and spills out, that is known as CSS overflow.

If we try putting it more simply, CSS overflow is any content that is too large for an element’s box.

Now comes the question of why you should know it? The short answer is responsive web design.

Your users could use any device to view your website, right? What if they come across usability or any responsive web design challenges when accessing the website. Being a freelancer, I can vouch that usability issues can turn out to be a big turn-off for the users : (

That is why it becomes important to design a website that is responsive on all devices.

You need to know when to shrink the content and when to avoid doing so. When content overflows and doesn’t fit in a given area, it causes issues with page layout and interferes with the visibility of other elements.

This is where CSS overflow comes in, with all of its abilities to help us fantastically manage content positioning.

By the end of this blog on CSS overflow, you will understand everything you need to know to handle your content proficiently. So, let’s get started!

What is CSS Overflow?

CSS overflow is when the content overflows from its specified container. This property controls what happens to the content that does not fit in a given area.

The overflow property has the following values:

visible
hidden
scroll
auto

Let’s see overflow in action with the help of an example.

HTML:

<h1>overflow not set</h1>
<p class=”box”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived only five centuries.</p>

CSS:

 body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
  }

Output:

In the above example, the box has a fixed width and height. However, the text that was placed inside the box is so long that it cannot fit within the box as intended. The extra text you see dropping past the black border is the overflow.

Need a great solution for cross browser testing on Safari? Forget about emulators or simulators - use real safari browser online.

CSS overflow visible

Visible is the default value of CSS overflow. It means that not setting the CSS overflow property is the same as setting it to “visible”.

When overflow is visible, the overflowing content will not be clipped. Instead, it will display outside the element’s box and might overlap other elements on the page.

Let’s see a quick example of overflow visible.

HTML:

<h1>overflow:visible;</h1> 
<p class=”box”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

 body {
    font: 15px Georgia, serif;
  }
   h1{
    font: 28px Georgia, Serif;
    text-align: center;
  }
  .box{
    width: 200px;
    height: 180px;
    padding: 8px;
    border: 1px solid #000;
    line-height:21px;
    background-color: #EEEEEE;
    margin: 0 auto;
    overflow:visible;
  }

Output:

In the above example, the p element with the class name “box” has an overflow property set to visible.

As you can notice, there is no difference between the box from the previous example, which doesn’t have any overflow property, and this box which has an overflow property. This is because the overflow property is set to visible by default.

CSS overflow hidden

Overflow hidden means the overflowing content will be hidden and will not be displayed on the page.

Once a web browser comes across the CSS overflow hidden property, it hides the extra content beyond the element’s box.

Let’s look at an example of overflow hidden.

HTML:

<h1>overflow:hidden;</h1>
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
font: 15px Georgia, serif;
}
h1{
font: 28px Georgia, Serif;
text-align: center;
}
.box{
width: 200px;
height: 180px;
padding: 8px;
border: 1px solid #000;
line-height:21px;
background-color: #EEEEEE;
margin: 0 auto;
overflow: hidden;
}

Output:

As you can see in the example above, the p element with the class name “box” has an overflow property set to hidden. Because of this value, overflowing content is not visible on the page.

Emulators Online from LambdaTest allows you to seamlessly test your mobile applications, websites,and web apps on mobile browsers and mobile devices.

CSS overflow scroll

Setting the overflow value to scroll will hide the overflowing content from rendering outside the element’s box, along with providing scrollbars to view the content.

Note that with setting overflow to scroll, you always get both the horizontal and vertical scrollbars even if the content only requires one or the other.

// Detect dark theme var iframe = document.getElementById('tweet-1269415423595986944-708'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1269415423595986944&theme=dark" }

Let’s look at an example of overflow scroll.

HTML:

<h1>overflow:scroll;</h1>
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
font: 15px Georgia, serif;
}
h1{
font: 28px Georgia, Serif;
text-align: center;
}
.box{
width: 200px;
height: 180px;
padding: 8px;
border: 1px solid #000;
line-height:21px;
background-color: #EEEEEE;
margin: 0 auto;
overflow: scroll;
}

Output:

As you can see in the example above, the box has the overflow property set to scroll which gives us the scrollbar in the output.

CSS overflow auto

The overflow auto value is almost similar to overflow scroll, in addition it also solves the problem of getting scrollbars even when we don’t need them.

As discussed above, with overflow scroll we get both the horizontal and vertical scrollbar even if we don’t need them. But in case of overflow auto, we get the scrollbar only when the content actually goes outside the element’s box.

Let’s look at an example of overflow auto.

HTML:

<h1>overflow:auto;</h1>
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
font: 15px Georgia, serif;
}
h1{
font: 28px Georgia, Serif;
text-align: center;
}
.box{
width: 200px;
height: 180px;
padding: 8px;
border: 1px solid #000;
line-height:21px;
background-color: #EEEEEE;
margin: 0 auto;
overflow: auto;
}

Output:

As we can see in the example above, the p element with the class name “box” has the overflow attribute set to auto. Because of that, we only get the horizontal scrollbar since our content only overflows horizontally.

X and Y property of CSS overflow

Till this point, we used the overflow shorthand property to set overflow. Instead, we can also use overflow-x and overflow-y to control the overflow horizontally or vertically.

Overflow-x is used to control the horizontal overflow of an element. In simple terms, it specifies what to do with the right or left edges of the content.

Overflow-y is used to control the vertical overflow of an element. In simple terms, it specifies what to do with the top or bottom edges of the content.

Below is an example of overflow-x and overflow-y properties.

HTML:

<h1>overflow x and y</h1>
<p class=”box”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived five centuries.</p>

CSS:

body {
font: 15px Georgia, serif;
}
h1{
font: 28px Georgia, Serif;
text-align: center;
}
.box{
width: 200px;
height: 180px;
padding: 8px;
border: 1px solid #000;
line-height:21px;
background-color: #EEEEEE;
margin: 0 auto;
overflow-x:scroll;
/*add horizontal scrollbar*/
overflow-y: hidden;
/*hide vertical scrollbar */
white-space: nowrap;
}

Output:

In the example above, we set overflow-x to scroll, because of which, we can scroll right and left. Next, we also set overflow-y to hidden, because of which we can not scroll up and down.

We used a property named “white-space with the value “no-wrap”. This is used to specify how whitespace inside elements is handled. White-space set to no-wrap means the element’s content will not be wrapped to a new line.

CSS overflow wrap

With the use of the overflow-wrap property in CSS, we can tell the browser to break lines of long words in case the content overflows from the element’s box. This helps prevent layout issues caused by overflow from an unusually long string of text.

This property has three values which are:

normal: this is the default value where the browser will break lines according to its line-breaking rules. Long strings will not break even if they overflow the element’s box.
break-word: with this value, words or strings of characters too long to fit inside their container will split at random points, causing a line break.
inherit: this will inherit the value of the overflow-wrap attribute, which was set on the targeted element’s immediate parent.

Below is an example of overflow-wrap.

HTML:

<h1>overflow-wrap</h1>
<p class="box">This element contains a very long word: thisisaveryveryveryveryveryverylongword. By default, the long word will not break and wrap to the next line. With break-word, the long word will break.</p>

CSS:

body {
font: 15px Georgia, serif;
}
h1{
font: 28px Georgia, Serif;
text-align: center;
}
.box{
width: 200px;
height: 180px;
padding: 8px;
border: 1px solid #000;
line-height:21px;
margin: 0 auto;
background-color:yellow;
overflow-wrap: break-word;/*try removing the overflow-wrap to see the difference*/
}

Output:

In the above example, we can see that the box has the overflow-property set to break-word, which breaks the long string of characters and wraps them to the next line, ensuring that our content does not overflow from the container. However, if we do not specify the property, the long words will not break, and it will overflow the container.

CSS Overflow browser compatibility

Now, let’s talk about cross browser compatibility. To be cross-browser compatible, an app must function across different browsers and degrade gracefully when certain browser features are unavailable or disabled.

As web developers, we need to keep browser compatibility in mind because our end users can access our website from browsers of their choice. So, every website needs to function flawlessly across various OS platforms and browsers.

However, while using CSS properties, you could get into a situation where the majority of browsers do not support a particular CSS feature.

So you must perform cross browser testing to ensure it works flawlessly across various browsers, devices, and operating systems.

For doing that, you can use a cloud-based testing platform like LambdaTest that offers an online browser farm of 3000+ real browsers and operating systems combinations to test your websites (and web apps). It lets you perform tests at scale for detecting cross browser compatibility issues in HTML/CSS and fixing them so that your website (or web app) works seamlessly across different browsers & OS combinations.

An example of testing browser support for CSS overflow is shown below:

CSS overflow property reports a browser compatibility score of 100. This collective score from 100 represents browser support of the CSS overflow property. The higher this score, the greater the browser support for this property.

Responsiveness test of a website

A website must be designed to be responsive for a strong online presence. Since responsive websites tend to boost user satisfaction, Google prefers them for SEO. Therefore, responsiveness testingof the website components is crucial.

However, performing tests to check responsiveness can be time-consuming. Moreover, it’s impossible to own devices of all sizes.

There are multiple web development tools that make up a Front-End Developer’s essential toolchain. The usability of these tools allows flexibility while increasing the difficulty in the overall structure. However, there is a need for a tool like LT Browser to help a web developer analyze mistakes and view multiple devices from a real-time view.

LambdaTest’s mobile-friendly test tool, LT Browser, comes with 50+ pre-installed viewports with multiple standard resolutions. Additionally, LT Browser offers sophisticated developer tools for testing.

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Selenium testing, Cypress E2E testing, CI/CD, and more.

Below are some of the top-notch features of LT Browser that any developer would love to have:

Device sync feature to scroll on two devices simultaneously.
Network throttling feature to test websites on different network conditions.
Capture full-page screenshots of the web page.
Generates performance reports powered by Google Lighthouse.
Video recording of a running test session, and much more.

Need more reasons to love LT Browser? Here are more reasons why developers should use LT Browser.

A comprehensive end-to-end Testing tutorial that covers what E2E Testing is, its importance, benefits, and how to perform it with real-time examples.

Conclusion

Congratulations on reaching this far! You’re a fantastic reader!!

So in this blog, we discussed CSS overflow in detail, including how we can use the CSS overflow, different values of CSS overflow, browser compatibility, its importance, and finally, responsive testing of our websites using tools like LT Browser.

I hope this blog has given you a thorough understanding of CSS overflow. It’s time to apply CSS overflow to your website like a pro! Again, feel free to refer back to this anytime; it is solely for your use.

Happy styling!

Frequently Asked Questions (FAQs)

1. What is an overflow in CSS?

Overflow is a property of the CSS box model used to control content wrapping in various parts of a web document, such as inside elements with a specified height but is too small to contain all their content.

2. How do I fix overflowing in CSS?

The text-overflow property does not permit the content of the flex element to shrink below its minimum content size. To fix this, you must set the overflow value to something other than visible. One solution is to override the default CSS with your own styles.

3. Why we use overflow hidden in CSS?

Margin automatically centers an element, and overflow: hidden prevents scrollbars from showing up.

A Guide To Newly Supported CSS Pseudo-Class Selectors

Tahera Alam — Fri, 10 Mar 2023 13:51:18 +0000

Have you ever wondered how websites add that extra layer of style to certain buttons when they’re hovered over, or change the color of visited links? The secret lies in the power of CSS pseudo-class selectors!

But, before you dismiss this as just another mundane guide on CSS Selectors, let me tell you: we are not doing that here.

Pseudo-classes like hover have been around for a long time. I promise not to bore you by discussing them for the 1000th time. We will instead discuss the powerful modern pseudo-class selectors that you may not be familiar with yet.

Before we deep dive into CSS pseudo-class selectors, if you are unfamiliar with the hover pseudo-class or even what a pseudo-class is, let’s do a quick recap.

Pseudo-class selectors in CSS are selectors that define a special state of an element. They start with the colon character(:) and allow you to apply styles based on the interaction or behavior of the element. For example, you can use CSS pseudo-class selectors to style an element when users hover their mouse over it.

Here’s an example of the :hover pseudo-class:

button:hover{
 background-color: blue;
}

Wondering what’s different about the modern CSS pseudo-class selectors? They play a crucial role in user experience and accessibility. Their ability to target specific elements based on their state allows us to create interactive user interfaces that are inclusive and accessible to all users, including those with impairments.

While they offer immense power, they also come with their drawbacks. It’s critical to consider cross browser compatibility while using them. For example, some selectors may not be fully supported by specific browsers, so it’s crucial to have fallback options in place to ensure that all users have a consistent experience, regardless of their device or browser.

In this guide, I’ll dive into the modern CSS pseudo-class selectors, providing the knowledge you need to use them in your next project and make your website stand out. In addition, it will give you the knowledge you need to take your CSS skills to the next level.

So, let’s get started!

What are Modern CSS pseudo-class selectors?

Modern pseudo-class selectors are a set of new selectors that have been added to the CSS specification in recent years. They offer a range of new and advanced features compared to the older pseudo-class selectors.

Some features include targeting elements based on their relationship to others or selecting elements based on more complex conditions.

These modern CSS pseudo-class selectors bring a level of advanced styling to the table that was not possible earlier.

A complete tutorial on retesting that sheds light on its features, importance, pros and cons, and how to perform it:https://www.lambdatest.com/learning-hub/retesting

Deep dive into CSS pseudo-class selectors

In this guide section, we will explore the different CSS pseudo-class selectors. Let’s look at them one by one.

:any-link pseudo-class

The :any-link pseudo-class is a way to simultaneously select both link and :visited *states of an element. Typically, the *:link is used to style unvisited links, while :visited is used to style links the user has visited.

By using :any-link instead of :link and :visited, you can apply the same styles to both links without repeating the styles. It will match an anchor hyperlink as long as it has the href attribute.

It is handy when applying a particular style to all links regardless of their visited status.

Here’s an example:

:any-link {
  color: #2a9d8f;
}

In the example, we selected all the links using the :any-link pseudo-class and applied the blue color(#2a9d8f) to them.

An important thing to note is that :any-link selector has a higher specificity than the ‘a’ selector. This means that if an anchor element style is defined using both :any-link and ‘a’, the style for **:any-link **will be applied to the element.

:any-link {
  color: #2a9d8f;
}
a {
  color: red;
}

Here, the bluish color (#2a9d8f ) is being applied to our anchor tags instead of red because the :any-link selector has higher specificity than the ‘a’ selector.

In addition, here’s an example showcasing the implementation of :any-link selector using LambdaTest’s Real Time Testing feature.

LambdaTest is a continuous quality cloud testing platform that allows you to test web and mobile applications for cross browser compatibility across on-demand real browsers, devices, and operating systems combinations. With its Real Time Testing, you can perform manual live-interactive testing across different desktop and mobile browsers with instant access to the latest and legacy web browsers, browser versions, and screen resolutions.

Learn more about LambdaTest’s Real Time Testing from the below tutorial.

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around Selenium, Appium, Playwright, and more.

Discover the top 70+ essential Snowflake testing test cases to ensure your data’s integrity, accuracy, and consistency. Download our comprehensive template now: https://www.lambdatest.com/learning-hub/snowflake-test-case-template

:focus-visible pseudo-class

Before we talk about :focus-visible, I will discuss a common accessibility violation. I am sure you’re aware that it’s a common practice among developers to remove the outlines of interactive elements such as form inputs, buttons, and links during their focus state.

input:focus {
  outline: none;
}

Now, the issue is that the visible focus state is critically important for users who use the keyboard to navigate.

When a user navigates an interface using the keyboard (e.g., by pressing the tab key), a visible focus state can act as a way-finding tool, helping the user understand which element currently has keyboard focus. This can be especially important for users with difficulty using a mouse or other pointing device and those with cognitive or visual impairments. To know the importance of web accessibility, read our tutorial on accessibility testing.

When we set outline none, it significantly degrades the interface’s usability, which we don’t want. That’s where :focus-visible comes in.

The :focus-visible pseudo-class is used to ensure that the focus ring (outline) is only visible when it is needed. It was designed to distinguish between “implicit,” and “explicit” focus, where mouse clicks are considered “implicit” focus, and keyboard navigation is considered “explicit” focus. It uses heuristics, a set of rules and procedures the browser uses to determine when to show the focus ring.

For example, when you tab into an interactive element using a keyboard, the browser will apply the :focus-visible styles. But, if you click the element with a mouse, the browser will not apply the :focus-visible styles.

However, there are some exceptions, like text inputs and text areas, which should show the :focus-visible styles for all focus input types. This makes the focus ring consistent with the user’s expectation and helps reduce the visual noise and improve accessibility.

Enough explanation, right? Let’s look at an example to understand this better.

HTML:

<div class="links">
      <a href="#">LambdaTest</a>
      <a href="#">Features</a>
      <a href="#">Blogs</a>
  </div>

CSS:

a:focus-visible {
  background-color:#ddd;
}

In this example, we have three links, and we asked the browser to apply a background color (in this case #ddd) when any of the links are in focus. Notice if you click them using a mouse pointer, the style doesn’t get applied because the element does not receive the focus-visible status since it’s an implicit click.

But, if you click them using the tab, the background color does get applied because the element receives the focus-visible status since the click is explicit.

Let’s see how our example would function with LambdaTest’s Real Time Testing.

:focus-within pseudo-class

The :focus-within pseudo-class in CSS allows you to apply styles to a parent element when one of its child elements is in focus. Imagine you have a form with multiple input fields, the :focus-within pseudo-class allows you to highlight the entire form container (the parent element) when one of the input fields (child element) is selected and in focus.

A practical application of the :focus-within pseudo-class is to style a form label when its associated input field has focus. To achieve this, you can wrap the label and input in a container element, then apply the :focus-within pseudo-class to that container. This allows you to select the label and apply styles when the associated input field is in focus.

Let’s look at an example of that.

HTML:

<div class="form-group">
      <label for="name">Name:</label>
      <input type="text" id="name" />
 </div>

CSS:

.form-group:focus-within label {
  color: #2196f3;
}

In this example, we have a form with a single input field for the user’s name. The label and input are wrapped in a container element with a class of .form-group. We then use :focus-within on the .form-group container to tell the browser that when the input of that container is in focus, change the color of the label to blue.

:is() pseudo-class

The :is() CSS pseudo-class function (formerly called :matches() :any()) takes a list of selectors as its argument and selects any element that can be selected by one of the selectors in that list. This allows for more concise writing when selecting multiple elements and helps make your code more readable.

For example, instead of targeting each heading element individually, you can target a group of headings using :is(h1, h2, h3).

The :is() selector list has unique features that set it apart from other selectors.
One of its coolest features is that even if one selector in the list is invalid, the rule will still apply to the valid selectors. This means you can group multiple selectors without worrying about the whole rule breaking just because of one small mistake.

Another important thing to note is that the rule’s specificity will match that of the selector with the highest specificity in the list. For example, a rule using :is(#id, p) will have the same specificity as the #id selector, while a rule using :is(p, a) will have the same specificity as the selector.

Let’s look at an example of this.

HTML:

<h1>LambdaTest</h1>
 <h2>Cross-browser testing platform</h2>
 <h3>Automated testing solution</h3>

CSS:

/* Apply styles to h1, h2, and h3 elements */
:is(h1, h2, h3) {
  font-weight: bold;
  color: purple;
}

In this example, the :is(h1, h2, h3) selector matches all h1, h2, and h3 elements and applies the styles of font-weight: bold and color: purple to them.

:where() pseudo-class

The :where() pseudo-class function takes a list of selectors as an argument and selects elements that can be selected by any of the selectors in that list.

It is almost similar to :is() except for one difference. The difference between :where() and :is() lies in their specificity. :where() always has a specificity of 0, whereas :is() gets the specificity of the most specific selector in its argument list.

Let’s look at an example to see how :where() works.

HTML:

<div class="container">
  <img   src="https://images.unsplash.com/photo-1674530493752-719b5514a7f2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDQ2fGJvOGpRS1RhRTBZfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60
"alt=""/>
  </div>

CSS:

:where(img) {
  border: 10px solid blue;
}
img {
  border: 10px solid orange;
}

In this example, we select the image using :where() pseudo-class and add a blue border to it. Then, we again select the image using the img selector and set an orange border. Since :where() has 0 specificity, the second style wins, resulting in the orange border of the image.

The following is an example of implementing :where() using LambdaTest’s Real Time Testing feature.

Get a head start on your CI/CD pipeline with our pre-built test case template. Explore this comprehensive list of test cases and scenarios:https://www.lambdatest.com/learning-hub/cicd-test-case-template

:not() pseudo-class

The :not() CSS pseudo-class selector matches elements that do not match a given selector. It means you can exclude specific elements from a selection of elements. The syntax is :not(selector), where the (selector) is the selector to be excluded.

For instance, p:not(.main) matches all < p > elements that don’t have the class main.

HTML:

<div class="container">
        <h1>LambdaTest</h1>
        <p>
          The ultimate cloud-based cross-browser testing platform. Test on over
          3000 browsers, devices, and OS.
        </p>
        <p>Accelerate your GTM with powerful cloud testing.</p>
        <p class="main">
          Integrate <a href="https://www.lambdatest.com/">LambdaTest</a> with
          your favorite tools for seamless testing.
        </p>
      </div>

CSS:

p {
  font-weight: bold;
  color: blue;
}
/* Select all elements except the ones with .main class */
p:not(.main) {
  font-weight: normal;
}

In this example, we have three paragraph tags: first, we apply blue color and bold font-weight to all paragraphs with the p selector. Then, we use the :not() pseudo-class to exclude the last p element that has the .main class from receiving normal font-weight and keep its bold font-weight as set by the p selector.

:has() pseudo-class

The :has() pseudo-class is unique and something we never had in CSS. It’s like a detective on a mission to find specific elements based on the clues of their descendants.

Imagine you have an HTML document with a list of items, and you want to give a unique style to those items that have an extra emphasis, represented by a span element. How can you achieve that? Yes, the answer is :has() pseudo-class.

The :has() pseudo-class allows you to select elements based on whether they have a certain descendant element. Isn’t it fascinating? Let’s take a closer look with an example.

HTML:

<ul>
   <li>Item 1</li>
   <li>Item 2 <span>with emphasis</span></li>
   <li>Item 3</li>
 </ul>

CSS:

li:has(span) {
  font-weight: bold;
  background-color: yellow;
}

In this example, the :has() pseudo-class selects the li elements that have a span descendant. When it finds a match, it applies the styles of font-weight and background-color, making the text bold and the background yellow.

Note that this example may not work for you on a Firefox browser. However, we have an interesting workaround just for you in the browser compatibility section.

:empty pseudo-class

The :empty pseudo-class in CSS selects elements that have no children, including text nodes. This means that an element that has only white space will also be selected by the :empty pseudo-class.

This comes in handy in certain scenarios. For example, you have a div in which you dynamically add content using JavaScript. When content gets appended, you want the div to have some padding and background, but if there’s no content, you don’t want it to take any space on the page. You can very simply hide that div using the :empty pseudo-class.

HTML:

<div>Since the below div element is empty, :empty() pseudo-class selects and hides it.</div>
<div></div>

CSS:

div {
  background-color: orange;
  padding: 10px;
  text-align: center;
}
/* Select the empty div element */
div:empty {
  display: none;
}

:placeholder-shown pseudo-class

The :placeholder-shown pseudo-class in CSS is used to select and style an < input > or < textarea > element that is currently displaying placeholder text.

The :placeholder-shown pseudo-class provides a convenient way to style the placeholder text in a specific way, separate from the other styles of the input element. This allows us to create more intuitive and user-friendly forms by improving the visual cues for placeholder text.

Let’s look at an example.

HTML:

<form>
      <label for="name">Name:</label>
      <input name="name" type="text"placeholder="Your name">

      <label for="email">Email Address:</label>
      <input name="email" type="email" placeholder="john@example.com">

   </form>

CSS:

input:placeholder-shown {
  background-color: #ddd;
  border: 2px solid orange;
  border-radius: 4px;
}

In this example, we have a form with three input fields for name, email, and age. Each input has a placeholder text. We used input:placeholder-shown CSS pseudo-class to style the input fields that are currently displaying placeholder text. When a user begins to type into an input field, the placeholder text will be replaced by the user’s input, and the styles will no longer apply.

:read-only pseudo-class

As the name suggests, the :read-only CSS pseudo-class represents an element that is not editable by the user, meaning its value cannot be changed. This selector can be used to apply styles to elements that have the readonly attribute or have been dynamically set to be read-only through JavaScript.

Following is an example of the same.

HTML:

<form>
      <label for="name">Name:</label>
      <input name="name" type="text"placeholder="Your name"readonly>

      <label for="email">Email Address:</label>
      <input name="email" type="email" placeholder="john@example.com">

   </form>

CSS:

input:read-only {
  background-color: #ddd;
  border: 1px solid gray;
  pointer-events: none;
}

In the example, the first input that has the readonly attribute is selected by the :read-only pseudo-class selector and the specified styles only gets applied to that element.

The :read-only CSS pseudo-class removes all the styling that makes the inputs look like clickable fields, making them look like read-only paragraphs.

read-write pseudo-class

The :read-write pseudo-class matches elements that are either editable or have the contenteditable attribute set to true.

Some HTML elements, such as input and textarea, are editable by default, but others, such as div and p, are not. The contenteditable attribute can be added to any element to make it editable. The :read-write pseudo-class allows us to specify styles specifically for editable elements, whether they are editable by default or made editable with the contenteditable attribute.

Below is an example.

HTML:

<div contenteditable="true">This is an editable div.</div>

CSS:

div[contenteditable="true"]:read-write {
  background-color: lightgreen;
}

In this example, the :read-write pseudo-class will match the div element with the contenteditable attribute set to true, and the background-color gets applied. It also works for elements that are editable by default, such as inputs and textareas.

:indeterminate pseudo-class

The :indeterminate pseudo-class targets specific form elements, such as checkboxes and radio buttons, as well as progress elements, that are in an intermediate or indeterminate state.

For example, an < input type="checkbox" > can be set to an indeterminate state through JavaScript by setting its indeterminate property to true. Similarly, radio buttons can be considered indeterminate when all buttons with the same name value in the form are unchecked. And < progress > element can be set to an indeterminate state if it doesn’t have a defined value or progress status.

Below is an example for each of them.

:indeterminate CSS pseudo-class with a checkbox

HTML:

<input type="checkbox" id="checkbox" />
 <label for="checkbox">Check me</label>

CSS:

input[type="checkbox"]:indeterminate + label {
  color: red;
}

In this example, we created a checkbox input with an id of checkbox and a label that says “Check me.” The JavaScript code sets the indeterminate property of the checkbox to true, which makes the checkbox appear in an indeterminate state. In CSS, we used the :indeterminate pseudo-class to select the checkbox and its adjacent label and set the color of the label to red.

:indeterminate CSS pseudo-class with a radio button

HTML:

<form>
      <input type="radio" name="LambdaTestFeatures" id="LambdaTestFeatures" />
      <label for="webTesting">Web testing</label>
      <input type="radio" name="webTesting" id="webTesting" />
      <label for="cypressTesting">Cypress testing</label>
      <input type="radio" name="seleniumTesting" id="seleniumTesting" />
      <label for="selen

CSS:

input[type="radio"]:indeterminate + label {
  color: red;
}

In this example, all the radio buttons are in an indeterminate state because none of them have been selected yet. We use the :indeterminate pseudo-class to target the label for each radio button and change its color to red. When a radio button is selected, it no longer matches the :indeterminate selector, and the label returns to its default color.

:indeterminate CSS pseudo-class with a progress element

HTML:

 <progress></progress>
1
 <progress></progress>

CSS:

progress:indeterminate {
  width: 50vw;
  height: 30px;
}

In this example, the :indeterminate CSS pseudo-class selects the progress element and applies specified styles to it because it has no value and is in an indeterminate state.

Browser compatibility of CSS pseudo-class selectors

Let’s talk about one of the most important aspects of modern web design, i.e., browser compatibility. All your fancy and shiny CSS features are useless if the user’s browser doesn’t support them. That’s why you need to keep browser compatibility in mind.

In this section, we will look at the browser support of all the CSS pseudo-class selectors discussed.

Additionally, to run browser compatibility tests of the CSS features, you can use a cloud-based cross browser testing platform like LambdaTest that offers an online browser farm of numerous real browsers and operating systems combinations to test your websites (and web apps). It lets you perform tests at scale to detect cross browser compatibility issues in HTML/CSS and fix them so that your website or web app works seamlessly across different browsers & OS combinations.

:any-link()

The :any-link() CSS pseudo-class selector has varying levels of support across different browser versions. In Chrome, it is supported with the prefix -webkit– from version 15 to 64 and is fully supported without the prefix from version 50.

Similarly, in Safari, support is available from version 6.1 to 8 with the prefix -webkit-and is fully supported in later versions.

:-webkit-any-link {
  color: blue;
}

In Firefox, it is supported from version 3 to 49 using the prefix -moz- and fully supported from version 50.

:-moz-any-link {
  color: blue;
}

Browser Compatibility:

Discover the top 50+ essential Flutter testing test cases to ensure your mobile applications are bug free prior to their release. Download our comprehensive template now: https://www.lambdatest.com/learning-hub/flutter-testing-test-case-template

:focus-visible

The :focus-visible CSS pseudo-class is supported in Chrome from version 86. In Firefox, it is supported from version 4 to 84 using the prefix -moz- and fully supported from version 85.

:focus-within

Here’s an image illustrating the support for the focus-within pseudo-class across different browser versions.

:is()

The :is() CSS pseudo-class is supported in Chrome from version 88, and Firefox supports it from version 78.

:where()

The :where() pseudo-class is supported in Chrome from version 88 and in Firefox from version 78.

:not()

The :not() CSS pseudo-class is supported in Chrome from version 88. Firefox has support for it from version 84 and Opera from version 75.

Here’s an image that showcases the browser support for this property.

:has()

The :has() CSS pseudo-class selector is supported in some modern browsers, with Chrome offering support from version 105 and Safari from version 15.4.

Note that earlier versions of Firefox (2–102) do not support the :has CSS pseudo-class. However, you can enable this powerful feature as an experimental option in version 103 and later by simply flipping the layout.css.has-selector.enabled flag to true.

Here is an excellent demo inspired from this CodePen example to demonstrate the implementation of :has pseudo-class in Firefox 103 and later:

CSS:

figure:has(figcaption) img {
  outline: 10px dashed red;As we know, the :has pseudo-class isn’t supported in Firefox by default. So, you need to enable it to see the demo in action. 


}

In the given example, the :has() CSS pseudo-class targets any figure element that has a figcaption within it. In the HTML document, we have a figure element with a figcaption, so the browser correctly identifies the matching figure element and applies the red border.

To enable it, search for about:config in your Firefox address bar and hit Enter.

Finally, search for layout.css.has-selector.enabled and turn it to true.

Congratulations! You just enabled the powerful :has selector support in your Firefox browser.

:empty()

The :empty() CSS pseudo-class selector is widely supported in modern browsers, with Chrome offering support from version 4, Safari from version 3.1, and Firefox from version 2.

Learn 43 excellent test cases for salesforce testing by reading this guide. Every significant test case will be covered in detail in this guide, along with how to set up your Salesforce testing: https://www.lambdatest.com/learning-hub/salesforce-test-cases

:placeholder-shown

The :placeholder-shown CSS pseudo-class is supported in Chrome from version 47. In Firefox, it is partially supported from version 4 to 50 using the prefix -moz-placeholder (instead of placeholder-shown) and fully supported from version 51.

:read-only and read-write

The read-only and read-write pseudo-classes are partially supported in Chrome from version 15 to 35, with support limited only to inputs and textarea fields and not elements with **contenteditable **attribute. But from version 36, these selectors are fully supported. Similarly, Safari has support from versions 4 to 8 only for inputs and textarea fields and supports fully from version 9.

Firefox supports them from version 3 to 77 using the prefix -moz and fully supports from version 78.

:indeterminate

The :indeterminate CSS pseudo-class has partial support in Chrome from version 15–38 with limitations in selecting radio buttons. It won’t select radio buttons if the group of radio buttons doesn’t have a checked option.

Similarly, Firefox version 4–50 doesn’t support radio buttons. Additionally, version 4–5 doesn’t support the < progress > element.

Chrome has full support from version 39 and Firefox from version 51.

Read this tutorial about ServiceNow Testing, to know what it is, it’s benefits, types and test cases: https://www.lambdatest.com/learning-hub/servicenow-test-case-template

Wrapping up

As a web designer or developer, you understand the value of constantly learning and exploring new techniques. The introduction of newly supported CSS pseudo-class selectors opens up a world of possibilities to create stunning, interactive, and engaging web experiences. In this guide, we’ve taken a closer look at selectors such as :has(),:any-link(), and :focus-visible, etc., which are at the forefront of modern CSS design.

It’s important to stay updated about the latest browser support for these selectors and to experiment with different ways to incorporate them into your work. Whether you’re building a simple website or a complex web application, these selectors can add an extra layer of style and interactivity to your web projects.

I hope this guide has been helpful to you and has inspired you to use CSS pseudo-class selectors in your designs. So, go ahead, dive in, and let your creativity run wild!

Until then, Happy Styling!

Frequently Asked Questions (FAQs)

1. How do you create pseudo-classes in CSS?

A CSS pseudo-class specifies a special state of the selected element(s). In CSS, pseudo-classes are defined with a colon (:) and their names. For example :hover.

2. What are pseudo-class and pseudo-element in CSS?

The CSS pseudo-class defines a special state for an element. For example, it can be used when the user hovers over an element. Alternatively, CSS pseudo-elements are used to style specific parts of elements.

Different Ways To Style CSS Box Shadow Effects

Tahera Alam — Fri, 30 Dec 2022 09:54:27 +0000

Have you ever visited a website with plain text and images? Most probably, no. It’s because such websites do not exist now. But there was a time when websites only had plain text and images with almost no styling. For the longest time, websites did not focus on user experience. For instance, this is how eBay’s homepage looked in 1999.

Looking at the picture, we can say that the Internet has evolved, and so has the website needs. In modern-day websites, you need hues, animations, shadows, and other effects to take the user on an aesthetically pleasing journey. This keeps the visitors hooked to the website, which helps improve the website’s key KPIs (i.e., bounce rate, average session duration, etc.).

As per a report, 75% of website credibility comes from design. That means people would prefer reading something beautifully designed than something that leaves minimal (to no) appeal to their eyes. So, websites have to look and feel good. Best websites are often the ones that have a visible “real” quality to them. Box shadow plays an integral role in making a website look realistic. They have become an absolute necessity in designing modern websites. Now, you might be wondering how. So, let’s get to that.

Sometimes, I find myself staring at a website, wondering how to make the website feel realistic. CSS box-shadow comes in as a crucial answer to this question. It provides depth to the content and makes it appear like the shadow is coming from the content itself, just like the shadows we see in the real world. This illusion brings realism into the user’s online experience.

Look at the cards in the first and second rows. Could you notice any difference between them? The cards in the first row are bland and boring. They have no shadow around them.

But notice the second row that has a subtle shadow around each card. This simple effect makes the cards look more realistic. This is exactly how CSS box-shadow helps you make your web content appealing.

There are different ways to style CSS box-shadow effects. Each style is better suited for a particular type of design than others. So, it is critical to understand which type of shadow to implement for which design. For example, a neon shadow would be more suitable if the website has a dark theme.

In this blog on CSS box-shadow effects, we dive deep into the CSS box-shadow property and the different ways to style the CSS box-shadow effects. This will help you design your web content to stand out, providing the users with a more appealing experience.

Why even use shadows?

In my experience, we understand something better when we know the problem it attempts to solve. So, before we get to the fun part of creating shadows, let’s take a step back to understand why shadows exist in CSS. Knowing the why will help you decide when to use shadows and when to avoid using them.

Shadows provide elevation. So, larger shadows mean extensive elevation. Using shadows properly creates a sense of depth, as if the objects are floating above the background at different levels. You want your websites to feel tangible and genuine. Shadows will help achieve exactly that.

HTML:

     <nav><h3>LambdaTest</h3></nav>
      <main>
        <section class="container">
          <div>Are you sure?</div>
          <p>This action can not be undone.</p>
        </section>
    </main>

CSS:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@600&display=swap');
    *{
      box-sizing:border-box;
      padding:0;
      margin:0;
      font-family: 'Roboto', sans-serif;
    }
    body{ 
      background:hsla(340deg,95%,43%,0.1);
    }
    nav{
      background:#FFFFFF;
      padding:20px;
      box-shadow: 0px 5px 4px -7px rgba(0, 0, 0, 0.75);
    }
    main{
      display:flex;
      justify-content:center;
      align-items:center;
    }
    section{
      background:#FFFFFF;
      color:#0A0C10;
      width:30em;
      height:250px;
      padding: 1em;
      margin: 1.5em;
      line-height:25px;
      box-shadow:0 6px 6px hsl(0deg 0% 0% / 0.3);
    }
    div{
      font-weight:600;
    } 
    @media only screen and (min-width:400px){
      section{
        margin:4em;
        padding: 2em;
      }
      div{
        font-size:1.5rem;
      }
      section{
        line-height:34px;
      }
    }

You might want to use shadows in either of the two cases.

When you want your web content to feel realistic.
When you want to draw the user’s attention to something specific.

Our attention is naturally drawn to the objects that are closest to us. In this blog on styling CSS box-shadow effects, we applied different shadows on the navbar and the modal box, and by elevating the modal box, we give the idea that the modal box is closer to us than the header. As a result, the user is more likely to focus on the modal box first.

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

What is CSS box-shadow property?

The CSS box-shadow property allows you to add a shadow to an element. You can add multiple shadow effects to an element by separating them with commas.

Here’s another example of how it looks:

Now that you know what a CSS box shadow looks like on an element, let’s move to the next part to understand how you can apply that.

Values of the CSS box-shadow property

The CSS box shadow of an element is defined by X and Y offsets relative to the element, blur radius, spread radius, and color. Too complicated to understand? Don’t worry! Let’s understand this very simply.

x-offset: The x-offset represents the horizontal shadow of the element. This value is required and can either be positive or negative. A positive value puts the shadow on the right side of the element, while a negative value puts the shadow on the left side.
y-offset: The y-offset represents the vertical shadow of the element. The y-offset value is also required. It can be defined using a positive or negative value. A positive value puts the shadow below the element, while a negative value puts the shadow above the element.
blur-radius: The blur-radius sets the blur. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If the value is not specified, it will be 0, making the shadow’s edge sharp.
spread-radius: The spread-radius specifies the spread of the shadow. This value is optional and can either be positive or negative. A positive value will cause the shadow to grow bigger, and a negative value will cause the shadow to shrink. If the value is not specified, it will be 0, i.e., the size of the shadow will be the same as that of the element.
color: The color sets the color of the shadow. The values can be the same as color values in CSS. Look at CSS Color Values for a list of possible values. If the value is not specified, it will be the same as the text color.

There’s another optional value, i.e., inset. We specify it as the first value of the CSS box-shadow property. This value is not specified by default, so the shadow is considered a drop shadow. Specifying this value moves the shadow inside the element’s frame, resulting in an inner shadow.

Now that we understand the values required to make a CSS box shadow of an element, let’s concrete this knowledge with a few quick examples.

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

Test your websites on real desktop & mobile browsers. Try LambdaTest Now!

Examples of the CSS box-shadow property

CSS box shadow effects can be created in many different ways. You can create a typical CSS box shadow using just three values or create a smoother shadow effect by combining multiple shadows separated by a comma.

A bottom-right box shadow using XY offset, blur radius, and color:

CSS:

    div{        
        /* offset-x | offset-y | blur-radius | color */
        box-shadow:  8px 6px 10px rgba(0, 0, 0, 0.3);
    }

Output:

HTML:

    <div>LambdaTest is a Browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems.</div>

CSS:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
    body{
      margin:2em 1em;
      font-family: 'Roboto', sans-serif;
    }
    div{
      line-height:28px;
      margin:auto;
      padding:1em;
      width:250px;
      height:250px;
      border:1px solid #aaa;
      border-radius:5px;
      box-shadow:  8px 6px 10px rgba(0, 0, 0, 0.3);
    }

In this example, we set offset-x to 8px and offset-y to 6px, resulting in a shadow on the right and bottom sides of the box. The third value sets the blur radius to 10px, and the fourth value specifies the color of the shadow. You can also use spread radius, but we are not using it in this example.

An inner box shadow using inset, XY offset, blur, spread, and color:

CSS:

    div{        
     /*inset | offset-x | offset-y | blur-radius | spread-radius | color */
       box-shadow:  inset 0px 10px 20px 2px #3a86ff;

    }

Output:

HTML:

   <div>LambdaTest is a Browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems. Integrate LambdaTest with your favorite tool and save yourself from manually managing bugs and tasks.</div>

CSS:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

    body{
      margin:2em 1em;
      font-family: 'Roboto', sans-serif;
    }
    div{
      line-height:28px; 
      margin:auto;
      padding:2em;
      width:250px;
      height:250px;
      border:1px solid #aaa;
      border-radius:5px;
      box-shadow:  inset 0px 10px 20px 2px #3a86ff;
    }

Here we set inset as the first value that makes the shadow inner. Then we set the vertical offset to 10px, blur radius to 20px, and spread to 2px, resulting in an inner shadow from the top direction. Finally, the last value sets the color.

In this System testing tutorial, learn why System testing is important and all the intricacies of the System testing process.

Check this out: Test On Online Emulator Android- Test your web and mobile apps on Android Emulators online.

A smooth box shadow combining multiple shadows separated by a comma:

CSS:

    div{        
      /* offset-x | offset-y | blur-radius | color, offset-x | offset-y | blur-radius | color, */
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
    }

Output:

HTML:

    <div>LambdaTest is a Browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems.</div>

CSS:

      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

    body{
      margin:2em 1em;
      font-family: 'Roboto', sans-serif;
    }
    div{
      line-height:28px;
      margin:auto;
      padding:2em;
      width:250px;
      height:200px;
      border-radius:3px; 
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23); 
    }

In this example, we create a smooth shadow effect by adding two shadows separated by a comma. We specify x and y-offsets to be consistent in both the shadows and the blur radius to be sharper by defining a value of 6px.

Check this out: How To Use ios emulator for PC

Different ways to style CSS box-shadow effects

You can style CSS box-shadow effects in various ways. We will look into three different ways of styling it.

Layered Shadows

This shadow will be the one you notice more frequently than others. This is created by combining multiple shadows separated by a comma and increasing the offset and blur for every shadow. Using this method, you can produce eye-catching shadows seamlessly integrating into the page.

Let’s look at an example of how a layered shadow is created:

HTML:

    <div class="box-one">This is a box with a default box shadow.</div>
    <div class="box-two">This is a box with a layered box shadow.</div>

CSS:

    .box-one{
        box-shadow:0 5px 5px rgba(0,0,0,0.2);
      }

    .box-two{
       box-shadow: 0px 1px 2px rgba(0,0,0,0.2),
                   0px 2px 4px rgba(0,0,0,0.2),
                   0px 4px 8px rgba(0,0,0,0.2),
                   0px 8px 16px rgba(0,0,0,0.2)
      }

Output:

HTML:

    <section class="container">
      <div class="box-one">This is a box with a default box-shadow.</div>
      <div class="box-two">This is a box with layered box-shadow.</div>
      </section>

CSS:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
    body{
      margin:2em 1em;
      font-family: 'Roboto', sans-serif;
    }
    .container{
      display:flex;
      justify-content:center;
    }
    div{
      padding:2em;
      margin:1em;
      width:200px;
      height:150px;
      border-radius:5px;
    }
    .box-one{
      box-shadow:0 5px 5px rgba(0,0,0,0.2);
    }
    .box-two{
     box-shadow: 0px 1px 2px rgba(0,0,0,0.2), 
    0px 2px 4px rgba(0,0,0,0.2), 
    0px 4px 8px rgba(0,0,0,0.2), 
    0px 8px 16px rgba(0,0,0,0.2)
    }
    @media only screen and (max-width:400px){
      .container{
        flex-direction:column;
      }
    }

In this example, we have two boxes. Notice how the layered shadow on the right box differs from the default shadow on the left. Layered shadow creates a smooth, subtle effect that the default shadow does not.

This layering method allows you to have more control over how shadows are rendered on the page and adjust the shadows’ spread, distance, and sharpness.

Neon Shadows

Up until now, we have only seen gray or black shadows. However, shadows can also have colors. Neon shadows are just those shadows that have a glowing effect on them. This type of shadow is best suited for a dark-themed website. Since dark-themed websites are gaining popularity, the usage of neon shadows is also increasing.

You can create a neon shadow by changing the color value of the CSS box-shadow property.

Let’s look at an example of a neon shadow.

HTML:

 <div>This is a box with neon shadow</div>

CSS:

   div{
        box-shadow: 0px 2px 14px 2px #64ffda;
    }

Output:

HTML:

     <div>This is a box with neon shadow</div>

CSS:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
    body{
      font-family: 'Roboto', sans-serif;
      min-height: 100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background-color:#111111;
    }
    div{
      padding:2em;
      height:150px;
      border-radius:10px;
      width: 150px;
      color:#64ffda;
      box-shadow: 0px 2px 14px 2px #64ffda;
    }

In this example, we set the color value to a bluish shade and the y offset to 2px, blur radius to 14px, and spread radius to 2px. As a result, the card has a glowing neon effect.

You can apply multi-layer shadows for a more vibrant and smooth neon effect, much like we did in the previous example.

A complete Manual testing tutorial covering all aspects of Manual testing, including strategies and best practices

Neumorphic Shadows

The concept of neumorphic shadows comes from neumorphism, an adaptation of skeuomorphic design combined with flat design. It is a visual effect that attempts to replicate user interface elements exactly as they would appear in real life.

Neumorphic UI elements appear to be placed inside the background or directly on the background, in contrast to other web design trends that make items appear above the background. They are also called soft UI because soft shadows create the effect.

To better understand the nuemorphic UI, let’s compare it to a material design card component.

Notice how the material design card on the left looks like it floats above the background, while the neumorphic card on the right appears inside the background.

Now let’s see an example of how CSS implements it.

HTML:


    <div>This is a card with neumorphic shadow on the top-left.</div>

CSS:

    div{
       box-shadow: -6px -6px 10px rgba(255,255,255,0.45), 6px 6px 10px rgba(94,104,121,0.3);

    }

Output:

HTML:

  <div>This is a card with neumorphic shadow on top-left.</div>

CSS:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
    body{
      font-family: 'Roboto', sans-serif;
      min-height: 100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background: #dde1e7;
    }
    div{
      padding:2em;
      height:200px;
      width: 200px;
      border-radius: 30px;
      box-shadow: -6px -6px 10px rgba(255,255,255,0.45), 6px 6px 10px rgba(94,104,121,0.3);

    }

We created two shadows separated by a comma. The most important thing to note is that using two shadows — a light shadow and a dark shadow is the fundamental component of creating neumorphic elements, as we did in this example. One serves as a highlight, and the other serves as the direction of the light source to create the neomorphic effect.

In the previous section of this blog on CSS box-shadow effects, we looked at how to use the inset keyword to make an inner shadow. Unlike drop shadows that make an element appear raised from beneath the background, an inset shadow gives the impression that the element is being pressed into it.

Let’s look at an example by just toggling the inset option to see the difference.

HTML:

   <div class=first-card>This is a card with a drop shadow.</div>
    <div class=second-card>This is a card with an inset shadow.</div>

CSS:

    .first-card{
        box-shadow: -6px -6px 10px rgba(255,255,255,0.45), 6px 6px 10px rgba(94,104,121,0.3);
        }

    .second-card{
          box-shadow: inset 6px 6px 10px rgba(255,255,255,0.45), inset -6px -6px 10px rgba(94,104,121,0.3);
      }

Output:

HTML:

    <div class=first-card>This is a card with drop shadow.</div>
    <div class=second-card>This is a card with inset shadow.</div>

CSS:

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
    body{
      font-family: 'Roboto', sans-serif;
      min-height: 100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background: #dde1e7;
    }
    .container{
      display:flex;
      justify-content:center;
    }
    div{
      padding:2em;
      width:200px;
      height:150px;
      margin:1em;
      border-radius: 30px;
    }
    .first-card{
    box-shadow: -6px -6px 10px rgba(255,255,255,0.45), 6px 6px 10px rgba(94,104,121,0.3);
    }
    .second-card{
      box-shadow: inset 6px 6px 10px rgba(255,255,255,0.45), inset -6px -6px 10px rgba(94,104,121,0.3);
    }

    @media only screen and (max-width:400px){
      .container{
        flex-direction:column;
      }
    }

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

Important points to note for neomorphic shadows:

The background color of the neomorphic elements must be the same (or very close) as the parent element’s background color.
Elements need to have two types of shadows: one light and one dark.
Rounded edges are a distinguishing feature of neomorphic elements.

Check this out: Selenium Tutorial: A Complete Guide on Selenium Automation Testing

Tips for applying styling CSS box-shadow

Box shadow is a great way to make your web content look appealing, but we can easily overdo it, which can ruin the look of our website. That’s why keeping a few points in mind while working with shadows is important.

Let’s look at them:

Create consistent shadows

Make them consistent. If our goal is to create the illusion of depth, we need every shadow to match. Otherwise, it will look like a bunch of blurry borders.

Use animations only when necessary

Use animations only when necessary. Performance decreases when we animate CSS box shadow. So, it’s best to avoid complex animations. However, you can use simple CSS animations like hover to transition.

**Use a shadow layering tool*

Use a shadow layering tool. If you don’t feel like writing multiple lines of code to apply box shadow, don’t worry. You can leverage third-party tools like https://shadows.brumm.af/, which helps you create layered shadows quickly.

It allows you to add as many as ten layers of shadow to your object. With this tool, there is no need to enter multiple values to get the ideal shadow manually. Set the properties, preview the box shadow, and copy-paste the code into your project. Voila! You have your layered CSS box shadow!

Check this out: Run Automated Playwright Tests Online- Run your Playwright test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud.

Browser compatibility for CSS box-shadow property

While most browsers support the box-shadow property; there are very few that do not fully support it.

This property is supported in Chrome from version 4 to 9 using the prefix -webkit- and fully supported from version 10.

   -webkit-box-shadow: 8px 6px 10px rgba(0, 0, 0, 0.3);

Mozilla Firefox versions 2 and 3 do not support CSS box-shadow. Version 3.5 and 3.6 support the box shadow with the prefix -moz-. And from version 4, this property is fully supported.

   -moz-box-shadow: 8px 6px 10px rgba(0, 0, 0, 0.3);

For the Safari browser, versions 3.1 and 4 partially support this feature with the prefix -webkit- but version 5 completely supports it.

Opera browser also supports the box-shadow property except for version 10.1.

The CSS properties you use in your website must be cross-browser compatible. This is why you must check the browser compatibility of your features.

To check that, you can use a cloud-based testing platform like LambdaTest that offers an online browser farm of 3000+ real browsers and operating systems combinations to test your websites (and web apps). It lets you perform tests at scale to detect cross browser compatibility issues in HTML/CSS and fix them so that your website (or web app) works seamlessly across different browsers & OS combinations.

Check this out: A Complete End to End (E2E) Testing Tutorial: Comprehensive Guide With Examples and Best Practices

Subscribe to LambdaTest YouTube Channel and get detailed tutorials around Selenium automation testing, Cypress testing, and more.

The following is an example of testing browser support for CSS box-shadow:

Check this out: A Complete End to End Testing Tutorial: Comprehensive Guide With Examples and Best Practices

In this Ad hoc testing tutorial, let's deep dive into what Ad hoc testing is, its advantages, disadvantages, types, characteristics, and their best practices.

Wrapping it Up

As the quest for improving user experience is increasing rapidly in the developer and designer community, features such as CSS box shadows have started to play a mainstream role in website design. They help us to bring realism to the user’s online experience.

In this blog on CSS box shadow, we have discussed why to use CSS box shadow, what is CSS box shadow, and how to implement CSS box shadow. Moreover, we have also discussed the different ways of styling CSS box shadow effects that include layered, neon, and neomorphic shadows.

With this summary, I hope you have gained a firm grasp of CSS box shadow. Practice is the key to mastering a skill. So go and use box shadows on your website. Remember to experiment with different colors and key values to see what works and what does not.

Happy styling!!

A Complete Guide To CSS Grid

Tahera Alam — Fri, 09 Dec 2022 11:14:45 +0000

Ever since the Internet was invented, web developers have searched for the most efficient ways to display content on web browsers.

They made workarounds with CSS concepts like floats and table-based layouts that have been used for a long time. The downside is that neither is ideal since they were never designed to be used as layout tools.

The use of the HTML5 table element for laying out web pages has been deprecated. It means using this element for styling purposes is not only harmful to the architecture of your website, but it might also negatively impact your SEO score.

Flexbox is also a great tool for layout creation, but it was designed for layout in one dimension — either a row or a column. Because of its one-dimensional flow, the Flexbox is also not very suitable for creating complex layouts.

In a later section of the article on CSS Grid, you will see how Flexbox and CSS Grid vary from one another.

Layouts are important because they determine how your website looks across different devices. For example, creating responsive websites for different devices is integral to web design. To achieve such layouts, web developers had to rely on CSS hacks like floats, tables, positioning, etc. You can refer to this CSS cheat sheet to learn more about CSS tricks.

According to Statista, in the second quarter of 2022, mobile phones alone generated 58.99 percent of all website traffic. So we need a more flexible and ideal solution to lay out web pages. Thankfully, CSS Grid Layout is there for our rescue.

Grid is the first CSS module built to solve all the layout challenges web developers have faced. Because of its flexibility, CSS Grid allows you to create almost any type of layout that you might need.

CSS Grid lets you create two-dimensional flexible layouts with rows and columns.

With its different properties and layout concepts, CSS Grid may appear a little intimidating, but it is simple to implement. This blog on CSS Grid breaks down the CSS Grid into a few simple and powerful concepts that will change how you design layouts for the web forever.

Let’s dive right in!

Grid Terminology

Before we go deeper into CSS Grid, let’s look at a few key grid terms you would come across throughout the blog. You can skip this section in case you already have a good grasp of these concepts.

Grid Container

An HTML element becomes a grid container when its display property is set to grid or inline grid.

HTML:

<div class="container">
     <div class="grid-item"></div>
     <div class="grid-item"></div>
     <div class="grid-item"></div>
</div>

CSS:

.container {
    display: grid;
}

Here, the element with the container class is a grid container.

Grid Items

A grid layout comprises a parent element called a grid container and one or more child elements. Child elements that are direct descendants of the grid container are called grid items.

CSS:

<div class="container">
   <div class="item"></div>
   <div class="item"></div>
   <div class="item">
       <p class="sub-item"></p>
    </div>
    <div class="item"></div>
  </div>

In this example, grid items are those elements which have the class item in them. But the element with the class **sub-item **is not a grid item because it is not the direct descendent of the grid container.

Grid Lines

Grid lines are the horizontal and vertical lines that make up the grid.
Starting at the grid container’s outermost edge, each grid line has a reference number that increments by 1 in the direction of the grid.

The lines between columns are called column lines, and the lines between rows are called row lines. You refer to line numbers when placing an item in a grid.

The highlighted blue line in this image is column line 3.

Grid Track

A grid track is a horizontal or vertical space between two grid lines. It is a term for columns or rows of the grid.

Here’s an example of the grid track between the third and fourth-row grid lines:

Grid Cell

A grid cell is a space between four grid lines — two adjacent rows and two adjacent column grid lines. It’s the smallest possible unit on the grid where you can place an item.

Here is an example of the grid cell between row grid lines 2 and 3 and column grid lines 1 and 2.

Grid Area

The grid area is the area on the grid surrounded by four grid lines. There could be several grid cells in it.

Here’s an example of a grid area between row grid lines 2 and 4, and column grid lines 2 and 5.

Grid Container

An HTML element becomes a grid container when its display property is set to grid or inline grid.

CSS:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>

CSS:

.container {
    display: grid;
 }

Output:

HTML:

<div class="container">
       <div class="grid-item">1</div>
       <div class="grid-item">2</div>
       <div class="grid-item">3</div>
       <div class="grid-item">4</div>
       <div class="grid-item">5</div>
       <div class="grid-item">6</div>  
 </div>

CSS:

.container{
    display:grid;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
  }
  .grid-item {
  text-align:center;
  border: 1px solid rgba(17, 17, 17,0.8);
  padding: 18px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  }

Test CSS Grid compatibility across 3000+ browser environments. Try LambdaTest Now!

Check this out: Complete WebDriver Tutorial: A Guide on Selenium WebDriver Automation

Properties for Grid Container

Grid container is the element where you define how you want your grid layout to look. CSS provides several properties for grid containers that allow you to define the layout.

Below we walk through each of these properties in simple terms:

display

The display property sets the element as a grid container. It has two values:

display: grid
display:inline-grid

The grid property makes the grid items block level, taking the entire width of the grid container.

The inline-grid makes grid items inline, while the grid makes the grid-items block level.

grid-template-columns

The grid-template-columns property defines the line name and column sizes of the grid container.

This property creates column tracks in the grid container for each specified value. The value of this property is a list separated by space where each value represents the column track width, and the space between them represents the grid line.

If you want your grid container to have 6 columns, specify the width of 6 columns. Or set the value to auto if you want all the columns to be the same width.

track size: can be length (a non-negative length, giving the width of the column), percentage, or fraction of the available space in the grid container( using fr unit)
line name: the name may be any valid string other than the reserved words span and auto. Lines may have multiple names separated by a space inside the square brackets. For example, [line-name-a line-name-b]

The fr unit lets you create flexible grid tracks. It means a fraction of the available space in the grid container.

For example, this will set the first item to one-third and the second item to two-third of the container’s width.

.container {
      grid-template-columns: 1fr 2fr;
   }

The available space is calculated after all the non-flexible items if any. In the example below, the 100px is not included in the total free space available to the fr units.

.container {
      grid-template-columns: 100px 1fr 2fr;
    }

An example of the grid-template-columns property is shown below:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
  </div>

CSS:

container{
  display:grid;
  grid-template-columns: [first] 1fr [line2] 2fr  [line3] 3fr;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
  }
  .grid-item {
    background-color: #fefae0;
    text-align: center;
    font-size: 30px;
    padding: 15px;
  }

Output:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
  </div>

CSS:

.container{
    display:grid; 
    grid-template-columns: [first] 1fr [line2] 2fr  [line3] 3fr;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
  }
  .grid-item {
  text-align:center;
  border: 1px solid rgba(17, 17, 17,0.8);
  padding: 18px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  }

In the above example, items 4, 5, and 6 are placed on a new row track because only 3 column track sizes were defined. Additionally, because they were positioned in column tracks 1, 2, and 3, their columns’ sizes are equal to 1, 2, and 3.

Check this out: Manual Testing Tutorial: A Comprehensive Guide, with Examples & Best Practices

grid-template-rows

The grid-template-rows property creates row tracks in the grid container for each specified value. Like the grid-template-columns property, the value of grid-template-rows is also a space-separated list where each value defines the height of the specific row.

An example of the grid-template-rows property is shown below:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
  </div>

CSS:

.container{
      display:grid;
      grid-template-rows: 100px 200px;
      background-color: #a2d2ff;
      padding: 30px;
      gap:10px;
      }
      .grid-item {
      text-align:center;
      border: 1px solid rgba(17, 17, 17, 0.8);
      padding: 18px;
      font-size: 28px;
      background-color: rgba(255, 255, 255, 0.8);
      }

Output:

HTML:

<div class="container">
       <div class="grid-item">1</div>
       <div class="grid-item">2</div>
       <div class="grid-item">3</div>
       <div class="grid-item">4</div>  
 </div>

CSS:

.container{
  display:grid;
  grid-template-rows: 100px 200px;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
  }
  .grid-item {
  text-align:center;
  border: 1px solid rgba(17, 17, 17, 0.8);
  padding: 18px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  }

In the above example, we set row height to be 100px and 200px. So, the first and second-row tracks have a height of 100px and 200px. Because only 2-row tracks were defined, the heights of the 3rd and 4th-row tracks are defined by the contents of each.

minmax() function

The minmax() function defines the minimum and maximum size range of a grid row or a grid column. This function takes 2 parameters: the first is the minimum size, and the second is the maximum size of the track.

Let’s look at an example of minmax() function:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">LambdaTest is a cross browser testing cloud platform. It is a browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems</div>  
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
  </div>

CSS:

.container{
  display:grid;
  grid-template-rows:minmax(80px,auto);
  grid-template-columns: minmax(auto,50%) 1fr 2fr;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
   }

Output:

HTML:

<div class="container">
       <div class="grid-item">1</div>
       <div class="grid-item">2</div>
       <div class="grid-item">3</div>
       <div class="grid-item">LambdaTest is a cross browser testing cloud platform. It is a browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems. </div>
       <div class="grid-item">5</div>
       <div class="grid-item">6</div>  
 </div>

CSS:

.container{
  display:grid;
  grid-template-rows:minmax(80px,auto);
  grid-template-columns: minmax(auto,     50%) 1fr 2fr;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
  height:400px;
  }
  .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 15px;
    font-size: 18px;
    font-family: Arial;
    background-color: rgba(255, 255, 255, 0.8);
  }

Let’s analyze the above case:

The first row has a minimum height of 80px, but its maximum size is set to auto, which will allow the row track to increase its height based on the size of the content.

Similarly, the first column track is set to have a minimum height of auto and a maximum height of 50%, which ensures that the column track doesn’t go beyond 50% of the grid container. The second and third column track has a height of 1fr and 2fr, respectively.

This function is super useful when you want a strict minimum value and an open, flexible one.

repeat() function

The repeat() function sets the grid tracks to repeat according to the specified value. This allows many columns or rows with the same pattern to be written in a more compact form.

This is useful for a grid with many items of the same value.

The repeat()function takes two arguments:

The first argument specifies the number of times tracks should repeat. It is defined with an integer value of 1 or more.
The second argument specifies the size of the tracks.

Let’s look at an example of the repeat() function:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
  </div>

CSS:

.container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }

Output:

<div class="container">
       <div class="grid-item">1</div>
       <div class="grid-item">2</div>
       <div class="grid-item">3</div>
       <div class="grid-item">4</div>
       <div class="grid-item">5</div>
       <div class="grid-item">6</div>  
 </div>

CSS:

.container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
      text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }

In this example, we repeat 1fr 3 times for column tracks which create 3 column tracks of 1fr each.

fit-content() function

The fit-content() function takes just one parameter — the maximum value. When this property is set, a grid column or row will still take up as little space as necessary according to its content, but not more than the maximum value provided.

Let’s look at an example of the fit-content() function:

HTML:

<div class="container">
   <div class="grid-item"></div>
   <div class="grid-item">LambdaTest is a cross browser testing cloud platform.It is a browser & app testing cloud to perform both exploratory and automated testing.</div>
   <div class="grid-item"></div>
</div>

CSS:

.container{
      display: grid;  
      grid-template-columns: auto fit-content(600px) auto;
      background-color: #a2d2ff;
      padding: 10px;
      gap:10px;
      height:500px;
    }

Output:

HTML:

<div class="container">
        <div class="grid-item"></div>
        <div class="grid-item">LambdaTest is a cross browser testing cloud platform.It is a browser & app testing cloud to perform both exploratory and automated testing.</div>
        <div class="grid-item"></div>
  </div

CSS:

.container{
  display: grid;  
  grid-template-columns: auto fit-content(600px) auto;
  background-color: #a2d2ff;
   padding: 10px;
   gap:10px;
   height:500px;

}
 .grid-item {
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 18px;
    font-family: Arial;
    background-color: rgba(255, 255, 255, 0.8);
    }

In this example, we have three columns, the first and third columns are set to auto. But the second column is set to fit the content to a max value of 600px.

The second column will take up the space based on its content, but it will not go beyond the max size of 600px.

min-content and max-content

The min-content and max-content are two special values that can be used in both CSS Grid and CSS in general.

The min-content specifies the element to take the minimum space needed for the content. Suppose for a line of text, this value will shrink the element to the minimum it could be without letting any of the words go beyond that shrunk size. This implies that text content would soft-wrap itself whenever possible, shrinking to the size of the longest word.

Let’s look at an example to better understand this:

HTML:

<div class="container">
  <div class="grid-item"></div>
   <div class="grid-item">This is a line  of text to demonstrate  min-content.Notice how it's taking the length of the longest word.</div>
   <div class="grid-item"></div>
  </div

CSS:

.container{
    display: grid;  
    grid-template-columns:auto min-content auto;
}

Output:

HTML:

<div class="container">
  <div class="grid-item"></div>
 <div class="grid-item"id="item2">This is a line  of text to demonstrate min-content. 
Notice how it's taking the length of the longest word.</div>
 <div class="grid-item"></div>
</div

CSS:

.container{
      display: grid;  
      grid-template-columns:auto min-content auto;
      padding: 10px;
      gap:15px;
      font-family:Arial;
    }
.grid-item{
  background-color:#ddd;
  font-size:18px;
}
#item2{
  background-color:yellow;
}

In this example, there are three columns. The second one is set to min-content, and the other two are set to auto. Because of this value, the second element takes the width of the longest word, making sure to take as little space as possible.

The max-content values take the maximum space needed for its content without adjusting any content.

Here’s an example of max-content:

HTML:

<div class="container">
  <div class="grid-item"id="item2">This is a line  of text to demonstrate max-content.</div>
  </div

CSS:

.container{
    display: grid;  
    grid-template-columns:max-content;
}

Output:

<div class="container">
 <div class="grid-item"id="item2">This is a line  of text to demonstrate max-content.</div>
</div

CSS:

.container{
      display: grid;  
      grid-template-columns:max-content;
      padding: 10px;
      gap:15px;
      font-family:Arial;
    }
.grid-item{
  background-color:#ddd;
  font-size:18px;
}
#item2{
  background-color:yellow;
}

auto-fill and auto-fit

The auto-fill property fills the row with as many columns as it can fit. Whenever a new column can fit, auto-fill creates implicit columns and fills it in the row because it’s trying to fill as many columns as it can fit in the row. If the new column is empty, it will still be allocated a space in the row.

The auto-fit expands the available columns to fit them into the entire available space of the container.

Consider this demo to understand the auto-fill and auto-fit properties:

In this example, the columns are defined using the repeat function. They have a minimum width of 150px and a max width of 1fr, which will share the total space equally between elements if available.

For the number of columns per row, we set it to auto-fit in the first grid, and in the second one, we set it to auto-fill.

#first-container{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 #second-container{
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 }

Notice how both the properties are behaving exactly the same in the above image.
Here’s an important point for you to note: up to a certain width, auto-fill and auto-fit show the same result. But they are not behaving the same under the hood.

Output:

HTML:

<div class="container"id="first-container">
  <h2>Autofill</h2>
  <div class="grid-item">1</div>
   <div class="grid-item">2</div>
   <div class="grid-item">3</div>
    <div class="grid-item">4</div>
   <div class="grid-item">5</div>
</div>
<div class="container"id="second-container">
  <h2>Autofit</h2>
  <div class="grid-item one">1</div>
   <div class="grid-item two">2</div>
   <div class="grid-item three">3</div>
    <div class="grid-item four">4</div>
   <div class="grid-item five">5</div>
</div>

CSS:

.container{ 
      display:grid;
      padding: 10px;
      gap:15px;
      font-family:Arial;
    }
#first-container{ 
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
#second-container{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.grid-item{
  background-color:#ffafcc;
  font-size:18px;
  padding:3em;
  text-align:center;
}

When extra space becomes available to the first container, which is set to auto-fill, it will add as many columns as it can and fill the row even if the columns are empty.
But in the case of the second container with an auto-fit set, it will fill the extra space with the existing columns by expanding them.

grid-template-areas

The grid-template-areas property defines the grid template by referencing the names of the grid areas specified with the grid-area property.

First, you name the items of the grid by the grid-area property, and then you reference those names in the grid-template-areas property.

In the grid-template-areas property, you repeat the grid area names, which causes that cell to span according to the repeated times.

Values:

grid-area-name: the name of a grid area specified with the grid-area property.
*none *— no grid areas are defined.

If this sounds confusing, do not worry. This is a very powerful property; the example below will clarify the concept.

HTML:

<div class="container">
        <header>Header</header>
         <main>main</main>
         <nav>nav</nav>
         <aside>aside</aside>
         <footer>footer</footer>
        </div>

CSS:

header{
  grid-area: header;
}
 nav{
  grid-area: nav;
}
 main{
  grid-area: main;
}
 aside{
  grid-area: sidebar;
}
 footer{
  grid-area: footer;
}
 header,footer,main,aside,nav{
  background-color:#3a86ff;
  color:#fff;
  border: 1px solid #fff;
  padding:20px;
}
.container{
 display: grid;
 grid-template-areas:
  'header header header
  'nav main sidebar'
  'nav footer footer';
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 70px 2fr 50px;
  height: 100vh;
}

Output:

HTML:

<div class="container">
<header>Header</header>
 <main>main</main>
 <nav>nav</nav>
 <aside>aside</aside>
 <footer>footer</footer>
</div>

CSS:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
header{
    grid-area: header;
}
nav{
    grid-area: nav;
}
main{
    grid-area: main;
}
aside{
    grid-area: sidebar;
}
footer{
    grid-area: footer;
}
header,footer,main,aside,nav{
    background-color:#3a86ff;
    color:#fff;
    border: 1px solid #fff;
    padding:20px;
}
.container{
  display: grid;
  grid-template-areas: 
    'header header header'
    'nav main sidebar'
    'nav footer footer';
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 70px 2fr 50px;
    height: 100vh;
}

In this example, we create a grid layout that has 3-column tracks and 3-row tracks. The entire top row will consist of the header area. The middle row will consist of 1 nav area, 1 main area, and 1 sidebar area. The bottom row will consist of 1 nav area and 2 footer areas.

grid-gap(gutters)

The grid-gap property defines the gap size between the rows and columns in a grid layout. It is a shorthand property for the row-gap and column-gap.

If two values are specified, the first represents grid-row-gap, and the second represents grid-column-gap. If only one value is specified, both row-gap and column-gap get the same specified gap.

An example of a grid-gap property is shown below:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
  </div>

CSS:

.container{
  display:grid;
  /*grid-gap:10px 40px;*/ /*old*/
  gap:10px 40px; /*standard*/
  grid-template-columns:repeat(3,1fr);
  background-color: #a2d2ff;
  padding: 30px;
  }
  .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
     }

Output:

HTML:

<div class="container">
       <div class="grid-item">1</div>
       <div class="grid-item">2</div>
       <div class="grid-item">3</div>
       <div class="grid-item">4</div>
       <div class="grid-item">5</div>
       <div class="grid-item">6</div>  
 </div>

CSS:

.container{
    display:grid;
    /*grid-gap:10px 40px;*/ /*old*/
    gap:10px 40px; /*standard*/
    grid-template-columns:repeat(3,1fr);
    background-color: #a2d2ff;
    padding: 30px;
    }
    .grid-item {
      text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }

In the example, we set the row gap to 10px and column gap to 40px.

justify-items

The justify-items property is used to align the grid items along the row axis or inline axis.

Values:

start: position grid items at the start of the row axis (row line number 1).
end: position grid items at the end of the row axis.
center: position grid items in the center of the row axis.
stretch: stretch the grid items across the entire row axis. This is the default value.

Below are the examples of each value:

.container {
  justify-items: start;
}

Figure 1: Boxes(grid items) are aligned to the start of the row axis.

container {
  justify-items: end;
}

Figure 2: Boxes(grid items) aligned to the end of the row axis

.container {
  justify-items: center;
}

Figure 3: Boxes are aligned to the center of the row axis

.container {
  justify-items: stretch;
}

Figure 4: Boxes stretched across the entire row axis

Check this out: Automated Functional Testing: What it is & How it Helps?

align-items

The align-items property is used to align the grid items along the column axis or block axis.

Values:

start: aligns grid items vertically to the start of the column cell.
**end: **aligns grid items vertically to the end of the column cell.
center: aligns grid items vertically at the center of the column cell.
stretch: stretch the grid items across the entire column filling the whole cell’s height. This is the default value.

Below are the examples of each value:

.container {
  align-items: start;
}

Figure 1: Boxes aligned to the top of the column axis

.container {
  align-items: end;
}

Figure 2: Boxes aligned to the bottom of the column axis

.container {
  align-items: center;
}

Figure 3: Boxes are aligned at the center of the column axis.

.container {
  align-items: stretch;
}

Figure 4: Boxes are stretched across the column axis, filling the entire column height.

place-items

The place-items property is a shorthand for justify-items and align-items properties. It means you can set both the justify-items and align-items properties in a single declaration.

Values:

The first value sets justify-items, and the second value sets align-items. If there’s only one value, it is set as the value of both properties.

HTML:

<div class="container">
    <div class="grid-item">Grid Item</div>
  </div>

CSS:

container{
  display:grid;
  place-items:center;
  background-color: #a2d2ff;
  padding: 60px;
  }
  .grid-item {
    background-color: #fefae0;
    font-size: 20px;
    padding: 15px;
  }

Output:

HTML:

<div class="container">
    <div class="grid-item">Grid Item</div>
  </div>

CSS:

.container{
  display:grid;
  place-items:center;
  background-color: #a2d2ff;
  padding: 60px;
  }
  .grid-item {
    background-color: #fefae0;
    font-size: 20px;
    padding: 15px;
  }

In this example, the grid item is centered horizontally and vertically.

Justify-content

The justify-content property aligns the entire grid inside the container along the row(inline) axis.

It is important to note that for justify-content to work, the grid’s total width has to be less than the container’s width.

Suppose there is a box named box A, and you put another box named box B into it. To move box B inside box A, box B must be smaller than box A, right?

If it is not smaller, it will fill the box, and you can’t move it. It’s the same concept behind this.

Values:

start: aligns the grid at the beginning of the grid container.
end: aligns the grid at the end of the grid container.
center: aligns the grid in the middle of the grid container.
stretch: resizes the grid items to make the grid fill the entire width of the grid container.
space — around: gives inner grid items equal space between them. The first and last items will be allocated half the space.
space — between: gives grid items equal space between them.
space — evenly: gives grid items equal space between and around them.

Let’s look at the examples of each value to understand them better:

.container {
  justify-content: start;
}

Figure 1: The grid is aligned at the start of the grid container.

.container {
  justify-content: end;
}

Figure 2: The grid is aligned at the end of the grid container.

.container {
  justify-content: center;
}

Figure 3: The grid is aligned in the middle of the grid container.

.container {
  justify-content: stretch;

Figure 4: The grid items are resized, making the grid take the full width of the grid container.

.container {
  justify-content: space-around;
}

Figure 5: The inner grid columns have equal space between them. The first and last column is allocated half the space around them.

.container {
  justify-content: space-between;
}

Figure 6: The grid items have an equal amount of space between them.

.container {
  justify-content: space-evenly;
}

Figure 7: The grid items have equal space between and around them.

align-content

The align-content property is used to align the entire grid inside the container along the column(block) axis. This property is used to align the whole grid inside the container vertically.

Note that the grid’s total height has to be less than the height of the container for the align-content property to have any effect.

Values:

start: aligns the rows at the beginning of the grid container.
**end: **aligns the rows at the end of the grid container.
center: aligns the rows in the middle of the grid container.
stretch: resizes the grid items to make the grid fill the entire height of the grid container.
space — around: gives rows an equal amount of space around them.
space — between: gives rows equal space between them.
space — evenly: gives rows equal space between and around them.

Let’s look at the examples of each value:

.container {
  align-content: start;
}

Figure 1: The grid is aligned at the top of the grid container.

.container {
  align-content: end;
}

Figure 2: The grid is aligned at the bottom of the grid container.

.container {
  align-content: center;
}

Figure 3: The grid is aligned in the middle of the grid container.

.container {
  align-content: stretch;
}

Figure 4: The grid items are resized, making the grid take the entire height of the grid container.

.container {
  align-content: space-around;
}

Figure 5: The rows have an equal amount of space around them. First and second row have half the space around them.

.container {
  align-content: space-evenly;
}

Figure 6: The rows have an equal amount of space between and around them.

`.container {
  align-content: space-between;
}

Figure 7: The rows have an even amount of space between them.

place-content

The place-content property is a shorthand for align-content and justify-content properties. It takes two values and sets both align-content and justify-content properties in a single declaration.

Values:

The first value sets align-content, and the second value sets justify-content. If there’s only one value, it is set as the value of both properties.

HTML:

<div class="container">
    <div class="grid-item">Grid Item</div>
     <div class="grid-item">Grid Item</div>
      <div class="grid-item">Grid Item</div>
    </div>

CSS:

.container{
    display:grid;
    place-content: center end;
    grid-template-columns: repeat(3,150px);
    background-color: #a2d2ff;
    padding: 60px;
    gap:30px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    }

Output:

HTML:

<div class="container">
    <div class="grid-item">Grid Item</div>
     <div class="grid-item">Grid Item</div>
      <div class="grid-item">Grid Item</div>
    </div>

CSS:

.container{
    display:grid;
    place-content: center end;
    grid-template-columns: repeat(3,150px);
    background-color: #a2d2ff;
    padding: 60px;
    gap:30px;
    }
    .grid-item {
     text-align:center;
     border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 20px;
    background-color: rgba(255, 255, 255, 0.8);
  }

In the example above, the place-content property has a value of center which positions grid items to the middle vertically and end positions grid items to the end of the grid container horizontally.

grid-auto-* (*-columns/rows/flow)

These properties let you define the implicit grid. Now, you might be wondering what an implicit grid track is.

Generally, we create a grid explicitly by creating columns and rows with the grid-template-columns and grid-template-rows properties.

When there is insufficient space for grid items in the explicit grid, an implicit grid is created to position those items outside the explicit grid. Those items are then automatically placed in the implicit grid.

This auto-placement is done by an algorithm named auto-placement algorithm.
The grid-auto-flow property controls how the algorithm places the items in the grid.

The values of the grid-auto-flow property are:

row: places items row by row. This is the default.
column: places items column by column.
dense: sets the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later.

It is important to note that dense only changes the visual order of grid items. In turn, it might cause them to appear out of order which is bad for accessibility.

To specify the size of the implicit grid tracks, you use grid-auto-columns and grid-auto-rows properties.

Examples:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
  </div>

CSS:

.container{
  display:grid;
  grid-template-columns:80px 120px;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
  }
  .grid-item {
  text-align:center;
  border: 1px solid rgba(17, 17, 17,0.8);
  padding: 18px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  }

Output:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
  </div>

CSS:

.container{
      display:grid;
      grid-template-columns:80px 120px;
      grid-auto-flow:column;
      grid-auto-columns:1fr;
      background-color: #a2d2ff;
      padding: 30px;
      gap:10px;
      }

      .grid-item {
      text-align:center;
      border: 1px solid rgba(17, 17, 17,0.8);
      padding: 18px;
      font-size: 28px;
      background-color: rgba(255, 255, 255, 0.8);
      }

In this example, we have only defined the sizes of the first 2 column tracks as 80px and 120px wide. But we have 4 items. So an implicit grid gets created to place the 3rd and 4th items.

The grid-auto-flow property places the items column by column, and the grid-auto-columns property specifies the size of the column tracks, which is 1fr in this case.

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
  </div>

CSS:

.container{
  display:grid;
  grid-template-rows:60px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows:120px;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
  }
  .grid-item {
  text-align:center;
  border: 1px solid rgba(17, 17, 17,0.8);
  padding: 18px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  }

Output:

HTML:

<div class="container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  </div>

CSS:

.container{
  display:grid;
  grid-template-rows:60px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows:120px;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
  }
  .grid-item {
  text-align:center;
  border: 1px solid rgba(17, 17, 17,0.8);
  padding: 18px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  }

In the example, we defined only one row track to be 60px. So, items 1 and 2 have a height of 60px. The second-row track is then auto-created to make space for items 3 and 4 in the implicit grid. So, the grid-auto-rows property specifies the height of row tracks is *120px *in this case.

grid

The grid property is a shorthand for:

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

Note that you can only specify the implicit or explicit grid properties in a single declaration.

Values:

**none: **it is the default value. No specific size is mentioned for rows or columns.
grid-template-rows / grid-template-columns: it is used to specify the size of the rows and columns.
grid-template-areas: specifies the grid layout using named items.
grid-template-rows / grid-auto-columns: specifies the size (height) of the rows and the auto size of the columns.
grid-auto-rows / grid-template-columns: specifies the auto size of the rows and sets the grid-template-columns as specified.
grid-template-rows / grid-auto-flow grid-auto-columns: specifies how to place items and auto-size rows and columns.
**grid-auto-flow grid-auto-rows / grid-template-columns: **specifies how to place items and auto-size row and grid-template columns.

Examples:

.container {
      display: grid;
      grid: 120px auto 200px / repeat(2, 1fr) 150px;
    }

The above example creates three explicit rows of 120px, auto, and 200px. Then using the repeat() function, it creates two columns of 1fr and one of 150px.
It’s equivalent to this longer version:

.container {
    display: grid;
    grid-template-rows: 100px auto 300px;
    grid-template-columns: repeat(2, 1fr) 100px;
}

The following two code blocks are same:

.container {
    grid: auto-flow / 100px 2fr;
  }
  .container {
    grid-auto-flow: row;
    grid-template-columns: 100px 2fr;
  }

The following two code blocks are also same:

.container {
    grid: [row1-start] "header header header" 2fr [row1-end]
          [row2-start] "footer footer footer" 30px [row2-end]
          / auto 60px auto;
  }

.container {
    grid-template-areas:
      "header header header"
      "footer footer footer";
    grid-template-rows: [row1-start] 2fr [row1-end row2-start] 30px [row2-end];
   grid-template-columns: auto 60px auto;    
  }

Check this out: Cross Browser
Test Cloud- Browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems.

Properties for Grid Items

Similar to grid containers, CSS also provides a number of properties to work with grid items, which allow you to have more control over them.

Below we discuss these properties:

grid-row-* and grid-column-*

These properties determine the location of grid items by specifying where to start and where to end the item in grid lines. grid-row-start and grid-column-start specify the line where the item begins. Similarly, grid-row-end and grid-column-end specify the line where the item ends.

Values:

line: takes a number to refer to a grid line or a name to refer to a named grid line.
**span: **takes a number or a name. The item will span across the specified number of grid tracks when it takes a number. Whereas, in the case of name, the item will span across until it hits the line with the specified name.
auto: specifies that the property does not do anything to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.

Example:

.item-one {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row2-start;
  grid-row-end: 4;
}

In the column axis, the grid item starts from column line 2 and ends at column line 5. In the row axis, it starts from row line 2 and ends at row line 4.

.item-two {
    grid-column-start: 1;
    grid-column-end: span col5-start;
    grid-row-start: 1;
    grid-row-end: span 3;
  }

In the column axis, the grid item starts from column line 1 and ends at column line 5. In the row axis, it starts from row line 1 and ends at row line 3.

If grid-column-end or grid-row-end is not declared, the item will span 1 track by default.

Grid-column and grid-row

The grid-column property is a shorthand property for grid-column-start and grid-column-end.

The grid-row property is a shorthand property for grid-row-start and grid-row-end.

They accept all the values that longhand property accepts.

An example of a grid-column property is shown below:

HTML:

<div class="container">
          <div class="grid-item"id="item-one">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6<div>    
       </div>

CSS:

.container{
    display:grid;
    grid-template-columns: auto auto auto;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }
  #item-one{
    grid-column:1/span 2;
  }

Output:

HTML:

<div class="container">
    <div class="grid-item"id="item-one">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6<div>    
  </div>

CSS:

.container{
  display:grid;
  grid-template-columns: auto auto auto;
  background-color: #a2d2ff;
  padding: 30px;
  gap:10px;
  }
  .grid-item {
  text-align:center;
  border: 1px solid rgba(17, 17, 17,0.8);
  padding: 18px;
  font-size: 28px;
  background-color: rgba(255, 255, 255, 0.8);
  }
#item-one{
  grid-column:1/span 2;
}

In the example, item one starts at column 1 and spans across column 2. As soon as it hits the end of column 2, it stops.

An example of the grid-row property is shown below:

<div class="container">
          <div class="grid-item"id="item-one">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6<div>    
       </div>

CSS:

.container{
    display:grid;
    grid-template-columns: auto auto auto;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }
  #item-one{
    grid-row:1/3;
  }

Output:

HTML:

<div class="container">
  <div class="grid-item"id="item-one">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6<div> 
 </div>

CSS:

.container{
    display:grid;
    grid-template-columns: auto auto auto;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }
  #item-one{
    grid-row:1/3;
  }

In the example, item one starts at line 1, and as soon as it hits line 3, it ends.

In both properties, if the end is not defined, the item spans 1 track by default.

grid-area

The grid-area property assigns a name to a grid item which then can be referenced by the grid-template-areas property of the grid container.

This property can also be used as a shorthand property for

grid-row-start
grid-column-start
grid-row-end
grid-row-end

Values:

name: a name of your choice.
row-start / column-start / row-end / column-end: same values as the longhand property of each.

An example of a grid-area to assign a name is shown below:

HTML:

<div class="container">
        <div class="grid-item"id="item-one">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6<div>    
       </div>

CSS:

.container{
    display:grid;
    grid-template-areas:
  'firstItem firstItem firstItem';
   grid-template-columns: 1fr 1fr 1fr;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }
  #item-one{
  grid-area:firstItem;
  }

Output:

HTML:

<div class="container">
  <div class="grid-item"id="item-one">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6<div>  
 </div>

CSS:

.container{
    display:grid;
   grid-template-columns:auto auto auto;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }
  #item-one{
  grid-area: 2 / 1 / span 2 / span 2;
  }

In the example, item one is assigned a name with grid-area property. grid-template-areas in the grid container, then reference to the name. Referencing the name 3 times makes the item take 3 columns filling the entire track.
An example of a grid-area as the shorthand for grid-row-start, grid-column-start,grid-row-end, and grid-column-end is shown below:

HTML:

<div class="container">
          <div class="grid-item"id="item-one">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6<div>    
       </div>

CSS:

.container{
    display:grid;
    grid-template-columns: auto auto auto;
    background-color: #a2d2ff;
    padding: 30px;
    gap:10px;
    }
    .grid-item {
    text-align:center;
    border: 1px solid rgba(17, 17, 17,0.8);
    padding: 18px;
    font-size: 28px;
    background-color: rgba(255, 255, 255, 0.8);
    }
  #item-one{
    grid-area: 2 / 1 / span 2 / span 2;
  }

In the example, item one starts at row 2 and column 1. Then, it spans to row 2 and column 2.

justify-self

Each grid item has a cell of its own. By default, grid items get placed in their cell filling the entire width of the cell. The justify-self property aligns a grid item inside a cell along the row axis. A grid item located inside of a single cell is affected by this value.

Values:

start: aligns the grid item at the start of the cell.
end: aligns the grid items at the end of the cell.
center: aligns the grid item in the center of the cell.
stretch: stretch the grid item across the entire cell filling the entire width of the cell. This is the default value.

Below are the examples of each value:

.item {
  justify-self: start;
}

Figure 1: The highlighted grid item is aligned to the start of the cell.

.item {
  justify-self: end;
}

Figure 2: The highlighted grid item is aligned to the end of the cell.

.item {
  justify-self: center;
}

Figure 3: The highlighted grid item is aligned in the middle of the cell.

.item {
  justify-self: stretch;
}

Figure 4: The highlighted grid item is stretched across the entire cell width.

align-self

The align-self property aligns a grid item inside a cell along the column axis. This value applies to the content inside a single grid item.

Values:

start: aligns the grid item at the start of the cell.
end: aligns the grid items at the end of the cell.
**center: **aligns the grid item in the center of the cell.
stretch: stretch the grid item across the entire cell filling the entire height of the cell. This is the default value.

Below are the examples of each value:

.item {
  align-self: start;
}

Figure 1: The highlighted grid item is aligned to the start of the cell vertically.

.item {
  align-self: end;
}

Figure 2: The highlighted grid item is vertically aligned to the end of the cell.

.item {
  align-self: center;
}

Figure 3: The highlighted grid item is aligned vertically to the center of the cell.

.item {
  align-self: stretch;
}

Figure 4: The highlighted grid item is stretched across the cell filling the entire height of the cell.

To apply this behavior to every single item in a grid, you can also use the align-items property on the grid container.

place-self

The place-self property lets you align an individual item in both the block(column) and inline(row) directions at once. It is a shorthand property for align-self and justify-self.

Values:

The first value sets align-self, and the second value sets justify-self. If there’s only one value, it is set as the value of both properties.
auto — sets the default alignment for the layout.

An example of this property is shown below:

.item {
  place-self: center stretch;
}

Subgrid

Subgrid is an extremely important addition to CSS Grid that allows your grid items to have a grid of their own and it inherits grid lines from the parent grid.

Below is an example of how to create a subgrid:

First, create a grid as usual.

<div class="main-grid-container">
            <div class="grid-item">
              <div class="subgrid-item"></div>
              <div class="subgrid-item"></div>
            </div>
   </div>

.main-grid-container {
    display: grid;
 }

Then, set a grid item to grid.

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

Although this is a handy feature, it is not widely supported by browsers yet.

Again, browsers are constantly changing, so maybe all browsers will support the subgrid soon.

The browser compatibility of CSS Subgrid is shown below:

Check this out: Selenium Tutorial: A Complete Guide on Selenium Automation Testing

Browser support for CSS Grid

Until March 2017, browser support for CSS Grid was almost non-existent. But in March of 2017, the first time, a major specification like CSS Grid was shipped into at least 6 major browsers simultaneously for the first time.

Today, we have Grid Layout support in almost all major browsers. However, there are still very few outdated and non-supporting browsers. To support it in those browsers, refer to this resource.

While CSS Grid has been adopted by all modern browsers, it’s still important to check cross browser compatibility to make sure your website works seamlessly across different browsers.

Shown below is the cross browser compatibility of CSS Grid by LambdaTest Web technology compatibility generator. To know how your CSS grids are performing over different browsers and OS combinations, you can use LambdaTest cross browser testing platform to test your CSS Grids for compatibility on an online browser farm of 3000+ real browsers and OS combinations.

Check this out: Run Automated Playwright Tests Online- Run your Playwright test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud.

Is your CSS Grid responsive?

A responsive website is a website that adapts to different screen sizes and formats. This can be achieved in a number of ways, but one of the most popular is CSS Grid. It’s not just for mobile devices either; it can also be used for layouts on big screens like laptops and desktops.

Performing tests to check responsiveness can be time-consuming. However, tools like LT Browser makes it much easier. LT Browser by LambdaTest is a mobile-friendly test tool that comes with 50+ pre-installed viewports with multiple standard resolutions. Additionally, LT Browser offers sophisticated developer tools for testing.

Check this out: A Complete End to End (E2E) Testing Tutorial: Comprehensive Guide With Examples and Best Practices

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Selenium testing, Cypress E2E testing, CI/CD, and more.

Below are some of the top-notch features of LT Browser that, as a developer, I love to have:

Device sync feature to scroll on two devices simultaneously.
Network throttling feature to test websites on different networks.
Capturing full-page screenshots of the web page.
Generating performance reports powered by Google Lighthouse.
Video recording of a running test session, and much more.

Check this out: Automated Functional Testing: What it is & How it Helps?

Differences between Flexbox and CSS Grid Layout

Flexbox is designed for one-dimensional layouts. It means **Flexbox **can either work on rows or columns at a time. But **Grid **is made for two-dimensional layouts which means it can work on both rows and columns.

Let’s look briefly at what CSS Grid allows you to do that **Flexbox **does not.

Below is an illustration of a possible CSS Grid layout:

Now look at another illustration of a possible flexbox layout:

Flexbox allows you to achieve a layout that is one-dimensional — either horizontal or vertical. But a grid allows you to create complex layouts which are multi-dimensional, involving both horizontal and vertical flow.

In fact, flexbox is mostly used in combination with CSS Grid to create layouts.
Here are two instances of well-known websites that use CSS Grids and flexboxes and in their layouts:

Codepen uses CSS Grid in the layout

Amazon uses CSS Flexbox in its layout

Check this out: Blackbox Testing Tutorial: A Comprehensive Guide With Examples and Best Practices

Wrapping it up!

CSS Grid is the most important CSS module for creating modern web layouts. And now you know everything about it. Give yourself a pat on the back for making it to the end!

It’s time for you to go and create some amazing web pages!

Happy building!!