DEV Community: AdarshM1024

Media Queries for Standard Devices: Complete Guide

AdarshM1024 — Wed, 06 Mar 2024 09:08:55 +0000

The ever-increasing use of mobile devices has reshaped user behavior, raising expectations for seamless experiences regardless of screen size. To achieve a seamless responsive experience, developers follow many strategies, such as mobile-first design, progressive web apps, and single-page applications. While these approaches are beneficial to some extent, it is also important to consider the viewport, screen resolutions, and other device types.

One way to focus on particular viewports, screen resolutions, and device features is by using CSS media queries for standard devices. Media queries allow us to apply styles that suit specific viewport sizes.

In this tutorial, we will walk you through all the aspects and provide you with a thorough understanding of how media queries work in detail. We will explore how to use media queries for standard devices and breakpoints, allowing you to create responsive designs that adapt seamlessly across various screen sizes.

Looking to convert binary to hex? Convert binary numbers to hex with ease using our free online Binary to Hex Converter tool. Perfect for developers and coders.

Why Responsive Web Design Matters?

Web applications bridge the gap between businesses and a global audience. Every user wishes to have a seamless experience throughout the application, and according to web credibility research, more than 75% of customers admit to judging an organization’s credibility based on the design of their website.

Developers are encountering a substantial rise in workload due to the rapid growth of mobile devices with varying sizes, resolutions, and other aspects. With the ever-growing variety of devices, it becomes essential for developers to craft websites and mobile applications that offer a seamless user experience across all devices.

The rise of innovative smartphones like foldable, curved display, and rollable devices introduces complexity. Adhering to responsive design principles becomes essential to ensure seamless user experiences across these unique display sizes and form factors.

Responsive design in CSS is the fundamental pillar of modern web design. Responsive websites ensure that potential customers don’t encounter frustrating navigation issues or content misalignments when accessing your platform on different devices.

An enhanced user experience leads to higher engagement, reduces bounce rates, and increases conversion rates. Users who can easily browse and interact with your content are likely to stay on your site longer, explore your offerings, and make purchases.

End users never want a website that looks non-responsive and has broken content, just like this example.

Convert your JSON files to CSV format in seconds with our easy-to-use JSON to CSV Converter. It’s fast, reliable, and user-friendly, making data conversion simple.

We used LT Browser to check the responsiveness on mobile and tablet viewports. It is a developer-friendly browser that tests responsive websites across different screen sizes.

They want a consistent user experience throughout the entire website, regardless of the variety of devices they use to access it. Whether browsing on smartphones, tablets, laptops, or desktop computers, they expect the website to adapt seamlessly to their screen size and resolution.

For example, the webpage below looks much better as it adapts well to different viewports.

Example of a responsive website

Today, responsiveness goes beyond tweaking font sizes or colors. It’s all about giving you, the user, a better experience. For instance, when you visit your favorite shopping app on a larger device, it treats you with a visually appealing carousel of the latest fashion trends and stylish product images in a neat grid layout.

Now, switch to shopping on the same website but on your smartphone. The magic happens — the website instantly adjusts to fit your tiny mobile screen. The big carousel eventually becomes a touch-friendly slider, letting you effortlessly swipe through the latest trends.

Use our free online Random Number Generator tool to create unique non-repeating random numbers. Input your lower and upper range and get numbers with a click.

Amazon home page -Desktop vs Mobile

You can see that the same website shows different content with respect to its viewport. In the same way, we can adjust the look and feel of the web application to ensure a consistent user experience, regardless of the device viewport.

When a website is responsive, it means it can adapt and display properly on various devices, including desktop computers, tablets, and mobile phones. This can also contribute to Search Engine Optimization, and it is a critical factor in SEO rankings, as mobile-friendliness is now a significant consideration for search engines like Google.

Google predominantly uses the mobile version of a website for indexing and ranking in search results. If your site is not mobile-friendly, it may not rank as high in search results, resulting in reduced organic traffic.

All these accounts for the fact that we cannot compromise on the responsiveness of a website. Responsive websites can increase conversion rates and customer satisfaction, as visitors can easily navigate and interact with the content. CSS media queries for standard devices enable responsive web design, allowing us to target specific viewports for optimal user experiences.

Need to convert CSV to JSON? Try our free CSV to JSON converter tool to convert your CSV files to JSON format. Simple and easy to use. Try it now for free.

What are Media Queries for Standard Devices?

Media queries are a feature in CSS in which the content adapts to follow certain styles or rules based on specific conditions or characteristics of the user’s device or viewport. Media rules were introduced with CSS3, aiming to create responsive web designs that adapt to different devices and screen sizes.

With the help of media queries for standard devices, we can create a custom set of styles based on conditions regarding width, height, aspect ratio, resolution, or any other device-specific features. This allows the website to adapt according to various devices, providing an optimal layout and user experience for each screen type.

Most of the time, we rely on CSS Grid and CSS Flexbox to create custom layouts. They have revolutionized how we design web pages, allowing us to develop complex and responsive designs efficiently.

However, even with the advantages offered by CSS Grids and Flexbox, there are instances where additional fine-tuning is necessary, especially for smaller viewports such as those on mobile devices and tablets.

By using media queries for standard devices, we can define specific rules that trigger changes in the layout and styling of a website based on the screen size or other characteristics of the user’s device.

Let’s take an example. We use the flex-wrap property to wrap the flex items into multiple rows, allowing content to flow smoothly and preventing overcrowding on narrower screens.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index2.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="cards">
        <img
          src="https://www.lambdatest.com/resources/images/real-time-browsers.png"
        />
        <h1>Online Cross Browser Testing Tool</h1>


        <p>
          Perform live-interactive online cross browser testing on 3000+
          different desktop and mobile browsers. Get instant access to choice of
          web browser, browser version, operating system, and screen resolution.
        </p>
      </div>


      <div class="cards">
        <img
          src="https://www.lambdatest.com/resources/images/automation/selenium-parallel-testing.png"
        />
        <h1>Selenium Automation Testing on Cloud</h1>


        <p>
          A reliable, scalable, secure, and high performing test execution cloud
          that empowers development and testing teams to accelerate their
          release cycles. Test in parallel and cut down test execution by more
          than 10x.
        </p>
      </div>


      <div class="cards">
        <img
          src="https://www.lambdatest.com/resources/images/cypress-browser-testing.png"
        />
        <h1>Cypress Automation Testing Online</h1>


        <p>
          Run end-to-end tests on a blazing fast Cypress test execution cloud. A
          reliable, scalable, secure and high performing test execution platform
          built for scale. Test on 40+ different browser and browser versions
          including headless versions.
        </p>
      </div>
    </div>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  background-color: transparent;
  cursor: pointer;
}
body {
  background-color: #0c0101;
  color: #333;
}


.cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  background-color: #ffffff;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
}
.cards > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.cards > h1 {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: #0ebac5;
}


.cards > p {
  font-size: 16px;
  font-weight: 400;
  margin: 10px 0;
  text-align: center;
}


.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 10px;
}


@media screen and (max-width: 1024px) {
  .cards {
    width: 80%;
  }
}

Tired of working with XML data? Our XML to YAML converter tool convert your XML data to YAML with ease. No installation required, and it’s 100% free.

Here you can see that the cards take around 30% width on larger devices and around 80% width on smaller devices. We use media queries for standard devices to achieve that, along with the flex-wrap property, so that the content is displayed in a user-friendly manner.

Desktop Preview:

Mobile Preview:

Alternatively, we can change the flex-direction to column on small devices using media queries to achieve the same output more effectively. Combining CSS Grids, CSS Flexbox, and media queries for standard devices helps frontend developers build versatile and user-friendly interfaces for various device viewports.

Want to convert your HTML code into BBCode? Look no further, Use our free online HTML to BBCode converter tool to convert your website’s HTML content to BBCode format.

Common Device Breakpoints

Before we learn about breakpoints, you must know the difference between viewport and window dimensions to understand how media queries for standard devices work.

Differences: Viewport and Browser Window Dimensions

Viewport Dimensions: Viewport dimension is the actual visible area of a web page within the browser window. It represents the portion of the web page that users can see without scrolling. Responsive web design uses these viewport dimensions to adjust the layout and styles of the web page to fit within the available screen space.
Browser Window Dimensions: Browser window dimensions represent the total width and height of the browser window, including the viewport and any additional browser elements such as bookmarks, address bars, navigation buttons, and scrollbars.

Let’s see an example of how viewports work.

The code for the above HTML file is as follows:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Viewport and Window Size</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      .container > div {
        margin: 10px;
      }
      .container > div > span {
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div>
        <span>Viewport Width: </span>
        <span id="viewport-width"></span>
      </div>
      <div>
        <span>Viewport Height: </span>
        <span id="viewport-height"></span>
      </div>
      <div>
        <span>Window Width: </span>
        <span id="window-width"></span>
      </div>
      <div>
        <span>Window Height: </span>
        <span id="window-height"></span>
      </div>
    </div>
    <script>
      const viewportWidth = document.getElementById("viewport-width");
      const viewportHeight = document.getElementById("viewport-height");
      const windowWidth = document.getElementById("window-width");
      const windowHeight = document.getElementById("window-height");


       function setViewportSize() {
        viewportWidth.textContent = window.innerWidth;
        viewportHeight.textContent = window.innerHeight;
        windowWidth.textContent = window.outerWidth;
        windowHeight.textContent = window.outerHeight;
      }




      window.addEventListener("resize", setViewportSize);
      setViewportSize();
    </script>
  </body>
</html>

As you can see, what’s interesting here is that we have to focus on the viewport size rather than the actual window size because our goal is to make the website look responsive in all viewports. You can use this code to resize your browser and see how viewport width and height values are changed.

Need to convert HTML to XML? Our HTML to XML converter is fast, easy to use, and completely free. Convert your HTML files to XML in just a few seconds.

The viewport is not a fixed value for any device, and it can change based on various factors, including

Device Screen Size: Different devices, such as smartphones, tablets, laptops, and desktops, have varying screen sizes. The viewport adjusts to fit the screen size of the device.
Orientation: Devices can be used in both portrait and landscape orientations. When a user switches from portrait to landscape, the viewport’s dimensions change accordingly.
Browser Window Size: The viewport size can change on desktop browsers if the user resizes the browser window. This can affect how the web content is displayed and the application of responsive design principles.

To obtain the current dimensions of the viewport in JavaScript, you can use the window.innerWidth property to get the width and the window.innerHeight property to get the height.

The image below shows the differentiation between browser, device, and viewport heights.

Browser height v/s Viewport height v/s Device height

A typical mobile-optimized site contains the following line of code, which calculates the viewport and automatically adjusts the website elements to scale accordingly.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Mobile browsers display pages in a virtual viewport around 980px wide, wider than the screen, and then scale it down for full visibility. Users can zoom and pan for different parts of the page.

For instance, a site might be displayed in a 980px virtual viewport on a 320px-wide screen, making it hard to read. The above meta tag specifies the browser to use the viewport width instead of the default 980px as the screen’s width.

With our reliable HTML to YAML converter, you can quickly and easily convert your HTML files to YAML format in just a few clicks and and increase productivity.

Key Attributes of the < meta > Viewport Tag

Let’s discuss in detail the key attributes of the < meta > viewport tag.

Width: The width property is used to control the viewport’s size, and it can be specified in pixels (e.g., width=600) or set to device-width to fit the entire viewport width (100vw or 100% width).

We often use width=”device-width” in the < viewport > meta tag. This value allows the website’s content to automatically adjust to the width of the user’s device, regardless of the screen size or resolution.

Syntax:

<!-- Set the width to a specific number of pixels -->
<meta name="viewport" content="width=600">


<!-- Fit the entire viewport width (100vw or 100% width) -->
<meta name="viewport" content="width=device-width">


<!-- Set the width to the width of the device screen in CSS pixels -->
<meta name="viewport" content="width=screen-width">


<!-- Set the width to the width of the layout viewport in CSS pixels -->
<meta name="viewport" content="width=layout-width">


<!-- Set the width to device width and disable zooming -->
<meta name="viewport" content="width=device-width, user-scalable=no">

Height: The height property in the viewport meta tag controls the size of the viewport. It can be set to a specific number of pixels, like height=500, or you can use device-height to match 100vh or 100% of the viewport height.

The default height in the viewport meta tag is indeed set to device-height, and it is less likely to change it to a specific pixel value.

Syntax:

<!-- Set the height to a specific number of pixels -->
<meta name="viewport" content="height=800">


<!-- Fit the entire viewport height (100vh or 100% height) -->
<meta name="viewport" content="height=device-height">


<!-- Set the height to the height of the device screen in CSS pixels -->
<meta name="viewport" content="height=screen-height">


<!-- Set the height to the height of the layout viewport in CSS pixels -->
<meta name="viewport" content="height=layout-height">


<!-- Set both width and height and disable user scaling -->
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">

Initial Scale: The initial scale attribute in the viewport meta tag determines the default zoom level when the web page is first loaded. It helps ensure the content is displayed appropriately, providing a comfortable and readable view for users without requiring them to zoom in or out manually.

Simplify the process of converting CSV to HTML with our fast and accurate online CSV to HTML converter tool to convert your CSV files to HTML format. Try it now for free.

Syntax:

<!-- Set initial scale to 1.0 (no initial zoom) -->
<meta name="viewport" content="initial-scale=1.0">

Minimum Scale: With the minimum scale attribute, you can define the smallest allowed zoom level during user interaction. By setting this property, you can prevent users from zooming out too much, ensuring the content remains readable and avoiding potential visual distortions.

Syntax:

<!-- Set minimum scale to a specific value (e.g., 0.8) -->
<meta name="viewport" content="minimum-scale=0.8">

Maximum Scale: The maximum scale attribute lets you specify the maximum allowed zoom level when users interact with the web page. Setting this property helps maintain the website’s visual integrity and prevents excessive zooming, ensuring the content doesn’t become pixelated or stretched beyond its intended design.

<!-- Set maximum scale to 2.0 (allow zooming in up to twice the original size) -->
<meta name="viewport" content="maximum-scale=2.0">

Now, let’s look into some commonly used device breakpoints.

Extra Large Screen: These devices have widths in the range of 1200px and 1920px (or greater) and usually have higher resolutions and larger screens, offering a more expansive viewing area than smaller devices like smartphones.

Syntax:

@media (min-width: 1200px) and (max-width: 1920px) {
          /* CSS styles for devices with widths between 1200px and 1920px (inclusive) */
        }

Let’s look into an example.

Example: Suppose we have a pricing page, and we want to display different pricing plans. On large-screen devices, we aim to show all four plans using grid template columns. Additionally, we can utilize media queries for standard devices that trigger when the viewport width goes below 1200 pixels to ensure a responsive layout.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="grid-container">
      <div class="item">
        <h2>FREE</h2>
        <p class="price">$0</p>


        <button>Free Forever...</button>


        <p class="features">Includes access to</p>
        <ul>
          <li>Live real time testing</li>
          <li>200+ Desktop Browsers</li>
          <li>Screenshot Tests per month</li>
          <li>10 Responsive Test per month</li>
          <li>3 sessions of Native App Testing on Emulators/Simulators</li>
        </ul>
      </div>
      <div class="item">
        <h2>Live</h2>
        <p class="price">$15</p>


        <button>Choose Plan</button>


        <p class="features">Everything in Free, Plus</p>
        <ul>
          <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>
        </ul>
      </div>


      <div class="item common">
        <h2>Real</h2>
        <p class="price">$25</p>


        <button>Choose Plan</button>


        <p class="features">Everything in Live</p>
        <ul>
          <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>
      </div>
      <div class="item">
        <h2>Enterprice</h2>
        <p class="price">$X</p>


        <button>Contact Sales</button>


        <p class="features">Everything in Real Devices, Plus</p>
        <ul>
          <li>Unlimited Live Real Time Testing</li>
          <li>3000+ Desktop Browsers</li>
          <li>Unlimited Screenshot Testing</li>
          <li>Emulators / Simulators for web and app testing</li>
          <li>Web and mobile debugging tools</li>
          <li>Integrate with JIRA, Asana, Slack</li>
          <li>Real Mobile devices</li>
          <li>Test native, hybrid, and web apps</li>
        </ul>
      </div>
    </div>
  </body>
</html>

CSS:

body {
  background-color: #f0f0f0 !important;
  font-family: "Roboto", sans-serif;
  background-color: transparent;
  cursor: pointer;
  margin: 5%;
}


.grid-container {
  width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* Three columns in a row */
  gap: 10px; /* Gap between grid items */
  margin: auto !important;
}


.item {
  background-color: #ffffff;
  text-align: left;
  font-size: 18px;
  border: 2px solid rgb(215, 200, 200);
  border-radius: 10px;
  padding: 20px;
  max-width: fit-content;
}


.item > h2 {
  font-size: 24px;
  font-weight: 800;
  color: rgb(13, 182, 233);
  margin: auto;
}


.item > button {
  background-color: rgb(255, 255, 255);
  color: rgb(13, 182, 233);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgb(13, 182, 233);
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  margin: 10px 0;
  text-align: center;
  width: 100%;
}


.item > button:hover {
  background-color: rgb(13, 182, 233);
  color: rgb(255, 255, 255);
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}


.common {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  border: 5px solid rgba(133, 17, 133, 0.942);
  box-shadow: 2px 2px 12px rgb(89, 101, 211);
}


.common > button {
  background-color: rgb(13, 182, 233);
  color: rgb(255, 255, 255);
}
.item > ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
  width: 100%;
}
.item > ul > li {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  margin-top: 15px;
}


.item > .features {
  font-size: 20px;
  font-weight: 800;
  margin: 10px 0;
  text-align: left;
  color: rgb(13, 182, 233);
  text-decoration: underline;
}


.item > ul > li::before {
  content: "✓";
  color: rgb(13, 182, 233);
  display: inline-block;
  width: 1em;
  margin-left: 1px;
}
.item > .price {
  font-size: 45px;
  font-weight: 800;
  margin: 10px 0;
  text-align: left;
  color: rgb(13, 182, 233);
}
/* Media Query for Tablets (max-width: 768px) */
@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr; /* Two columns in a row */
  }
}


/* Media Query for Mobile Phones (max-width: 480px) */
@media screen and (max-width: 1200px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr; /* One column in a row */
  }
}

You can see in the output below that we have four columns when the viewport width is greater than 1200px.

Output:

When the viewport width gets below 1200px, a custom media rule comes into effect, requiring us to display three columns instead of four. The fourth item will be moved to the first column of the next row as we now have three columns instead of four columns.

Get the data security with our powerful RipeMD320 Hash Calculator to create secure hashes quickly and easily and protect your data from cyber attacks.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="grid-container">
      <div class="item">
        <h2>FREE</h2>
        <p class="price">$0</p>


        <button>Free Forever...</button>


        <p class="features">Includes access to</p>
        <ul>
          <li>Live real time testing</li>
          <li>200+ Desktop Browsers</li>
          <li>Screenshot Tests per month</li>
          <li>10 Responsive Test per month</li>
          <li>3 sessions of Native App Testing on Emulators/Simulators</li>
        </ul>
      </div>
      <div class="item">
        <h2>Live</h2>
        <p class="price">$15</p>


        <button>Choose Plan</button>


        <p class="features">Everything in Free, Plus</p>
        <ul>
          <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>
        </ul>
      </div>


      <div class="item common">
        <h2>Real</h2>
        <p class="price">$25</p>


        <button>Choose Plan</button>


        <p class="features">Everything in Live</p>
        <ul>
          <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>
      </div>
      <div class="item">
        <h2>Enterprice</h2>
        <p class="price">$X</p>


        <button>Contact Sales</button>


        <p class="features">Everything in Real Devices, Plus</p>
        <ul>
          <li>Unlimited Live Real Time Testing</li>
          <li>3000+ Desktop Browsers</li>
          <li>Unlimited Screenshot Testing</li>
          <li>Emulators / Simulators for web and app testing</li>
          <li>Web and mobile debugging tools</li>
          <li>Integrate with JIRA, Asana, Slack</li>
          <li>Real Mobile devices</li>
          <li>Test native, hybrid, and web apps</li>
        </ul>
      </div>
    </div>
  </body>
</html>

In the same way, we can adjust the appearance for all the common device breakpoints. Alternatively, we can use another approach called content-based breakdown, which will be covered in the upcoming sections.

Large Screen: These devices have viewport widths in the range of 1024px to 1200px. These devices are typically the personal laptops that you use.

Syntax:

@media (min-width: 1024px) and (max-width: 1200px) {
    /* CSS styles for devices with viewport widths between 1024px and 1200px (inclusive) */
  }

Let’s now take the same example and add some styling for large screen devices:

 @media (min-width: 1024px) and (max-width: 1200px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr; /* Three columns in a row */
    width: 90%;
  }
}

Here we have defined a media rule that applies when the width is between 1024px and 1200px, changing the grid to have 3 rows instead of 4 rows.

Output:

You can also add more CSS rules to ensure that the website provides a seamless experience throughout all devices.

Medium Devices: These devices have viewport widths in the range of 768px and 1024px. This category includes larger smartphones, tablets, and some smaller laptops.

Syntax:

  /* Media query for devices with viewport width between 768px and 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Your CSS styles for these devices go here */
  }

Let’s add a new media rule for devices with a width between 768px and 1024px to the previous example.

 @media screen and (min-width: 768px) and (max-width: 1024px) {
  .grid-container {
    grid-template-columns: 1fr 1fr ; /* Three columns in a row */
    width: 90%;
    place-items: center;
  }}

Output:

Small Devices: These devices have viewport widths in the range of 480px and 768px. This category includes most modern smartphones and smaller tablets.

Syntax:

@media screen and (min-width: 480px) and (max-width: 768px) {
    /* Your CSS styles for these devices go here */
  }

Let’s add the media query for this case. Since we have small devices, we can fix the number of columns to one.

@media screen and (min-width: 480px) and (max-width: 768px) {




  .grid-container {
    grid-template-columns: 1fr; /* Two columns in a row */
  }
}

Output:

Extra Small Devices: These devices have viewport widths in the range of up to 480px. This category includes small smartphones and older feature phones.

Syntax:

/* Media query for devices with viewport width up to 480px */
@media screen and (max-width: 480px) {
  /* Your CSS styles for these devices go here */
}

Most of the time, the styles for small devices and extra-small devices will be almost the same. However, we can add custom styles for this width if needed.

Looking for a quick way to generate hashes? Try our MD4 Hash Calculator to get strong hash values for your data and protect your information from cyber threats.

In the previous example, let’s add a custom rule: whenever the width is less than 480px, each card should take 90% of the width.

 @media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr; /* one columns in a row */
    margin: 1px !important;
    width: 100%;
  }
  .item {
    width: 90%;
  }
}

Output:

Note that these breakpoints are not standard but these are some of the commonly used breakpoints. A general idea about all the breakpoints is shown in the image below.

%{ https://twitter.com/Adarsh____gupta/status/1503343602793328642?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1503343602793328642%7Ctwgr%5Ead9c45672b3ae7d945be21d8d93a1c025bc206b4%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.lambdatest.com%2Fblog%2Fmedia-queries-for-standard-devices%2F }%

Our Adler32 Hash Calculator is the perfect tool to create secure hashes to protect data from unauthorized access. Start creating your hashes now.

Differences: Device Width and Content-Based Breakpoints

There are mainly two types of breakpoints for responsiveness: Device-width based breakpoints and content-based breakpoints, let now learn about them.

Content-Based Breakpoints: In content-based breakpoints, the breakpoints are chosen based on the website’s actual content and design elements. The main aim is to make the user experience better by adjusting the layout whenever the content becomes hard to read, view, or interact with, regardless of the device size.

Simply put, we focus on the content itself to decide where the design needs to adapt, rather than using fixed width. This way, we ensure that users can easily access and enjoy the content on any screen size.

HTML:

Example: Let’s take an example and visualize it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="grid__container">
      <div class="blog">
        <div>
          <img
            class="blog__image"
            src="https://www.lambdatest.com/blog/wp-content/uploads/2021/04/image5-81.png"
            alt="Web"
          />
        </div>
        <div>
          <span class="blog__type">Web development</span>
          <h2 class="blog__title">
            24 Best CSS Frameworks To Look Forward In 2023
          </h2>
          <p class="blog__preview">
            If you are into software development, one of the most common pieces
            of advice is to Don’t Repeat Yourself (DRY). This is the same case
            in front-end development, and there is no need to start everything
            from scratch when you develop the application.
          </p>
        </div>
      </div>


      <div class="blog">
        <div>
          <img
            class="blog__image"
            src="https://www.lambdatest.com/blog/wp-content/uploads/2021/04/image5-81.png"
            alt="Web"
          />
        </div>
        <div>
          <span class="blog__type">Web development</span>
          <h2 class="blog__title">
            23 Best CSS Frameworks For React In 2023: A Comprehensive Overview
          </h2>
          <p class="blog__preview">
            When you first started learning how to code, one of the most common
            clichés you heard was, “Don’t reinvent the wheel.” This is the same
            case in web development, and there’s no need to start from scratch
            every time you build a website or web application.
          </p>
        </div>
      </div>


      <div class="blog">
        <div>
          <img
            class="blog__image"
            src="https://www.lambdatest.com/blog/wp-content/uploads/2021/04/image5-81.png"
            alt="Web"
          />
        </div>
        <div>
          <span class="blog__type">Web development</span>
          <h2 class="blog__title">A Complete Guide to CSS Refactoring</h2>
          <p class="blog__preview">
            Being a front-end developer is like having the magical power to
            shape reality after it’s been created. You can change the way things
            look, feel, and behave. You can make things appear and disappear.
          </p>
        </div>
      </div>


      <div class="blog">
        <div>
          <img
            class="blog__image"
            src="https://www.lambdatest.com/blog/wp-content/uploads/2021/04/image5-81.png"
            alt="Web"
          />
        </div>
        <div>
          <span class="blog__type">Web development</span>
          <h2 class="blog__title">
            Migrating Test Automation Suite To Cypress 10
          </h2>
          <p class="blog__preview">
            There are times when developers get stuck with a problem that has to
            do with version changes. Trying to run the code or test without
            upgrading the package can result in unexpected errors.
          </p>
        </div>
      </div>


      <div class="blog">
        <div>
          <img
            class="blog__image"
            src="https://www.lambdatest.com/blog/wp-content/uploads/2021/04/image5-81.png"
            alt="Web"
          />
        </div>
        <div>
          <span class="blog__type">Web development</span>
          <h2 class="blog__title">How To Style And Write CSS In React</h2>
          <p class="blog__preview">
            React is an extensively preferred frontend UI library used in nearly
            50 million projects every month. Backed by Facebook, React has had
            its dominance in the web development space for over nine years and
            has several notable customers (ranging from startups to Fortune 500
            companies).
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS:

body {
  background-color: #edecec;
  color: #333;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


.grid__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three columns in a row */
  grid-gap: 1px;
}


.blog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
}


.blog__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}


.blog__type {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  color: rgb(11, 227, 220);
}


.blog__type::before {
  content: "•";
  font-size: 24px;
  font-weight: 800;
  color: rgb(11, 227, 220);
}


@media (max-width:900px) {
  .grid__container {
    grid-template-columns: 1fr 1fr;


  }

}


@media (max-width: 600px) {
  .grid__container {
    grid-template-columns: 1fr;


  }
}

Need to create secure Gost hashes? Protect your sensitive information with our Gost hash calculator. Get started today and keep your data safe from hackers.

In this example, you can see that we have defined CSS rules that are applied to the content. The primary objective is creating a design that dynamically adjusts and optimizes based on the content and the user’s viewing experience.

On devices around 900px width, we set the grid template columns to 1fr 1fr, which means two columns of equal width. For widths less than 600px, we have 1fr, i.e., one column takes up the entire width.

Device-Based Breakpoints: In device-based breakpoints, we group devices based on screen resolutions and choose common breakpoints for each group. This makes it easier to style the design with CSS, as the rules apply to most devices within each group. The result is a responsive design that looks great on different devices.

Example: Let’s take the previous example and add some device-based breakpoints.

CSS:

/* 932 x 430 pixels*/
@media only screen
and (width: 430px)
and (height: 932px) {
  .grid__container {
    grid-template-columns: 1fr; // (1 FR fraction is 100% of the available space.)
  }
}

Here, we target a specific device with particular dimensions and apply styles tailored to that device. The advantage of this approach is that it allows us to fine-tune the design for optimal presentation for a specific device.

There is a plethora of devices with varying dimensions and hardware configurations, making it not feasible to target each device separately.

One effective approach for device-based breakdown is to group devices based on their screen width. By categorizing devices into specific groups, we can assign common CSS breakpoints for each group.

Looking for a reliable SHA1 hash calculator? Our tool generates secure, one-way hashes that you can trust. Create secure hashes quickly with just a few clicks.

Benefits of CSS Media Queries for Standard Devices

CSS media queries for standard devices are an integral part of creating websites compatible with the diverse range of devices and orientations users use to access content today. Let’s take a look at some of the reasons why media queries for standard devices are necessary these days.

Consistent User Experience

Proliferation of smartphones with varying hardware configurations and screen sizes has underscored the significance of upholding a consistent user experience across these diverse devices. If the user experience becomes inconsistent, it can potentially lead visitors to bounce out from your website, thereby directly impacting your Key Performance Indicators (KPIs).

Let’s take an example. Often, we use bold text to capture attention. However, if we use a fixed font size for the text, it can sometimes appear too large on mobile devices or even break the flow of the website, which can negatively impact the user experience.

As you can see, the desktop version of our webpage is visually appealing, and challenges arise when accessing it on smaller devices. The negative experience on mobile devices can result in a higher bounce rate. Hence, it is crucial to focus on responsive design for a better user experience.

Adaptability

As mentioned earlier, your potential customer can use a device of their choice with varying viewport sizes, resolutions, and other characteristics. It is important to have a responsive design for an optimal user experience.

Let’s take an example first.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">


</head>
<body>
<div class="header">
  <h1>Lambdatest</h1>
</div>
<div class="row">
  <div class="column-3 menubar">
    <ul>
    <li>The Platform</li>
    <li>Features</li>
    <li>Pricing</li>
    <li>Blog</li>
    <li>Sign In</li>
    </ul>
  </div>
  <div class="column-6">
    <h1>Lambdatest - Simplifying Cross-Browser Testing</h1>
    <p>Lambdatest is a comprehensive platform that simplifies cross-browser testing for web developers and QA professionals. It allows you to test your website or web application on real browsers and operating systems, ensuring compatibility and a seamless user experience across different platforms.</p>
  </div>
  <div class="column-3 right">
    <div class="aside">
      <h2>What?</h2>
      <p>Lambdatest provides a cloud-based testing platform.</p>
      <h2>Where?</h2>
      <p>You can access Lambdatest from anywhere with an internet connection.</p>
      <h2>How?</h2>
      <p>Sign up for an account on the Lambdatest website and start testing instantly.</p>
    </div>
  </div>
</div>
<div class="footer">
  <p>Privacy and Policy </p>
</div>
</body>
</html>

Let’s now style this page without using media queries for standard devices and see how it looks.

Make your data tamper-proof with our SHA256 Hash Calculator. Create secure, one-way hashes for your data in no time. Start creating your hashes now.

CSS:

* {
  box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}


[class*="column-"] {
float: left;
padding: 15px;
}


html {
font-family: "Lucida Sans", sans-serif;
}
h1{
    text-align: center;
}


.header {
background-color: #166890;
color: #ffffff;
padding: 15px;
}


.menubar ul {
list-style-type: none;
margin: 0;
padding: 0;
}


.menubar li {
padding: 8px;
margin-bottom: 7px;
background-color: #1586af;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.menubar li:hover {
background-color: #0099cc;
}


.aside {
background-color: #1d6b88;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.footer {
background-color: #2c7892;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}


/* For desktop: */
.column-3 {width: 25%;}
.column-6 {width: 50%;}

The output on the desktop version looks clean as expected.

But when the width of the viewport gets reduced, the website starts to break, as we can see in the below image.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="header">
      <h1>Lambdatest</h1>
    </div>
    <div class="row">
      <div class="column-3 menubar">
        <ul>
          <li>The Platform</li>
          <li>Features</li>
          <li>Pricing</li>
          <li>Blog</li>
          <li>Sign In</li>
        </ul>
      </div>
      <div class="column-6">
        <h1>Lambdatest - Simplifying Cross-Browser Testing</h1>
        <p>
          Lambdatest is a comprehensive platform that simplifies cross-browser
          testing for web developers and QA professionals. It allows you to test
          your website or web application on real browsers and operating
          systems, ensuring compatibility and a seamless user experience across
          different platforms.
        </p>
        <img src="https://www.lambdatest.com/resources/images/main/home_banner.webp"/>
      </div>
      <div class="column-3 right">
        <div class="aside">
          <h2>What?</h2>
          <p>Lambdatest provides a cloud-based testing platform.</p>
          <h2>Where?</h2>
          <p>
            You can access Lambdatest from anywhere with an internet connection.
          </p>
          <h2>How?</h2>
          <p>
            Sign up for an account on the Lambdatest website and start testing
            instantly.
          </p>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Privacy and Policy</p>
    </div>
  </body>
</html>

As you can see, the mobile view is distorted and will give an unpleasant experience for your user. Here is one situation where media queries for standard devices will solve the situation.

We can add the following CSS media query to our code.

@media only screen and (max-width: 768px) {
[class*="column-"] {
width: 100%;
padding: 5px;
}

Here, we set the width of our column as 100% when the device viewport width is less than 768px.

This tutorial dive deep into web testing to help you understand its life cycle, elements, angles, the role of automation, and more.

As you can see, now the mobile version looks better. Here, only one media rule has been applied. However, in the real scenario, we might use multiple media queries for standard devices (with different screen sizes) to have a seamless experience.

Accessibility

Media queries for standard devices play a significant role in making websites accessible to users who are differently abled. We can customize our web page depending on the user’s preference, providing a uniform experience throughout.

Users can personalize device settings to cater to their specific needs, particularly if they have impairments. Additionally, for enhanced accessibility, they can choose specific preferences that suit their requirements. The image below displays some of the available accessibility options in the Windows OS.

Windows OS Accessibility Settings

Example: Let’s see an example of adjusting the website based on user preference.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="animation">Some animations</div>
  </body>
</html>

.animation {
  animation: pulse 1s linear infinite both;
  background-color: rgb(16, 208, 218);
}


@media (prefers-reduced-motion) {
  .animation {
    animation: reduce 4s linear infinite both;
    background-color: green;
    text-decoration: overline;
  }
}


.animation {
  color: #000000;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}


@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes reduce {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

Here a simple CSS animation is added and for a normal user it will show the pulse animation.

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

Some users with vestibular motion disorders will have a hard time reading this. But if they have turned off animation effects on their device, the media feature prefers-reduced-motion will be triggered, and they can have lesser animation.

You can toggle these animation settings on your device and see a different animation.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="animation">Some animations</div>
  </body>
</html>

There are many other media rules other than those which are mentioned above, which we will look at in the coming sections of this tutorial on media queries for standard devices that can help developers improve the experience of all users and create a more inclusive and accessible website.

Explore the best Android emulators for iOS and unlock the world of Android on your iOS device. Run and test your apps more seamlessly.

Getting Started: Media Queries for Standard Devices

The first thing that comes to mind when someone hears about media queries for standard devices is responsiveness. A media query applies specific styles to a web document when certain criteria of the user agent or device displaying the page are met.

User agents (like web browsers) re-evaluate media queries when changes occur in the user environment. For example, suppose the device switches from landscape to portrait orientation. In that case, the user agent adjusts the behavior of the web page elements based on the media queries used in the CSS code.

Let’s now look at the general syntax of the media query.

@media media-type and (media-feature) {
    /* CSS rules to apply when the media query conditions are met */
  }

The media query is executed in two cases: first, when the specified media type matches the device where the user agent is running, and second, when the media condition is true.

Now, we can break down the components of a media query statement and examine each part individually.

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

Targeting Media Types

One of the features that the media rule allows is the ability to target special devices, such as printers and screen readers. Media types define the general category of a device.

There are mainly 3 media types that can be targeted using media queries for standard devices:

Screen

The screen media type is used to target devices with screens, such as desktops, laptops, tablets, and smartphones. Styles targeted for the screen media type are designed to be displayed on a visual screen.

Syntax:

@media screen {
    .target_element{
        /* target style */

      /* Add more styles for screens here */
    }
  }

Print

The print media type is used specifically for print output, targeting devices such as printers or PDF generators. Styles defined for the print media type control how the content will be presented on printed pages.

For example, you can adjust font sizes, remove unnecessary elements, and ensure proper page breaks for a more printer-friendly layout.

Syntax:

@media print {
  /* Adjust the styles accordingly */
  body {
    font-size: 12pt;
    line-height: 1.5;
  }


  /* Remove unnecessary elements that shouldn't be printed */
  .no-print {
    display: none;
  }
}

All

If no media type is specified, it will use the all type, which is the default for all devices. However, it’s important to note that some media types, like TV, braille, etc., have been deprecated and are no longer in use.

Syntax:

@media all {
  /* Styles for all media types go here */
}

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

Targeting Media Features

Media queries for standard devices are triggered and executed once particular pre-defined conditions are met. These conditions usually depend on certain features of the user’s device or screen, called media features.

Media feature is a part of a media query where it checks for specific characteristics of a user’s device. Media features allow developers to apply CSS styles based on certain conditions, such as screen size, device orientation, resolution, aspect ratio, or user preferences.

Let’s look at some of the most used media features:

Width

The width media feature is by far one of the most used media features and is used to test the viewport width. Whenever a certain condition is met depending on the width, it applies the styles defined inside the media query.

When talking about width, there are three main ways we can target the width of a device.

width: The media feature width is used to apply a specific style when the viewport’s width matches the specified value exactly.
max-width: The media feature max-width is used to apply a specific style when the viewport’s width is equal to or less than the specified value.
min-width: The media feature min-width is used to apply a specific style when the viewport’s width is equal to or greater than the specified value.

You can also combine the above-mentioned ways to get the desired output.

Syntax:

/* Apply styles when the viewport width is 1024 pixels or narrower */
@media (max-width: 1024px) {
  /* CSS rules here */
}
/* Apply styles when the viewport width is 768 pixels or wider */
@media (min-width: 768px) {
  /* CSS rules here */
}


@media (width: 600px) {
  /* CSS rules here */
}


/* Apply styles when the viewport width is between 600px and 1024px (inclusive) */
@media (min-width: 600px) and (max-width: 1024px) {
  /* CSS rules here */
}

Example: Let’s look at the below example to understand.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=500, initial-scale=0.8" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="banner">
      <div class="banner__section">
        <h2>Next-Generation Mobile Apps and Cross Browser Testing Cloud</h2>
        <p>
          Deliver unparalleled digital experience with our next-gen AI-powered
          testing cloud platform. Ensure exceptional user experience across all
          devices and browsers.
        </p>
        <div class="banner__buttons">
          <button>Signup for free</button>
          <button>Learn more</button>
        </div>
      </div>


      <div class="banner__section">
        <img
          class="banner_image"
          src="https://www.lambdatest.com/resources/images/main/home_banner.webp"
        />
      </div>
    </div>
  </body>
</html>

CSS:

* {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}


.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #eef5ff;
}


img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 18px;
}
.banner__section {
  margin: 4%;
}
.banner__section > h2 {
  font-size: 3rem;
  font-weight: 700;
  color: #160909;
  text-align: left;
  margin-bottom: 20px;
}


.banner__buttons {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 20px;
}


.banner__buttons > button {
  padding: 10px 20px;
  margin-right: 20px;
  border: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #160909;
  transition: all 0.3s ease;
}

In this example, we have not yet used media queries for standard devices, and let’s see how it looks on the desktop version.

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.

Without Media Queries

On the desktop version, it looks as expected, but whenever the viewport size gets reduced, you can see that the design starts to break.

Right now, the UI on the mobile looks not so friendly, and it’s the perfect time to add some media queries.

To make this responsive, first, we can remove the image on the mobile version and then make the text section take up the full width of the screen.

@media only screen and (max-width: 768px) {
  .banner__image {
    display: none;
  }
  .banner__section {
    margin: 0;
    padding-top: 20px;
    text-align: center;
    padding: 5px;
    /* width: 100%; */
  }
  .desktop__only{
    display: none;
  }
  .banner__section > h2 {
    font-size: 2rem;
    text-align: center;
  }
  .banner__buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .banner__buttons > button {
    margin: 10px;
    width: 80%;
    text-align: center;
  }
}

With Media Queries

Now, you can see that there has been a significant improvement in the UI for the mobile version. We have applied additional styles to the media query whenever the viewport width goes below 768px.

Still, you can see that the design hasn’t achieved an optimal appearance for devices with widths between 768px and 1024px, such as tablets and small devices.

Learn why Python is the top choice for automation testing. This comprehensive tutorial provides a step-by-step guide to Python automation testing to help you streamline your testing process.

In this scenario, we can combine two media features: one for a device width greater than 768px and another for a width less than 1024px.

@media only screen and (min-width: 768px) and (max-width:1024px) {
  .desktop__only {
    display: none;
  }


  .banner__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .banner__section{
    text-align: center;
    font-size: 1.5rem;
  }


  .banner__section>h2{
    font-size: 3rem;
    text-align: center;
  }


}

As you can see, we can apply constraints like this within the width media feature to build a responsive application. This approach allows us to adapt the UI to different screen sizes effectively, ensuring an optimal user experience across various devices.

Let’s compare everything side by side for more clarity:

You can see how the page acts differently with multiple screen viewports and make it as responsive as possible.

Now, let’s look at some of the other common media features:

Height

Height is another media feature effectively that is used to apply style based on the height of the viewport. It is useful in scenarios like adjusting the hero section’s height to make sure it looks visually appealing on various devices, as it is the prominent area displayed at the top of the homepage.

In the above example of Tesla’s homepage, you can observe that the image spans the entire width on larger screens. On mobile devices, the image is resized, using the object-fit property. On smaller devices, object-fit is set to cover to ensure the image keeps its aspect ratio and fills the given dimension

Just like the case of width, there are also three main ways we can target the height of a device.

height: The media feature height is used to apply a specific style when the viewport’s height matches the specified value.
min-height: The media feature min-height is used to apply a specific style when the viewport’s height is equal to or greater than the specified value.
max-height: The media feature max-height is used to apply a specific style when the viewport’s height is equal to or less than the specified value.

Syntax:

/* Apply styles when the viewport height is 600 pixels or taller */
@media (min-height: 600px) {
  /* CSS rules here */
}


/* Apply styles when the viewport height is 800 pixels or shorter */
@media (max-height: 800px) {
  /* CSS rules here */
}


/* Apply styles when the viewport height is between 400px and 800px (inclusive) */
@media (min-height: 400px) and (max-height: 800px) {
  /* CSS rules here */
}

There is a better and more efficient way to target devices using the new operators: >, <=, >, >=, and =. These operators offer greater flexibility in defining media queries for standard devices, allowing us to precisely target specific screen sizes and create more responsive designs.

Syntax:

/* Greater than or equal to 1000px */
@media (width >= 1000px) {
}


/* Less than or equal to 700px */
@media (width <= 700px) {
}


/* Between 700px and 1000px */
@media (700px <= width <= 1000px) {
}

The new syntax simplifies writing media queries for standard devices, making them easier to read and understand and seems more logical.

One advantage here is that it will solve some edge cases. Let’s take an example:

@media (min-width: 500px) {
}
@media (max-width: 500px) {
}

When the viewport size is exactly 500px, both the first and second media queries will be triggered, potentially causing issues in your code due to conflicting styles. This is where range selectors come to the rescue for handling tricky edge cases.

By using the new operators, less than or equal to (<=) and greater than or equal to (>=), we can now address this issue and achieve more precise matching for our media queries for standard devices.

Aspect Ratio

The aspect-ratio media feature is used to apply CSS styles based on the aspect ratio of the viewport or device.

The aspect ratio is the ratio of the width to the height of the viewport. This media feature is useful for creating responsive designs that adapt to different aspect ratios, providing optimal layout and content presentation across various screen sizes.

The aspect-ratio media feature in CSS allows you to target specific styles based on the aspect ratio of the viewport or device. This is particularly useful for adjusting the layout and appearance of your website or web application to ensure that it looks good on various devices, such as desktop monitors, laptops, tablets, and smartphones.

You can try the following example, resize it, and observe to understand how aspect ratios really work.

<!DOCTYPE html>
<html>
<head>
  <title>Aspect Ratio vs Viewport Size vs Display Size</title>
</head>
<body>
  <div id="info">
    <p>Aspect Ratio: <span id="aspectRatio"></span></p>
    <p>Viewport Size: <span id="viewportSize"></span></p>
    <p>Screen Size: <span id="displaySize"></span></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

Syntax:

@media (aspect-ratio: width / height) {
    /* CSS rules to be applied when the aspect ratio matches the specified width-to-height ratio */
  }


  /* Apply styles when the aspect ratio is between 4:3 and 16:9 (inclusive) */
  @media (aspect-ratio: 4/3) and (aspect-ratio: 16/9) {
  /* CSS rules here */
  }

Learn about the top 9 JavaScript testing frameworks and choose the best suited frameworks depending on your project requirements.

Display Mode

The display-mode CSS media feature is used to test the display mode of a web application. It allows differentiation between the website’s display modes, such as accessing it in a browser or using it as a progressive web app.

This feature can be useful when playing web-based games to give users a native feel.

Syntax:

@media (display-mode: value) {
  /* CSS rules to be applied when the display mode matches the specified value */
}

Some of the values that we can use here include:

browser: Indicates that the web application is launched from the browser URL.

Syntax:

@media (display-mode: browser) {
    /* Your CSS rules for browser mode */
}

minimal-ui: Indicates that the web application is launched in a minimal user interface mode.

Syntax:

@media (display-mode: minimal-ui) {
    /* Your CSS rules for minimal UI mode */
}

standalone: Indicates that the web application is installed as a standalone progressive web app and launched from a desktop icon or app launcher.

Syntax:

@media (display-mode: standalone) {
    /* Your CSS rules for standalone mode */
}

fullscreen: Indicates that the web application is launched in fullscreen mode.

Syntax:

@media (display-mode: fullscreen) {
    /* Your CSS rules for fullscreen mode */
}

Prefers Color Scheme

The prefers-color-scheme CSS media feature is used to detect if a user prefers a light or dark color theme for their device’s operating system or browser. Users indicate their preference through system or user agent settings, such as light or dark mode.

Syntax:

@media (prefers-color-scheme: light | dark) {
  /* CSS rules to be applied when the user prefers the specified color scheme */
}

Let’s take an example and see how this works.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=500, initial-scale=0.8" />
    <link rel="stylesheet" href="index.css" />
  </head>


  <body>
    <div class="content">
      <div class="sidebar">
        <div class="product">
          <img
            src="https://www.lambdatest.com/resources/images/hyperexecute/hyperlogo.svg"
            alt=""
            class="logo"
          />
        </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>
        <img src="https://www.lambdatest.com/resources/images/icons/banner1.webp" class="banner_image"/>
        <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>
        </main>
        <h2 class="features">Features you must know about</h2>
        <div class="cards">
          <div class="card">
            <h3 class="heading">
              Runs on Linux containers, macOS and Windows
            </h3>
            <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>
      </main>
    </div>
  </body>
</html>

CSS:

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


.content {
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}


h1 {
  font-size: 48px;
  font-weight: bolder;
  padding-top: 40px;
  z-index: 10;
}


p {
  font-size: 16px;
}


.banner_image {
  width: 700px;
  margin-top: -205px;
  height: 80%;
  object-fit: contain;
}


.card {
  width: 45%;
  margin: auto;
  height: fit-content;
  margin-top: 45px;
  background-color: #1c1919;
  padding: 25px;
  border-radius: 10px;
}
.card > p {
  font-size: 15px;
  margin: 40px;
}
.features {
  font-size: 30px;
  font-weight: bolder;
  margin-top: 40px;
}


a {
  margin-top: 20px;
  text-decoration: none;
  color: white;
  font-size: 20px;
  background-color: black;
  padding: 15px;
  padding-right: 20px;
  border-radius: 10px;
}
/* Light mode styles */
@media (prefers-color-scheme: light) {
  body {
    background-color: #f0f0f0; /* Light background color */
    color: #333; /* Dark text color */
  }


  .card {
    background-color: white;
  }
}


/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #0e0c0c; /* Dark background color */
    color: #f0f0f0; /* Light text color */
  }
}


@media screen and (max-width: 600px) {
  .banner_image {
    width: 100%;
    height: 100%;
    margin-top: -100px;
  }
  .card {
    width: 90%;
  }
}

The following code handles the case for dark and light mode:

If you’ve aligned the browser’s appearance with the OS defaults for dark and light mode, the web application will adapt its color scheme accordingly. If not, it will follow the color scheme set by the browser itself.

If you have opted for light mode on your device or browser, you will see the below output, where the webpage is displayed in light mode.

And if you have opted for dark mode on your device or browser, the web page will be displayed in dark mode.

This is a useful media feature as we can apply an adaptive interface and a seamless user experience. Also, the no-preference option, previously available for the prefers-color-scheme property, has been recently eliminated from the specification. As a result, only dark or light are now the two possible values for this property.

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

Source

Orientation

The CSS media feature orientation allows you to target different screen orientations and apply specific styles accordingly.

The two primary orientations are portrait and landscape

portrait: This orientation is typical of devices held vertically, such as smartphones and tablets. Here, the height of the screen is greater than its width.
landscape: The landscape orientation is associated with devices held horizontally, like most desktop monitors and some tablets when rotated. Here, in landscape mode, the width of the screen is greater than its height.

Syntax:

@media (orientation: portrait) {
  /* CSS styles for portrait orientation */
  /* ... */
}


/* Example of a media query for devices in landscape orientation */
@media (orientation: landscape) {
  /* CSS styles for landscape orientation */
  /* ... */
}

Example: Let’s take an example and see how this feature works. We will take the same example as above with some small changes.

CSS:

@media screen and (orientation: landscape) {
  h1 {
    font-size: 48px;
  }


  .logo {
    width: 20%;
    height: 10%;
  }
}


@media screen and (orientation: portrait) {
  .logo {
    width: 80%;
    height: 30%;
  }


  h1 {
    font-size: 28px;
    margin: 5px;
  }


  .banner_image {
    margin-top: 15px;
  }
}

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 device cloud.

Here, in landscape mode, the font size of the heading is set as 48px, and the size of the logo is reduced by setting its width and height to 20% and 10%, respectively. In portrait mode, the width and height of the logo are increased and set as 80% and 30%, respectively.

You can see the difference in how both look with the help of the LT Browser output.

The important thing that you have to keep in mind is that the orientation media feature in CSS is not always reliable for detecting the physical orientation of the device, especially in scenarios where the keyboard opens in portrait mode.

When the keyboard is opened in portrait orientation, the viewport width becomes wider than its actual height, causing the browser to use landscape styles while the device stays in portrait mode. This can lead to unintended layout shifts and visual issues on the webpage.

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

Media Query Modifiers (Logical Operators)

Often, we might need to combine two or more media features to achieve a specific condition. A good example is that you have product images on your website and want to ensure that the product images are presented optimally based on screen size and device orientation.

By combining two media features, max-width, and orientation, you can create a match for both cases.

 /* When screen width is smaller than a certain value and in portrait mode */
@media (max-width: 768px) and (orientation: portrait) {
    /* Apply styles for mobile layout */
    .product-image {
      /* Vertical stacking of images */
      display: block;
      margin-bottom: 10px;
    }
  }

  /* When screen width is larger and in landscape mode */
  @media (min-width: 769px) and (orientation: landscape) {
    /* Apply styles for tablet landscape layout */
    .product-image {
      /* Side-by-side arrangement */
      display: inline-block;
      width: 50%; /* Each image takes half of the screen width */
      vertical-align: top;
    }
  }

This allows you to add conditional logic to your media queries for standard devices, providing greater flexibility and control over how styles are applied based on various conditions.

not Modifier

The not modifier is used to negate a media query, targeting devices that do not match the specified media feature. It functions similarly to the CSS :not() selector. It will target devices not matching the specified media feature, like viewport size or any other device feature.

Example:

/* Apply styles when the viewport width is not greater than 768px */
@media not (max-width: 768px) {
    .main-content {
      width: 80%; /* Wider content area for larger viewports */
      margin: 0 auto; /* Center the content horizontally */
    }
  }

n this example, the styles within the not media query block will apply to all devices that are not greater than 768px. The not modifier negates the entire media query here

only Modifier

The only modifier is used for legacy browser support. It doesn’t affect the media query’s result but ensures that legacy browsers parse the media query correctly. It specifies the unknown media type only, and modern browsers ignore it.

Example:

/* Target only screen devices (for legacy browser support) */
@media only screen {
  body {
    font-size: 16px; /* Default font size for screen devices */
  }
}

In this example, the styles within the only screen media query block will target only screen devices, helping legacy browsers parse the media query correctly and apply the default font size of 16px for screen devices.

and Modifier

The and modifier allows you to combine multiple media features in a single media query. It helps you create more complex conditions by evaluating multiple features together.

Example:

/* Target screen devices with a minimum width of 800px and a maximum width of 1200px */
@media screen and (min-width: 800px) and (<em>max-width: 1200px</em>
) {
  body {
    background-color: #f0f0f0; /* Light background color for screen devices within the specified width range */
    color: #333; /* Dark text color for screen devices within the specified width range */
  }
}

In this example, the styles within the screen and (min-width: 800px) and (max-width: 1200px) media query block will apply to screen devices with a width between 800px and 1200px, providing a light background and dark text color within that width range.

, (comma) Modifier

The , (comma) is not exactly a media query modifier, but it allows you to include a list of media queries for standard devices separated by commas, acting similarly to a logical OR operator. The styles inside any media query separated by commas will be applied if that specific media query matches.

Example:

/* Target screen devices with a minimum width of 800px
   OR print devices with a minimum width of 1000px */
   @media screen and (min-width: 800px), print and (min-width: 1000px) {
    body {
      font-size: 18px; /* Larger font size for screen devices with width >= 800px OR print devices with width >= 1000px */
    }
  }

In this example, the styles within the screen and (min-width: 800px), print and (min-width: 1000px) media query block will target screen devices with a minimum width of 800px or print devices with a minimum width of 1000px. If either of the conditions is met, the font size of 18px will be applied.

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

Media Queries Using window.matchMedia() in JavaScript

While CSS media queries for standard devices are effective in adjusting styles based on the device’s characteristics, there might be cases where we need to go beyond just style changes. For instance, you might want to:

Load Resources Conditionally

Imagine you have an e-commerce website, and you want to provide higher resolution product images for devices with larger screens. By using JavaScript and media queries for standard devices, you can conditionally load different image files based on the user’s device capabilities.

 const imageContainer = document.getElementById("product-image");


      if (window.matchMedia("(min-width: 768px)").matches) {
        imageContainer.innerHTML = `<img src="high-res-image.jpg" alt="Product Image">`;
      } else {
        imageContainer.innerHTML = `<img src="standard-image.jpg" alt="Product Image">`;
      }

In this example, if the user’s screen width is at least 768px, the script loads a high-resolution image. Otherwise, it loads a standard-resolution image. This ensures a better viewing experience on devices that can handle higher-quality visuals.

Performing Actions with Media Queries

Now, let’s take another example, suppose you have a blog, and you want to display a pop-up subscription form when users are reading on larger screens. By utilizing JavaScript and media queries for standard devices, you can trigger the pop-up to appear when the screen width crosses a certain threshold.

 const subscriptionPopup = document.getElementById("subscription-popup");
      const mediaQuery = window.matchMedia("(min-width: 1024px)");


      function showPopup(e) {
        if (e.matches) {
          subscriptionPopup.style.display = "block";
        } else {
          subscriptionPopup.style.display = "none";
        }
      }


      mediaQuery.addListener(showPopup);

Dynamically Adjusting Content/Layout:

Consider a news website that wants to present articles in a grid layout on larger screens but as a single column on smaller screens. Using JavaScript and media queries for standard devices, you can dynamically modify the layout to match the device characteristics.

const articleContainer = document.getElementById("article-container");
      const mediaQuery = window.matchMedia("(max-width: 768px)");


      function adjustLayout(e) {
        if (e.matches) {
          articleContainer.classList.add("single-column");
        } else {
          articleContainer.classList.remove("single-column");
        }
      }


      mediaQuery.addListener(adjustLayout);

By combining JavaScript and media queries for standard devices, we can achieve these functionalities and make the web applications user-friendly.

To work with media queries for standard devices in JavaScript, we can use the window.matchMedia() method. This method allows us to check if a specific media query matches the user’s device and execute the desired JavaScript code accordingly.

Let’s take a real-world example now.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Why HyperExecute?</h1>
    <p class="subtitle">
      Get the best of both worlds—speed of a local setup and the smartness of a
      cloud grid—with HyperExecute.
    </p>
    <div class="wrapper">
      <div class="content__box">
        <img
          src="https://www.lambdatest.com/resources/images/hyperexecute/Smart-Workflows.svg"
        />
        <h2>AI-Powered Workflows</h2>
        <p>
          HyperExecute comes with AI-powered smart workflow capabilities
          out-of-the-box. You can set up automatic sequencing, static and
          dynamic test discovery, static data splitting and more. And best of
          all, set up intelligent retries of tests.
        </p>
      </div>


      <div class="content__box">
        <img
          src="https://www.lambdatest.com/resources/images/hyperexecute/Caching.svg"
        />
        <h2>Dependency Caching</h2>
        <p>
          HyperExecute intelligently caches all environment and framework-level
          dependencies that will ensure all your subsequent test runs do not
          require configuration or even installation steps. This further cuts
          down your test times.
        </p>
      </div>


      <div class="content__box">
        <img
          src="https://www.lambdatest.com/resources/images/hyperexecute/CLB.svg"
        />
        <h2>Command Line Binary</h2>
        <p>
          Hyper Execute CLI, the HyperExecute's command line binary client,
          allows you to trigger tests on HyperExecute cloud from your local
          system and CI alike. Uniform user experience makes it intuitive to
          adopt and integrate HyperExecute in any environment.
        </p>
      </div>


      <div class="content__box">
        <img
          src="https://www.lambdatest.com/resources/images/hyperexecute/SmartCI.svg"
        />
        <h2>AI Based CI features</h2>
        <p>
          HyperExecute helps you fast-track your testing efforts by
          intelligently hitting the right APIs, preparing the test data, and
          generating post-testing analytics, among other AI based features, so
          that you can be assured of a swift go-to-market.
        </p>
      </div>


      <div class="content__box">
        <img
          src="https://www.lambdatest.com/resources/images/hyperexecute/GBOFF.svg"
        />
        <h2>Go Big or Fail Fast</h2>
        <p>
          HyperExecute’s AI Enabled smart workflow capabilities include
          automatic sequencing, static and dynamic test discovery, static data
          splitting, and intelligent retries of tests. These features ensure
          that your tests are completed quickly or fail fast, thereby saving
          time and money.
        </p>
      </div>


      <div class="content__box">
        <img
          src="https://www.lambdatest.com/resources/images/hyperexecute/Smart-Workflows.svg"
        />
        <h2>Automatic Tunnel Management</h2>
        <p>
          HyperExecute comes with automatic tunnel management for private
          websites through a dedicated NAT (Network Address Translation)
          instance so as to ensure the highest security. Rest assured that your
          data is protected.
        </p>
      </div>
    </div>
  </body>
</html>

CSS:

body {
  background-color: #0c0101;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  margin: 5px;
}


h1 {
  text-align: center;
  font-size: 50px;
  font-weight: 800;
  color: #ffffff;
  margin: 10px;
}
.subtitle {
  text-align: center;
  font-size: 18px;
  font-weight: 200;
  color: #ffffff;
  margin: 10px;
}
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three columns in a row */
  grid-gap: 10px; /* 10px gap between columns */


  padding: 15px;
  margin: 10px;
  border-radius: 10px;
}


.content__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  text-align: center;
}

Above is the desktop version of the webpage, and so far, we haven’t used media queries for standard devices here.

The goal is to have a unique pop-up window shown only on the desktop version. This modal is not intended to show up on mobile devices.

The code for modal is given below:

HTML:

 <div class="modal" id="customModal">
      <div class="modal-content">
        <!-- Modal content goes here -->
        <span class="close-btn" onclick="closeModal()">&times;</span>
        <h3>Real-time Cross Browser Testing on 3000+ Environments</h3>
        <p>
          Perform live-interactive online cross browser testing on 3000+
          different desktop and mobile browsers. Get instant access to choice of
          web browser, browser version, operating system, and screen resolution.
        </p>


        <div class="model-features">
          <div class="feature">
            <img
              src="https://www.lambdatest.com/resources/images/automation/vector.svg"
            />
            <h3>Plugins & Extensions</h3>
            <p>
              Dedicated WordPress plugin and Chrome Extension to help you
              perform cross-browser testing and capture full-page screenshots.
            </p>
          </div>


          <div class="feature">
            <img
              src="https://www.lambdatest.com/resources/images/automation/local.svg"
            />
            <h3>Plugins & Extensions</h3>
            <p>
              Local hosted web testing to help you test in dev environments and
              save your website or app from after deployment bugs.
            </p>
          </div>
          <div class="feature">
            <img
              src="https://www.lambdatest.com/resources/images/automation/globe.svg"
            />
            <h3>Geolocation testing</h3>
            <p>
              Test your website or mobile app from different geoIPs to make sure
              your users get the perfect experience across all locations.
            </p>
          </div>


          <button>Try LambdaTest Now !!</button>
        </div>
      </div>
    </div>

CSS:

.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  /* background-color: rgba(0, 0, 0, 0.5); Black background with transparency */
  color: #000000;
}


.modal-content {
  background-color: white;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  color: #000000;
}
.modal-content > h3 {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  color: #000000;
  margin: 10px;
}


.modal-content > p {
  text-align: center;
  font-size: 20px;
  font-weight: 200;
  color: #000000;
  margin: 10px;
}


.model-features > .feature {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #000000;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  text-align: center;
  color: #ffffff;
}


.model-features > .feature > h3 {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 10px;
}


.model-features > .feature > img {
  width: 100px;
  height: 100px;
  margin: 10px;
  filter: invert(100%);
}


.model-features > button {
  background-color: #0cbdee;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}


.model-features > button::after {
  content: ">";
  margin-left: 10px;
}


/* Style the close button */
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}


.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JavaScript:

function closeModal() {
    const modal = document.getElementById("customModal");
    modal.style.display = "none";
  }


  function checkViewportWidth(mediaQuery) {
    const modal = document.getElementById("customModal");


    if (mediaQuery.matches) {
      modal.style.display = "none"; // Hide the modal on smaller devices
    } else {
      modal.style.display = "block"; // Show the modal on larger devices
    }
  }


  const mediaQuery = window.matchMedia("(max-width: 768px)");
  checkViewportWidth(mediaQuery); // Check initial viewport width
  mediaQuery.addListener(checkViewportWidth); // Check on viewport width change

Now, you can see that whenever the size goes beyond 768px, a custom modal will be shown to users. This means that whenever a user visits a web page using a desktop or a similar-sized device, the modal will be displayed.

On mobile devices, as intended the pop-up is not shown as we used the window.matchMedia property to avoid showing the pop-up on devices that are less than 768px width.

Cross-Browser Compatibility for CSS Media Queries

Browsers are constantly evolving, and even a minor change in a feature or its removal can impact millions of users. That’s why it’s crucial to ensure that media queries for standard devices, which control the responsive design, are thoroughly tested and compatible with various browsers.

According to caniuse.com, most modern browsers widely support the latest CSS3 media queries for standard devices.

Media queries for standard devices are supported by nearly all major browsers, such as Chrome, Safari, and Firefox. However, some media features aren’t entirely compatible with all browsers, and specific media rules have been deprecated. For instance, media features like color-scheme are no longer recommended, and several new experimental features might not be available on all devices.

You can find the comprehensive list of browser compatibility for various media features on MDN docs.

When working with media queries for standard devices, it’s crucial to remember the standard syntax laid out by the W3C. This means avoiding vendor-specific prefixes like -webkit- or -moz-, which can lead to inconsistencies. Adhering to the standardized format ensures a more reliable and smoother experience across various browsers.

Utilizing the standard syntax in your media queries for standard devices is recommended for improved cross-browser compatibility and a consistent design. An example is using @media screen and (max-width: 768px) { … } as this ensures smoother compatibility and uniformity across different browsers.

It’s always a good practice to test the website or application on various browsers. This ensures cross-browser compatibility and provides a seamless user experience for all visitors. For this, you can leverage cloud-based testing platforms such as LambdaTest. It is an AI-powered test orchestration and execution platform that allows developers and testers to perform cross-browser compatibility testing at scale across various real browsers, devices, and platforms.

Using LT Browser to Test Media Queries for Standard Devices

Responsive design ensures your website adapts to different screen sizes for optimal user experience across devices. Media queries for standard devices in CSS are crucial in achieving this. However, testing them thoroughly is essential to make sure they work as intended.

Let’s now see how we can use a responsiveness testing tool called LT Browser (as mentioned earlier) to test the responsiveness of our websites.

Developed by LambdaTest, LT Browser is one of the most handy responsive testing tools to help you simulate web applications on various screen sizes. LT Browser is powered by the latest native Chromium rendering engine, taking your responsive testing to the next level.

With LT Browser, you can test and interact with up to six devices simultaneously, including Android, iOS, and desktop. Real-time previewing of all changes saves developers from the hassle of repeatedly switching browser resolutions.

You can also improve your debugging experience by using multiple DevTool options, and the best part is that you can now use different DevTools for each device and debug them all at the same time. Additionally, you can use LT Debug, an easy-to-use developer tool with over nine unique features that web developers and testers regularly use during debugging.

LambdaTest also provides access to more than 100+ free online developer tools that developers and testers often use.

Best Practices for Using Media Queries for Standard Devices

So far, we have explored nearly all aspects of media queries for standard devices. Let’s now take some time to understand some best practices that can be followed when using media queries for standard devices.

Follow Mobile-First Approach

The mobile-first approach has become a trend, and most CSS frameworks also implement it. Starting with mobile-first forces you to simplify your design, focusing on crucial content and functionality for mobile users.

After refining the mobile layout, you can progressively enhance it for desktop users, avoiding the need to remove elements later. This approach ensures a seamless user experience across all devices.

Use Logical Breakpoints

When selecting breakpoints, think logically about your content and design rather than solely relying on device dimensions. You must prioritize the content flow and readability to ensure a smooth and enjoyable user experience across various screen sizes.

Combine Multiple Media Queries

Grouping similar breakpoints in media queries for standard devices is a smart way to tidy up your code and make your website faster. When you combine related media queries for standard devices, your CSS becomes more organized and efficient, resulting in a smoother and more responsive design on various screen sizes.

Optimize Performance

To optimize performance and create a more responsive website. It is important to minimize the heavy utilization of media queries for standard devices and avoid an excessive number of them on a single page. By doing so, you can significantly enhance the loading speed, resulting in a smoother user experience and improved overall performance.

Consider Accessibility

Make sure your design is accessible to all users. Some people depend on assistive technologies like screen readers, and it is our duty to ensure that the website is easy to use and navigate.

Test on Real Devices

Test your website on real devices to ensure it looks and functions smoothly on different screen sizes. This way, you can be confident that your design works well for all users, regardless of the device they are using.

To achieve scalability and reliability, you can use the real device cloud that LambdaTest offers to perform mobile app testing in real-world scenarios. You can test your website on different combinations of operating systems, browsers, screen resolutions, etc.

Finally, you might have doubts in your mind that there are several frameworks that accomplish the same task in a much simpler way. The point is that these frameworks solve the common responsiveness problem. However, when building an application that will eventually scale to millions of users, you need to have a deeper understanding of media queries and implement customized solutions.

Wrapping Up

In this tutorial, we have covered everything about media queries for standard devices, discussed various media features, and highlighted the significance of media queries in web development. Responsiveness has become necessary, and compromising on it is not an option. Having a good knowledge of media queries for standard devices can help you build responsive and adaptive websites.

23 Best CSS Frameworks For React In 2023: A Comprehensive Overview

AdarshM1024 — Wed, 10 May 2023 09:24:56 +0000

When you first started learning how to code, one of the most common clichés you heard was, “Don’t reinvent the wheel.” This is the same case in web development, and there’s no need to start from scratch every time you build a website or web application.

Web applications are the gateway to success for your product or service, and in today’s digital era, providing a seamless user experience is crucial. Users expect your web application to load quickly and have a visually appealing user interface. According to Taylor & Francis Online, the average users form an opinion of a business/product within 0.05 seconds of viewing the website. A good user interface layout, design, and web experience are essential.

JavaScript has become an integral part of every aspect of web development, powering the dynamic and interactive experiences that users expect. Regarding building complex and interactive user interfaces, React, a JavaScript library, has become one of the most popular and widely used JavaScript libraries.

With over 19.5 million weekly downloads, React has proven a reliable and efficient tool for building complex and interactive user interfaces.

The popularity of React has led to the creation of many UI libraries and component frameworks, each with its advantages and features. With these best CSS frameworks for React, developers can easily include pre-built, tested UI components in their projects by building on top of React’s core functionality. It helps to maintain the project in the long run and saves developers time and effort, allowing them to focus on the unique features of their application.

In this detailed blog, we have jotted down the 23 best CSS frameworks for React to create high-quality applications in 2023, exploring features, advantages, and use cases.

Without ado, let’s get started with the best CSS frameworks for React.

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 MacBook.

Quick Recap of React

React is a popular open-source front-end JavaScript library that can be used to build user interfaces (UIs). Facebook developed it and has gained popularity for its efficient and reusable components.

React allows developers to build complex UIs by breaking them down into smaller, reusable components. These components can be used across different parts of an application, which reduces the amount of code that needs to be written and maintained.

React uses a declarative approach to programming, meaning developers only need to describe what they want the UI to look like, and React takes care of the underlying logic to make it happen. React also has a virtual DOM, which helps to improve performance by only updating the parts of the UI that have changed rather than the entire UI.

According to the State of JS Survey 2022, React is the most popular frontend library, with approximately 17.4 million weekly downloads. It is widely used in the industry and has been adopted by many Fortune 500 companies, including Facebook, Instagram, Airbnb, Netflix, and Dropbox.

Source

With its plethora of libraries, components, and extensions, it provides a complete and extensive solution for developing React-based web applications. The component-based architecture of React lets developers break up a user interface into smaller, reusable parts. This makes it easier to build and maintain large applications.

React can create various applications, including web, mobile, and desktop applications. It is often used with other libraries and frameworks like Redux, React Native, and Next.js.

Many production-grade frameworks, such as Next, are built on React. These frameworks help to extend the capabilities of React and provide additional features and functionality that can make building web applications more accessible and more efficient.

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

What are React-based CSS Frameworks and Component Libraries?

CSS frameworks for React and Component libraries are the foundations of React-based applications. They provide pre-built user interface components that can be easily integrated into the application, saving developers time and effort in creating these components from scratch.

Both the React UI framework and a component library provide UI components, but they differ in their scope and level of customization.

Some best CSS frameworks for React include Material-UI, React Bootstrap, Semantic UI React, Ant Design, Blueprint, and many more. These frameworks provide a wide range of customizable, pre-built UI components and libraries that can be used to build beautiful and responsive user interfaces.

Here are some differences between CSS frameworks for React and their component libraries based on some key factors:

Scope

CSS frameworks for React offer a set of ready-made UI components, such as navigation menus, layouts, responsive templates, and more, which are integral to building modern-day websites. With the help of these best CSS frameworks for React, front-end developers can save time and effort by using pre-built components already optimized for performance and accessibility while still being customizable to suit their needs. Some popular UI frameworks include Material UI, Ant design, etc.

On the other hand, React component libraries are more specific; they provide individual, reusable components, such as buttons, inputs, and icons, that can be combined and customized to create more complex UIs. Some of the popular component libraries include React Bootstrap, Chakra UI, etc.

Adaptability

CSS frameworks for React are less customizable and have several restrictions, limiting the developer’s ability to create a unique UI design. This set of best CSS frameworks for React has its design patterns and rules that must be followed to keep the application consistent.

On the other hand, React component libraries are more developer friendly and customizable compared to UI frameworks. Unlike UI frameworks, we can easily customize the designs that match the design of your project, and you don’t need to override the styles used in UI frameworks.

Learning Curve

CSS frameworks for React are difficult to grasp because they have design patterns, constraints, and conventions that must be followed to ensure consistency throughout the application. But once you become familiar with this set of best CSS frameworks for React, it is just a piece of cake 🙂

On the other hand, React component libraries are generally considered easier to use than CSS frameworks for React, as they often have a lower learning curve. Component libraries do not require you to follow a specific set of design patterns and conventions, which gives you greater flexibility and control over the design and functionality of your UI.

Accessibility

CSS frameworks for React and component libraries can help make your application more accessible to all users. Many of these libraries already include accessibility features, so you don’t have to worry about adding them yourself. This means that people with special abilities can still easily use your application.

On the other hand, choosing between various lists of best CSS frameworks for React and component libraries depends on what you need for your project and what you prefer. If you want a lot of pre-made components and a consistent UI design, go for a framework. But if you want more control and customization options, go for a component library.

In the next section, we’ll look at some best CSS frameworks for React you can use in web designs.

Need a great solution for cross browser testing on Safari? Forget about emulators or simulators — use real online browsers. Try LambdaTest to test on safari browser online.

23 Best CSS Frameworks for React to Use in 2023

Choosing the right one among various best CSS frameworks for React and component libraries for your application can be daunting. Still, there are plenty of options available to help simplify the process. In this blog, we’ve compiled a list of the 23 best CSS frameworks for React and their libraries that are popular among developers for their usability and accessibility.

So, let’s dive in and explore the best CSS frameworks for React and component libraries available for your next project.

Material UI

Material UI is the React implementation of the well-known design language Material Design. Google developed Material Design to provide a united, consistent, real-life-like design experience for all its products and services.

Source

It provides a material design touch to React-based applications. Material UI provides several pre-built UI components like buttons, forms, grid systems, navigation tabs, etc., making it one of the best CSS frameworks for React. Material-UI has garnered a lot of positive feedback and popularity within the developer community.

Material UI has around 2.8 million weekly downloads, according to NPM trends.

Source

At the time of writing this blog on best CSS frameworks for React, Material UI has around 85.4K+ stars and 29.4K+ forks on GitHub, which shows its popularity. The best thing about Material UI is that their documentation is well-written, and we can follow along without hassle.

Installation

npm:


npm install @mui/material @emotion/react @emotion/styled

Yarn:


yarn add @mui/material @emotion/react @emotion/styled

Let’s consider taking an example for better understanding.

import React from "react";
import { Card, CardMedia, CardContent, Typography } from "@mui/material";
import { Box } from "@mui/system";


const App = () => {
  return (
    <Box>
      <Card sx={{ maxWidth: 500, padding: 5, margin: 2 }}>
        <CardMedia
          component="img"
          height="200"
          image="https://www.lambdatest.com/blog/wp-content/uploads/2020/08/LambdaTest-320-180.png"
          alt="LambdaTest"
          sx={{
            "@media screen and (max-width: 600px)": {
              height: "150px",
            },
          }}
        />
        <CardContent
          sx={{
            "@media screen and (max-width: 600px)": {
              paddingBottom: "20px",
            },
          }}
        >
          <Typography gutterBottom variant="h5" component="div">
            LambdaTest{" "}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lambdatest is a cloud-based testing platform that allows developers
            and testers to perform cross-browser testing of web applications. It
            provides a virtual environment to test applications on a range of
            browsers, operating systems, and devices.
          </Typography>
        </CardContent>
      </Card>
    </Box>
  );
};


export default App;

Output:

Pros:

Well-documented API: Has the best documentation available, which makes it easy to use and understand.
Consistency: Offers a consistent design and style across all the components like buttons, cards, etc., which helps you to maintain a uniform look and feel across a variety of devices, including desktops, tablets, and mobile devices.
Customization: Provides different ways to customize it, so you can change the pre-built parts to fit your needs. It is available for both TypeScript and JavaScript, allowing you to choose the best language for your project.

Cons:

Large bundle size: Provides some additional code support to your application, which can result in a larger bundle size and slower loading times.
Lack of Flexibility: Offers specific design language and style, which limits developers’ ability to create unique UI designs.
Learning Curve: Time-consuming, especially if you are new to React.

As of writing this blog on the best CSS frameworks for React, the latest stable version of Material UI is v6.2.0.

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

Ant Design

Ant Design proclaimed itself as the second most popular among various best CSS frameworks for React, and they are right about that. It has been widely used, and according to npm trends, it has around 1.2 million downloads per week.

Source

Ant Design is like Material UI, providing several UI components that look aesthetic and clean. Ant Design is based on the design language Ant Design, which has its design patterns and principles, making it one of the best CSS frameworks for React.

When writing this blog on the best CSS frameworks for React, Ant Design had around 85.1K+ stars and 38.6K+ forks, which shows its popularity among developers. It has about 1900 contributors, and the library is actively maintained.

Installation

npm:

npm install antd

Yarn:

yarn add antd

Let’s consider by taking an example for better understanding.

import React, { useEffect, useState } from "react";
import { Table } from "antd";


const columns = [
  {
    title: "Rank",
    dataIndex: "rank",
    key: "rank",
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: (text, record) => (
      <a 
        href={`https://www.coingecko.com/en/coins/${record.id}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        {text}
      </a>
    ),
  },
  {
    title: "Price (USD)",
    dataIndex: "price",
    key: "price",
  },
  {
    title: "24h Change",
    dataIndex: "change",
    key: "change",
    render: (text, record) => {
      const color = record.change > 0 ? "green" : "red";
      return <span style={{ color }}>{`${record.change}%`}</span>;
    },
  },
];


const CryptoTable = () => {
  const [dataSource, setDataSource] = useState([]);


  useEffect(() => {
    const fetchTopCryptos = async () => {
      try {
        const response = await fetch(
          "https://cors-anywhere.herokuapp.com/https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=5&page=1&sparkline=false"
        );
        const data = await response.json();
        const formattedData = data.map((crypto, index) => ({
          key: crypto.id,
          rank: index + 1,
          name: crypto.name,
          price: `$${crypto.current_price.toLocaleString()}`,
          change: parseFloat(crypto.price_change_percentage_24h).toFixed(2),
          id: crypto.id,
        }));
        setDataSource(formattedData);
      } catch (error) {
        console.error(error);
      }
    };
    fetchTopCryptos();
  }, []);


  return (
    <div style={{ overflowX: "auto", marginLeft: 100 }}>
      <h1>Crypto Price Table</h1>
      <Table
        columns={columns}
        dataSource={dataSource}
        style={{ width: 500, margin: "auto" }}
      />
      ;
    </div>
  );
};


export default CryptoTable;

Output:

Pros:

Well-documented: It is well-documented, and it is easy to understand even if you are trying it for the first time.
Active development: Under active development and receives regular updates to keep up with the latest web technologies and elements.
Good performance: Minimal design and high-performance components, resulting in fast and responsive applications.

Cons:

Over-Engineering: Provides a lot of out-of-the-box functionality, which can lead to over-engineering or using unnecessary features. This can result in code that is more complex and harder to maintain. For example, If you’re making a simple form using Antd’s Form component, you may not need all of its predefined features, such as validation rules and layout options.
Design limitations: Its components follow a specific visual design, which may not be suitable for all applications. There may be limitations to the framework for developers who require more flexibility in their design.

When writing this blog on the best CSS frameworks for React, the latest version of Ant Design is v5.4.3, and the developers are continuously working on it to improve the performance and overall efficiency of the library.

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

React Bootstrap

If you’re in the world of web development, or more specifically, if you’re into front-end development, you may already be familiar with Bootstrap. Bootstrap is another popular and one of the best CSS frameworks for React from the list that provides a collection of reusable UI components and styles that can be used in any web application.

React-Bootstrap is built on top of the Bootstrap CSS framework. It provides a set of React components based on the Bootstrap CSS framework, making it easier for developers to build React-based responsive and mobile-first design web applications.

According to npm, React Bootstrap has around 1.7 million weekly downloads, which shows the library’s popularity.

Source

Installation

npm:

npm install react-bootstrap bootstrap

Yarn:

yarn add react-bootstrap bootstrap

Let’s consider taking an example for better understanding.

import Button from "react-bootstrap/Button";
import 'bootstrap/dist/css/bootstrap.min.css';




function App() {
  return (
    <div style={{width:"100vh",margin:"auto",marginTop:250, }}>
      <Button variant="primary" style={{margin:5}}>Primary</Button>
      <Button variant="secondary" style={{margin:5}}>Secondary</Button>
      <Button variant="success" style={{margin:5}}>Success</Button>
      <Button variant="warning" style={{margin:5}}>Warning</Button>
      <Button variant="danger" style={{margin:5}}>Danger</Button>
      <Button variant="info" style={{margin:5}}>Info</Button>
      <Button variant="light" style={{margin:5}}>Light</Button>
      <Button variant="dark" style={{margin:5}}>Dark</Button>
      <Button variant="link" style={{margin:5}}>Link</Button>
    </div>
  );
}


export default App;

Output:

Pros:

Extensive component library: Offers a large set of UI elements ranging from buttons to interactive form elements.
Highly responsive: It is designed to be highly responsive and provides several built-in methods for various device dimensions.
Easy integration: Easily integrated with React, and everything is straightforward.

Cons:

Additional dependencies: To make the components interactive, React-Bootstrap requires additional dependencies to be added to the application, which may increase the overall complexity of the application.
Incompatibility with older browsers: Some React-Bootstrap components may not be compatible with older browsers, limiting the application’s reach.
Potential conflicts with other libraries: React-Bootstrap may conflict with other JavaScript libraries used in the application, resulting in errors or unexpected behavior.

Semantic UI React

You may have heard of or even used Semantic UI before. Semantic UI React is an easy-to-use, highly customizable, and of the best CSS frameworks for React, offering reusable UI components and styles.

Semantic UI React is built on top of Semantic UI, and it is one of the popular libraries that provides reusable React components that are highly customizable. According to npm trends, Semantic UI React garners around 250,000+ weekly downloads.

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.

Source

At the time of writing this blog on the best CSS frameworks for React, Semantic UI React has around 14K+ stars and 4K+ forks on GitHub, with around 330 contributors. Also, the current stable version is v2.1.4, and the project is actively maintained.

Installation

npm:

 npm install semantic-ui-react semantic-ui-css

Yarn:


yarn add semantic-ui-react semantic-ui-css

After installation, import the minified CSS file in your app’s entry file:


import 'semantic-ui-css/semantic.min.css'

Let’s consider taking an example for better understanding.

import React, { useEffect, useState } from "react";
import { Button, Checkbox, Form } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";


// simple form using semantic ui react


const App = () => {
  return (
    <div style={{width:"70%",margin:"auto",marginTop:100}}>
<h1 style={{textAlign:"center"}}>Login Now!</h1>
    <Form>
      <Form.Field>
        <label>First Name</label>
        <input placeholder="First Name" />
      </Form.Field>
      <Form.Field>
        <label>Last Name</label>
        <input placeholder="Last Name" />
      </Form.Field>


      {/* address */}
      <Form.Field>
        <label>Address</label>
        <input placeholder="Address" />
      </Form.Field>


      <Form.Field>
        <Checkbox label="I agree to the Terms and Conditions" />
      </Form.Field>
      <Button type="submit">Submit</Button>
    </Form>
    </div>
  );
};


export default App;

Output:

Pros:

Theming support: Its component allows developers to customize the color scheme and other visual aspects easily.
Accessibility: Designed to be accessible with keyboard navigation and ARIA roles and other accessibility features are integrated. Still, there are some concerns about the HTML Semantic tags and markups of Semantic UI.
Minimal: Semantic UI React is minimal compared to other libraries, and it is easy to start with it.

Cons:

Limited documentation: Compared to other libraries, it has limited documentation. It can bring a lot of hassle for someone starting to work with Semantic UI React for the first time.
Smaller community: Compared to other libraries like Material UI and Ant Design, which have over 500K users, Semantic UI React has a smaller community of developers.

In this tutorial, learn what is Regression testing, its importance, types, and how to perform it.

Chakra UI

Chakra UI is a well-known and among the best CSS frameworks for React, which is known for its simplicity, modularity, and usability. It provides developers with a set of reusable components that can be easily combined and customized to create responsive and mobile-first web applications.

According to npm trends, Chakra UI has around 460,000 weekly downloads, around 31.8K+ stars, and 2.8K+ forks on GitHub.

Source

Chakra UI has a set of simple, composable components that can be easily combined to make more complex components and layouts. As of writing this blog on the best CSS frameworks for React, the latest stable version of Chakra UI is v2.5.5.

Installation

npm:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Yarn:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Let’s consider taking an example for a better understanding.

import { Box, Flex, Image, Text } from "@chakra-ui/react";


const StatueOfLibertyCard = () => {
  return (
    <Box
      maxW="sm"
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      boxShadow="lg"
      margin={5}
    >
      <Image
        src="https://cdn.britannica.com/82/183382-050-D832EC3A/Detail-head-crown-Statue-of-Liberty-New.jpg"
        alt="Statue of Liberty"
      />
      <Box p="6">
        <Flex alignItems="baseline">
          <Text fontSize="xl" fontWeight="semibold" color="teal.600" mr={2}>
            Statue of Liberty
          </Text>
          <Text fontSize="sm" color="gray.500">
            New York City, USA
          </Text>
        </Flex>


        <Text mt={4}>
          The Statue of Liberty is a colossal neoclassical sculpture on Liberty
          Island in New York Harbor within New York City, in the United States.
          The statue, designed by Frédéric Auguste Bartholdi and dedicated on
          October 28, 1886, was a gift to the United States from the people of
          France.
        </Text>
      </Box>
      <Box
        p="6"
        display="flex"
        justifyContent="center"
  alignItems="center"
        bg="blue.600"
      >
        <Text color="white" fontWeight="bold">
          Visit
        </Text>
      </Box>
    </Box>
  );
};


export default StatueOfLibertyCard;

Output:

Pros:

Easy to learn: Simple and easy to use for both beginners and experienced developers.
Color mode: Provides built-in support for switching between dark and color modes.
Highly customizable: Offers a wide range of customizable and accessible components, all with consistent design patterns.

Cons:

Limited UI elements: Comparatively new library with limited UI elements.
Higher level of integration: Unlike other libraries, Chakra UI needs a context setup. We must wrap our main App.jsx component within < ChakraProvider >, which adds some overhead.

Blueprint UI

Blueprint is one of the best CSS frameworks for React. Blueprint provides several reusable components, like icons, calendars, tables, etc., which you can use to make your React application.

According to npm trends, Blueprint has around 240,000 weekly downloads and a steadily growing user base. This popularity is due to its comprehensive and well-designed set of UI components, as well as its ease of use and customization.

Source

At the time of writing this blog on best CSS frameworks for React, Blueprint has around 20K+ stars and 2.1K+ forks on GitHub.

Installation

npm:

npm install @blueprintjs/core

Yarn:


yarn add @blueprintjs/core

Let’s consider taking an example for better understanding.

import React from "react";
import { Card, Elevation, HTMLTable } from "@blueprintjs/core";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
import "@blueprintjs/core/lib/css/blueprint.css";


const App = () => {
  const testData = [
    {
      build_id: "3423847",
      test_name: "Login Test",
      status: "pass",
      duration: "25s",
    },
    {
      build_id: "3423846",
      test_name: "Checkout Test",
      status: "fail",
      duration: "37s",
    },
    {
      build_id: "3423845",
      test_name: "Product Page Test",
      status: "pass",
      duration: "42s",
    },
    {
      build_id: "3423844",
      test_name: "Homepage Test",
      status: "pass",
      duration: "18s",
    },
    {
      build_id: "3423843",
      test_name: "Search Test",
      status: "pass",
      duration: "31s",
    },
  ];


  return (
    <Card
      elevation={Elevation.THREE}
      style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
    >
      <h1>LambdaTest Automation Test Results</h1>
      <p>
        This is a sample application that shows how to integrate LambdaTest with
        ReactJS.
      </p>
      <HTMLTable bordered={true} striped={true} responsive={true}>
        <thead>
          <tr>
            <th>Build ID</th>
            <th>Test Name</th>
            <th>Status</th>
            <th>Duration</th>
          </tr>
        </thead>
        <tbody>
          {testData.map((test, index) => (
            <tr key={test.build_id}>
              <td>{test.build_id}</td>
              <td>{test.test_name}</td>
              <td>{test.status}</td>
              <td>{test.duration}</td>
            </tr>
          ))}
        </tbody>
      </HTMLTable>
    </Card>
  );
};


export default App;

Output:

Pros:

Well-Maintained: Well-maintained library, and the developers add new features with each release.
Well documented: Well-documented, and it helps developers quickly get up to speed with its usage.
Customizable: Offers a variety of customizable, high-quality UI components for React.

Cons:

Learning curve: Steep learning curve, making it challenging for beginners to use.
Lacks theming option: Lacks extensive theming options, limiting the ability to customize the UI to match brand guidelines.
Smaller community: Has a smaller community of developers contributing (349 contributors) to the project compared to some other established UI libraries like Material UI.

Perform browser automation testing on the most powerful cloud infrastructure. Leverage Your Test automation for faster, reliable and scalable experience on cloud.

Mantine

Mantine is an easy-to-use, highly customizable, and one of the popular CSS frameworks for React that provide developers with a variety of reusable components and utilities for creating modern web applications. Its range of features and components includes forms, modals, navigation elements, and much more, making it one of the best CSS frameworks for React available today.

Mantine has over 100+ customizable components and 40 hooks, allowing developers to easily create beautiful, responsive, and highly-functional user interfaces for their web applications.

According to npm trends, it has around 150,000 weekly downloads and is widely used. The fact that its download numbers have been steadily increasing over the past few months suggests that its popularity is growing.

Source

Let’s consider taking an example for a better understanding.

import { Group } from "@mantine/core";
import { Calendar } from "@mantine/dates";
import * as React from "react";


const App = () => {
  const currentDate = new Date();


  const handleDateChange = (date) => {
    console.log("Selected Date:", date);
  };


  const calendarStyle = {
    background: "whitesmoke",
    border: "1px solid gray",
    borderRadius: "4px",
    boxShadow: "0 0 4px 2px rgba(0, 0, 0, 0.1)",
    width: "100%",
    maxWidth: "500px",
    height: "500px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    fontSize: "1.2rem",
    fontWeight: "bold",
    color: "gray",
    cursor: "pointer",
    transition: "all 0.2s ease-in-out",
  };


  return (
    <Group position="center">
      <Calendar
        style={calendarStyle}
        defaultMonth={currentDate}
        onMonthChange={(date) => console.log("Month Changed:", date)}
        onDateSelected={handleDateChange}
      />
    </Group>
  );
};


export default App;

Output:

The above output is rendered on LT Browser 2.0 — a dev-friendly Chromium-based browser with over 50+ pre-installed viewports with multiple standard resolutions to perform responsive testing on your websites and web applications.

Pros:

Easy to Use: It is easy to use and can be changed in many ways. It has a lot of reusable components and tools for building modern web apps.
High-Quality Components: Offers a wide range of high-quality components that can be used to make applications that are responsive and easy to use.
Well documented: Its clear and crisp documentation makes it easy for developers to understand and use its components, even if they are new to the library or React development.

Cons:

Limited Third-party Support: Relatively new library, so it may not have as many third-party plugins or extensions available compared to more established libraries.
Learning Curve: While Mantine has good documentation, it may still require some time for developers to get familiar with its API, components, and features.

Rebass

Rebass is a primitive UI component library among various popular and best CSS frameworks for React. It provides a set of low-level, simple, and reusable building blocks for creating user interfaces in React. The Styled System library is used to build Rebass components. It has an API for changing styles and responsive behaviors based on themes.

According to npm trends, it has around 65,000 weekly downloads, and recently it has gained popularity among React developers for its simplicity and ease of use.

Source

Installation

npm:


npm install rebass

Yarn:


Yarn add rebass

Let’s consider by taking an example for better understanding.

import React from "react";
import { Box, Heading, Text, Button } from "rebass";


function App() {
  return (
    <Box p={4} bg="white" boxShadow="0 0 8px rgba(0, 0, 0, 0.1)">
      <Image
        src={"https://rebassjs.org/logo.svg"}
        sx={{
          width: ["100%", "50%"],
          borderRadius: 8,
        }}
      />
      <Heading fontSize={5} mb={3}>
        Welcome to MyComponent
      </Heading>
      <Text mb={3}>
        This is a simple example of using Rebass to build a UI component in
        React.
      </Text>


      <Button variant="Secondary">Click me!</Button>
    </Box>
  );
}


export default App;

Output:

Pros:

Responsive design: Rebass comes with built-in support for responsive design, making it hassle-free to create mobile-friendly layouts.
Theming: Compatible with CSS-in-JS libraries such as Styled Components and Emotion so that you can customize and theme the appearance of components easily.
Accessibility: Its components are built with accessibility in mind, making it simple to create UIs that people with special abilities can also use.

Cons:

Minimalistic: It cannot be used for creating complex UI.
Limited scope: Provides a few UI elements, and sometimes it can meet your demand, making it not a good choice for larger projects.

Carbon Design System React

The Carbon Design System is a design language developed by IBM to provide a unified experience across all its products. Carbon Design System React is one of the best CSS frameworks for React, offering a collection of reusable components and styles for developing modern, user-friendly web applications.

According to npm trends, Carbon Design System React has around 100,000 monthly downloads, and it is an actively maintained project.

Source

Installation

npm:

npm install -S @carbon/react

Yarn:

Yarn add @carbon/react

Let’s consider taking an example for better understanding.

import React from 'react';
import { ProgressIndicator } from 'carbon-components-react';
import 'carbon-components/css/carbon-components.min.css';


const ProgressBar = () => {
  return (
    <div style={{ textAlign: 'center' }}>
      <h2>Loading…</h2>
      <p>Sample demo to showcase how progress bar works in Carbon design</p>}
      <ProgressIndicator />
    </div>
  );
};


export default ProgressBar;

Output:

Pros:

Accessibility: Emphasizes accessibility and offers a wide range of features that make it easy to create applications that are inclusive and accessible to all.
Well-documented: Carbon is well-documented with guidelines, code snippets, and examples to help developers quickly get started with the system.

Cons:

Large bundle size: Carbon’s extensive feature set can result in a large bundle size, which might affect the page load times.
Lack of community contributions: While Carbon has active users, it is primarily maintained by IBM, which may limit community contributions and diversity.

Which are the most wanted tools for automation testing that have climbed the top of the ladder so far? Let’s take a look.

Grommet

Grommet is one of the most known and best CSS frameworks for React that provides accessibility, modularity, responsiveness, and theming support. It is made to be very flexible and easy to change, so developers can make UIs that meet their needs and match their brand.

It has around 37,000 weekly downloads, and is becoming popular among developers due to its simplicity.

Source

Installation

npm:


npm install grommet grommet-icons styled-components --save

Yarn:

yarn add grommet grommet-icons styled-components --save

Let’s consider taking an example for better understanding.

import React, { useState } from "react";
import {
  Grommet,
  Box,
  TextInput,
  Button,
  DataTable,
  Layer,
  Text,
} from "grommet";
import { Add, Trash } from "grommet-icons";




const customTheme = {
  global: {
    colors: {
      brand: "#fff0ff",
      accent: "#00ACC1",
    },
  },
  dataTable: {
    header: {
      background: {
        color: "accent",
      },
      font: {
        weight: "bold",
      },
    },
  },
  button: {
    extend: `
      font-weight: bold;
      padding: 12px 24px;
      &:hover {
        background-color: #00796B;
      }
    `,
  },
};




export default function App() {
  const [items, setItems] = useState([]);
  const [name, setName] = useState("");
  const [showConfirm, setShowConfirm] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);




  const addNewItem = () => {
    setItems([...items, { name }]);
    setName("");
  };




  const removeItem = (item) => {
    const newItems = items.filter((i) => i !== item);
    setItems(newItems);
    setSelectedItem(null);
  };




  return (
    <Grommet theme={customTheme}>
      <Box pad="medium" background="brand" round="medium">
        <Box direction="row" gap="medium">
          <TextInput
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter item name"
            size="small"

          />
          <Button
            icon={<Add />}
            label="Add Item"
            primary
            onClick={addNewItem}
            color="accent"
          />
        </Box>
        <DataTable
          columns={[
            { property: "name", header: "Name", size: "medium" },
            {
              header: "Actions",
              render: (item) => (
                <Button
                  icon={<Trash />}
                  onClick={() => {
                    setSelectedItem(item);
                    setShowConfirm(true);
                  }}
                  color="status-critical"
                />
              ),
              size: "xsmall",
            },
          ]}
          data={items}
          primaryKey="name"
          margin={{ top: "medium" }}
        />
        {showConfirm && (
          <Layer
            onEsc={() => setShowConfirm(false)}
            onClickOutside={() => setShowConfirm(false)}
          >
            <Box pad="medium" gap="medium">
              <Text>
                Are you sure you want to delete "{selectedItem?.name}"?
              </Text>
              <Box direction="row" justify="end" gap="medium">
                <Button label="Cancel" onClick={() => setShowConfirm(false)} />
                <Button
                  label="Delete"
                  color="status-critical"
                  primary
                  onClick={() => {
                    removeItem(selectedItem);
                    setShowConfirm(false);
                  }}
                />
              </Box>
            </Box>
          </Layer>
        )}
      </Box>
    </Grommet>
  );
}

Output:

Pros:

Well-documented: Grommet comes with good documentation and many good examples, making it easy to learn and use.
Theming support: Offers a powerful theming system that allows you to customize the look and feel of your application without modifying the underlying code.
Integration with other frameworks: Supports various frontend frameworks like Angular, Vue, etc.

Cons:

Limited UI elements: Offers limited UI elements; for example, it doesn’t support UI components like calendars or pagination.
Limited Resources: Does not have many resources as other popular UI frameworks such as Bootstrap or Material UI.
Smaller community: Less community support, and because of this, people think twice while choosing it.

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

Fluent UI React

Fluent is a robust, open-source, well-known among various best CSS frameworks for React that helps users create an engaging user experience. Fluent UI is a design system and a set of UI components developed by Microsoft.

Fluent UI has around 100,000 weekly downloads and is an actively maintained project. As of writing this blog on the best CSS frameworks for React, the current stable version is v9.19.0.

Source

Installation

npm:


npm install  @fluentui/react-components

Yarn:

  yarn add @fluentui/react-components

Let’s consider taking an example for better understanding.

import * as React from "react";
import {
  Stack,
  ChoiceGroup,
  DefaultButton,
  Icon,
  MessageBar,
  MessageBarType,
  Persona,
  PersonaSize,
  Text,
} from "@fluentui/react";
import { Switch } from "@fluentui/react-components";


const App = () => {
  const [isChecked, setIsChecked] = React.useState(false);
  const [selectedOption, setSelectedOption] = React.useState("option1");
  const [showMessageBar, setShowMessageBar] = React.useState(false);


  const handleCheckedChange = React.useCallback((ev, checked) => {
    setIsChecked(checked);
  }, []);


  const handleOptionChanged = (event, option) => {
    setSelectedOption(option.key);
  };


  const handleShowMessageBarClicked = () => {
    setShowMessageBar(!showMessageBar);
  };


  return (
    <Stack horizontalAlign="center">
      <Stack.Item align="stretch">
        <Switch
          label=" ⬅️ Toggle Switch"
          checked={isChecked}
          onChange={handleCheckedChange}
        />
        <div>{isChecked ? "Switch is ON" : "Switch is OFF"}</div>
        <ChoiceGroup
          label="Select an option"
          selectedKey={selectedOption}
          options={[
            { key: "option1", text: "Realtime Testing" },
            { key: "option2", text: " Cross-browser Testing " },
            { key: "option3", text: "UI Testing" },
          ]}
          onChange={handleOptionChanged}
        />
      </Stack.Item>


    </Stack>
  );
};


export default App;

Output:

Pros:

Accessibility: Fluent UI is designed with accessibility in mind, ensuring that users of all abilities can access and use it without difficulty.
Cross-platform Compatibility: Offers cross-platform design system that works seamlessly across various platforms, including web, mobile, and desktop applications.
Performance: Designed to perform optimally, providing a professional and user-friendly look and feel to your applications.

Cons:

Limited Customization: Offers many customizable components. Its level of customization may not be as extensive as that of other UI frameworks. This may limit the ability to design highly customized user interfaces.
Component Bloat: Offers a wide range of components, but not all of them may be necessary for every project. As a result, your codebase could become more difficult to maintain and optimize.
Limited Community Contributions: It has an active community, but there might not be as many plugins or contributions as there are for other popular CSS frameworks for React.

Evergreen

Evergreen is another well-known among various best CSS frameworks for React offered by Segment, designed to help create delightful software products. It’s also a design system that provides flexibility and doesn’t limit developers to any specific configuration or outdated integration.

Evergreen has around 12,872 weekly downloads, which has been steadily increasing over the past few months.

Source

Installation

npm:


npm i evergreen-ui

Yarn:

Yarn add evergreen-ui

Let’s consider by taking an example for better understanding.

import * as React from "react";
import { CornerDialog, Button } from "evergreen-ui";
const App = () => {
  return <BasicCornerDialogExample />;
};


export default App;


function BasicCornerDialogExample() {
  const [isShown, setIsShown] = React.useState(false);
  return (
    <React.Fragment>
      <CornerDialog
        title="Welcome to this new feature"
        isShown={isShown}
        onCloseComplete={() => setIsShown(false)}
      >
    LambdaTest is a cloud-based cross-browser testing platform that allows
        developers to test their websites and web applications across 2000+
        different browser and operating system combinations.


        It is a fully managed platform that requires no setup or maintenance and
        can be used to test websites, web apps, and hybrid mobile apps.


      </CornerDialog>
      <Button onClick={() => setIsShown(true)}>
        Show “Learn More” Corner Dialog
      </Button>
    </React.Fragment>
  );
}

Output:

Pros:

Flexible and customizable: Evergreen gives you much freedom to change things and make them your own. Developers can easily change the styles and components to fit their needs and brand identities.
User-friendly: Provides a user-friendly and intuitive design, making it easy for developers to use and implement in their applications.
Responsive: Designed to be responsive, making it easy to create interfaces that work well on desktop and mobile devices.

Cons:

Limited Theming Options: Evergreen doesn’t have a lot of theming options, and it will be hard to create highly customized themes that fit specific design requirements.
Limited Community Support: Smaller community than other popular UI frameworks.
Limited Resources: Since Evergreen is comparatively less used, it has limited resources compared to more established frameworks.

This Cypress automation testing tutorial will help you learn the benefits of Cypress automation, and how to install Cypress and execute Cypress automation testing over scores of browsers and operating systems online.

NextUI

NextUI is a versatile, open-source UI library from various best CSS frameworks for React that help developers to create impressive websites and applications. Its modern, fast, and visually appealing design makes it an attractive option for anyone looking to create a cutting-edge user experience.

Although Next UI is in beta now, it is quite promising because it is a community-supported library and has gained around 18,000 downloads per week, according to npm. It has around 10K+ stars on GitHub, and more than 70 developers are working on this project.

Source

Let’s consider taking an example for better understanding.

 import { Button, Card, Image, Text } from "@nextui-org/react";


export default function App() {
  return (
    <Card css={{ mw: "400px" }}>
      {/* center it */}
      <Card.Body css={{ textAlign: "center" }}>
        <Text h2>Cross Browser Testing</Text>


        <Image
          src="https://www.lambdatest.com/resources/images/main/home_banner.webp"
          alt="Cross Browser Testing"
          css={{ my: "1rem" }}
        />
        <Text h5>
          Cross Browser Testing is a service that allows you to test your
          website on different browsers and devices.
          LambdaTest is a cloud-based cross browser testing platform that
          allows you to test your website on 2000+ real browsers and
          operating systems such as Windows, Mac, and Linux.
        </Text>
        <Button css={{marginTop:15}}>LambdaTest Your Apps</Button>
      </Card.Body>
    </Card>
  );
}

Output:

Pros:

Faster: NextUI removes unnecessary style props during runtime. Because of this, the tool performs better than other React UI libraries.
Custom theming: Provides an easy way to customize the default theme to adapt to your design.
Server-side rendering: Its components make it simple to implement cross-browser server-side rendering in your applications.

Cons:

Newer Library: Currently in beta and is a relatively new UI library.
Chance for bugs: Still in the development phase and might have bugs and breaking changes.

Theme UI

Theme UI is a design library for styling React-based applications that allow developers to create user interfaces that can be easily themed based on constraint-based design principles. Theme UI has great developer ergonomics and is built on the principles of constraint-based design.

Theme UI has around 93,000 weekly downloads, according to the npm statistics. This indicates a growing user base and popularity within the React developer community.

Source

Installation

npm:


 npm install theme-ui @emotion/react

Yarn:

Yarn add theme-ui @emotion/react

Let’s consider by taking an example for better understanding.

 import React, { useState } from "react";
import { Box, Image } from "theme-ui";


const ImageCarousel = () => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const images = [
    "https://images.pexels.com/photos/15130357/pexels-photo-15130357.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    "https://images.pexels.com/photos/15316227/pexels-photo-15316227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    "https://images.pexels.com/videos/7592810/cavalry-cold-dawn-daylight-7592810.jpeg",
    "https://images.pexels.com/photos/14437079/pexels-photo-14437079.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    "https://images.pexels.com/photos/14737533/pexels-photo-14737533.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  ];


  const handleImageClick = (index) => {
    setCurrentImageIndex(index);
  };


  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100vh",
        width: "100vw",
        backgroundColor: "black",
      }}
    >
      {images.map((src, index) => (
        <Box
          key={index}
          sx={{
            width: "200px",
            height: "200px",
            border: "1px solid gray",
            overflow: "hidden",
            cursor: "pointer",
            mx: 2,
            transition: "all .3s ease-in-out",
            transform: currentImageIndex === index ? "scale(1.5)" : "none",
          }}
          onClick={() => handleImageClick(index)}
        >
          <Image
            src={src}
            sx={{ width: "100%", height: "100%", objectFit: "cover" }}
          />
        </Box>
      ))}
    </Box>
  );
};


export default ImageCarousel;

Output:

Pros:

Ergonomic: Allows you to style your software products quickly as per your theme with excellent developer ergonomics.
Themeable: Developers can easily change how their websites or apps look and feel by referring to the values and applying them to any component they want.

Cons:

Newer: Relatively new library compared to some established libraries, making it confusing or challenging for new developers, especially if unfamiliar with React or styling libraries.
Less community support: Due to the growing community, it does not have as many resources, support, or plugins available for developers.

React Suite

React Suite is a popular open-source React-based UI library, among other best CSS frameworks for React, which offers a wide range of components that can be changed and reused again. These components include everything from simple user interfaces elements like buttons and forms to more complicated ones like data tables and charts. This makes it a great choice for developers who want to make web apps that look professional and have many features.

React Suite has around 45,552 weekly downloads, according to npm statistics, and it is a well-maintained project with around 100 developers actively working on it.

Source

Installation

npm:

npm i rsuite

Yarn:

Yarn add rsuite

Let’s consider taking an example for better understanding.

import React from "react";
import { Modal, Button, ButtonToolbar, Placeholder } from "rsuite";
import "rsuite/styles/index.less";


export default function App() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  return (
    <>
      <ButtonToolbar>
        <Button onClick={handleOpen}> Open</Button>
      </ButtonToolbar>


      <Modal open={open} onClose={handleClose}>
        <Modal.Header>
          <Modal.Title>LambdaTest your Apps
</Modal.Title>
        </Modal.Header>
        <Modal.Body>
         LambdaTest is a digital experience testing platform that enables
          enterprises to test for omnichannel experiences on custom-designed,
          robust, high-performance, and scalable infrastructure, thereby
          accelerating digital transformation.


        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleClose} appearance="primary">
            Ok
          </Button>
          <Button onClick={handleClose} appearance="subtle">
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Output:

Pros:

Highly customizable: Offers a large number of customizable UI components for building feature-rich web applications.
Support for Arabic and Hebrew: Provides out-of-the-box support for Arabic and Hebrew languages and customizable themes for a personalized user experience.

Cons:

Poorly documented: The documentation feels insufficient or difficult to navigate in certain areas.
Not widely used: The library may not be as popular as some of its competitors, which could make resources and community support harder to find.

React Spectrum

React Spectrum is a well-known cutting-edge UI library among the list of best CSS frameworks for React that provides a wide array of customizable and accessible components for creating top-tier web applications. Based on the Adobe Spectrum Design System, this library is designed to deliver a streamlined and unified set of tools for building visually striking and user-friendly interfaces that will delight users.

React spectrum has around 8,705 weekly downloads according to npm statistics, indicating a decent level of popularity among React developers.

Source

Installation

npm:

 npm i @adobe/react-spectrum

Yarn:

yarn add @adobe/react-spectrum

Let’s consider taking an example for better understanding.

import { RangeCalendar } from "@adobe/react-spectrum";


export default function Example() {
  let [action, setAction] = React.useState(null);


  return (
    <>
     <RangeCalendar aria-label="Trip dates" />


    </>
  );
}

Output:

Pros:

Unified design: Adobe React Spectrum has a complete design system with guidelines, resources, and tools for making interfaces that look good and are the same across all Adobe products and platforms.
Accessibility oriented: The design system is built with accessibility in mind, making it easier for developers to create interfaces that are inclusive and accessible to users with special abilities.

Cons:

Learning curve: The design system and UI library are well-documented, but it may still take some time for developers to fully understand and use Adobe Spectrum’s features and capabilities.
Less community support: Comparably less used, which results in limited community support and resources.

Gestalt

Gestalt is a user-friendly design system developed by Pinterest and is one of the best CSS frameworks for React. It includes various customizable UI components, from simple buttons and forms to more advanced navigation and data visualization tools.

The UI components in Gestalt are designed to be responsive, adapting to different screen sizes and resolutions. This ensures that applications built with Gestalt will look great on any device, from mobile phones to large desktop monitors.

Gestalt has around 22,000 weekly downloads; the current stable version is v101.3.9.

Source

Installation

npm:

 npm i gestalt

Yarn:

 yarn add gestalt

Let’s consider taking an example for better understanding.

 import { Box, SelectList } from 'gestalt';
import 'gestalt/dist/gestalt.css';




export default function SelectExample() {
  return (
    <Box width="100%" height="100%" padding={4}>
      <SelectList
        id="selectlistexample1"
        label="Select a country"
        onChange={() => {}}
        size="lg"
      >
        {[
          { label: 'United States', value: 'us' },
          { label: 'United Kingdom', value: 'uk' },
          { label: 'Canada', value: 'canada' },
          { label: 'Germany', value: 'germany' },
          { label: 'France', value: 'france' },
          { label: 'Japan', value: 'japan' },
        ].map(({ label, value }) => (
          <SelectList.Option key={value} label={label} value={value} />
        ))}
      </SelectList>
    </Box>
  );
}

Output:

Pros:

Maintained by Pinterest: Gestalt is maintained by Pinterest and which shows there is a promising future ahead for it.
Customizable: Provides various customizable and reusable UI components for building modern web applications.

Cons:

Limited components: Has a limited number of components compared to some other established React UI libraries.
Not apt for a high level of customization: It might not be a good choice for projects that require a high level of customization or unique design elements, as the library is designed to offer a cohesive and consistent visual language across all components.

Run your Jest automation tests in massive parallel across multiple browser and OS combinations with LambdaTest, Read more

PrimeReact

PrimeReact is a React-based UI component library, another well-known and among the best CSS frameworks for React that has been adopted by various businesses and developers worldwide. Major companies like Mercedes, Airbus, Ford, Fox, Volkswagen, eBay, Intel, Nvidia, Verizon, and American Express have all used it.

PrimeReact has more than 78,900 weekly downloads and 3.7K+ GitHub stars. It has many features and components that can help you make better user interfaces.

Source

Installation

npm:

 npm i primereact

Yarn:

Yarn add primereact

Let’s consider taking an example for better understanding.

import React, { useState, useEffect } from "react";
import { Chart } from "primereact/chart";
import { Card } from "primereact/card";


export default function FrameworkChart() {
  const [chartData, setChartData] = useState({});
  const [chartOptions, setChartOptions] = useState({});


  useEffect(() => {
    const data = {
      labels: ["2018", "2019", "2020", "2021", "2022"],
      datasets: [
        {
          label: "React",
          data: [100, 200, 400, 800, 1600],
          fill: false,
          borderColor: "#61dafb",
          tension: 0.4,
        },
        {
          label: "Vue",
          data: [50, 100, 200, 400, 800],
          fill: false,
          borderColor: "#41b883",
          tension: 0.4,
        },
        {
          label: "Angular",
          data: [20, 50, 100, 200, 400],
          fill: false,
          borderColor: "#c3002f",
          tension: 0.4,
        },
        {
          label: "Ember",
          data: [5, 10, 20, 40, 80],
          fill: false,
          borderColor: "#e04e39",
          tension: 0.4,
        },
      ],
    };


    const options = {
      maintainAspectRatio: false,
      aspectRatio: 0.6,
      plugins: {
        legend: {
          labels: {
            color: "#000",
          },
        },
      },
      scales: {
        x: {
          ticks: {
            color: "#000",
          },
          grid: {
            color: "#ccc",
          },
        },
        y: {
          ticks: {
            color: "#000",
          },
          grid: {
            color: "#ccc",
          },
        },
      },
    };


    setChartData(data);
    setChartOptions(options);
  }, []);


  return (
    <Card style={{ font: 24 }} title="Frontend Framework Popularity">
      <Chart type="line" data={chartData} options={chartOptions} />
    </Card>
  );
}

Output:

Pros:

Design Agnostic: Works with existing design libraries like Bootstrap and Material UI but also allows you to create your unique design.
Theme Designer: Includes a GUI-based Theme Designer with over 500 customizable variables for modifying color, font, size, input style, buttons, and more.
Large Community: A large and active community provides helpful resources and support to developers, and more than 15K projects use Primereact.

Cons:

Limited Customization: While PrimeReact offers a lot of pre-built components, there may be limitations to the level of customization that can be achieved.
Complexity: Due to many features and components, PrimeReact can be more complex and challenging to learn for beginners.

Belle

Among various best CSS frameworks for React, Belle is mostly new and consists of a collection of React UI components that aims to offer reusable and customizable components for creating excellent web applications. Users of all abilities can easily use and navigate through the web application thanks to Belle’s components, which were created with accessibility in mind.

source

Pros:

Customizable: Offers a good range of customizable components for React-based UI development.
Well-documented: Belle is well-documented and has a great user community that constantly contributes to the framework.
Lightweight: Ideal for quick and responsive development.
Browser support: Can be worked with all modern browsers and mobile devices.

Cons:

Limited components: Do not have as many components as some of the other best CSS frameworks for React. Hence it limits its flexibility in specific scenarios.
No Built-in support: Does not provide built-in support for CSS preprocessors like Sass or Less.

Griddle

Griddle is a React-based grid component that aids in creating responsive design templates like tables, lists, and grids with features like filtering, sorting, pagination, and more. For handling large datasets in React applications, Griddle aims to be a quick and straightforward solution.

Griddle offers a flexible API and adaptable styling options to fit a range of use cases. Developers can use Griddle to make dynamic tables and grids that make it simple for users to interact and navigate through data.

Source

Pros:

High level of customization: Allows developers to create custom components.
Easily accessible: Easy for users to navigate and interact with the application.
Lightweight: Easily integrated with other libraries.
Extensive documentation: Easy for developers to learn and use.

Cons:

Steep learning curve: New users may find using it challenging.
Limited built-in functionality: Have minimal built-in component functionality compared to other libraries.
Smaller community: Limited support and updates, making it less choice for developers.

Reactstrap

Reactstrap is a popular React UI library built on top of Bootstrap, and it is one of the most popular and comprehensive libraries among various CSS frameworks for React. It provides pre-built React components designed to work with Bootstrap styles and utilities, making it easy to create responsive and mobile-friendly web applications.

Reactstrap includes a wide range of components, such as navigation bars, forms, modals, buttons, and more. It also supports server-side rendering and has good documentation with examples. The library is open source and maintained by the community.

Source

Pros:

Pre-built components: Provides pre-built components, making it easy to create complex UI layouts.
Easy to learn: As developers are already familiar with Bootstrap, it is easy to get started with Reactstrap.
Excellent documentation: This offers good documentation, and a large community of developers is available to help.

Cons:

Not highly customizable: Reactstrap relies heavily on Bootstrap, which can sometimes be difficult to customize components.
Slow loading: The CSS generated by Reactstrap can be bloated and slow to load.

React-MDL

React-MDL is a UI library and is one of the popular CSS frameworks for React that offers programmers a collection of reusable and adaptable components to create web applications. It is built using Material Design Lite, a simplified version of Google’s Material Design principles.

React-MDL is a well-liked option for developing web applications with React because it is simple to use and has great documentation.

Source

Pros:

Easy to learn: Easy to learn and implement, making it a good choice for beginners.
Vast components: It provides a wide range of components for UI development, including responsive layouts, forms, and typography.
Well-documentation: It is well-documented and supported by a large community of developers, ensuring continued updates and bug fixes.

Cons:

Limited customization options: Restrictive for more complex projects due to limited customizable options available.
Less responsive: Some components may not be fully responsive, which can cause issues on certain devices.

Shards React

Shards React is a UI framework for creating user interfaces in React applications. It offers pre-built and editable elements, including buttons, forms, navigation bars, and more. The framework is responsive and mobile-friendly by default because it is constructed on top of Bootstrap.

Shards React also includes additional features, such as customizable themes, a built-in icon library, and support for various JavaScript libraries. It is designed to be lightweight and flexible, which allows developers to easily integrate it into their projects and customize it as needed.

Source

Pros:

Excellent documentation: Provides great documentation and support for the framework.
Lightweight: Easy to use, making it ideal for small and large projects.
Responsive layouts: Offers a comprehensive set of components for responsive design.

Cons:

Limited customization options: Not suitable for highly specific designs.
Difficult to integrate: Integrating other frameworks and libraries can be challenging.
Limited community support: Due to fewer updates and less usage, its community support is less compared to other frameworks.

Choosing the Right CSS Framework for React-Based Applications

We have gone through a long list of the 23 best CSS frameworks for React. Each year, there are new additions to the list, making it even harder to choose the right one.

When picking the right CSS framework for React-based applications, it’s important to consider your project’s needs. It is important to note that installing a heavy package for simple UI elements can increase loading time and slow down your application. In this section of the blog on the best CSS frameworks for React, we will look into some of the aspects you must consider while picking the best CSS frameworks for React and a component library for your testing needs.

Cross Browser Compatibility

Cross browser compatibility is an important factor when choosing the best CSS frameworks for React among the various options available. Some new UI libraries focus on the more recent versions of React, and they might need to be compatible with older versions. It can be a challenging time for developers who will use those libraries.

Some React UI component libraries may not be compatible with all major browsers and devices, which can result in issues with the user experience and functionality of your web application. For instance, if a UI library heavily relies on CSS, there is a probability that the CSS properties are specific to certain platforms and may not function as intended.

One way you can verify and test compatibility is to check if the library supports major browsers and devices using a cloud-based digital experience testing platform like LambdaTest that provides comprehensive cross browser testing capabilities.

LambdaTest is a cloud-based unified intelligent digital experience testing platform that allows developers and testers to perform manual and automated testing over a wide range of browsers and real devices. Additionally, LambdaTest also offers a wide range of integrations with popular automation testing frameworks like Selenium, Appium, and Playwright, allowing you to test React applications into your existing testing workflow seamlessly.

To get started with LambdaTest, watch this complete tutorial and start testing your React-based websites or web apps today.

Subscribe to the LambdaTest YouTube Channel for more updates and comprehensive tutorials around Selenium testing, Cypress testing, and more.

In this article, we take a look at some aspects of simulation and discuss some ways through which we can use iPhone emulator for Windows.

Documentation

UI libraries like Material UI have gained significant popularity, and one of the reasons for this is their well-documented API and usage examples. Proper documentation not only helps developers understand how to use the library effectively, but it also helps them to debug and fix issues.

One noticeable feature of popular libraries like Material UI is the overall flow of the documentation. Material UI’s documentation is well-structured and easy to follow, making it easy to find what you need and get started with the library. Each component is well explained with code as well as a live example.

Most UI libraries try to keep their documentation up-to-date and thorough to ensure that developers have the necessary resources to use their components effectively. From the examples above, it’s clear that developers find it much easier to understand and use the different parts and features of a UI library when the documentation is clear and well-organized.

While evaluating a UI library, look for API references, usage examples, and code snippets that demonstrate how to use the library’s components and features. It is also a good practice to check the GitHub repository and issues section for the UI library you are considering. This can give you a better idea of the development activity and community support for the library.

Ease of Customization

While choosing the best CSS frameworks for React from the list of the best CSS frameworks, it is important to consider the level of customization it provides. Some libraries may limit the amount of customization possible, while others may offer extensive options for customization.

Most organizations have their own brand colors and aesthetics. When using a UI library, it is important to ensure that it provides the flexibility to customize the look and feel of the UI to match your brand. This includes options for modifying colors, typography, and other styling elements.

The following example shows how we can override the default style and create custom styling of a Material UI button.

import { Button, Typography } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { createTheme } from "@mui/material/styles";


const theme = createTheme({
  palette: {
    primary: {
      main: "#4cff50",
    },
    secondary: {
      main: "#f50057",
    },
    background: {
      default: "#f5f5f5",
      paper: "#ffffff",
    },
    text: {
      primary: "#333333",
      secondary: "#666666",
    },
  },
});


function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Typography variant="h4" gutterBottom>
          Material UI Theme
        </Typography>
        <Typography variant="body1" paragraph>
          In this example, we have created a theme with primary and secondary
          colors, a default background color, and some typography styles. We
          have also added a margin to the buttons.
        </Typography>
        <Button variant="contained" color="primary" sx={{ margin: 5 }}>
          Primary Button
        </Button>
        <Button variant="contained" color="secondary" sx={{ margin: 5 }}>
          Secondary Button
        </Button>
      </div>
    </ThemeProvider>
  );
}


export default App;

Output:

Also, look for libraries that offer a wide range of pre-built components and the ability to create your custom components easily. One thing to note when using an extensive library is that it can increase the project size and the page load time in slower networks.

Learning Curve

It’s crucial to think about the learning curve when deciding on a user interface framework or component library. Some libraries, such as Semantic UI React, are more complex and challenging to use. On the other hand, some libraries, like Material UI, are more straightforward and scalable. Material UI has the largest UI community in the React ecosystem. It has been around since 2014, almost as long as React itself.

Search for libraries with thorough documentation, tutorials, and community support to make learning easier. This can help you quickly get up to speed on the library’s features and functionality and provide a valuable resource if you run into any issues or have questions.

Performance

Performance is considered the key to the success of any web application. A fast and responsive application can provide users with a smooth and seamless experience, making them more likely to engage with your product and return in the future.

When choosing a UI library for your app, it’s important to pay attention to its performance. You want to avoid ending up with a library that slows down your app’s loading time or negatively affects its performance.

It’s a good idea to look for libraries that offer optimization options, such as code splitting and lazy loading. These features can help improve your app’s performance by reducing the amount of code that needs to be loaded at once.

Accessibility

Accessibility is one of the most important aspects of software development. While choosing the best CSS frameworks for React, it’s important to consider accessibility as one of the key factors. An accessible UI library can help you build an inclusive app that everyone, including people with special abilities, can use.

To ensure that your app is fully accessible, you should look for libraries that offer accessibility testing features, such as keyboard navigation and screen reader support. These features can help users with special abilities to navigate and interact with your app more easily.

Also, make sure that the library you chose follows accessibility standards such as WCAG. This can help ensure that your app complies with accessibility laws and regulations. Some libraries, like Semantic UI React, have accessibility issues addressed by the community, which can make UI components hard to use for people with special abilities.

Selenium WebdriverIO is a Javascript-based test automation framework built over nodeJs. Learn with this guide how to use webdriverIO to perform web automation testing.

Material UI vs. Semantic UI: Comparison with LT Browser 2.0

Let’s now look at an example where we try to replicate the same UI using Material UI and Semantic UI and then check the responsiveness score using LT Browser 2.0. We will also look into the performance score.

Semantic UI React

We will use Semantic UI React to build a registration form component with a few form components like form, checkbox, and button.

Let’s consider taking an example for better understanding.

import React, { useState } from 'react';
import { Container, Form, Checkbox, Button } from 'semantic-ui-react';
import 'semantic-ui-css/semantic.min.css'


function RegistrationForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    confirmPassword: '',
    age: '',
    gender: '',
    address: '',
    phoneNumber: '',
    agreeTerms: false,
  });


  const [formErrors, setFormErrors] = useState({});


  const handleInputChange = (event, { name, value, checked }) => {
    setFormData((prevState) => ({
      ...prevState,
      [name]: name === 'agreeTerms' ? checked : value,
    }));
  };


  const handleSubmit = (event) => {
    event.preventDefault();


    // Validate form data
    const errors = {};


    if (!formData.firstName) {
      errors.firstName = 'Please enter your first name';
    }


    if (!formData.lastName) {
      errors.lastName = 'Please enter your last name';
    }


    if (!formData.email) {
      errors.email = 'Please enter your email address';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      errors.email = 'Please enter a valid email address';
    }


    if (!formData.password) {
      errors.password = 'Please enter a password';
    } else if (formData.password.length < 6) {
      errors.password = 'Password must be at least 6 characters long';
    }


    if (formData.password !== formData.confirmPassword) {
      errors.confirmPassword = 'Passwords do not match';
    }


    if (!formData.age) {
      errors.age = 'Please enter your age';
    } else if (formData.age < 18) {
      errors.age = 'You must be at least 18 years old to register';
    }


    if (!formData.gender) {
      errors.gender = 'Please select your gender';
    }


    if (!formData.address) {
      errors.address = 'Please enter your address';
    }


    if (!formData.phoneNumber) {
      errors.phoneNumber = 'Please enter your phone number';
    } else if (!/^\d{10}$/.test(formData.phoneNumber)) {
      errors.phoneNumber = 'Please enter a valid phone number';
    }


    if (!formData.agreeTerms) {
      errors.agreeTerms = 'You must agree to the terms and conditions';
    }


    setFormErrors(errors);


    // Submit form data if there are no errors
    if (Object.keys(errors).length === 0) {
      console.log(formData);
    }
  };


  const {
    firstName,
    lastName,
    email,
    password,
    confirmPassword,
    age,
    gender,
    address,
    phoneNumber,
    agreeTerms,
  } = formData;


  return (
    <Container>
      <h2>
        Registration Form
      </h2>
      <Form onSubmit={handleSubmit}>
        <Form.Input
          label="First Name"
          name="firstName"
          value={firstName}
          onChange={handleInputChange}
          required
          error={formErrors.firstName}
        />
        <Form.Input
          label="Last Name"
          name="lastName"
          value={lastName}
          onChange={handleInputChange}
          required
          error={formErrors.lastName}
        />
        <Form.Input
          label="Email"
          name="email"
          type="email"
          value={email}
          onChange={handleInputChange}
          required
          error={formErrors.email}
        />
        <Form.Input
          label="Password"
          name="password"
          type="password"
          value={password}
          onChange={handleInputChange}
          required
          error={formErrors.password}
          />
          <Form.Input
            label="Confirm Password"
            name="confirmPassword"
            type="password"
            value={confirmPassword}
            onChange={handleInputChange}
            required
            error={formErrors.confirmPassword}
          />
          <Form.Input
            label="Age"
            name="age"
            type="number"
            value={age}
            onChange={handleInputChange}
            required
            error={formErrors.age}
          />
          <Form.Group inline>
            <label>Gender</label>
            <Form.Radio
              label="Female"
              name="gender"
              value="female"
              checked={gender === 'female'}
              onChange={handleInputChange}
              required
              error={formErrors.gender}
            />
            <Form.Radio
              label="Male"
              name="gender"
              value="male"
              checked={gender === 'male'}
              onChange={handleInputChange}
              required
              error={formErrors.gender}
            />
            <Form.Radio
              label="Other"
              name="gender"
              value="other"
              checked={gender === 'other'}
              onChange={handleInputChange}
              required
              error={formErrors.gender}
            />
          </Form.Group>
          <Form.Input
            label="Address"
            name="address"
            value={address}
            onChange={handleInputChange}
            required
            error={formErrors.address}
          />
          <Form.Input
            label="Phone Number"
            name="phoneNumber"
            type="tel"
            pattern="[0-9]{10}"
            value={phoneNumber}
            onChange={handleInputChange}
            required
            error={formErrors.phoneNumber}
          />
          <Form.Checkbox
            label="I agree to the terms and conditions"
            name="agreeTerms"
            checked={agreeTerms}
            onChange={handleInputChange}
            required
            error={formErrors.agreeTerms}
          />
          <Button type="submit" primary>
            Submit
          </Button>
          <Button type="button" secondary>
            Cancel
          </Button>
        </Form>
      </Container>
      );
      }

      export default RegistrationForm;

Output:

Responsiveness Score:

Performance Score:

Material UI

Now, we will try replicating the Semantic UI form component into the Material UI component. Note that a replica may only sometimes be possible due to differences in the design systems and available features. However, we aim to create a similar form using Material UI and compare the two in terms of aesthetics and functionality.

Let’s consider taking an example for better understanding.

import React, { useState } from "react";
import {
  Typography,
  Grid,
  Paper,
  TextField,
  Button,
  FormControl,
  FormControlLabel,
  Checkbox,
  FormHelperText,
  Select,
  MenuItem,
  RadioGroup,
  Radio,
  FormLabel,
} from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { blue } from "@mui/material/colors";


const theme = createTheme({
  palette: {
    primary: {
      main: blue[500],
    },
  },
});


function RegistrationForm() {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    confirmPassword: "",
    age: "",
    gender: "",
    address: "",
    phoneNumber: "",
    agreeTerms: false,
  });


  const [formErrors, setFormErrors] = useState({});


  const handleInputChange = (event) => {
    const { name, value, checked } = event.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: name === "agreeTerms" ? checked : value,
    }));
  };


  const handleSubmit = (event) => {
    event.preventDefault();


    // Validate form data
    const errors = {};


    if (!formData.firstName) {
      errors.firstName = "Please enter your first name";
    }


    if (!formData.lastName) {
      errors.lastName = "Please enter your last name";
    }


    if (!formData.email) {
      errors.email = "Please enter your email address";
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      errors.email = "Please enter a valid email address";
    }


    if (!formData.password) {
      errors.password = "Please enter a password";
    } else if (formData.password.length < 6) {
      errors.password = "Password must be at least 6 characters long";
    }


    if (formData.password !== formData.confirmPassword) {
      errors.confirmPassword = "Passwords do not match";
    }


    if (!formData.age) {
      errors.age = "Please enter your age";
    } else if (formData.age < 18) {
      errors.age = "You must be at least 18 years old to register";
    }


    if (!formData.gender) {
      errors.gender = "Please select your gender";
    }


    if (!formData.address) {
      errors.address = "Please enter your address";
    }


    if (!formData.phoneNumber) {
      errors.phoneNumber = "Please enter your phone number";
    } else if (!/^\d{10}$/.test(formData.phoneNumber)) {
      errors.phoneNumber = "Please enter a valid phone number";
    }


    if (!formData.agreeTerms) {
      errors.agreeTerms = "You must agree to the terms and conditions";
    }


    setFormErrors(errors);


    // Submit form data if there are no errors
    if (Object.keys(errors).length === 0) {
      console.log(formData);
    }
  };


  const {
    firstName,
    lastName,
    email,
    password,
    confirmPassword,
    age,
    gender,
    address,
    phoneNumber,
    agreeTerms,
  } = formData;


  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h2" mb={3}></Typography>
      <Grid
        display="flex"
        justifyContent="center"
        alignItems="center"
        sx={{
          minHeight: "100vh",
          // background: "red",
          width: "fit-content",
          margin: "auto",
        }}
      >
        <Grid container spacing={4} sx={{width:"fit-content",margin:"auto",display:"flex",justifyContent:"center",}}>
          <Grid item xs={12} md={8}>
            <Paper sx={{ p: 4 }} elevation={3}>
              <Typography variant="h5" mb={3}>
                Registration Form
              </Typography>
              <form onSubmit={handleSubmit}>
                <Grid container spacing={2}>
                  <Grid item xs={12} md={6}>
                    <TextField
                      fullWidth
                      label="First Name"
                      name="firstName"
                      variant="outlined"
                      margin="normal"
                      value={firstName}
                      onChange={handleInputChange}
                      required
                      error={formErrors.firstName}
                      helperText={formErrors.firstName}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <TextField
                      fullWidth
                      label="Last Name"
                      name="lastName"
                      variant="outlined"
                      margin="normal"
                      value={lastName}
                      onChange={handleInputChange}
                      required
                      error={formErrors.lastName}
                      helperText={formErrors.lastName}
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      fullWidth
                      label="Email"
                      name="email"
                      variant="outlined"
                      margin="normal"
                      value={email}
                      onChange={handleInputChange}
                      type="email"
                      required
                      error={formErrors.email}
                      helperText={formErrors.email}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <TextField
                      fullWidth
                      label="Password"
                      name="password"
                      variant="outlined"
                      margin="normal"
                      value={password}
                      onChange={handleInputChange}
                      type="password"
                      required
                      error={formErrors.password}
                      helperText={formErrors.password}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <TextField
                      fullWidth
                      label="Confirm Password"
                      name="confirmPassword"
                      variant="outlined"
                      margin="normal"
                      value={confirmPassword}
                      onChange={handleInputChange}
                      type="password"
                      required
                      error={formErrors.confirmPassword}
                      helperText={formErrors.confirmPassword}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <TextField
                      fullWidth
                      label="Age"
                      name="age"
                      variant="outlined"
                      margin="normal"
                      value={age}
                      onChange={handleInputChange}
                      type="number"
                      required
                      error={formErrors.age}
                      helperText={formErrors.age}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <FormControl fullWidth required error={formErrors.gender}>
                      <FormLabel component="legend">Gender</FormLabel>
                      <RadioGroup
                        row
                        aria-label="gender"
                        name="gender"
                        value={gender}
                        onChange={handleInputChange}
                      >
                        <FormControlLabel
                          value="female"
                          control={<Radio color="primary" />}
                          label="Female"
                        />
                        <FormControlLabel
                          value="male"
                          control={<Radio color="primary" />}
                          label="Male"
                        />
                        <FormControlLabel
                          value="other"
                          control={<Radio color="primary" />}
                          label="Other"
                        />
                      </RadioGroup>
                      {formErrors.gender && (
                        <FormHelperText>{formErrors.gender}</FormHelperText>
                      )}
                    </FormControl>
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      fullWidth
                      label="Address"
                      name="address"
                      variant="outlined"
                      margin="normal"
                      value={address}
                      onChange={handleInputChange}
                      required
                      error={formErrors.address}
                      helperText={formErrors.address}
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <FormControl required error={formErrors.agreeTerms}>
                      <FormControlLabel
                        control={
                          <Checkbox
                            color="primary"
                            name="agreeTerms"
                            checked={agreeTerms}
                            onChange={handleInputChange}
                          />
                        }
                        label="I agree to the terms and conditions"
                      />
                      {formErrors.agreeTerms && (
                        <FormHelperText>{formErrors.agreeTerms}</FormHelperText>
                      )}
                    </FormControl>
                  </Grid>
                  <Grid item xs={12}>
                    <Button
                      variant="contained"
                      color="primary"
                      size="large"
                      type="submit"
                    >
                      Submit
                    </Button>


                    <Button
                      variant="contained"
                      color="error"
                      size="large"
                      type="submit"
                      sx={{ ml: 2 }}
                    >
                      Cancel
                    </Button>
                  </Grid>
                </Grid>
              </form>
            </Paper>
          </Grid>
        </Grid>
      </Grid>
    </ThemeProvider>
  );
}


export default RegistrationForm;

Output:

Responsiveness Score:

Performance Score:

As you can see from the responsiveness and performance report of both Material UI and Semantic UI React in LT Browser 2.0, Material UI is more optimized for responsive web design and performs better than Semantic UI.

With that being said, choose the React UI library that meets all your requirements and is a good fit for the scope of your project. One way to make a more informed decision is to try different libraries and conduct some testing to determine which one best meets your needs. This may involve building prototypes or performing UI testing to see how the different libraries perform.

Wrapping Up!

Congratulations on making it to the end of this blog!

We have covered a range of options for frameworks for React. We also discussed the key factors to consider while selecting the best CSS frameworks for React, such as features, performance, documentation, and community support.

With so many excellent options available, it can be challenging to choose the right one for your project. But by evaluating your options and selecting the best CSS frameworks for React that meets all your needs, you can create beautiful, user-friendly web applications that will delight your users.

How To Create Custom Menus with CSS Select

AdarshM1024 — Tue, 28 Mar 2023 07:59:21 +0000

When it comes to UI components, there are two versatile methods that we can use to build it for your website: either we can use prebuilt components from a well-known library or framework, or we can develop our UI components from scratch.

Developing unique CSS components is a better strategy because we have much more control over them as developers, and can change the values as and when required. As a front-end developer for more than three years, making custom select dropdown components for navigation, selecting an option from a list, or filtering the provided choice is one of the most common demands when building user interfaces.

There are several use cases for the < select > tag, like dropdowns, navigation menus, filtering lists of items based on the selected option, choosing an option from a given list of options in input forms, etc. There are numerous CSS frameworks and JavaScript libraries, including Bootstrap, Material UI, and Ant Design, and each of them has its own implementation of a custom CSS Select dropdown menu. They are extremely dependable and have demonstrated cross-browser functionality.

Source

Cross-browser drop-down styling is very challenging. Designers always create attractive drop-down lists, but each browser renders them slightly differently. You can learn more about browser rendering from this blog on Browser Engines: The Crux Of Cross Browser Compatibility.

When thinking about cross-browser functionality, using a CSS framework or library is beneficial because they handle all the behind-the-scenes tasks involved in creating a specific component.

When using these CSS libraries and frameworks like Bootstrap or Tailwind CSS, cross-browser functionality is paramount because end users use different operating systems, browsers, and devices. If we want everyone to have the same experience, we should only use those libraries and frameworks that work well on all devices, operating systems, and browsers. Most modern frameworks consider the need for cross browser compatibility and maintain device-friendly styling.

In this in-depth blog on custom CSS Select menus, we will walk through the process of creating various custom CSS Select menus.

So, let’s get started!

Emulators Online by LambdaTest allows you to seamlessly test your mobile applications, websites,and web apps on mobile browsers and mobile devices.

What is an HTML Select tag?

The HTML element < select > represents a control with a menu of choices. Usually, we use the select element to create a drop-down list. The < select > element is most frequently used in forms to gather user input.

Select tags use a variety of attributes, which give additional details about HTML elements. If we omit the name attribute, no data from the drop-down list will be submitted. The id attribute is needed to associate the drop-down list with a label. The < select > element define the options in the drop-down list.

<select>
  <option>
  </option>
  ...
</select>

The < select > element is typically used when we ask for information about a user’s country in the website’s login form or navigation bar. To maintain the accessibility of the website, we often use the label tag to make it accessible and better for end users.

What are the various select tag attributes?

HTML attributes are unique keywords used within the opening tag to regulate the element’s behavior. HTML attributes are a type of modifier for an HTML element. The attributes provide additional information about HTML elements.

The select tag has various characteristics, including:

Autofocus (Type — Boolean): The HTML < select > autofocus attribute is used to specify that the dropdown should automatically get focused when the page loads or when the user reaches a certain viewport.
Required (Type — Boolean): The HTML < input > required attribute indicates that the user must select a value before submitting the form. The required attribute is a boolean attribute. A variety of input types support the required attribute, including text, search, URL, tel, email, password, date pickers, numbers, checkboxes, radios, and files.
Multiple (Type — Boolean): The HTML multiple attributes specify that the user is allowed to select more than one option (or value) from the given list of options inside the < select > element. Additionally, it can work with the < input > tag.
Disabled (Type — Boolean): To indicate that a select element is disabled, we use the disabled attribute. A drop-down list that is disabled cannot be used or clicked on. It is also a boolean attribute.
Name (Type — String): The drop-down list’s name is specified using the name attribute. It can reference an element in JavaScript or the form data after submitting it.

<img
      src="A Link to an image or any local image "
      alt="an alternative test if the browser can't display the image"
      width="104"
      height="142"  />

We can see a few of the < img > element’s attributes in this example. These attributes give additional information to the < img > element. There are more than 12 attributes for the < img > tag.

Here we have used attributes like src, which corresponds to the image’s source/link, alt, which provides a meaning-filled text description to increase accessibility, and height and width, which describe the image’s height and width.

 <!-- input form with all attributes  -->
   <form>
    <label for="fname"> First name:</label><br />
    <input type="text" id="fname" name="fname" value="John" /><br />
    <label for="lname">Last name:</label><br />
    <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
    <input type="submit" value="Submit" />
    <select name="Mobile" id="Mobiles">
      <option value="Samsung">Samsung</option>
      <option value="Apple">Apple</option>
      <option value="OnePlus">OnePlus</option>
      <option value="Xiaomi">Xiaomi</option>
      <option value="Oppo">Oppo</option>
      <option value="Vivo">Vivo</option>
    </select>
  </form>

The use of several HTML attributes can be seen in the examples above, including action, which specifies the action to be taken when the form is submitted, If the action attribute is omitted, then the default action will be set to the current page.

The name attribute corresponds to the name of the current element as defined by the user, id, which is a unique user-defined name, and value, which is used differently for various input types, such as text for buttons and the initial value for < input > elements.

Other attributes include style, class, and other global attributes that can be used with all HTML elements and some specific to certain HTML elements, such as href and defer.

We won’t go into great detail about HTML attributes because that is outside the scope of this blog on CSS Select, but it is crucial to take accessibility, providing meaningful descriptions via attributes, and following best practices into consideration.

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.

Dropdowns vs. Select vs. Menu vs. Navigation

One common misunderstanding among novice developers is the names mentioned while discussing dropdowns. The most common of which are dropdown, select, and menu.

In this section of the CSS Select blog, let’s have a closer look at what they are.

Dropdown

An interactive element made up of a button that, typically on mouse hover, click, or tap, reveals and conceals a list of items. Before the beginning of the interaction, the list is hidden by default.

A drop-down list only shows one value when it is not active. When the user interacts with the dropdown, a list of values is displayed for the user to choose from.

Material UI Dropdown

A form control that shows a list of choices on a form for the user to select a single item or multiple items.

To make a drop-down list, we use the HTML < select > element. The < select > element is most frequently used in forms for gathering user inputs.

Menu

The < menu > tag defines a list/menu of commands or actions that can be performed on a website.

Currently, the < menu > tag is supported in Firefox, and it doesn’t work on popular browsers like Chrome, Internet Explorer, Safari, and Opera Mini. Presently, it has been removed from the HTML5 standards.

Navigation

A navigation menu on a website is a structured set of connections to other web pages, typically internal sites.

Navigation menus are most frequently found in page headers or sidebars, allowing users to rapidly reach the most important pages on a website.

How to construct a basic HTML Select field?

This section of this blog on CSS Select will discuss the basic aspects of web design involved in the HTML Select element and how to use CSS to style it.

First, the < select > tag is often used when we need to get user input, and the user is given various options to choose from. It may resemble selecting various states or nations, or it might even resemble using a dropdown to switch between pages.

Below is the source code for constructing a select section.

HTML:

<select name="Phone" id="Phone">
  <option value="Realme">Realme</option>
  <option value="Redmi">Redmi</option>
  <option value="Iphone">Iphone</option>
  <option value="Samsung">Samsung</option>
    <option value=”Pixels">Google Pexels</option>
</select>

Output:

<html>
  <body>
  <select name="Phone" id="Phone">
  <option value="Realme">Realme</option>
  <option value="Redmi">Redmi</option>
  <option value="Iphone">Iphone</option>
  <option value="Samsung">Samsung</option>
    <option value="OPPO">OPPO</option>
    <option value="Google Pexel">Google Pixel</option>

</select>

  <select name="Phone" id="Phone">
      <option value="Chrome">Chrome</option>
      <option value="Firefox">Firefox</option>
      <option value="Safari">Safari</option>
      <option value="Edge">Edge </option>
    </select>



</body>

</html>

The output of the code looks as follows:

This is straightforward and is a good place to begin. Let’s now add custom CSS to make it look good as well as design friendly.

CSS:

select{
    width: 10%;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 5px;
    padding: 10px;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    color: #555;
    background-color: rgb(255, 255, 255);
    background-image: none;
    border: 1px solid rgb(41, 18, 18);
}
select>option{
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    color: #555;
    background-color: rgb(247, 247, 247);
    background-image: none;
    font-size: 18px;
    height: 50px;
    padding: 15px;
    border: 1px solid rgb(41, 18, 18);
}

Output:

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

Despite having styles applied to it, the < select > tag’s styles hardly ever change. This is because they are not usual DOM elements, making them behave differently from others.

For developers, the < select > and < option > elements are the most frustrating form controls due to their lack of styling support. This is because they are rendered by the operating system, not HTML.There are only a few style attributes that can be applied to the < option >. Because of how much of a UX battle it is, we will look into other solutions.

The above image makes it clear that applying styles to the < option > tag does not work as intended. The events like click or keypress on tag do not function because the browser generates them outside the DOM model.

A consistent way to mark up the functionality of a list of selectable options is provided by the < select > element. Nevertheless, the browser has complete control over how that list is displayed and can do so most effectively considering the operating system, browser, and current device.

Since we can never be certain how it will be presented, trying to style it in any way may not be effective. We can look into some examples where we test how select tags are presented for different browsers, operating systems, etc.

HTML:

<html>
  <body>
    <select name="Phone" id="Phone">
      <option value="Realme">Realme</option>
      <option value="Redmi">Redmi</option>
      <option value="Iphone">Iphone</option>
      <option value="Samsung">Samsung</option>
      <option value="OPPO">OPPO</option>
      <option value="Google Pexel">Google Pixel</option>
    </select>

    <select name="Phone" id="Phone">
      <option value="Chrome">Chrome</option>
      <option value="Firefox">Firefox</option>
      <option value="Safari">Safari</option>
      <option value="Edge">Edge</option>
    </select>
  </body>
</html>

Output (macOS):

<html>
  <body>
  <select name="Phone" id="Phone">
  <option value="Realme">Realme</option>
  <option value="Redmi">Redmi</option>
  <option value="Iphone">Iphone</option>
  <option value="Samsung">Samsung</option>
    <option value="OPPO">OPPO</option>
    <option value="Google Pexel">Google Pixel</option>

</select>

  <select name="Phone" id="Phone">
      <option value="Chrome">Chrome</option>
      <option value="Firefox">Firefox</option>
      <option value="Safari">Safari</option>
      <option value="Edge">Edge </option>
    </select>



</body>

</html>

<html>
  <body>
  <select name="Phone" id="Phone">
  <option value="Realme">Realme</option>
  <option value="Redmi">Redmi</option>
  <option value="Iphone">Iphone</option>
  <option value="Samsung">Samsung</option>
    <option value="OPPO">OPPO</option>
    <option value="Google Pexel">Google Pixel</option>

</select>

  <select name="Phone" id="Phone">
      <option value="Chrome">Chrome</option>
      <option value="Firefox">Firefox</option>
      <option value="Safari">Safari</option>
      <option value="Edge">Edge </option>
    </select>



</body>

</html>

We can see that the < select > tag is rendered differently. This can be an issue for users if we develop a web application that only considers a particular browser or operating system. We must consider all the major operating systems and browsers to ensure that our application is compatible with cross-browser.

We now comprehend the need for customized CSS Select menus, so let’s start creating those.

How to create a custom dropdown menu with CSS Select?

In this section, we will look at how to create dropdown menus using CSS Select.

There are numerous ways to create a dropdown menu. We can either use CSS to make custom dropdowns or the native select tag to create dropdown menus. All we have to do is to use appropriate HTML elements and then style them accordingly.

We can use CSS Select to its full potential to make custom drop-down elements. With drop-down menus, users can quickly access your site’s content without scrolling. Drop-down menus can save users time by allowing them to jump down a level or two to find the content they want.

A good example of dropdowns in use is in e-commerce websites, where users will see dropdown inputs during checkout. Let’s now create some custom dropdown menus.

This smoke testing tutorial covers what smoke testing is, its importance, benefits, and how to perform it with real-time examples.

Creating custom dropdown menus with Grid layout

In this first example of this blog on CSS Select, using the standard < select > tag and custom CSS, we can now walk through the code for creating dropdowns that can be controlled using the attributes.

The disabled attribute specifies whether the element should be disabled or not. The multiple attributes specify that the user is allowed to select more than one value. Additionally, we have added styling-related attributes like id and class.

Here we use the CSS Grid layout for creating drop-downs. Grid is a CSS property that handles the layout in a two-dimensional grid system with columns and rows. Elements can be placed on the grid within these column and row lines. Since we have full control of where to place the item, this property makes the grid ideal for creating drop-downs.

Using the native < select > tag present in HTML, we will create dropdowns that can be controlled by altering attributes like disabled, multiple, etc.

HTML:

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

<body>


<label for="standard-select">Default Select Menu </label>
<div class="select">
  <select id="standard-select">
    <option value="Option 1">Twitter </option>
    <option value="Option ">Facebook</option>
    <option value="Option 3">Reddit </option>
    <option value="Option 4">Youtube </option>

  </select>
  <span class="focus"></span>
</div>

<label for="multi-select">Multiple Selection</label>
<div class="select select--multiple">
  <select id="multi-select" multiple>
    <option value="Option 1">Web Development </option>
    <option value="Option 2">App Development </option>
    <option value="Option 3"> Machine Learning</option>
    <option value="Option 4">Automation </option>
    <option value="Option 5"> AI</option>
    <option value="Option length">Some other</option>
  </select>
  <span class="focus"></span>
</div>

<label for="standard-select-disabled">Disabled Select</label>
<div class="select select--disabled">
  <select id="standard-select-disabled" disabled>
    <option value="Option 1">Server side rendering</option>
    <option value="Option 2">Client side rendering</option>
    <option value="Option 3">Static site generation</option>
    <option value="Option 4">Hybrid Site Generator</option>
    <option value="Option 5">Server + Client side rendering</option>
    <option value="Option length">Single Page Application</option>
  </select>
</div>

<label for="standard-select">Disabled Multiple Select</label>
<div class="select select--disabled select--multiple">
  <select id="multi-select-disabled" multiple disabled>
    <option value="Option 1">React JS</option>
    <option value="Option 2">AngularJS</option>
    <option value="Option 3">Meteor JS</option>
    <option value="Option 4">Svelte Kit </option>
    <option value="Option 5">Hydrogen JS</option>
    <option value="Option length">React JS with NextJS </option>
  </select>
</div>


</body>
</html>

CSS:

body {
  background-color: red;
}
:root {
  --select-border: #777;
  --select-focus: #00f;
  --select-arrow: var(--select-border);
}
select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  z-index: 1;
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
}
.select select,
.select::after {
  grid-area: select;
}
.select:not(.select--multiple)::after {
  content: "";
  justify-self: end;
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}
select[multiple] {
  padding-right: 0;

  height: 6rem;

}
select[multiple] option {
  white-space: normal;
  outline-color: var(--select-focus);
}
.select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}
label {
  font-size: 1.125rem;
  font-weight: 500;
}
.select + label {
  margin-top: 2rem;
}
body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-gap: 0.5rem;
  font-family: "Baloo 2", sans-serif;
  background-color: skyblue;
  padding: 1rem;
}

Output:

<label for="standard-select">Default Select Menu </label>
<div class="select">
  <select id="standard-select">
    <option value="Option 1">Twitter </option>
    <option value="Option ">Facebook</option>
    <option value="Option 3">Reddit </option>
    <option value="Option 4">Youtube </option>

  </select>
  <span class="focus"></span>
</div>

<label for="multi-select">Multiple Selection</label>
<div class="select select--multiple">
  <select id="multi-select" multiple>
    <option value="Option 1">Web Development </option>
    <option value="Option 2">App Development </option>
    <option value="Option 3"> Machine Learning</option>
    <option value="Option 4">Automation </option>
    <option value="Option 5"> AI</option>
    <option value="Option length">Some other</option>
  </select>
  <span class="focus"></span>
</div>

<label for="standard-select-disabled">Disabled Select</label>
<div class="select select--disabled">
  <select id="standard-select-disabled" disabled>
    <option value="Option 1">Server side rendering</option>
    <option value="Option 2">Client side rendering</option>
    <option value="Option 3">Static site generation</option>
    <option value="Option 4">Hybrid Site Generator</option>
    <option value="Option 5">Server + Client side rendering</option>
    <option value="Option length">Single Page Application</option>
  </select>
</div>

<label for="standard-select">Disabled Multiple Select</label>
<div class="select select--disabled select--multiple">
  <select id="multi-select-disabled" multiple disabled>
    <option value="Option 1">React JS</option>
    <option value="Option 2">Angular JS</option>
    <option value="Option 3">Meteor JS</option>
    <option value="Option 4">Svelte Kit </option>
    <option value="Option 5">Hydrogen JS</option>
    <option value="Option length">React JS with NextJS </option>
  </select>
</div>

The disabled attribute can be used to prevent a user from accessing the drop-down list unless another condition is met (like selecting a checkbox, etc.). The disabled value can then be removed using JavaScript, making the drop-down list usable. The multiple attribute allows the user to select multiple items from a list, which is ideal when the user needs to have multiple items checked, such as choosing multiple genres from Spotify.

Creating custom select menus with input elements

In the following example, select menus will be made using the < input > tag. The < input > tag is commonly used to collect data from users. < input > tags come in various forms to accommodate the various ways users can select, add, and filter data.

Some of the types of < input > tags are shown in the below example.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    .input{
      display: flex;
      flex-wrap: wrap;
    }
    input{
      width: 25%;
      margin: 10px;
      height: 25px;
    }
  </style>
  <!-- All input tags with styles -->
  <div class="input">
    <input type="text" placeholder="Text">
    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">
    <input type="number" placeholder="Number">
    <input type="date" placeholder="Date">
    <input type="time" placeholder="Time">
    <input type="color" placeholder="Color">
    <input type="file" placeholder="File">
    <input type="submit" placeholder="Submit">
    <input type="reset" placeholder="Reset">
    <input type="button" name="Button" value="Button" placeholder="Button">
    <input type="checkbox" placeholder="Checkbox">
    <input type="radio" placeholder="Radio">
    <input type="range" placeholder="Range">
    <input type="search" placeholder="Search">
    <input type="tel" placeholder="Tel">
    <input type="url" placeholder="Url">
    <input type="week" placeholder="Week">
    <input type="month" placeholder="Month">
    <input type="datetime-local" placeholder="Datetime-local">
  </div>
 </body>
</html>

Output:

Let’s now use CSS to position the menu items and convert the radio button, a type of input button, into a custom Select box.

In input forms, radio buttons are commonly used to select a value from available options, such as choosing the corresponding gender. Here, we’ll use CSS to customize this functionality to become a selectable dropdown.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
  </head>
  <body>
    <div id="info">Which is the most developer friendly platform?</div>

    <form id="form__cover">
      <div id="select-box">
        <input type="checkbox" id="options-view-button" />
        <div id="select-button" class="section">
          <div id="selected-value">
            <span>Select a platform</span>
          </div>
        </div>
        <div id="options">
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="Github"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="Github"
            />
            <span class="label">Github</span>
            <span class="opt-val">Github</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="Youtube"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="Youtube"
            />
            <span class="label">Youtube</span>
            <span class="opt-val">Youtube</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="W3School"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="W3School"
            />
            <span class="label">W3Schools</span>
            <span class="opt-val">W3Schools</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="LeetCode"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="LeetCode"
            />
            <span class="label">LeetCode</span>
            <span class="opt-val">LeetCode</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="stackoverflow"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="stackoverflow"
            />
            <span class="label">StackOverflow</span>
            <span class="opt-val">StackOverflow</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="freecodecamp"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="freecodecamp"
            />

            <span class="label">FreeCodeCamp</span>
            <span class="opt-val">FreeCodeCamp</span>
          </div>
          <div id="option-bg"></div>
        </div>
      </div>
    </form>
  </body>
</html>

CSS:

  * {
    user-select: none;
  }

  *:focus {
    outline: none;
  }

  html,
  body {
    height: 100%;
    min-height: 100%;

  }

  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding-bottom: 100px;
    margin: 0;
    background-color: black;  }

  .section {
    border: 1px solid #e2eded;
    border-color: #eaf1f1 #e4eded #dbe7e7 #e4eded;
  }

  #info {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    color: #2d3667;
    font-size: 16px;
    text-align: center;
    padding: 14px;
    background-color: #f3f9f9;
  }

  #form__cover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 300px;
    height: 42px;
    margin: 100px auto 0 auto;
    z-index: 1;
  }

  #select-button {
    position: relative;
    height: 16px;
    padding: 12px 14px;
    background-color: rgb(247, 247, 247);
    border-radius: 4px;
    border: 1px solid gray;
    cursor: pointer;
  }

  #options-view-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
  }

  #selected-value {
    font-size: 16px;
    line-height: 1;
    margin-right: 26px;
  }



  .option,
  .label {
    color: #2d3667;
    font-size: 16px;
  }


  #options-view-button:checked + #select-button #chevrons i {
    color: #2d3667;
  }

  .options {
    position: absolute;
    left: 0;
    width: 250px;
  }

  #options {
    position: absolute;
    top: 42px;
    right: 0;
    left: 0;
    width: 298px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 4px;
  }

  #options-view-button:checked ~ #options {
    border: 1px solid #e2eded;
    border-color: #eaf1f1 #e4eded #dbe7e7 #e4eded;
  }

  .option {
    position: relative;
    line-height: 1;
    transition: 0.3s ease all;
    z-index: 2;
  }

  .option i {
    position: absolute;
    left: 14px;
    padding: 0;
    display: none;
  }

  #options-view-button:checked ~ #options .option i {
    display: block;
    padding: 12px 0;
  }

  .label {
    display: none;
    padding: 0;
    margin-left: 27px;
  }

  #options-view-button:checked ~ #options .label {
    display: block;
    padding: 12px 14px;
  }

  .s-c {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
  }

  .s-c.top {
    top: 0;
  }

  .s-c.bottom {
    bottom: 0;
  }

  input[type="radio"] {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    height: 50%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .s-c:hover ~ i {
    color: #fff;
    opacity: 0;
  }

  .s-c:hover {
    height: 100%;
    z-index: 1;
  }

  .s-c.bottom:hover + i {
    bottom: -25px;
    animation: moveup 0.3s ease 0.1s forwards;
  }

  .s-c.top:hover ~ i {
    top: -25px;
    animation: movedown 0.3s ease 0.1s forwards;
  }

  @keyframes moveup {
    0% {
      bottom: -25px;
      opacity: 0;
    }
    100% {
      bottom: 0;
      opacity: 1;
    }
  }

  @keyframes movedown {
    0% {
      top: -25px;
      opacity: 0;
    }
    100% {
      top: 0;
      opacity: 1;
    }
  }

  .label {
    transition: 0.3s ease all;
  }

  .opt-val {
    position: absolute;
    left: 14px;
    width: 217px;
    height: 21px;
    opacity: 0;
    background-color: rgb(247, 247, 247);
    transform: scale(0);
  }

  .option input[type="radio"]:checked ~ .opt-val {
    opacity: 1;
    transform: scale(1.01);
  }

  .option input[type="radio"]:checked ~ i {
    top: 0;
    bottom: auto;
    opacity: 1;
    animation: unset;
  }

  .option input[type="radio"]:checked ~ i,
  .option input[type="radio"]:checked ~ .label {
    color: #fff;
  }

  .option input[type="radio"]:checked ~ .label:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  #options-view-button:not(:checked)
    ~ #options
    .option
    input[type="radio"]:checked
    ~ .opt-val {
    top: -30px;
  }

  .option:nth-child(1) input[type="radio"]:checked ~ .label:before {
    background-color: #000;
    border-radius: 4px 4px 0 0;
  }

  .option:nth-child(1) input[type="radio"]:checked ~ .opt-val {
    top: -31px;
  }

  .option:nth-child(2) input[type="radio"]:checked ~ .label:before {
    background-color: #f70800;
  }

  .option:nth-child(2) input[type="radio"]:checked ~ .opt-val {
    top: -71px;
  }

  .option:nth-child(3) input[type="radio"]:checked ~ .label:before {
    background-color: #09ff00;
  }

  .option:nth-child(3) input[type="radio"]:checked ~ .opt-val {
    top: -111px;
  }

  .option:nth-child(4) input[type="radio"]:checked ~ .label:before {
    background-color: #f18203;
  }

  .option:nth-child(4) input[type="radio"]:checked ~ .opt-val {
    top: -151px;
  }

  .option:nth-child(5) input[type="radio"]:checked ~ .label:before {
    background-color: #b6590c;
  }

  .option:nth-child(5) input[type="radio"]:checked ~ .opt-val {
    top: -191px;
  }

  .option:nth-child(6) input[type="radio"]:checked ~ .label:before {
    background-color: black;
    border-radius: 0 0 4px 4px;
  }

  .option:nth-child(6) input[type="radio"]:checked ~ .opt-val {
    top: -231px;
  }


  #option-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 40px;
    transition: 0.3s ease all;
    z-index: 1;
    display: none;
  }

  #options-view-button:checked ~ #options #option-bg {
    display: block;
  }

  .option:hover .label {
    color: #fff;
  }

  .option:nth-child(1):hover ~ #option-bg {
    top: 0;
    background-color: #000;
    border-radius: 4px 4px 0 0;
  }

  .option:nth-child(2):hover ~ #option-bg {
    top: 40px;
    background-color: #f70800;
  }

  .option:nth-child(3):hover ~ #option-bg {
    top: 80px;
    background-color: #09ff00;
  }

  .option:nth-child(4):hover ~ #option-bg {
    top: 120px;
    background-color: #ff7300;
  }

  .option:nth-child(5):hover ~ #option-bg {
    top: 160px;
    background-color: #b6590c;
  }

  .option:nth-child(6):hover ~ #option-bg {
    top: 200px;
    background-color: black;

Output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
  </head>
  <body>
    <div id="info">Which is the most developer friendly platform?</div>

    <form id="form__cover">
      <div id="select-box">
        <input type="checkbox" id="options-view-button" />
        <div id="select-button" class="section">
          <div id="selected-value">
            <span>Select a platform</span>
          </div>
        </div>
        <div id="options">
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="Github"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="Github"
            />
            <span class="label">Github</span>
            <span class="opt-val">Github</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="Youtube"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="Youtube"
            />
            <span class="label">Youtube</span>
            <span class="opt-val">Youtube</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="W3School"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="W3School"
            />
            <span class="label">W3Schools</span>
            <span class="opt-val">W3Schools</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="LeetCode"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="LeetCode"
            />
            <span class="label">LeetCode</span>
            <span class="opt-val">LeetCode</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="stackoverflow"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="stackoverflow"
            />
            <span class="label">StackOverflow</span>
            <span class="opt-val">StackOverflow</span>
          </div>
          <div class="option">
            <input
              class="s-c top"
              type="radio"
              name="platform"
              value="freecodecamp"
            />
            <input
              class="s-c bottom"
              type="radio"
              name="platform"
              value="freecodecamp"
            />

            <span class="label">FreeCodeCamp</span>
            <span class="opt-val">FreeCodeCamp</span>
          </div>
          <div id="option-bg"></div>
        </div>
      </div>
    </form>
  </body>
</html>

Creating a custom dropdown with CSS Flexbox

To make the select menu more user-friendly, let’s now put our CSS skills to use by positioning the dropdown elements using different CSS properties like position and flexbox.

CSS Flexbox is a layout that simplifies the creation of flexible, responsive layout structures without using float or position properties. Flexbox handles layout in only one dimension at a time, either row or column. This makes Flexbox great for customized drop-downs with HTML divs and spans since we can set the flex-direction property to make it appear as a drop-down.

We are free to modify the dropdown so that it complements the design aspects of the website.

In this System testing tutorial, learn why System testing is important and all the intricacies of the System testing process.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="select" tabindex="1">
      <input class="selectopt" name="test" type="radio" id="option1" checked />
      <label for="option1" class="option">Youtube</label>
      <input class="selectopt" name="test" type="radio" id="option2" />
      <label for="option2" class="option">Twitch</label>
      <input class="selectopt" name="test" type="radio" id="option3" />
      <label for="option3" class="option">TikTok</label>
      <input class="selectopt" name="test" type="radio" id="option4" />
      <label for="option4" class="option">Instagram Reels</label>
      <input class="selectopt" name="test" type="radio" id="option5" />
      <label for="option5" class="option">Youtube Shorts</label>
    </div>
  </body>
</html>

CSS:

body {
  background:#ae15eb;
  display:flex;
  justify-content: center;
  align-items:center;
  flex-wrap:wrap;
  padding:0;
  margin:0;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}
.select {
  display:flex;
  flex-direction: column;
  position:relative;
  width:350px;
  height:100px;
}
.option {
  padding:0 30px 0 10px;
  min-height:40px;
  display:flex;
  align-items:center;
  background:rgb(9, 184, 67);
  border-top:#222 solid 1px;
  position:absolute;
  top:0;
  width: 100%;
  pointer-events:none;
  order:2;
  z-index:1;
  transition:background .4s ease-in-out;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;

}
.option:hover {
  background:rgb(8, 145, 26);
}

.select:focus .option {
  position:relative;
  pointer-events:all;
}

input {
  opacity:1;
  position:absolute;
  left:99px;
}

input:checked + label {
  order: 2;
  z-index:2;
  background:#666;
  border-top:none;
  position:relative;
}

input:checked + label:after {
  content:'';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  position:absolute;
  right:10px;
  top:calc(50% - 2.5px);
  pointer-events:none;
  z-index:3;
}

input:checked + label:before {
  position:absolute;
  right:0;
  height: 40px;
  width: 40px;
  content: '';
  background:#666;
}

@media screen and (max-width: 600px) {
  .select {
    width:90%;
  }

Output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="select" tabindex="1">
      <input class="selectopt" name="test" type="radio" id="option1" checked />
      <label for="option1" class="option">Youtube</label>
      <input class="selectopt" name="test" type="radio" id="option2" />
      <label for="option2" class="option">Twitch</label>
      <input class="selectopt" name="test" type="radio" id="option3" />
      <label for="option3" class="option">TikTok</label>
      <input class="selectopt" name="test" type="radio" id="option4" />
      <label for="option4" class="option">Instagram Reels</label>
      <input class="selectopt" name="test" type="radio" id="option5" />
      <label for="option5" class="option">Youtube Shorts</label>
    </div>
  </body>
</html>

Filtering options in a dropdown list with JavaScript

We can utilize the CSS properties like Flexbox and Grid to make the layout for our select menu.

Flexbox is a CSS layout that simplifies the creation of flexible, responsive layout structures without using float or position properties. Flexbox handles layout in only one dimension at a time, either row or column. This makes flexbox great for customized drop-downs with HTML divs and spans since we can set the flex-direction property to make it appear as a drop-down.

We make use of CSS Media Queries to make our dropdown responsive. We must consider standard device dimensions like 480 pixels, 640 pixels, 720 pixels, 1024 pixels, 1440 pixels, etc. The main objective of responsive websites is to ensure a seamless experience across different digital devices. The majority of today’s libraries and frameworks take this technique. Thus we should do the same while creating custom dropdowns.

We have created custom Select menus using a variety of CSS properties, such as Flexbox, Grid, and positioning, and now it is time to put our true creativity to work, creating custom select menus with CSS, also with the help of JavaScript.

JavaScript is being used in this case to create filterable options, which means that as the user types, the other options that are not similar to the given input in the options list are removed. The logic used here is plain and simple. We have an array of list items; whenever the user enters a specific character or group of characters, we iterate through the list and determine whether the entered input is present in the list of items. If it is not present, we remove those items from the dropdown list, giving the user a filtered and small list.

This is handy when users have to select from a long list like a list of countries, states, etc.

A complete Manual testing tutorial covering all aspects of Manual testing, including strategies and best practices.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css"/>
  <script src="inde.js" defer></script>

</head>
<body>
  <h1> <span>filterable</span> select dropdown</h1>
  <form>
    <input
      class="chosen-value"
      type="text"
      value=""
      placeholder="Type to filter"
    />
    <ul class="value-list">
      <!-- List of tech giants -->
      <li>Elon Musk</li>
      <li>Bill Gates</li>
      <li>Steve Jobs</li>
      <li>Mark Zuckerberg</li>
      <li>Larry Page</li>
      <li>Sergey Brin</li>
      <li>Larry Ellison</li>
      <li>Jack Dorsey</li>
      <li>Jeff Bezos</li>
      <li>Paul Allen</li>
      <li>Jack Ma</li>
      <li>Dan Abranoah</li>
      <li>Jordan Walkie</li>
      <li>Satya Nadella</li>
      <li>Kunal Shah</li>
<li> Asad Khan </li>
<li> Jay Singh </li>
    </ul>
  </form>


</body>
</html>



CSS:
** {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Ek Mukta';
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 4px;
  background: #1D1F20;
}
h1 {
  margin-top: 10vh;
  font-size: 2.5rem;
  max-width: 500px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 1.5;
  font-family: 'Open Sans';
  text-transform: capitalize;
  font-weight: 800;
  color: white;
}
h1 span {
  color: #0010f1;
}
form {
  position: relative;
  width: 25rem;
  margin-top: 12vh;
}
@media screen and (max-width: 768px) {
  form {
    width: 90%;
  }


}
.chosen-value, .value-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.chosen-value {
  font-family: 'Ek Mukta';
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 4px;
  height: 4rem;
  font-size: 1.1rem;
  padding: 1rem;
  background-color: #FAFCFD;
  border: 3px solid transparent;
  transition: 0.3s ease-in-out;
}
.chosen-value::-webkit-input-placeholder {
  color: #333;
}
.chosen-value:hover {
  background-color: #0844eb;
  cursor: pointer;
}
.chosen-value:hover::-webkit-input-placeholder {
  color: #333;
}
.chosen-value:focus, .chosen-value.open {
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
  outline: 0;
  background-color: #2912f7;
  color: #000;
}
.chosen-value:focus::-webkit-input-placeholder, .chosen-value.open::-webkit-input-placeholder {
  color: #000;
}
.value-list {
  list-style: none;
  margin-top: 4rem;
  box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-height: 0;
  transition: 0.3s ease-in-out;
}
.value-list.open {
  max-height: 320px;
  overflow: auto;
}
.value-list li {
  position: relative;
  height: 4rem;
  background-color: #FAFCFD;
  padding: 1rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
  opacity: 1;
}
.value-list li:hover {
  background-color: #450ae9;
  color: white;
}
.value-list li.closed {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
}

JavaScript:

const inputField = document.querySelector('.chosen-value');
const dropdown = document.querySelector('.value-list');
const dropdownArray = [... document.querySelectorAll('li')];

dropdown.classList.add('open');
inputField.focus(); 
let valueArray = [];
dropdownArray.forEach(item => {
  valueArray.push(item.textContent);
});


const closeDropdown = () => {
  dropdown.classList.remove('open');
}

inputField.addEventListener('input', () => {
  dropdown.classList.add('open');
  let inputValue = inputField.value.toLowerCase();
  let valueSubstring;
  if (inputValue.length > 0) {
    for (let j = 0; j < valueArray.length; j++) {
      if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) {
        dropdownArray[j].classList.add('closed');
      } else {
        dropdownArray[j].classList.remove('closed');
      }
    }
  } else {
    for (let i = 0; i < dropdownArray.length; i++) {
      dropdownArray[i].classList.remove('closed');
    }
  }
});

dropdownArray.forEach(item => {
  item.addEventListener('click', (evt) => {
    inputField.value = item.textContent;
    dropdownArray.forEach(dropdown => {
      dropdown.classList.add('closed');
    });
  });
})

inputField.addEventListener('focus', () => {
   inputField.placeholder = 'Type to filter';
   dropdown.classList.add('open');
   dropdownArray.forEach(dropdown => {
     dropdown.classList.remove('closed');
   });
});

inputField.addEventListener('blur', () => {
   inputField.placeholder = 'Select Favorite Techie';
  dropdown.classList.remove('open');
});


document.addEventListener('click', (evt) => {
  const isDropdown = dropdown.contains(evt.target);
  const isInput = inputField.contains(evt.target);
  if (!isDropdown && !isInput) {
    dropdown.classList.remove('open');
  }   
});

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

</head>
<body>
  <h1> <span>filterable</span> select dropdown</h1>
  <form>
    <input
      class="chosen-value"
      type="text"
      value=""
      placeholder="Type to filter"
    />
    <ul class="value-list">
      <!-- List of tech giants -->
      <li>Elon Musk</li>
      <li>Bill Gates</li>
      <li>Steve Jobs</li>
      <li>Mark Zuckerberg</li>
      <li>Larry Page</li>
      <li>Sergey Brin</li>
      <li>Larry Ellison</li>
      <li>Jack Dorsey</li>
      <li>Jeff Bezos</li>
      <li>Paul Allen</li>
      <li>Jack Ma</li>
      <li>Dan Abranoah</li>
      <li>Jordan Walkie</li>
      <li>Satya Nadella</li>
      <li>Kunal Shah</li>
    </ul>
  </form>


</body>
</html>

Creating a fully custom dropdown list

Now that we’ve covered a variety of techniques for building custom Select menus using CSS and JavaScript to add interactivity, we can use both of these technologies and our creativity to create custom CSS Select options that are much more user-friendly.

Here, we’re going to create an interactive select menu where the user can choose the value more effectively based on his preferences.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css"/>
  <script  src="index.js" defer>
  </script>

</head>
<div>
  <div class="wrapper typo">The best browser is
    <div class="list"><span class="placeholder">FireFox </span>
      <ul class="list__ul">
        <li><a href="#"> Chrome</a></li>
        <li><a href="#">Brave </a></li>
        <li><a href="#">Chromium </a></li>
        <li><a href="#">Safari</a></li>
        <li><a href="#">Opera Mini</a></li>
        <li><a href="#">UC Browser</a></li>
      </ul>
    </div>

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

>

CSS:

 @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

 body{
   background: rgb(26, 23, 23);
 }

 .typo, .list a {
   font-size: 50px;
   font-weight: 700;
   font-family: 'Poppins', serif;
   color: #ffffff;
   text-decoration: none;
 }
 .typo option, .list a option {
   font-size: 30px;
 }
 .transition {
   transition: all 0.4s ease-in-out;
 }
 body {
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
 }
 .wrapper {
   font-size: 60px;
   margin-top: -10%;
 }
 .list {
   display: inline-block;
   position: relative;
   margin-left: 6px;
 }
 .list ul {
   text-align: left;
   position: absolute;
   padding: 0;
   top: 0;
   left: 0;
   display: none;
 }
 .list ul .active {
   display: block;
 }
 .list li {
   list-style: none;
 }
 .list li:first-child a {
   color: #00eb0c;
 }
 .list a {
   transition: all 0.4s;
   color: #00ff40;
   position: relative;
 }
 .list a:after {
   position: absolute;
   content: '';
   height: 5px;
   width: 0;
   left: 0;
   background: #b066ff;
   bottom: 0;
   transition: all 0.4s ease-out;
 }
 .list a:hover {
   cursor: pointer;
   color: #b066ff;
 }
 .list a:hover:after {
   width: 100%;
 }
 select {
   display: inline;
   border: 0;
   width: auto;
   margin-left: 10px;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   border-bottom: 2px solid #555;
   color: #7b00ff;
   transition: all 0.4s ease-in-out;
 }
 select:hover {
   cursor: pointer;
 }
 select option {
   border: 0;
   border-bottom: 1px solid #555;
   padding: 10px;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 .placeholder {
   border-bottom: 4px solid;
   cursor: pointer;
 }
 .placeholder:hover {
   color: #888;
 }

JavaScript:

console.clear();


document.querySelector(".placeholder").onclick = function (e) {
  e.preventDefault();

  document.querySelector(".placeholder").style.opacity = "0.01";
  document.querySelector(".list__ul").style.display = "block";
};

document.querySelector(".list__ul a").addEventListener("click", function (ev) {
  ev.preventDefault();
  var index = document.querySelector(this).parent().index();
  document
    .querySelector(".placeholder")
    .text(document.querySelector(this).text())
    .css("opacity", "1");
  console.log(
    document.querySelector(".list__ul").querySelector("li").eq(index).html()
  );
  document
    .querySelector(".list__ul")
    .querySelector("li")
    .eq(index)
    .prependTo(".list__ul");
  document.querySelector(".list__ul").toggle();
});

  document.querySelectorAll(".list__ul a").forEach((q) => {
    q.addEventListener("click", function (ev) {
      ev.preventDefault();
      console.log(q.textContent);
      document.querySelector(".placeholder").textContent = q.textContent;
      document.querySelector(".placeholder").style.opacity = "1";
      document.querySelector(".list__ul").style.display = "none";
    });
  })

<div>
  <div class="wrapper typo">The best browser is
    <div class="list"><span class="placeholder">FireFox </span>
      <ul class="list__ul">
        <li><a href="#"> Chrome</a></li>
        <li><a href="#">Brave </a></li>
        <li><a href="#">Chromium </a></li>
        <li><a href="#">Safari</a></li>
        <li><a href="#">Opera Mini</a></li>
        <li><a href="#">UC Browser</a></li>
      </ul>
    </div>

  </div>
</div>

We’ve seen some good examples of custom dropdown menus, but one thing we should keep in mind is the website’s accessibility.

What is web accessibility?

Web accessibility is a set of practices that entails designing and developing websites and digital tools so that people who are differently abled can use them without difficulty.

As web applications become more complex and dynamic, a new set of accessibility features and issues emerged. HTML introduced many semantic elements like < main > and < section >. Semantic HTML adds essential meaning to the web page rather than just presentation. This allows web browsers, search engines, screen readers, RSS readers, and users to understand it better.

W3C’s Web Accessibility Initiative — Accessible Rich Internet Applications is a series of specifications that define a set of new HTML attributes that can be added to elements to give additional semantics and improve accessibility where needed. The Web Content Accessibility Guidelines (WCAG) documents describe how to improve the accessibility of web content for individuals with impairments.

People with temporary disabilities, such as someone who has broken an arm, or situational limitations, such as when a person cannot listen to audio due to a lot of background noise, are also impacted by web accessibility.

Almost all websites now follow best practices, semantic HTML, and the proper HTML attributes. It is widely believed that making websites accessible to all users requires significant time and work while benefiting a relatively small number of individuals. However, this is not entirely correct. We all will face some kind of temporary disability at some point. Hence we need to consider everyone for accessibility.

To learn more about accessibility testing, you can watch the following video on performing accessibility testing with the Cypress test automation framework.

How to make dropdowns accessible?

To make it easy for people to find what they are looking for on your website, dropdown menus must be accessible. If not, it may take them longer to see what they need, or they may miss parts of your website entirely.

<!-- Bootstrap CSS Linked in Settings -->



<div class="container-fluid container-a">

  <div class="col-lg-6 col-lg-push-3 col-md-8 col-md-push-2 col-sm-10 col-sm-push-1 col-xs-12 content-card">

    <div class="title"><h1>A11Y Examples Series</h1></div>

    <h2>Basic Accessible Dropdown Menu</h2>

    <div class="dropdown-a dropdown">

      <button class="button-a dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Menu</button>

      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Menu Item 1</a></li>
        <li><a class="dropdown-item" href="#">Menu Item 2</a></li>
        <li><a class="dropdown-item" href="#">Menu Item 3</a></li>
      </ul>

    </div>

    <br>

    <h2>Accessible Dropdown Menu w/ Headings</h2>

    <div class="dropdown-a dropdown">

      <button class="button-a dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Menu</button>

      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><h4 class="dropdown-header">Menu Header A</h4></li>
        <li><a class="dropdown-item" href="#">Menu Item 1a</a></li>
        <li><a class="dropdown-item" href="#">Menu Item 2a</a></li>
        <li><a class="dropdown-item" href="#">Menu Item 3a</a></li>
        <li><h4 class="dropdown-header">Menu Header B</h4></li>
        <li><a class="dropdown-item" href="#">Menu Item 1b</a></li>
        <li><a class="dropdown-item" href="#">Menu Item 2b</a></li>
        <li><a class="dropdown-item" href="#">Menu Item 3b</a></li>
      </ul>

    </div>

  </div>
</div>






<!-- jQuery Linked in Settings  -->

<!-- Bootstrap js Linked in Settings -->

The following are some of the best practices to keep in mind when dealing with dropdowns:

Good Semantics

A semantic element’s defining feature is that it conveys its meaning to both the developer and the browser. These elements define its content clearly. Whenever possible, use semantic HTML to make your menus accessible to screen readers and to make your code easier to understand.

Search engines and other user devices can use semantic HTML tags to determine the importance and context of web pages. Some of the HTML semantic tags are given below:
< article >: < article > tag is used to contain information that may be distributed independently from the rest of the site
< aside >: The < aside > element denotes a portion of a page that contains content that is indirectly linked to but distinct from the content around the aside element.
< figure >: The < figure > tag denotes self-contained information such as illustrations, diagrams, pictures, code listings, etc.
< nav >: The HTML element < nav > denotes a page part whose function is to give navigation links, either within the current content or to other publications.
< section >: A < section > is a semantic element used to create independent sections on a web page.

Structure the design

Structure the design so that everything is interconnected in some way so that the user has a roadmap for their journey. Structuring also entails placing headings, sections, navbar, headers, footers, etc., in the appropriate places. These semantic elements represent logical sections and provide a better way to structure the website.

A website with an accessible semantic structure, regardless of size or complexity, will be capable of providing accessibility. Without a solid semantic foundation, your website’s accessibility will degrade as it grows. Setting the proper structure early in development assists your website in remaining accessible as it grows.

Avoid keyboard pitfalls

On websites, keyboard accessibility issues arise when designers or developers employ approaches that violate basic keyboard functionality. Problems occur when a user can navigate through a menu’s items using the Tab key but cannot leave the menu, leaving them in a loop.

The following are some best practices for creating keyboard-accessible websites:
All links and controls can be accessed using the Tab key on the keyboard.
All the components in the UI should follow W3C’s WAI-ARIA practices.
Apps, plugins, widgets, and JavaScript techniques that trap the keyboard should be avoided.
Enhance the browser’s default focus indicator.

Implement a time delay between the mouse leaving the menu area and the menu closing. Visitors who can use a pointer but lack fine motor control require drop-down menus to be visible for a sufficient amount of time to be used. People should have a little bit of time to interact with the menu.

In the case of links as drop-down, the menu must be coded as an unordered list of links for assistive technologies used by blind users so that they can count the number of links in each drop-down menu or the main navigation. They also need to know which link takes them to the page they are currently on.

These are some of the most significant best practices for web accessibility. As we’ve seen, to make drop-down menus accessible, we need to consider the needs of different disabled user groups.

Creating the dropdown menu simple, straightforward, and understandable, giving them additional time to react to mouse movements, using the proper syntax for screen reader users, and ensuring your menus are compatible with the keyboard will eventually contribute toward better accessibility.

How to test custom menus on multiple browsers?

When creating a new menu for your website, how can you make sure that it is functional and works with all browsers? The answer is simple: Test the website on different browsers and operating system combinations.

However, the problem with testing your site’s custom menus on multiple browsers is that it can be time-consuming. You have to test every combination of operating systems and browsers, so you have to test your site on dozens or hundreds of combinations. This is a huge waste of time, especially when some combinations are irrelevant or superfluous.

There’s a good chance that there are significant differences between the way custom menus work in each browser, and you’ll need to test for these discrepancies. But rather than wasting all your time by going through the entire list of operating systems and browsers, you can use cloud testing tools like LambdaTest.

Cross browser testing platforms such as LambdaTest allow you to perform web testing and provide an online browser farm of more than 3000+ browsers and OS combinations.

Alternatively, you can use tools like LT Browser to check for responsive websites. LT Browser by LambdaTest is a mobile-friendly test tool with 50+ pre-installed viewports with multiple standard resolutions.

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

Conclusion

Congratulations on reaching this far! You’re a fantastic reader!

In this detailed blog on creating custom Select menus with CSS, we have covered various ways to create the same with the help of HTML, CSS, and JavaScript. Not only did we experiment with creating dropdowns, but we also discussed various best practices and accessibility tips and tricks.

Now we know how to create your custom select menus most effectively and efficiently.

Happy Styling!

A Complete Guide to CSS Refactoring

AdarshM1024 — Tue, 21 Mar 2023 08:28:30 +0000

Being a front-end developer is like having the magical power to shape reality after it’s been created. And we can modify and improvise things that have already been published, a luxury only a few professionals enjoy.

In many fields, restrictions exist on what can be changed after it has been written or published. An artist cannot undo layers of paint to improve their work, and a writer cannot modify the sentence of his book after it has been published, but we developers can! Although changing the code might seem simple, it could result in non-favorable results if done incorrectly. For example, an organization lost $440 million due to a minor bug in its new code, which was only one line of code. Whether the change is small or big, it should be thoroughly tested before production.

As a front-end developer, I often spend more time on CSS Refactoring than writing it. Although CSS is simple and flexible, this simplicity invites a lot of errors that may cause performance problems, and in today’s world, we must maintain design as well as performance.

Studies showed that an average user forms an opinion of a business or product within just 50 milliseconds after visiting a website. Therefore, it is essential to maintain your website’s performance to provide a seamless user experience. With the introduction of Core Web Vitals, Google has provided a framework for measuring and improving the user experience on a website.

Run Appium mobile testing of native and web apps. Improve your app quality with instant access to real devices on LambdaTest. Register now for free.

When the website is slow, it can quickly frustrate users and cause them to leave and seek a better alternative. Here comes CSS Refactoring, one of the best options to improve a website’s performance better than earlier. However, there may be times when CSS Refactoring is unnecessary and does not result in significant performance improvements. What’s your opinion on this?

In this detailed tutorial on CSS Refactoring, we will walk you through CSS Refactoring, factors affecting poor CSS, best practices to follow while CSS Refactoring, and how to improve the overall structure of your CSS codebase.

Factors Affecting Poor CSS on Website’s Performance

Before studying CSS Refactoring, it is essential to know what are the factors that affect poor CSS on your website performance.

CSS is a stylesheet language since we don’t have to do any logic; all we have to do is select an appropriate style property and use it. But that’s precisely the problem, as there is no standardized way to use CSS. This can cause the code to look messy and affect the website’s overall performance.

Almost all modern websites use web design trends, including various CSS animations and CSS transforms & transitions properties, to make their website look better. However, using lots of animations or transitions may affect the website’s overall performance and make it laggy on slower devices.

Here are some factors affecting poor CSS on a website’s performance:

Increased Load Time
Reduced Mobile Responsiveness
Poor User Experience
Increased Server Loads

Understanding Core Web Vitals

Core Web Vitals are a set of performance metrics that all website owners should measure, and Google will show these metrics in its tools. They are a subset of Web Vitals and represent different aspects of the user experience.

Core Web Vitals are essential because they reflect the real-world experience of users and can help website owners improve their site’s performance.

The Core Web Vitals consist of three specific metrics:

Source

1. Largest Contentful Paint (LCP)

Largest Contentful Paint is a performance metric measuring how fast a web page loads the most prominent content element. This element can be an image, video, or text block, and LCP measures how quickly it appears on the user’s screen.

It is considered good practice to provide a better user experience if LCP occurs within 2.5 seconds just after the user clicks on a webpage and it starts loading.

By optimizing LCP, website owners and developers can significantly improve the loading speed of their web pages, which can lead to a better user experience and higher engagement.

2. First Input Delay (FDP)

First Input Delay measures the interactivity of the website, which means it measures how long it takes for a page to respond to the first interaction by a user, such as a click or tap.

According to Google, to have a seamless experience, pages should have an FID of fewer than 100 milliseconds, and anything over 300 milliseconds leads to poor user experience.

3. Cumulative Layout Shift (CLS)

Cumulative Layout Shift measures the visual stability of a page’s layout as it loads, indicating how many page elements are there when a page is loaded.

It is considered good practice to provide a better user experience if the page maintains a CLS of 0.1 or less. If CLS is over 0.25, it leads to poor visual stability.

// Detect dark theme var iframe = document.getElementById('tweet-1514079310990254081-816'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1514079310990254081&theme=dark" }

According to Google, Core Web Vitals is an elementary part of any search ranking algorithm, that means websites with high vital scores are more likely to appear higher in search results. Because of this, developers need to optimize their sites for Core Web Vitals to improve their search engine rankings and give their visitors a better experience.

Test your website or web app online for iOS browser compatibility. Perform seamless cross-browser testing on the latest iPhone Simulator with our iPhone Tester. Try for free.

Common CSS Pitfalls to Avoid for Improving Website Performance

Most of the CSS issues come when we work as a team or multiple developers push the code to the same file. This can result in poor-quality CSS that can even cause severe side effects that could affect the entire project.

Below are some of the most common CSS pitfalls you should avoid:

Inconsistent Naming Conventions.
Block: It refers to a standalone entity. Think of a block as a container that has several children.

Element: It is part of a block with no standalone meaning, i.e., any element semantically tied to its block.

Modifier: These are the flags on blocks or elements used to change the appearance, behavior, or state.

BEM is one of the most commonly used naming conventions in CSS. You can name it according to your logic, but it must follow the block-element-modifier format.

Code Redundancy

Whenever you have huge codebases, we will probably add redundant code that we will not notice in the first place. The first rule of thumb is to keep the code organized. As the implementation progresses, there is a possibility that the code base might have a significant percentage of code redundancy!

Redundant CSS code is often the result of poorly written CSS that misuses CSS selectors. Consider this example:

  .container > .header {
    background-color: blue;
    color: white;
    font-size: 24px;
  }

  .header {
    background-color: red;
    color: black;
    font-size: 32px;
  }

Here, the first set of styles targets the .header class, which is a descendant of the class with name .container. The second set of styles targets the .header class.

Since the (>) selector has a higher priority, only the first set of styles will be applied, and the style applied just to the header class is unnecessary and leads to duplication.

Incorrect Use of Selectors

As we mentioned earlier, CSS doesn’t give you logical errors; we are prone to making mistakes due to the incorrect use of CSS selectors. Let’s look at a real-world example. Assume you have a website with a lot of nested HTML elements, like this:

 <div>
        <div class="container">
            <div class="row">
              <div class="col">
                <p>Some text</p>
              </div>
              <div class="col">
                <p>Some more text</p>
              </div>
            </div>
          </div>

    </div>

You might be tempted to style the p tag like this:

.container .row .col p {
    font-size: 16px;
    color: black;
  }

This might give you an expected result, but there is a chance that it will also give you unexpected output. Here, you must notice that we are traversing through the HTML Document Object Model (DOM) tree in a nested fashion.

It has to go through three levels of nested elements before finding the p elements. This will slow down the rendering process. If we only have a few nested styles, it will make little difference, but as our codebase grows, this could lead to a slower initial page load.

If a website has a lot of nested styles, it could lead to a slower initial page load, which could negatively impact its LCP score. To illustrate this, we can create two versions of a web page — one with nested styles and one without — and measure their LCP scores using the LT Browser.

// Detect dark theme var iframe = document.getElementById('tweet-1610665384356777988-973'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1610665384356777988&theme=dark" }

Online Selenium Grid to run your browser automation testing scripts on cloud infrastructure containing 3000+ desktop and mobile browser environments. Perform Selenium Testing on a cloud automation testing grid that scales along with your tests.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
    <section class="hero">
        <div class="hero__image">
          <img src="https://lh3.googleusercontent.com/jUoaTIlBn5ibfQcND2n5OMD6Z7xoqNj-ShHlFR6QuLffLXD5pS8V2eNg1rGlrsRrnDkoQ28O8UHzqzBQKAGY4l1CS2NQSq2SkRScK6FOjl82jppyohK-" alt="Hero Image">
        </div>
        <div class="hero__content">
          <h1 class="hero__headline">Welcome to Our Website</h1>
          <a class="hero__cta" href="#">Learn More</a>
        </div>
      </section>

</body>
</html>

CSS:

.hero {
    background-color: white;
    padding: 50px;
  }

  .hero__image {
    margin-bottom: 20px;
    width:85px;
  }

  .hero__image img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .hero__content {
    text-align: center;
  }

  .hero__headline {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .hero__cta {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration:none
  }

Performance results from LT Browser:

Now let’s try without these nested styles:

 img{
     width:95px;
     margin-left:45%;
 }


  h1{
      font-size:40px;
      text-align:center
 }


  p{
     font-size:25px;
     text-align:center
 }

You can see there is a slight delay in the speed index of 0.1 seconds in the website having nested styles. You can now understand how nested styles can impact the website’s performance.

One of the best ways to style nested elements is to specify an ID for the element. ID selectors are faster than class selectors because they are unique to the page. Organizing how you write the CSS code can also improve the rendering time. In the next section of this CSS Refactoring tutorial, we will cover those in detail.

Spaghetti code

The way browsers work is that they try to get the element we want to style from the HTML DOM tree and style it. When CSS is poorly organized, the browser may have difficulty finding the styles it needs, resulting in slower rendering.

Here’s an example of what spaghetti code looks like,

/* CSS */
.header {
    background-color: blue;
    color: white;
    font-size: 24px;
  }

  .navbar {
    background-color: black;
    color: rgb(162, 56, 56);
    font-size: 18px;
  }

  .footer {
    background-color: rgb(123, 37, 37);
    color: black;
    font-size: 14px;
  }

  .header {
    border: 1px solid white;
  }

  .navbar {
    border: 1px solid white;
  }

  .footer {
    border: 1px solid white;
  }

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

In this CSS Refactoring blog section, the CSS is not organized in any particular order. The styles for the header, navbar, and footer classes are mixed, making it challenging to find the styles for a specific element quickly.

To improve the organization of the CSS, you can group the styles by elements so that all styles in a particular element are together. This way, other developers working on the project can find the styles more easily.

In this blog on CSS Refactoring, we have used class names multiple times; now, more clean code with only one class name.

Clean Code:

/* CSS */
.header {
    background-color: blue;
    color: white;
    font-size: 24px;
    border: 1px solid white;
  }

  .navbar {
    background-color: black;
    color: rgb(162, 56, 56);
    font-size: 18px;
    border: 1px solid white;
  }

  .footer {
    background-color: rgb(123, 37, 37);
    color: black;
    font-size: 14px;
    border: 1px solid white;
  }

Using a single CSS file may be acceptable for simple projects with only a few pages, but as the project grows, it’s good practice to split the CSS into separate files.

The approach I recommend is having separate files for different pages, which will help reduce conflicts in styling. You can also have separate files for typography, colors, layouts, etc.

For example, you can have a folder structure like this:

Now that we know some of the known issues that make our CSS redundant, we can look at the best ways to write and organize it.

CSS Best Practices

CSS is a flexible language; there is no specific way to write CSS, but there are some best practices you should follow to maintain the code. When writing code, it’s important to remember that it should be written in a way that other team members (or developers) can easily understand.

Some of the best practices to follow for writing better CSS are shown below:

Use the CSS selector appropriately.

Red flag: Using selectors in an unorganized manner.

Best practices: Choose the best combination of selectors.

There are numerous ways to select an HTML element, but we should use CSS selectors in such a way that they are used efficiently. You must know about all the basic and advanced CSS selectors for this.

Some of the most common types of CSS selectors are

Type Selectors: They are used to select elements by their HTML tag names, such as p, h1, and div.

/* Selects all p elements */
p {
    font-size: 16px;
    color: gray;
  }

Class Selectors: These are used for selecting elements by their class attributes. The class attribute starts with a dot (.). It can be assigned to any number of elements, such as .header, .container, .active, etc.

 /* Selects elements with class "header" */
.header {
    background-color: blue;
    display:block;
  }

ID Selectors: ID selectors are used for selecting the elements by their id attribute. The id attribute starts with a hash (#) and should be unique within the document, such as #header, #footer, #main-content, etc.

 /* Selects element with id "main-content" */
#main-content {
    padding: 20px;
  }

Attribute selectors: Attribute selectors are used for selecting the element by its attribute and value, such as [type=”text”], [href^=”https”], [alt~=”dog”], etc.

 /* Selects input elements with type "text" */
input[type="text"] {
    border: 1px solid gray;
  }

Pseudo-class selectors: CSS Pseudo-class selectors are used for selecting elements based on their state or position, such as :hover, :active, :first-child, etc.

  /* Selects links on hover */
a:hover {
    color: red;
  }

Pseudo-element selectors: Pseudo-element selectors are used for selecting specific parts of an element, such as ::before, ::after, ::first-letter, etc.

/* Styles the first letter of p elements */
p::first-letter {
    font-size: 16px;
    font-weight: normal;
  }

Combinator selectors: Combinator selectors are used for selecting elements based on their relationship with other elements, such as div > p, .container + .header, .header ~ .footer, etc.

/* Selects all p elements that are direct children of div elements */
div > p {
    margin: 0;
  }

Universal Selectors: Universal selector is used for selecting all elements on the page, represented by the * symbol.

   /* Selects all elements on the page */
* {
    box-sizing: border-box;
    margin: 0;
     padding: 0;
  }

One advantage of using IDs is that they are unique, and once we find out the target element, we don’t have to search the rest of the DOM tree. But in the case of classes, the browser needs to scan the entire DOM.

To write efficient CSS code, it is important to understand how the specificity of these selectors works. Four categories define the specificity level of a selector:

Inline styles
IDs
Classes, pseudo-classes, attribute selectors
Elements and pseudo-elements

Inline styles have the highest priority and a specificity value of 1000. There is a standard value for each selector to calculate the effective specificity of selectors. They are:

IDs get a specificity value of 100.
Class selectors(pseudo-classes, attribute selectors) get a specificity value of 10
Universal selectors (*), combinators (+, >, ~, ‘ ‘), and negation pseudo-class (:not()) have a specificity of 0, which means they do not affect the specificity of the rule.
Type selectors and pseudo-elements (::before, ::after) have a specificity of 1.

One rule of thumb is that whenever you use the important rule, CSS property will have higher priority over the others.

General selectors in CSS can handle most of the styling requirements, but advanced selectors provide additional flexibility and precision when targeting specific elements. Some of the advanced selectors are

:not() selector: It is used to select the elements except those that match the specified selector.

:has() selector: It allows you to select an element based on whether it contains another element that matches the specified selector.

While using advanced CSS selectors, it is essential to note that some browsers still don’t support all of these selectors. Before using advanced selectors, we should ensure that most browsers support them. Writing simple selectors continuously improves web performance compared to advanced selectors because, when using simple selectors like class or id, the browser only has to find the target elements. In contrast, if you use an attribute selector, it has to search throughout the DOM to target that.

Avoid Using Inline Styles

Red flag: Using inline styles and making code hard to read.

Best practices: Use an external stylesheet to have a maintainable and readable code.

We all start learning CSS by adding inline styles, but this is not the best way to style your application. One of the main reasons inline styles are avoided is because they make our code hard to maintain.

Let’s look at an example (Unreadable HTML CSS code) to see what I mean:

Selenium WebdriverIO is Javascript based test automation framework built over nodeJs. Learn with this guide how to use webdriverIO to perform web automation testing.

<div style="
    width: 100%; height: 300px; background-color: blue; color: white; font-size: 20px; font-family: Arial; text-align: center; line-height: 300px; border-radius: 20px; box-shadow: 10px 10px 5px gray; position: relative; top: 50px; left: 50px; transform: rotate(45deg);">
    This is a heavily styled div :)
</div>

You can see the above code makes it hard for developers to understand, which makes it challenging to maintain the codebase, leads to code duplication, makes it difficult to reuse styles, and makes it difficult to use CSS preprocessors.

It’s essential to remember that some JavaScript libraries or JavaScript frameworks may add inline styles. Hence you should review the codebase and identify the inline styles that can be refactored and replaced with classes.

Using Consistent Units of Measurement.

Red flag: Using a mix of CSS units.

Best practices: Using consistent units of measurement throughout the code.

CSS offers a variety of units of measurement that will allow for greater flexibility and specificity when defining the size, spacing, and position of elements on a web page. We will look into some of the most common units and understand when and where to use them:

Pixels (px): Pixels are a fixed unit of measurement commonly used for margins in CSS. One pixel is equal to 1/96th of an inch on a computer screen.
Em: Em is a relative unit of measurement, which means it is relative to the element’s font size. One em is equal to the font size of the element.
Rem: Rem is also a relative unit of measurement, but it is relative to the font size of the root element, typically the < HTML > element. One rem is equal to the font size of the root element.
Percentage(%): A percentage is a relative unit of measurement, which means that it is relative to the parent element. One percent is equal to 1/100th of the width or height of the parent element.

When to use Relative Units:

There is a lot of benefit to using relative units like em, rem, %, vw, vh, fr, etc. Even though there are cases where px and pt are required, they should be used for static designs. As the browser is flexible, so should our website and units.

Some general guidelines on using relative units are mentioned below:

For Responsive layouts:

Responsiveness is the number one factor we should consider while creating a web design. Desktop users often have multiple tabs open side-by-side, and they don’t want the website to look messy while resizing the window.

To create responsive design layouts, it is necessary to use relative units to ensure that your website is adaptable to different screen sizes and screen resolutions.

For Mobile layouts:

As mentioned earlier, responsive layouts are an essential factor in modern web design, and users of mobile devices should have the same experience as desktop users.

Mobile screens are often small, so it’s essential to test for mobile design to ensure that fonts and other design elements are readable and accessible on smaller screens.

For specifying font sizes:

Fonts and font sizes are one of the most important parts of your content. Using relative units for fonts is recommended, as it allows to scale based on the user’s device and provides a better experience on all devices.

Please read our complete article to master CSS font spacing that covers all tips and tricks for perfect typography.

Which are the most wanted automation testing tools that have climbed the top of the ladder so far? Let’s take a look.

For element positioning and spacing:

One problem that happens while using static values for spacing and positioning is that, on smaller screens, our content looks congested and makes it hard to read. Using relative units can solve this issue by adjusting the spacing and positioning.

Consistent use of measurement units can help you make your CSS code more readable and understandable. You might be unsure about using a numerical value or even determining the best value for the property, right? Let’s look into that next.

Avoid using magic numbers.

Red flag: Using a random value just because it works.

Best practices: Using keywords or variables or constants to define the values.

Developers like us have this tendency to use magic numbers. A magic number is a value that is used because it just works. It might work on your machine, but for others, it won’t.

Using magic numbers in the code can confuse other developers, and even you cannot explain how or why that works.

For example, instead of writing:

div {
    margin-top: 10px;
    padding: 20px;
    font-size: 12px;
}

It’s better to use variables or constants to define these values and give them a meaningful name that reflects their purpose.

:root {
 --header-height: 60px;
    --header-padding: 20px;
    --header-font-size: 14px;
  }

  .header {
    height: var(--header-height);
    padding: var(--header-padding);
    font-size: var(--header-font-size);
  }

In this example, the values 60px, 20px, and 14px are replaced with variables that have meaningful names. This makes it clear that the –header-height variable is used for the height of the header, the –header-padding variable is used for the padding of the header, and the –header-font-size variable is used for the font size of the header.
If you need to change these values in the future, you only need to update the variable once, and it will be applied to all the elements using it. This makes your code more maintainable and less error-prone. One recommended way is to use relative units, as the value dynamically changes depending on the viewport.
You can also use layouts, which we will cover in the next section of this CSS Refactoring tutorial.
Using CSS shorthand properties.
Red flag: Using overly-specific CSS selectors.

Best practice: Use the simplest and most efficient CSS selectors to target elements.
While writing CSS, we have two options: to write specific values for specific properties, for example, margin-left:25px; or use the shorthand margin property for doing the same.
Shorthand properties are just like any other CSS properties, but they allow you to set the values of multiple other CSS properties simultaneously. You can write more concise CSS using the shorthand property, saving time and improving readability.
For example, instead of writing:

div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

You can use the padding shorthand property to specify all four properties at once.

div {
   padding: 10px, 20px, 30px, 40px;
}

It’s important to note that not all properties have shorthand notation, and some may have different orders of values.

For example, the syntax of the margin shorthand properties is given below:

 *{
    margin: <top> <right> <bottom> <left>;
}

< top > is the margin for the top of the element.
< right > is the margin for the right of the element.
< bottom > is the margin for the bottom of the element.
< left > is the margin for the left of the element.

We can follow some practices while writing values for these properties to maintain their readability. Let’s discuss those next.

Use Flexbox or Grid Layout

Reg flag: Using margin and padding for positioning.

Best practice: Using layouts like Flexbox and Grid for positioning.

CSS Flexbox and Grid Layout are simple layouts, but we can create advanced layouts with them. CSS Flexbox is used for one-dimensional layouts, such as aligning items along a row or a column, and it’s best suited for small-scale layouts. In contrast, CSS Grid is used for two-dimensional layouts, arranging items in a grid.

One key advantage of using CSS flexbox and the Grid is making our CSS code more maintainable and concise. Most beginner developers make the mistake of aligning items with properties such as margin and padding, which is a no-no!

Here is an example of how just a few lines of CSS can create a UI-friendly layout, whereas if we use static positioning with padding and margin, it will be hard to maintain responsiveness.

You can perform a website responsive test with LT Browser 2.0 and responsive screen testing using the LambdaTest platform across different devices.

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

Intuited to learn how to perform responsive testing, watch our video on performing responsive testing on the LambdaTest platform.

Also, subscribe to our LambdaTest YouTube Channel to learn about web automation tools like Selenium, Playwright, Appium, and more.

<html>                                                                             
<body>
    <div>
        <img src="https://images.pexels.com/photos/9969240/pexels-photo-9969240.jpeg?auto=compress&cs=tinysrgb&w=600"/>

        <img src="https://images.pexels.com/photos/8717959/pexels-photo-8717959.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"/>

        <img src="https://images.pexels.com/photos/9206602/pexels-photo-9206602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"/><img src="https://images.pexels.com/photos/9206602/pexels-photo-9206602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"/>
      </div>
</body>
</html>

Style.CSS:

body{
    background:black;
  }
  div{
    display:flex;
    height:100vh;
    justify-content:center;
    align-items:center;
  }
  img{
     width:20%;
      height:45%;
    border-radius:5%;
    object-fit:cover;
    margin:10px;
    filter: grayscale(100%);
    transition:0.9s ease-in-out;
  }
  img:hover{
       filter: grayscale(0%);
    width:35%;
    border-radius:0;
}
  @media only screen and (max-width:600px){
    img{
      width:10%
    }
    img:hover{
      width:40%;
    }
  }

body {
  background: black;
}
div {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

img {
  width: 20%;
  height: 45%;
  border-radius: 5%;
  object-fit: cover;
  margin: 10px;
  filter: grayscale(100%);
  transition: 0.9s ease-in-out;
}
img:hover {
  filter: grayscale(0%);
  width: 35%;
  border-radius: 0;
}

@media only screen and (max-width: 600px) {
  img {
    width: 10%;
  }
  img:hover {
    width: 40%;
  }
}

Flexbox and Grid Layout also make it easier to create reusable and modular layout components, which is an essential aspect of writing better CSS. They provide a way to create layout components that you can reuse across different pages or sections of a website, which makes it easier to update the code in the future. But how can we use reusable code in CSS? The following sections of this CSS Refactoring tutorial will cover how to do so.

Using Reusable code

Red flag: Using duplicate code in your CSS.

Best practice: Using reusable code in CSS using class selectors.

Reusing your existing CSS code wherever possible can help you avoid code duplication and reduce the amount of code you write manually. Reusing can also make your code more readable, which is one of the best practices.

Here are a few ways to use reusable CSS code:

Use Classes:

Instead of repeating the same code, create a common class name that you can use to define the specific styles you want and apply it to the elements that require them.

In the following example, you can see how using a common class element reduces the duplication of code at least three times:

<div class="container">
<!--  lambdatest  -->
  <div class="element elon">
    <div class="social-icons">
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>

  <a href="#"><i class="fab fa-youtube"></i></a>
</div>

</div>  


<div class="element mark">   <div class="social-icons">
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>

  <a href="#"><i class="fab fa-youtube"></i></a>
</div></div>
<div class="element jeff">  


  <div class="social-icons">
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>

  <a href="#"><i class="fab fa-youtube"></i></a>
</div></div>


</div>

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

CSS:

*{
    margin:0}
    .container{
      display:flex;
      justify-content:center;
      align-items:center;
      background:black;
      height:100vh
    }

    .element{
      margin:10px;
      filter:grayscale(90%);
    }

    .element:hover{
      margin:40px;
        filter:grayscale(0%) brightness(85%);
       box-shadow: -12px 10px 16px #ffffff;


    }

    .elon{
     background: url('https://static.dezeen.com/uploads/2021/06/elon-musk-architect_dezeen_1704_col_0.jpg') center center no-repeat;
    background-size: 300px;
    height: 379px;
      width: 300px;
    transition: 0.75s ease-in;
    }

    .elon:hover{
       background: url('https://static.dezeen.com/uploads/2021/06/elon-musk-architect_dezeen_1704_col_0.jpg') center top no-repeat;
      background-size: 600px;
      background-radius:100%;
      border-radius:30px
    }


    .jeff{
       background: url('https://imageio.forbes.com/specials-images/imageserve/5d6ae14f673aa300083caf99/0x0.jpg?format=jpg&crop=2923,2926,x3051,y26,safe&height=416&width=416&fit=bounds') center center no-repeat;
    background-size: 300px;
      height: 379px;
      width: 300px;
    transition: 0.75s ease-in;


    }

       .jeff:hover{
       background: url('https://imageio.forbes.com/specials-images/imageserve/5d6ae14f673aa300083caf99/0x0.jpg?format=jpg&crop=2923,2926,x3051,y26,safe&height=416&width=416&fit=bounds') center top no-repeat;
      background-size: 600px;
        border-radius:30px;
    }

    .mark{
       background: url('https://upload.wikimedia.org/wikipedia/commons/0/01/Mark_Zuckerberg_at_the_37th_G8_Summit_in_Deauville_018_square.jpg') center center no-repeat;
    background-size: 300px;
      height: 379px;
      width: 300px;
    transition: .75s ease-in-out;

    }


    .mark:hover{
       background: url('https://upload.wikimedia.org/wikipedia/commons/0/01/Mark_Zuckerberg_at_the_37th_G8_Summit_in_Deauville_018_square.jpg') center top no-repeat;
      background-size: 600px;
      border-radius:30px

    }
    .fa-facebook-f{
      color:blue
    }


    .social-icons a {
      display: inline-block;
      margin: 0 10px;
    }

    .social-icons a i {
      color:#f0ffff;
      font-size: 28px;
    }

    .social-icons a i:hover {
      color: #ccc;
    }

    .social-icons{
      position:absolute;
      display:flex;
      background:transparent;
      width:100%;
      justify-content:space-evenly;
      align-items:center;
      border-radius:50%;
      top:80%;
        opacity: 0;
        transition: opacity 0.4s ease-in-out;


    }

    .element:hover .social-icons{
      transform: translateX(0%);

      opacity: 1;  opacity: 1;
    }  

    .social-icons a {
      display: inline-block;
      margin: 0 10px;
      opacity: 0;
      animation: fade-in 0.5s ease-in-out forwards ;
    }


    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }


    @media only screen and (max-width:600px){
      .container{
        flex-direction:column;
      }
      .element:hover{
        background-size:300px
      }
    }

<div class="container">
<!--  lambdatest  -->
  <div class="element elon">
    <div class="social-icons">
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>

  <a href="#"><i class="fab fa-youtube"></i></a>
</div>

</div>  

<div class="element mark">   <div class="social-icons">
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>

  <a href="#"><i class="fab fa-youtube"></i></a>
</div></div>
<div class="element satya jeff">  


  <div class="social-icons">
  <a href="#"><i class="fab fa-facebook-f"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>

  <a href="#"><i class="fab fa-youtube"></i></a>
</div></div>

</div>



Resources

Here in the above example, we have reduced the duplication of code with the help of the element class, or else we will give the same style again and again for the classes .satya, .mark, and .elon.

Use CSS Variables:

We can further reduce code duplication using CSS variables. This makes it easy to change the property in one place and have it updated everywhere it’s used. We used the same property values multiple times in the example. We can avoid that by using the global variable :root like this:

:root {
 — img-size: 300px;
 — img-size-hover: 600px;
 — border-radius: 30px;
 }

There are many other ways to reduce code duplication, like using CSS inheritance, but we cannot depend on CSS inheritance when we want the same type of element with a few different characteristics.

Use Mobile First approach

Red flag: Designed to only work well on desktop devices.

Best practice: Design a mobile-first desktop that scales well on higher decide ratios.

According to a study by ThinkwithGoogle, people with a bad experience on mobile are 62% less likely to make a future purchase — no matter how beautiful or data-driven your marketing campaigns are.

With billions of people accessing websites solely through their mobile devices, we should focus on building a seamless experience for smartphone users. The study also says that 58% of the users feel more favorable toward companies whose mobile sites or apps remember who they are and their past behavior.

These numbers speak to the truth that having a better digital experience can make your customers remember you, and that’s an integral part of success for all businesses.

The main principle of a mobile-first approach is that the site should be fully functional and usable on a mobile device and then progressively enhanced for larger screens with additional features and functionality. Only optimizing the CSS for different devices can lead to good performance on mobile devices.

Most of the time, we will use some styling libraries to achieve this. Some of the most popular CSS libraries for achieving this like

Bootstrap: Bootstrap is one of the best CSS frameworks that provides a mobile-first grid system and a set of pre-designed UI components. It is designed to make it easy to create responsive applications using mobile-first website designs.
Tailwind CSS: Tailwind CSS is a utility-first CSS framework that provides a set of low-level utility classes that can be used to build custom designs. It is designed to be highly customizable and adaptable, making it an excellent choice for developers who want to create unique designs.
Foundation: Foundation is another popular CSS framework that provides a mobile-first grid system and a set of pre-designed UI components. It also includes a set of SaSS variables and mixins, making it easy to customize the design.
Bulma: Bulma is a lightweight CSS framework that provides a mobile-first grid system and a set of pre-designed UI components. It is designed to be easy to use and customize, making it a great choice for developers new to CSS frameworks.

Are you using Playwright for automation testing? Run your Playwright test scripts instantly on 50+ browser/OS combinations using the LambdaTest cloud. Sign up for free.

Source

Mobile responsiveness is also important for search engine optimization (SEO), as search engines like Google prioritize mobile-friendly websites in their search rankings.

You can also use responsive design techniques, such as CSS media queries, to ensure that the website looks and performs well on all devices.

The following are some of the most common media queries for certain device screens.

/* Target screens with a minimum width of 600px */
@media (min-width: 600px) {
    /* styles go here */
  }

  /* Target screens with a maximum width of 600px */
  @media (max-width: 600px) {
    /* styles go here */
  }

  /* Target screens with a width between 600px and 900px */
  @media (min-width: 600px) and (max-width: 900px) {
    /* styles go here */
  }

  /* Target screens with a resolution of 2dppx or higher */
  @media (min-resolution: 2dppx) {
    /* styles go here */
  }

  /* Target screens in landscape orientation */
  @media (orientation: landscape) {
    /* styles go here */
  }



  /* Target screens in portrait orientation */
  @media (orientation: portrait) {
    /* styles go here */
  }

  /* Target screens with a color index of at least 8-bits */
  @media (min-color-index: 8) {
    /* styles go here */
  }

  /* Target screens with a color index of at most 8-bits */
  @media (max-color-index: 8) {
    /* styles go here */
  }

One way to optimize a website’s performance is to split and conditionally load stylesheets using media queries. Depending on the device width, we can create multiple stylesheets for different dimensions and load them accordingly.

Here’s an example with a code snippet for conditionally loading a stylesheet based on screen size using a media query:

<!-- Load small screen stylesheet for screens up to 480 pixels wide -->
<link rel="stylesheet" media="(max-width: 480px)" href="small-screen.css">


<!-- Load medium screen stylesheet for screens between 481 and 768 pixels wide -->
<link rel="stylesheet" media="(min-width: 481px) and (max-width: 768px)" href="medium-screen.css">


<!-- Load large screen stylesheet for screens above 768 pixels wide -->
<link rel="stylesheet" media="(min-width: 769px)" href="large-screen.css">

The above code tells the browser to only load the stylesheet when the conditions are met. You can further test the mobile responsiveness of your website using the LT Browser, which allows you to see how your website looks on different device ratios

You can also debug directly from the browser and find the appropriate styles using the inspect tool.

Remove unused CSS

Red flag: Ignore the new code and leave them as it is.

Best practice: Remove the unwanted code, so that the size of the CSS file is reduced.

When you clean up your code (refactoring), you might leave behind old styles that are not being used or add new ones that are not being used. These unused styles increase the size of your file and can cause problems.

Either you can manually remove the redundant code, or you can use libraries like PurgeCSS or PurifyCSS, which analyze your HTML and CSS files and remove any CSS code that is not being used.

Leaving the unused CSS code in your file will unnecessarily increase the file size, which can cause slow page load times, improved bandwidth usage, and negatively impact user experience. But while removing the unwanted CSS, we should be careful enough, or else we might remove the useful code.

Auditing the health of CSS code

To improve your CSS code and avoid bugs, it’s essential to have a clear goal in mind and use objective data to set measurable targets during the CSS code refactoring process. Factors such as target file size, selector specificity, CSS code complexity, and several media queries should be considered to improve code quality.

CSS Stats:

Many helpful tools are available to give an overview and statistics about the CSS codebase when auditing or preparing for CSS refactoring. One of the most popular tools for this is CSS Stats.

While writing this article, I audited my website using CSS Stats and found that the file size was around 74 KB, which is huge even though the website is a single-page application.

Some key features of CSS Stats are:

Analyze CSS code: CSS Stats can be used to provide insights about the number of selectors, properties, and declarations used in the code.
Understand complexity: CSS Stats can show the number of unique font sizes, colors, and other CSS properties used in the code to identify areas where simplification may be possible.
Compare against benchmarks: CSS Stats can compare the CSS code of a website against industry benchmarks and provide insights into areas for improvement.

With CSS stats, you can analyze where to improve and how to make the code better, and the tool provides a good overview of the CSS quality that is hard to spot manually. Many other tools can be used to achieve the same thing.

Google Lighthouse

A free and open-source tool developed by Google that audits the performance and accessibility of web pages. It offers an audit feature that analyzes the CSS code of your website and provides recommendations on where and how to improve.

Let’s audit a website and analyze it.

You can see that the performance of my website is only 56%. And this is not good enough, and the reason for this is the assets, such as images, JavaScript, CSS, etc., and styles that are taking a long time to load.

With our LT Browser 2.0, you can analyze the metrics like First Content Paint, Time to Interactive, Largest Content Paint, Speed Index, Cumulative Layout Shift, etc.

PageSpeed Insights

It is a web tool created by Google that helps developers analyze the performance of their web pages on mobile and desktop devices. If you want more data on where to improve, PageSpeed Insights simplifies that with many diagnostic tips.

PageSpeed insight suggests optimizing images, leveraging browser caching, and minimizing the number of requests made by the page. It also gives metrics about First Contentful Paint, Largest Contentful Paint, time taken to respond, etc.

Most of the time, we can optimize the performance and page load by making the styles and assets non-render blocking, which we will discuss in the next section.

Eliminating Render-Blocking CSS

By default, CSS can slow down website rendering because the browser won’t show any content until the CSS is loaded. It’s important to keep the CSS code small, load it as quickly as possible, and use media types and queries to avoid blocking rendering.

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

One way to make CSS non-render-blocking is by deferring the CSS, which means making our CSS render only after the HTML content is fully loaded. But this creates a bad user experience because the user will see a styleless version of your website for quite some time, called a flash of unstyled content (FOUC). But the advantage here is that we can improve the core web vital score of the LCP.

An effective solution to managing CSS rendering is to load only the minimum amount of CSS needed for rendering the part of the website that the user sees and then load the rest of the CSS later. This can improve the user experience while optimizing the website’s load time.

You can defer the CSS by using asynchronous loading, for example,

<link rel="preload" href="styles.css" as="style"  onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Here, the link rel=”preload” as=“style” requests the stylesheet asynchronously. You also need to have a fallback for the browsers that don’t execute JavaScript.

Optimizing Web Layout and Positioning

We use CSS for positioning an element to improve the UI, and there are many ways to achieve that. As mentioned earlier, positioning using margin and padding is not the best way, as it breaks styles on certain devices.

Let’s take an example and visualize it:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="app.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="container">


  <img class="social" src="https://www.freepnglogos.com/uploads/discord-logo-png/concours-discord-cartes-voeux-fortnite-france-6.png"/>
  <img class="social" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png" alt=”instagram”/>
  <img class="social" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Octicons-mark-github.svg/2048px-Octicons-mark-github.svg.png" alt=”github”/>
  <img class="social" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Twitter-logo.svg/1200px-Twitter-logo.svg.png" alt=”Twitter”>
  <img class="social" src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Youtube_logo.png" alt=”Youtube”/>
</div>
<p class=”paragprah__one”>Welcome to my social media page</p>


</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


.container{
    display: block;
    width: 100%;
    height: 100px;
}
.social{
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 10px;
    padding: 10px;
    border-radius: 49%;
    /* shadow */
    box-shadow: 10px 10px 15px 1px rgba(0,0,0,0.2);
    overflow: hidden;
}
p{
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin: 10px;
    padding: 10px;
}

Output:

Here you can see that the desktop version looks good, but the UI is disoriented when it comes to the mobile version. Because of this, it is not recommended to use margin or padding properties to make the layout. We can now use the Flexbox layout to make this UI look better.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.container{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.social{
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 10px;
    padding: 10px;
    box-shadow: 10px 10px 15px 1px rgba(0,0,0,0.2);
    overflow: hidden;
}
p{
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

You can see from the output why using a layout like a flexbox can improve the layout in all dimensions.

These layouts are also more efficient and flexible, requiring less complex CSS and JavaScript. Using CSS Grid and flexbox can also help you reduce the number of elements on a page, improving load times.

We’ve looked at some best practices for CSS, and now let’s turn our attention to some external tools that can assist us.

In this System testing tutorial, learn why System testing is important and all the intricacies of the System testing process

Optimizing Your CSS Workflow With PostCSS

With the increased demand for libraries such as Tailwind, more and more developers are using PostCSS in their projects. PostCSS has around 70 million weekly downloads from the NPM manager.

PostCSS is a tool for transforming CSS styles using JavaScript plugins. It allows you to use modern CSS features not yet supported by all browsers and adds new CSS functionality, such as variables, functions, and mixins.

Despite the name, PostCSS is not just a pre-processor or post-processor; it is a transpiler, to be specific, that turns a special PostCSS plugin syntax into vanilla CSS.

Some of the benefits of using PostCSS include

Browser compatibility: PostCSS automatically converts modern CSS features not supported by all browsers into compatible ones.
Performance: By minifying and optimizing your CSS code, PostCSS can help to improve the overall performance of your website or web application.
Customization: Offers various plugins that can be used to customize your CSS, such as adding CSS variables, functions, and mixins.
Maintainability: PostCSS can help make your CSS more maintainable by providing features such as linting and source mapping.
Flexibility: PostCSS is a highly flexible tool that can be used with other libraries and frameworks such as Tailwind, Foundation, and Bulma.
Compatibility: PostCSS is compatible with a wide range of CSS syntaxes and can handle modern and legacy CSS. This makes it a popular choice for developers who want to ensure that their CSS code is compatible with a wide range of browsers and devices.

PostCSS can be used with other tools, such as preprocessors like SaSS, LESS, and Stylus, and CSS frameworks and libraries. It removes the extra work we must do while considering cross-platform support.

Using CSS Preprocessors

Nowadays, most developers use CSS Preprocessors to style because it helps them by adding features to CSS that make it easier to maintain and scale CSS code.

Some of the main features of the CSS preprocessor are:

Using variables: Preprocessor allows you to write reusable code with the help of variables. You can store the value and reuse it throughout the stylesheet.
Nesting Styles: Nesting is a considerable advantage over CSS because it creates a visual hierarchy similar to what you are used to with HTML.
Operations: You can do calculations with preprocessors like SaSS and LESS.
Functions and Mixins: Preprocessors provide functions and mixins, which can help to make your CSS code more efficient and reusable. Functions can be used to perform calculations, and mixins can be used to reuse a set of styles across different selectors.
Improves Readability: With the help of variables, nesting, and functions, preprocessors can make your CSS code more readable and understandable, which makes it easier to update and maintain.
Browser compatibility: Some preprocessors, like Autoprefixer, can automatically add prefixes to your CSS, which means that your code will work on more browsers without the need to add the prefixes manually.

While there are many options out there for CSS preprocessors, some of the most commonly used ones are:

SaSS

SaSS stands for Syntactically Awesome Stylesheets, is a CSS preprocessor that gives superpowers to CSS, making it easier to work with, reduces repetition, and saves time, which helps style your pages easily with fewer CSS lines.

Some of the features of SaSS are

Reference symbol (&): Reference symbol allows you to reference a parent element and can also be used after a selector to combat some IE-related issues.
Partials and @import directive: Partials and @import directive to make the code more modular, divide it into smaller particles, and group them up for mixins, settings (defined variables), etc.
Functions: Functions are built-in and can be used for color, string, and number-related operations.

LESS

Linear style sheets, or simply LESS, is another popular CSS preprocessor that provides features similar to SaSS, such as variables, nesting, and functions. It also has built-in support for operations and functions, making it easy to create complex styles.

Some of the features of LESS are

Real-time file monitoring: Less can display and follow the contents of a file in real-time as it is being updated. This handy feature is used for monitoring log files, for example, as new data is added to them.
Text search and highlighting: Less allows you to search for text in the file and highlight all instances of the search term.
Display of compressed files: Less can display the contents of compressed files without the need to decompress them first manually. This is useful when working with large code that is difficult to handle.

Stylus

It is a dynamic stylesheet preprocessor language compiled into Vanilla CSS. SaSS and LESS influence its design.

Some of the features of Stylus are

Built-in Functions: Stylus provides many built-in functions that allow you to manipulate values in your stylesheets, such as color operations, math functions, and string operations.
Nested Syntax: Stylus allows you to nest CSS selectors and properties, making it easy to create well-organized and easy-to-read stylesheets.
Conditional Statements: Stylus supports conditional statements, such as if/else and switch, making it possible to create complex logic in your stylesheets.

Key Factors to Remember while Organizing your CSS for Large-Scale Projects

Once you start working as a team, you will probably work with large codebases, and organizing your CSS can be daunting. But following the right approach can make your code more readable and manageable.

Some key considerations for organizing your code include:

Use a modular approach:

Break down your CSS into small, reusable modules that can be easily managed and updated in the future. You should always start having a modular approach from day one, as it will help you when the codebase becomes large.

Here’s an example file directory of how you might organize your working directory to break it down:

styles/
├── base/
│   ├── reset.css
│   ├── typography.css
│   ├── variables.css
├── components/
│   ├── buttons.css
│   ├── forms.css
│   ├── cards.css
├── layout/
│   ├── header.css
│   ├── footer.css
│   ├── grid.css
├── pages/
│   ├── home.css
│   ├── about.css
│   ├── contact.css
├── themes/
│   ├── light.css
│   ├── dark.css
├── main.css

In this example, the “base” directory contains the CSS for global elements and variables, the “components” directory contains the CSS for specific UI components, the “layout” directory contains the CSS for the overall layout of the website, the “pages” directory contains the CSS specific to individual pages, and the “themes” directory contains the CSS for different color schemes. The “main.css” file imports all the other CSS files and is the file that is linked to the HTML document.

You can see now that we have an organized structure, and it is easy to update the styles in the future. You can also reuse the component across multiple pages.

Use of Linting tools:

When our codebase grows, it will be challenging to maintain the structure of file directories and CSS codes. This is where CSS linting tools come in. A linting tool is software that checks your CSS code for errors and inconsistencies and can help you catch common issues before they cause problems in your project.

Stylelint is one of the most popular CSS linting tools. It is a linter that can help you avoid errors in your style. Some of the key features of Stylelint include

It has over 170+ built-in rules for modern CSS syntax and features.
It allows you to create your own rules using plugins.
It automatically fixes problems wherever possible.
It supports shareable configs that you can extend, create, and customize to your needs.
It has a growing community and is used by Google, GitHub, and WordPress.

You can specify the rules you want to follow throughout the project, and it will throw an error if we try to break those. The below image is the lint tool output:

You can see from the example how useful it is! Using a linter like Stylelint can help us write error-free code. Stylelint is a popular tool among front-end developers, and according to NPM JavaScript, it has around 3 million weekly downloads.

Use CSS variables:

Most CSS developers aren’t aware that we can use variables inside CSS. We can use reusable variables, as the name implies, to improve the overall readability of the code.

For example, instead of hardcoding a color value in multiple places throughout your CSS, you can store it as a variable and then reference it wherever the color is used. This makes it easy to update the color in one place and have the change propagate throughout your code.

Here is an example of how you might use a variable to store a color value in your CSS:

:root {
    --primary-color: #4CAF50;
    --Secondary-color: #fff0ff;


  }

  .btn {
    background-color: var(--primary-color);
    color: #fff;
  }


.btn:hover{
    background-color: var(--Secondary-color);
}

In this example, we have defined a variable named — primary-color and set it to the value of #4CAF50. We can then reference this variable in our CSS using the var() function.

It is important to note that CSS variables are a new feature, and some browsers don’t support them yet.

Source

Use a CSS framework:

Front-end developers are more interested in using CSS libraries than just writing raw CSS. One of the reasons is that these frameworks provide more features and a more user-friendly approach to styling your element. They can also speed up your development and have consistent styling throughout the project.

Some popular CSS frameworks include

Tailwind CSS

It is one of the most widely used CSS frameworks. It is a utility-first framework with nearly 13 million monthly downloads. It allows you the flexibility and freedom to select your website’s style.

Tailwind CSS has some default settings; you can override these configurations to meet your demands. Tailwind’s utility classes and components are easily customizable. Tailwind has a good reputation among front-end communities because of its simplicity in styling. Tailwind uses a mobile-first breakpoint system, which means you can specify prefixed utilities like sm: md: lg: that only take effect at the specific breakpoint and above.

I use Tailwind all the time, and it is a lifesaver. For example, you can create a beautiful card like this with just a few lines of code.

Output:

CodeSandbox Link:

Some of the notable features of TailwindCSS are:

Customizable: Most frameworks lack this feature, but TailwindCSS is highly customizable. We can modify the default styles and themes and configure everything depending on the project.
Utility Classes: Tailwind provides a lot of utility classes that we can use and quickly style the application like m-{} for margins, p-{} for padding, etc.
Mobile-First Design: TailwindCSS follows a mobile-first design approach, where styles for smaller screens are defined first, then styles for larger screens are added as needed. One advantage of this is that responsiveness will be our key priority while building a design
Easiness in Integrating with other tools: Tailwind can be used with almost all the popular frontend frameworks like React, Angular, Vue, etc.
Bootstrap

Another popular CSS framework that can make web development much faster and easier. It allows developers to quickly and easily create responsive and mobile-friendly websites. It was initially developed by Twitter and is now maintained by a team of developers at GitHub.

Bootstrap includes a set of pre-designed CSS classes, JavaScript plugins, and other tools for creating various UI elements, such as forms, buttons, and navigation menus, which we can import and use on our website.

With approximately 3.7 million downloads, Bootstrap remains one of the best CSS framework choices, and many big tech companies still rely on it.

Bootstrap and Tailwind use inline styles, but the significant difference is that Bootstrap has prebuilt components, whereas Tailwind has pre built utility classes. Tailwind is more flexible, as we can control the flow, whereas, in Bootstrap, we have to follow the flow.

Bootstrap features are

Pre-designed UI Components: Bootstrap provides a collection of UI components, such as buttons, forms, alerts, modals, and more, that you can use to build UIs quickly.
JavaScript Plugins: Bootstrap has a set of powerful JavaScript plugins that you can use to add interactive features to your web pages, such as carousels, tooltips, popovers, and more.
Wider Acceptance: Most prominent tech companies still rely on Bootstrap, like Udemy, Spotify, etc.

A comprehensive UI testing tutorial that covers what UI testing is, its importance, benefits, and how to perform it with real-time examples.

Debugging and Troubleshooting CSS

Since developers are free to use CSS as they choose, it can sometimes cause problems on a website. With so many different browsers, devices, and screen sizes that a website or web application must support, it can be challenging to identify and resolve CSS issues.

The only way to try out the performance and appearance is to try it on these devices manually, but that will be very hard, right?

LT Browser 2.0

Actually, there is a tool that I have been using recently called LT Browser 2.0 that helps to simulate web applications on different screen sizes. I recently used it to test my website on various dimensions, and it makes developers’ lives easy.

The latest native Chromium rendering engine powers LT Browser 2.0. It will take your responsive testing to the next level. You can now test and interact with up to four devices, with a handful of Android, iOS, and desktop devices to test on. You can view all the changes in real time, and now we developers don’t need to switch browser resolutions repeatedly.

You can also improve your debugging experience by using multiple dev tool options, and the best part is that you can now use different dev tools for each device and debug them all at the same time.

Browser Dev Tools

When encountering a styling problem, we must first determine what is causing it. To achieve this, you can use the browser’s in-built dev tools, like Chrome dev tools or Firefox dev tools, which can help you inspect and modify the HTML and CSS of a web page in real time.

The dev tools allow you to see the HTML structure of a page and the CSS styles applied to different elements. This can help identify where a problem might occur, such as a missing class or an incorrect CSS selector.

Using the development tools, you can tweak the value and find the appropriate one.

Most problems arise when you forget how the box model works. The CSS box-sizing model refers to the rectangular boxes generated for elements in the document tree and how they are sized, positioned, and layered. Next time you style your element, remember to consider the box model.

You can also use the developer version of Google Chrome, i.e., Chrome Canary, to test and experiment with new and experimental features before they are released to the public so that your application can stay ahead of the curve and take advantage of cutting-edge technology.

You can access new Chrome DevTools features early by using Canary. It offers features like Audits, Request Blocking, and Local Overrides for diagnosing website performance issues. Other recent additions include a payment handler debugger, a third-party diagnostic tool, a bug reporting tool for DevTools, and enhancements to the Timing section.

Additionally, you can use LT Debug, an easy-to-use developer tool with over nine unique features that web developers and testers regularly use during debugging.

LT Debug is free and provides access to more than 100+ free developer tools that developers and testers often use.

Browser-specific CSS Prefixes

These prefixes are used to target a specific browser to ensure that a website or web application is compatible with different browsers and to take advantage of new CSS features that all browsers may not fully support.

The following are some of the most common prefixes:

-webkit: This prefix is used to target webkit-based browsers like Chrome and Safari. This prefix is necessary because older versions of these browsers may interpret CSS code differently than newer versions. Examples of CSS properties that may require the -webkit- prefix include: -webkit-transform, -webkit-transition, -webkit-animation.
-moz-: This prefix is used to target Firefox browsers. This prefix is necessary because Firefox may not fully support certain CSS features other browsers support. Examples of CSS properties that may require the -moz- prefix include: -moz-box-sizing, -moz-border-radius, -moz-transform.
-o- : This prefix is used to target Opera. This prefix is necessary because Opera may not fully support certain CSS features supported by other browsers. Examples of CSS properties that may require the -o- prefix include: -o-transform, -o-text-overflow, -o-border-image.

I know this is hard when writing browser-specific prefixes, but to our aid, we have this tool called Autoprefixer, which, as the name suggests, will add the prefix automatically.

For example, if you give the prefixer some code like this

.social {
    display: grid;
    transition: all .5s;
    user-select: none;
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 10px;
    padding: 10px;
    box-shadow: 10px 10px 15px 1px rgba(0,0,0,0.2);
    overflow: hidden;
    background: linear-gradient(to bottom, white, black);
}

It will give the following output.

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


.social {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 100px;
    height: 100px;
    -o-object-fit: contain;
       object-fit: contain;
    margin: 10px;
    padding: 10px;
    -webkit-box-shadow: 10px 10px 15px 1px rgba(0,0,0,0.2);
            box-shadow: 10px 10px 15px 1px rgba(0,0,0,0.2);
    overflow: hidden;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

While CSS Refactoring, it is essential to consider the use of browser-specific prefixes. You should look for any prefixes that are no longer necessary, as the browser may have fully supported the feature, and remove the need for those prefixes. As mentioned earlier, you can use CanIUse.com to check whether the browser specifies these properties.

Role of Testing in CSS Refactoring

While CSS Refactoring, it is essential to test your changes thoroughly to ensure that they don’t cause any new problems or affect the user experience negatively.

Some of the tests we should consider while CSS Refactoring are:

Performance Testing: While CSS Refactoring, there are chances that some code can affect the overall performance. Measuring the website’s performance after refactoring and comparing it to the performance before the changes were made is essential.
Regression Testing: It allows us to ensure that performance and appearance are not affected while CSS Refactoring. By conducting regression testing, we can identify any issues that may arise due to our code changes and fix them before they cause problems for our users.
Browser Compatibility Testing: While CSS Refactoring, it is essential to ensure that it looks great and functions well on all popular web browsers like Chrome, Firefox, and Safari. It is to test the website on different browsers to ensure it’s optimized for every user.

Use Version Control

Version control is an underrated way of managing your CSS code, but to be fair, it is the best way to manage your CSS. You can manage your entire workflow using a version control system such as Git. This will allow you to track and revert changes, if necessary, quickly.

You can create a separate branch for your CSS Refactoring work to avoid conflict with the main development branch. By using Git, you can have this history of work so that you can go back and forth to manage your CSS code.

Sometimes, CSS Refactoring can take a lot of time and effort. In some cases, it may not be necessary or practical. For example, if the CSS is already well-organized and easy to maintain, the website has a limited lifespan, more pressing issues, or limited resources. In such cases, you should consider the benefits and costs before deciding on CSS Refactoring.

Finally, remember that CSS refactoring is an iterative process, so don’t be afraid to make changes and continuously improve your website.

Wrapping Up!

Congratulations on reaching this far! You’re a fantastic reader! In this blog on CSS Refactoring, we have explored the various factors affecting poor CSS, different techniques, and best practices for effective CSS Refactoring. Also, we addressed common issues that may arise when working with CSS and offered solutions for troubleshooting them.

We have also covered the best practices that should be followed while using CSS that are relevant for novice and experienced developers in this CSS Refactoring tutorial. Whether you’re just starting with CSS or are looking to refine your existing skills, this post on CSS Refactoring has something valuable to offer.

Happy Testing!

#LambdaTestYourApps

Migrating Test Automation Suite To Cypress 10

AdarshM1024 — Wed, 07 Dec 2022 16:43:17 +0000

There are times when developers get stuck with a problem that has to do with version changes. Trying to run the code or test without upgrading the package can result in unexpected errors.
While we may believe there is a problem with the code, we weren’t the culprit this time.

The developers working behind these libraries do their best to make the most of them, but sometimes there will be breaking changes in the latest version, and most of the time, we might consider migrating our code to the latest version.

When it comes to automating testing, managing the test data, and analyzing the results to improve software quality, Cypress is one of the most popular options among developers.

According to npmjs, Cypress garners around 4,165,468 weekly downloads, whereas Selenium, its nearest competitor, has 2,652,431 weekly downloads.

Selenium is one of the most popular test automation frameworks and has been a leading choice for testing applications for many years. Although Cypress is a developer-friendly framework, it is now becoming popular for testing modern web applications since we can do component, API, and end to end testing with a single framework.

One of the worst nightmares for developers and testers is test flakiness. Imagine being greeted with test failures even when there are no changes in the test code!
As per my experience, Cypress tests are less flaky than Selenium tests. You can learn more about the differences through this Selenium vs Cypress blog.

The Cypress team recently announced the release of Cypress 10, or more precisely, July 1, 2022. It is better to migrate to Cypress 10, one of the most recent stable versions, because the Cypress team doesn’t add any new features, updates, or bug fixes to the older version.

This detailed blog on Cypress 10 migration will explain how to migrate your test automation suite to Cypress 10 and execute it over a cloud Cypress grid like LambdaTest.

P.S.: When writing this blog, the latest version of Cypress is 11.2.0. However, since the support for v11.0 by LambdaTest is currently under development, we have considered using Cypress 10.

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

What is Cypress?

Cypress is a NodeJS-based, open-source, MIT-licensed test automation framework written in JavaScript. It is the most preferred automation framework for testing modern web applications. When writing this blog on Cypress 10 migration, Cypress has over 41,800 stars on GitHub.

It makes quality end-to-end, integration, and unit tests easy to write and debug. It ensures that your web application is strictly tested before delivering it to quality assurance for testing. You make your code more reliable by inserting assertions and testing your application state after every change.

Cypress has a GUI and a command line interface to work with. The GUI, built on top of Electron JS, is suitable during the development stage as the user can interact with data flowing from the test runner to the server and vice-versa. The CLI is suitable when using a remote server for our test automation.

A key feature of Cypress is that it is designed and optimized for local development. With Cypress, you can test a web application from the perspective of your users. Without a doubt, this will give many of you more confidence to build robust applications.

Why use Cypress for end to end testing?

In the State of JS 2021 survey, Cypress is ranked fourth in the most popular test automation frameworks, showing that developers and quality assurance engineers increasingly turn to Cypress to automate their tests.

We will look at some of the major benefits of Cypress for testing web apps in this section:

Cypress is fast

There are only a few dependencies, and a complex test environment is not necessary to set up Cypress. Well, it is easy to set up Cypress in a few minutes! Any novice developer can start using Cypress like a command line tool and run the tests at your fingertips.

As mentioned earlier, Cypress uses Node.js to run in browsers and is written in JavaScript using the Mocha and Chai libraries.

Test your web and mobile apps on Android online emulator. Ensure your apps are compatible across latest and legacy Android operating systems, devices, and browsers. Start Testing Now !!

Real-time testing

Cypress’s architecture is based on Electron.js/Node.js, and it communicates with its Node server process to react to application events in real-time. Every time you modify your tests, Cypress reloads automatically.

Cypress runs as fast as your browser can render content. You can watch tests as you create your applications as they are executed in real-time.

Debugging experience

The Cypress test code runs in the same run loop as your application. This indicates that you can access the page’s active code and the tools your browser makes available to you, such as document, window, and debugger.

Cypress allows you to debug your application directly using Chrome DevTools while your tests are executed within the browser. When a test fails, an error message is thrown. You can also record screenshots of the test steps.

Time travel

We can travel through various states thanks to Cypress. This is made possible by taking a picture as the test is being run. When hovered over, each command and assertion returns the application or component under test to the state it was in when that command was executed.

Automatic waiting

Cypress waits for the DOM to load automatically; you don’t need to add additional waits or sleep. Cypress carries out everything asynchronously, including loading the page and the event elements send. You can go through this detailed guide on the types of Wait to learn more about it.

Zero network lag

Your application will be driven and run at the maximum rendering speed by the Cypress commands. Because Cypress executes most of its commands within the browser, there is no network lag. You can test under different throttling network conditions. This means that your tests will always be deterministic and predictable — no matter what network you are on or how fast or slow the connection is.

Recording states

Cypress keeps track of all CI data, screenshots, and videos and lets us see the outcomes in the dashboard. Cypress can take screenshots whether you use cypress open or cypress run, even in CI.

The benefit of recording these is that it enables visual regression testing, which allows us to verify that nothing has changed by comparing the screenshots of earlier runs with the current run. You can learn more about it through this blog on visual regression testing with Cypress.

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.

Cross-platform support

Cypress supports multiple operating systems such as Windows, Mac, and Linux. Browsers like Electron, Chromium, Chrome, Edge, and Firefox can run Cypress tests.

All the popular browsers on the market are supported by the modern development framework, so organizations try to support all the major browsers whenever a new product is released.

To summarize, Cypress tests run inside the browser, making them less flaky than tests using the Selenium framework.

Now that we have covered the integral aspects of the Cypress framework, let’s dive deep into the changes that have come with Cypress 9.

Major updates in Cypress 10

Cypress has released several new features that are handy for testing. Let’s take a look at the important features of Cypress 10. We have referred to the Cypress changelog to curate the changes that matter the most!

Component testing is now seamlessly integrated into the main app, allowing you to select the testing environment you prefer as soon as Cypress launches. Currently, Cypress only supports a few frameworks and versions for component testing.

Cypress 10 has improved how configurations are set and refreshed. When changes are made to the configuration file, the Cypress app will automatically refresh instead of reopening it.

Cypress 10 also includes several new configuration options. Major ones are listed below:

A new testing-type-specific configuration option called specPattern must be defined in the e2e and/or component configurations. By replacing the componentFolder, integrationFolder, and testFiles options, this option streamlines the spec discovery process.
The excludeSpecPattern option is a new configuration option for testing types within the e2e and/or component configurations. It allows you to ignore spec files that would otherwise appear in your list of specs by using a glob or an array of globs. The ignoreTestFiles option has been replaced by this one.
The defineConfig() helper function has an addition of intelligent code completion. By doing this, you can enable configuration auto-completion and in-line documentation in your IDE’s configuration file. Cypress does not need to parse your configuration, but it is advised to wrap your config object with defineConfig().

In addition to configuration changes, Cypress has also changed the APIs. Let’s examine those now:

.within(): A visual indication of logs and commands executed in the .within() command context has been added to the .within() command.

Let’s see an example of it

  it("within testing",()=>{
    cy.get('.within')
    .within(() => {
     return cy.contains('Add').should('have.class', 'button')
    })
  })
});

cy.origin(): The cy.origin() API now supports more than 30 unique origin spec bridges per test.
cy.session(): The behavior of the cy.session() command has been improved, and it no longer clears the dom following the execution of a validation function. This means a cy.visit() command is no longer required after running cy.session() when a validation function is used.

If component testing is not set up, Cypress will display an improved error message when running cypress run –ct.

Cypress 10 has also made some updates to the Cypress CLI, listed below:

With the –config CLI flag, you can now pass in testing type-specific configuration options without nesting JSON.
The –e2e and –component CLI flags have been added to cypress run and cypress open to allow users to run Cypress for specific testing types. If a testing-type specific CLI flag is not provided when running cypress run, Cypress will run end-to-end tests by default.
If cypress open is run with the –browser CLI flag for an unknown browser, a warning message will now appear.

After seeing all these, should we migrate or not?

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

Breaking changes in Cypress 10.0

The release of Cypress 10 came with various new features and bug fixes. Not only that, there are a couple of breaking changes with version 10.0 and above.

Let’s take a look at it.

Default configuration files

In the previous versions of Cypress, the cypress.json file was the default configuration file, but this file is no longer supported. It has been renamed to cypress.config.js.

If you use TypeScript or any other module systems like Common JS or ECMAScript modules, the extension is cypress.config.ts, cypress.config.cjs, or cypress.config.mjs. This change now provides better flexibility and extensibility of configuration.

If we accidentally have both the cypress.json and cypress.config.js files, an error will be thrown.

Mandatory configuration file

Before Cypress 10.0, the configuration file was not required, and we can pass the flag
–config-file=false. But as of version 10.0 and above, the configuration file is now mandatory, and passing the -–config-file=false flag will throw an error.

Modifications to the configuration option

Cypress has changed several configuration options, including their names, availability, and limitations to certain testing types. Many configuration options are now specific to either end-to-end or component testing.

The baseUrl and experimentalSessionAndOrigin configuration options can only be specified within the e2e configuration and are no longer valid as top-level configuration options. The support files are now distinct for E2E and component tests.

The componentFolder and integrationFolder options are no longer a part of Cypress 10. The new specPattern option has replaced these options. The ignoreTestFiles option was removed, and the new excludeSpecPattern option has taken its place.

During cypress open, the ability to Run all specs and Run filtered specs has been removed while running the Cypress specs in a GUI.

The commands cypress open-ct and cypress run-ct have been phased out. Instead, we must now use the commands cypress open --component and cypress run --component.

Why should you migrate Cypress to the latest version?

Undoubtedly, Cypress is becoming a popular web testing framework because of its ease of use. It enables test automation engineers and front-end developers to write automated web tests in JavaScript, which makes Cypress highly appealing to developers.

Cypress continuously strives to improve its products by integrating new features and fixing bugs. As there are breaking changes in the Cypress latest version, if you don’t update the project to the latest version, you must continue to use Cypress version 9 or the previous releases.

So it’s recommended to update and migrate your project to the latest Cypress version. As a developer, who wouldn’t want to capitalize on the latest additions in a new software release 🙂

How to migrate the test automation suite to Cypress 10?

The recent major Cypress release is version 10, which includes new features like integrating component testing into the GUI app and a new user interface with a unified testing experience. Cypress had to make some adjustments, like changes in folder structure and configuration, to how they were operating in the past to benefit from these new features.

In addition to upgrading Cypress, you might want to migrate the current project’s test code. All you have to do is review and include Cypress’ automatic migration option in your project.

You can follow the steps below for Cypress 10 migration in a beginner-friendly manner:

Upgrading the package

The Cypress dependency needs to be updated to migrate your project. Upgrading Cypress is simple and can be done with your preferred package manager. Run the following command on the terminal to upgrade the Cypress package:

For npm:

If you are using yarn as your package manager, then:

    yarn add -D cypress@latest

Starting the migration

If you’ve upgraded Cypress to the latest version, you can run this command to begin the Cypress 10 migration:

   npx cypress open

If you are performing this action for the first time, the GUI will display a welcome message and an introduction to Cypress 10 in video form.

You can get started by clicking the “Continue to Cypress 10” button.

If it is not the first time you are doing this, assuming you run the command npx cypress open, it will open the GUI with two options to start with, which are E2E testing and component testing.

Renaming the existing specs

To conform to the new 10.0+ standards, the migration window advises changing the name of the specification files folder as well as the file extension. To do that, follow these steps:

Step 1: Change the folder name from cypress/integration to cypress/e2e.

Step 2: Change the default spec file extension from [filename].spec.[.extension] to [filename].cy.[.extension].

Changing the filename is as simple as clicking on the Rename these specs for me button, and Cypress will do the rest for you.

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

Renaming the Cypress support file

As of Cypress version 10, it provides different support files for both component and end to end testing in Cypress. You need to rename the support file for E2E from the cypress/support/index.js *file to *cypress/support/e2e.js.

You can click on the Rename the support for me button, and Cypress will take care of the rest for you.

The image below shows all the changes to the folder structure and file names.

Migrating to the new Cypress configuration file

In Cypress 10, changes to the configuration file were one of the major changes.

The final step will be to migrate the existing Cypress configuration, formerly cypress.json, over to the new Cypress configuration, cypress.config.js, in this Cypress 10 migration tutorial.

While this step not only renamed the configuration file, it also seeded the new configuration with the corresponding options from the old one.

Like above, we can use the GUI button to move the configuration file automatically while performing Cypress 10 migration.

Manually, you can migrate the configuration file by renaming it from cypress.json to cypress.config.json and adding the following lines of code to the file.

   const { defineConfig } = require('cypress')

    module.exports = defineConfig({
      e2e: {
        // We've imported your old cypress plugins here.
        // You may want to clean this up later by importing these.
        setupNodeEvents(on, config) {
          return require('./cypress/plugins/index.js')(on, config)
        },
      },
    })

You will now see a “Welcome to Cypress” window and information indicating that E2E testing has been successfully set up in our project.

You might also have seen the choice to include component testing, though. This is one of the exciting new features that ships with Cypress 10. Component testing is currently in beta and is subject to future releases for additional testing features.

Updates to Cypress Command Line Interface

The Cypress CLI option keeps functioning as before. However, Cypress has introduced new options. Your project may include component and end-to-end testing since Cypress now supports them.

The following are a few helpful CLI snippets.

Execute all e2e tests in Cypress CLI

npx cypress run --e2e

Execute all component tests in Cypress CLI

npx cypress run --component

Execute tests in a specified browser

cypress run --browser chrome

Execute tests in a particular port

cypress run --port 8080

Now that we have completed Cypress 10 migration, you are ready to use both E2E testing and component testing to their full potential. Let’s check out how these tests can be done with Cypress.

How to perform end to end testing with Cypress 10?

An end-to-end test evaluates an application’s performance and functionality in real-world settings using data that closely resembles real-world conditions during the software development lifecycle. The objective is to completely recreate a real-world, real-user scenario in the simulation.

This testing aims to validate the system being tested and ensure that all of its supporting systems function properly and behave as expected.

Earlier in this blog on Cypress 10 migration, we migrated Cypress to one of the latest versions, and now we can start using Cypress E2E testing. You can start by clicking the E2E testing tile to get started.

The next step is to choose your preferred browser. While you are free to select the browser of your choice, I like to stick with Chrome.

Click the “Start E2E Testing in Chrome” button, and it will open the browser you selected, in this case, Chrome, which is now controlled by Cypress.

Let’s now create a to-do app to visualize the real-time testing using Cypress E2E testing. We can first look into the workflow using Cypress v9.

React application testing with Cypress 9

We’ll use React JS to build the to-do application and Tailwind CSS for styling. We can make the app simple by only using one main component, i.e., App.js.

Our package.json, which contains the details of our applications, will look like this:

    {
      "name": "cypress9",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
      },
      "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-toastify": "^9.0.8"
      },
      "devDependencies": {
        "@types/react": "^18.0.22",
        "@types/react-dom": "^18.0.7",
        "@vitejs/plugin-react": "^2.2.0",
        "autoprefixer": "^10.4.13",
        "postcss": "^8.4.18",
        "tailwindcss": "^3.2.1",
        "vite": "^3.2.0"
      }
    }

To make this simple, we will create a to-do application that can create a new to-do and delete an existing to-do.

The App.js file will look like this:

    import React, { useRef, useState } from "react";
    import "./App.css";
    import { ToastContainer, toast } from "react-toastify";
    import "react-toastify/dist/ReactToastify.css";

    function App() {
      const [count, setCount] = useState(0);
      const [todoList, setTodoList] = useState([]);
      console.log(todoList);
      const inputRef = useRef();

      function addNewTod(newTodo) {
        let flag = 0;
        todoList.forEach((todo) => {
          if (newTodo === "") {
            flag = 1;
            toast.error("Please enter a valid todo");
          }
          if (todo === newTodo || newTodo === "") {
            alert("Oops! You have already added this task");
            flag = 1;
          }
        });

        if (flag === 0) {
          setTodoList([...todoList, newTodo]);
          toast(`Todo ${newTodo} Added`, {
            position: "top-center",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "dark",
          });
          inputRef.current.value = "";
        }
      }

      function removeTodo(event, todoremove) {
        console.log(event.detail);
        if (event.detail === 1) {
          setTodoList(todoList.filter((todo) => todo !== todoremove));
          toast(`Todo ${todoremove} removed`);
          console.log(12345678);
        }
      }

      return (
        <div>
          {/* Todo app with tailwind */}
          <ToastContainer />

          <div
            style={{
              backgroundImage:
                'url("https://www.allartclassic.com/img/Albert_Bierstadt_BIA017.jpg")',
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover",
              height: "100vh",
              width: "100vw",
            }}
            className='flex flex-col items-center justify-center  min-h-screen py-4'>
            <div className='flex flex-col items-center justify-center w-full max-w-md px-4 py-6 space-y-4 bg-white rounded-lg shadow-pink-300 shadow-xl'>
              <h1 className='text-2xl font-bold text-gray-900'>Todo App</h1>
              <div className='within flex flex-row items-center justify-center w-full space-x-4'>
                <input
                  ref={inputRef}
                  data-input='todo-input'
                  className='input flex-1 px-4 py-2 text-gray-900 bg-gray-100 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 shadow-blue-200 focus:ring-opacity-50'
                  type='text'
                  placeholder='Add todo'
                />
                <button
                  data-button='Add-Todo'
                  onClick={() => addNewTod(inputRef.current.value)}
                  className='px-4 button py-2 text-white bg-blue-600 rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50'>
                  Add
                </button>
              </div>
              {todoList?.map((item, key) => {
                return (
                  <div
                    onClick={(e) => removeTodo(e, item)}
                    key={item}
                    className='flex flex-col items-start justify-start w-full space-y-4'>
                    <div
                      data-todo={item}
                      className='flex flex-row items-center justify-between w-full px-4 py-2 space-x-4 bg-blue-400 rounded-lg shadow-sm'>
                      <p className='text-gray-100'>{item}</p>
                    </div>
                  </div>
                );
              })}
            </div>{" "}
          </div>
        </div>
      );
    }

    export default App;



    // class based component example

The output will be like this:

Let us now add Cypress as a dev-dependency to our project. We will use Cypress V9.7.0

If you are using yarn, you can run the following command:

   yarn add -D cypress@9.7.0

Cypress will now be added to the dependencies list.

Now we run Cypress and open the GUI by running the following command:

    npx cypress open

This will open the interactive GUI, where you will find some example files to get started.

Let’s now create our sample test that will check if the browser is focused on the input field when it loads.

The test description for this scenario will look like this:

    // cypress 9 code to test the todo app
    //
    /// <reference types="cypress" />

    describe("to-do app", () => {
      beforeEach(() => {
        cy.visit("http://localhost:5173");
      });

      it("Focus on the input", () => {
        cy.focused().should("have.class", "input");
      });
    });

The first thing we do is visit the app inside the Cypress Dashboard. When the app opens inside the dashboard, we check if the focused element has a class named input. If there is one, our test passes.
Let’s add another test to see if the error message appears on the screen if we add a null or empty string.

     // test whether the input field is empty
      it("Accepts input", () => {
        const newItem = "";
        cy.get('[ data-input="todo-input"]').type(`${newItem}{enter}`);
        cy.get(`[data-button="Add-Todo"]`).click();
        cy.get(".Toastify>div").should("have.text","Please enter a todo");

      });

You can see from the below output that it checks for an element that has the text “Please enter a todo” when we try to add an empty to-do.

Migrating the React to-do app from Cypress 9 to Cypress 10

We’ll use the same to-do app made with React JS for Cypress 9 to Cypress 10 migration.

You might have inferred from the code that there are two main functions: add todos and remove them.

Are you using Playwright for automation testing? Run your Playwright test scripts instantly on 50+ browser/OS combinations using the LambdaTest cloud. Sign up for free!

Adding a to-do item

Adding a to-do item requires only two checks: Does the to-do list already have the item, and is the new item empty? We have implemented this in the code, and if everything is OK, we will add the new to-do to the to-do list, in this case, an array.

      function addNewTod(newTodo) {
        let flag = 0;
        todoList.forEach((todo) => {
          if (newTodo === "") {
            flag = 1;
            toast.error("Please enter a valid todo");
          }
          if (todo === newTodo || newTodo === "") {
            alert("Oops! You have already added this task");
            flag = 1;
          }
        });

Removing a to-do item

Removing a to-do is straightforward. We will remove the item from the array whenever the user double-clicks an item. We use the filter() method in JavaScript to filter the array list, i.e., the to-do list. The code for removing an item is shown below:

    function removeTodo(event, todoremove) {
        console.log(event.detail);
        if (event.detail === 1) {
          setTodoList(todoList.filter((todo) => todo !== todoremove));
          toast(`Todo ${todoremove} removed`);
          console.log(12345678);
        }
      }

The output of the following code will be like this:

Our to-do app is working fine right now. To ensure our app works for everyone, we need to test it, in this case, E2E testing with Cypress.

We currently have Cypress 9 installed on our application as a dev dependency. We can now upgrade to Cypress 10. We can do it by running the following command.

   npm i -D cypress@10.11.0

Now we can power the Cypress GUI application by running:

   npx cypress open

This will open the GUI, and you can select the end-to-end testing tile to start the test. The GUI will ask to create the files and folders related to Cypress; just click on the proceed button.

For Cypress 10 migration from Cypress 9, we must follow the above-mentioned steps:

Changing the folder name from cypress/integration to cypress/e2e.
Changing the file extension from [filename].spec.[.extension] to [filename].cy.[.extension].
Rename the Cypress support file.
Migrate to the new Cypress configuration file.

Now our folder structure will look like this:

You can clearly see the difference in folder structure compared to Cypress V9.
The E2E *folder is where you write your custom tests. *Testing-todo-app is the folder that we will use to create our custom tests.

Let’s start writing tests for our application with Cypress 10.

We will start by creating a file inside the e2e folder. We will name it todoTest.cy.js. The following is the file that we just created in this Cypress 10 migration tutorial.

   /// <reference types="cypress" />

    describe("example to-do app", () => {
      beforeEach(() => {
        cy.visit("http://localhost:3001");
      });

      it("displays 0 todo items by default", () => {
        // We use the `cy.get()` command to get all elements that match the selector.


    //    checking if we have a heading tag with text Todo App
        cy.get("h1").should("have.text", "Todo App");
      });

      it("can add and remove todo items", () => {
        // We'll store our item text in a variable so we can reuse it
        const newItem = "I want to take my dog for a walk";
        const newItem2 = "I want to go to the restaurant";

        // Let's get the input element and use the `type` command to
        // input our new list item. After typing the content of our item,
        // we need to type the enter key as well in order to submit the input.

        cy.get('[ data-input="todo-input"]').type(`${newItem}{enter}`);
        cy.get(`[data-button="Add-Todo"]`).click();

        cy.get('[ data-input="todo-input"]').type(`${newItem2}{enter}`);


        cy.get(`[data-button="Add-Todo"]`).click();

        // remove a Todo
        cy.get(`[data-Todo="${newItem}"]`).click();
      });

      it("Can add same todo again", () => {
        const newItem = "I want to take my dog for a walk";

        cy.get('[ data-input="todo-input"]').type(`${newItem}{enter}`);

        cy.get(`[data-button="Add-Todo"]`).click();
        cy.get(`[data-button="Add-Todo"]`).click();
      });
    });

We will go through the code and understand how each snippet of code will be reflected in our test.

When writing tests, it might be necessary to group them so that they can be modularized. Cypress’ describe() function is used to accomplish this.

   describe("example to-do app", () => {

         });

There are two arguments to the describe() function, the name of the test and a callback function that includes all the tests.

We include the following code inside that callback function to ensure we go to the specified URL before running each test in this Cypress 10 migration tutorial.

   describe("example to-do app", () => {
      beforeEach(() => {
        cy.visit("http://localhost:3001");
      });

Let’s now run our first test. Our objective is to find an h1 element with the text “Todo App.” We use it() function to accomplish this. The it() function describes a specification or test case with the given title and callback function acting as a thunk.

      it("check if there is a heading H1 element", () => {
        // We use the `cy.get()` command to get all elements that match the selector.


    //    checking if we have a heading tag with text Todo App
        cy.get("h1").should("have.text", "Todo App");
      });

You can run the test by clicking the todoTest.cy.js file in the Cypress automated browser.

This will start the cypress runner to start the test.

We have passed the first test, and Cypress successfully found the < h1 > tag with the text “Todo App.”

The next step in this Cypress 10 migration guide is to add two more tests, one to test whether items can be added or removed and another to test whether the same todo can be added again.

    it("can add and remove todo items", () => {
        // We'll store our item text in a variable so we can reuse it
        const newItem = "I want to take my dog for a walk";
        const newItem2 = "I want to go to the restaurant";

        // Let's get the input element and use the `type` command to
        // input our new list item. After typing the content of our item,
        // we need to type the enter key as well in order to submit the input.

        cy.get('[ data-input="todo-input"]').type(`${newItem}{enter}`);
        cy.get(`[data-button="Add-Todo"]`).click();

        cy.get('[ data-input="todo-input"]').type(`${newItem2}{enter}`);

        cy.get(`[data-button="Add-Todo"]`).click();

        // remove a Todo
        cy.get(`[data-Todo="${newItem}"]`).click();
      });

      it("Can add same todo again", () => {
        const newItem = "I want to take my dog for a walk";

        cy.get('[ data-input="todo-input"]').type(`${newItem}{enter}`);

        cy.get(`[data-button="Add-Todo"]`).click();
        cy.get('[ data-input="todo-input"]').type(`${newItem}{enter}`);

        cy.get(`[data-button="Add-Todo"]`).click();
      });

We have written tests for both of the scenarios, and the cypress spec tab will show us the result of the test.

By hovering over the tests on the left side, you can see that we passed every test and all the states; We are grateful to Cypress for this wonderful feature.

You can now modify the tests, add them, and check to see if they pass or fail.

In the next section of this Cypress 10 migration tutorial, we will learn about performing Component testing in Cypress.

What is Component testing in Cypress?

Component testing is a type of software testing where each part of an application is tested separately to make sure it is functioning properly. Another name for this approach is module testing.

It addresses the various parts or components that make up a software application separately. One of the most frequent types of black box testing carried out by the testing team is component testing. A component test reduces delivery time since each component can be tested independently, reducing defects that may arise after integration.

Cypress 10 now includes first-class support for component testing! The end-to-end test runner and the component test runner were separate executables when we first introduced component testing in an alpha release last year. Component testing has been integrated into the main app of Cypress 10 so that you can select the testing environment you want as soon as Cypress is launched.

The objective of component testing is:

To verify the functionality of each component and ensure everything is working as intended.
Validating all the functions, methods, and overall state flow of the component.
Detecting errors and fixing bugs.
Eliminate all coding errors and logical errors in Component testing before moving to higher levels of testing.

How to run Component testing with Cypress 10?

As soon as the Cypress opens, it asks whether you want to perform E2E or component testing. Configure Component Testing by selecting it and following the instructions.

You will be taken to the browser selection screen after, then click the Start Component Testing button to launch the Cypress automated browser, in this case, Chrome.

After this step, we can go to our codebase and start writing tests for testing our components. I have created a new component instead of having everything in the App.js file.

    import React, { useState } from "react";
    import logo from "./logo.svg";
    import "./App.css";
    import TodosComponent from "./component/TodosComponent";

    function App() {
      return (
        <div>
          <TodosComponent />
        </div>
      );
    }

    export default App;

Now our TodosComponent is the component that we are going to test. We can create a test file by going under the component folder inside the Cypress folder.

We will start testing by using the mount function, which is imported from the Cypress package. The mount() function is responsible for rendering components within Cypress’s sandboxed iframe when using cy.mount() anywhere.

    import { mount } from 'cypress/react'

Let’s write a script that mounts the TodosComponent in the Todos.cy.jsx.

    import TodosComponent from "../../src/component/TodosComponent";
    import React from "react"

    describe("<Counter>", () => {
      it("mounts", () => {
       cy.mount(<TodosComponent/>)
      });
    });

We can now add a component test to check whether we can add or remove an item. The code for that will be as follows:

    describe("<TodosComponent>", () => {
      it("mounts", () => {
       cy.mount(<TodosComponent/>)


          // We'll store our item text in a variable so we can reuse it
          const newItem = "I want to take my dog for a walk";
          const newItem2 = "I want to go to the restaurant";

          // Let's get the input element and use the `type` command to
          // input our new list item. After typing the content of our item,
          // we need to type the enter key as well in order to submit the input.

          cy.get('[ data-input="todo-input"]').type(`${newItem}{enter}`);
          cy.get(`[data-button="Add-Todo"]`).click();

          cy.get('[ data-input="todo-input"]').type(`${newItem2}{enter}`);


          cy.get(`[data-button="Add-Todo"]`).click();

          // remove a Todo
          cy.get(`[data-Todo="${newItem}"]`).click();
      });




    });

The test has run successfully, and the output will be as follows:

You can continue to add components and test each one separately as you go.

How to perform Cypress testing with LambdaTest?

Even though Cypress testing allows for parallel test execution, local setups make it impossible to achieve optimal browser coverage. To use the Cypress framework for Cypress UI testing across various browsers and operating systems. We need an infrastructure to test our application on various browsers and operating systems.

This is where cross browser testing platforms like LambdaTest come into play. LambdaTest is a continuous quality cloud platform that provides developers and testers with the ability to test their applications across on-demand real browsers, devices, and operating systems combinations.

With its high-performing test execution cloud, you can run automated tests using frameworks like Selenium, Cypress, Playwright, Appium, Espresso, and more. You can also perform Cypress parallel testing on 40+ browser versions to accelerate your go-to-market delivery.

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

Now let’s use the LambdaTest platform to test a simple application and watch it in action while performing Cypress 9 to Cypress 10 migration.

Follow these steps if you want to follow along:

Step 1: Clone the Repository

Get started by cloning the cypress-cloud repository.

Step 2: Install all the dependencies

As our application has a lot of dependencies, you must install them all. Use your favorite package manager to install it.

If you are using npm:

     npm install

If you are using yarn:

    yarn install

Step 3: Install the LambdaTest Cypress CLI

LambdaTest’s Cypress CLI enables cross-browser testing with Cypress. You can install the lambdatest-cypress CLI package by running the following command under the project root directory.

    npm install lambdatest-cypress-cli

The folder structure of the Cypress project will be like this.

If you are using Version 9:

    app
    ...
    cypress
    |-- fixtures
    |-- integration
    |-- plugins
    |-- support
    cypress.json
    ...

If you are using Version 10, the folder structure will be as follow

    ...
    cypress
    |-- fixtures
    |-- e2e
    |-- support
    cypress.config.js
    ...
    cypress.json
    ...

Step 4: Create the lambdatest config file.

You can do it manually or run the following command, and it will create a lambdatest-config.json file with some default values to start with.

     npx lambdatest-cypress-cli init

The config file will look like this in the case of version 9: Config file v9.

You can perform Cypress 10 migration by following this Config file

Step 5: Add your LambdaTest username and API token.

You can get your API token from the LambdaTest Profile Section and store it in an environment variable. In this case, for the sake of explanation, we are directly including the values, and it is never recommended to disclose your API secrets.

Step 6: Run this final command to start the test on the LambdaTest platform

You can use the following command to start uploading your test files and then wait for the upload to finish.

After the upload, you will be given a link to view the test being run and the results.

You can visit the link and see the results.

And we used the cloud for our Cypress UI testing!

Cypress test automation best practices

While we are free to use Cypress in our favor, it is advised to adhere to some Cypress best practices to maintain uniformity.

Isolate the test specs so that they are maintainable.
Use data-* attributes to provide context to your selectors and isolate them from CSS or JS changes.
Do not target text content if dynamic.
Use closures to access and store what Commands yield you.
Only test what you control. Try to avoid requiring a 3rd party server. Always use cy.request() to talk to 3rd party servers via their APIs when necessary.
Tests should always be able to be run independently from one another and still pass.
Clean up the state before tests run.
Use route aliases or assertions to guard Cypress against proceeding until an explicit condition is met.

If you’re a developer looking to get started with Cypress, the Cypress 101 certification is for you. The Certification will give you a broad sense of what Cypress is and how it works.

Ready for Cypress 10 migration?

Congratulations on reaching this far! You’re a fantastic reader!!

In this detailed blog on Cypress 10 migration, we looked at how to migrate Cypress to the latest version. Not only did we experiment with some testing, but we also discussed how to test an application with Cypress GUI, test our application on the cloud, as well as best practices to follow while implementing the tests.

Now you know how Cypress 10 migration works, so you can get started with Cypress testing.

Happy Testing!

How To Style And Write CSS In React

AdarshM1024 — Wed, 30 Nov 2022 12:29:13 +0000

React is an extensively preferred frontend UI library used in nearly 50 million projects every month. Backed by Facebook, React has had its dominance in the web development space for over nine years and has several notable customers (ranging from startups to Fortune 500 companies).
Simplicity and flexibility are the two primary reasons that contribute to React’s growing popularity.

Front-end defines the success of any online business since it brings considerable improvement in web performance. It takes only 0.05 seconds for an average user to have an opinion of a business/product by looking at their website. Undoubtedly, it is necessary to have a good UI layout, design, and overall experience on the web.

As per npmjs, React garners close to 15,353,836 weekly downloads, whereas VueJS, its nearest competitor, has 3,334,067 weekly downloads. Also, Angular has only 2,918,034 weekly downloads.

As a React developer, you will usually be working on styling your React application. Being a freelancer, I have made that mistake, and I still regret it! I do not want any front-end developer to commit the same mistakes.

In this detailed tutorial on CSS in React, we will walk you through the various methodologies through which you can style the React application with CSS.

So, let’s get started!

Are you using Playwright for automation testing? Run your Playwright test scripts instantly on 50+ browser/OS combinations using the LambdaTest cloud. Sign up for free!

Getting started with application development using React

To create a React application, the first thing you need is NodeJS, a runtime for JavaScript.

You can download the latest stable version of NodeJS from their official website and install it like a regular application.
Once NodeJS is installed, run the below command on the terminal to know the version of NodeJS:

  node  - -v

After installing NodeJS, run the following command on the terminal.

  npx create-react-app your_app_name

It will create a React app on which we will work during this blog on CSS in React.

Now that you are ready with the React application, the next step is editing the App.js file. At any moment, you can see the results on the browser by running the following command on the terminal:

    npm start

Shown below is the folder structure, which is pretty self-explanatory!

node_modules (Folder): Constitutes the dependencies for React. It is a huge folder with over 1500 subfolders and 15000 files. The overall size is close to 170 MB.
Public (Folder): This is where index.html is located. It is the most important folder since the React framework will insert the corresponding React code in index.html. It is a good practice to store assets like images, videos, and logos in the Public folder.

src: This is where the core React logic resides. You could start editing the React application by making changes to App.js.
package.json: When working on JavaScript projects, package.json is one of the most important files. It has a list of all the dependencies that we would require in the project.

FileName — package. json

    {
      "name": "my-project",      //name of the project
      "version": "0.1.0",           // version of the project
      "private": true,                //Public when you upload your project to npm
      "dependencies": {          //dependencies used in your project
        "@typeform/embed": "^1.36.0",
        "@typeform/embed-react": "^1.17.0",
        "bootstrap": "^5.1.3",
        "cra-template": "1.2.0",
        "framer-motion": "^6.5.1",
        "hamburger-react": "^2.5.0",
        "react": "^18.2.0",
        "react-bootstrap": "^2.4.0",
        "react-dom": "^18.2.0",
        "react-icons": "^4.4.0",
        "react-scripts": "5.0.1",
        "react-select": "^5.4.0",
        "react-slick": "^0.29.0",
        "slick-carousel": "^1.8.1"
      },
      //contains the script for running,building,testing etc
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {    //dependencies that we only need during the development
        "autoprefixer": "^10.4.7",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.4"
      }
    }

package.json is the heart of the NodeJS file. It contains all the important pieces of information about the project. This JSON file consists of the following:

Project name.
Project dependencies.
Project version.
Project description.
Project License.
Versions of different packages used in the project.
Scripts to run the file, and more.

When you install a new package or dependency via npm install, the node package manager will install the latest stable version. Run the following command on the terminal if you want to install a specific package version:

    npm install dependencyname@1.3.4

The status of the React application can be monitored by visiting http://localhost:3000 in the web browser. The default port for React is 3000. Under certain circumstances (e.g., port already in use), you might want to change the port.

You can achieve this by changing the start script in package.json:

As a result of all this, the website will appear as below:

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.

Introduction to CSS

You may have already read a lot about CSS, which stands for Cascading Style Sheets. Without styling, your website would appear like a pale, dull B&W movie that none of us would enjoy watching in today’s times 🙂

A good design can make your business/product look professional and can transform interactions into relationships. It is one of the major drivers of growth and retention. See how an ultimate mobile experience can drive 73% of e-commerce sales.

Can you just imagine your favorite e-commerce shop without any CSS?

Without CSS:

With CSS:

The possibilities with CSS are endless, and with your design skills, you can create wonders for your website — the ideal vehicle to drive experience and sales. Before proceeding to the next section of this CSS in React tutorial, check our CSS cheat sheet tutorial.

Advantages of CSS

So far, we have touched upon the fundamental aspects of CSS. Let’s deep dive into some of the integral benefits offered by CSS:

With CSS, you can make a good and better visual appearance for text and images on your website.
You can manage the website’s overall layout and flow without compromising even a single bit on the friendliness and usability of the website.
By using CSS, you can apply consistent styling across multiple devices to improve the user experience. It ensures that your website is responsive and displays similar behavior on different devices.

Now we have an overall idea about why CSS and the advantages of using CSS, it’s time we look into how to leverage CSS skills in React applications.

Get a Complete End to End Testing(E2E Testing) Tutorial: Comprehensive Guide With Examples and Best Practices!

Introduction to React

React is one of the most used front-end libraries that can be used to create simple landing pages as well as complex enterprise websites.

React (a component-based library) makes it easy to create UI components for every separate section. The website under development makes separate reusable components for each section like header, footer, sidebar, and more.

Community is one of the strong points of the React framework. Having said that, React is not an all-in-one solution; for instance — there is no in-built page routing feature in React.

There are thousands of libraries to support the React ecosystem, like react-router-dom for page routing, **react-redux **for state management, and more.

React, with its huge ecosystem, makes it a wholesome solution for web application development.

How to style and write CSS in React?

Styling is one of the most important aspects of the React application. Having worked on several React applications, I can vouch that most of the time goes into designing the application.

There are five distinct ways in which you can style and write CSS in React:

Inline styles in React
Reusable variables
Using external StyleSheet
CSS Modules
CSS-in-JS

Let’s deep dive into each of these in more detail:

Inline Styles in React

Inline CSS is the widely preferred but less recommended way to style your website. This is not just in the case of React. Even with raw HTML, writing inline CSS makes it difficult to edit in the future.

Inline styling is the best way to try different CSS properties. One key point to remember is that inline styles have got more priority, and they will overwrite any other styles given to them in any manner.

Writing Inline CSS in React and plain HTML has a small difference. In HTML, you will write your style using the style attribute followed by = and then CSS properties enclosed by double quotes or single quotes. In React, we will use double curly braces {{ }} instead of quotes “ ”.

HTML

    <div style='background:blue;color:white'>
              React was created by Jordan Walke in 2013
        </div>

React

          <div style={{background:blue,color:white}}>
              React is now maintained by Facebook
         </div>

A comprehensive UI testing tutorial that covers what UI Testing is, its importance, benefits, and how to perform it with real-time examples.

When to use Inline Styling?

Inline styling is ideal when we are creating a simple website and when you are the only one working on that project. Simply put, inline styling is an absolute no-no for projects involving large distributed teams. Inline CSS in React is preferred when you are testing a particular style.

In short, inline CSS is best suited for learners but not for implementing real-world web projects.

Here is why you should not use inline CSS in React:

Inline CSS cannot be reused, i.e., you must write the same CSS code repeatedly for the same styles.
Inline CSS does not provide browser cache advantages.
Some vital CSS properties like pseudo-codes, pseudo-classes, media queries, etc., are not allowed to be used in inline styles.

Writing Inline CSS in React is not wrong, but adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy.

Inline CSS Example

FileName — App.jsx

    import React from 'react';
    function App() {
     return (
          <main style={{padding:"5px"}}>
          <p style={{ fontWeight: "bold",fontFamily:"sans-serif" }}>
    Elon Musk </p>
          <p>18.6k Tweets</p>
          <img alt=""
            style={{ width: "100%" }}
            src='https://pbs.twimg.com/profile_banners/44196397/1576183471/600x200'
          />
          <img alt=""
           style={{
              width: "150px",
              borderRadius: "50%",
              border: "4px solid white",
              marginTop: "-45px",
            }}
            src='https://pbs.twimg.com/profile_images/1529956155937759233/Nyn1HZWF_400x400.jpg'
          />
          <p style={{ fontWeight: "bold" }}>Elon Musk</p>
          <p style={{ marginTop: "-15px" }}>@elonmusk</p>
          <div style={{ display: "flex" }}>
            <p style={{ margin: "5px",fontWeight: "bold" }}>
              114 <span style={{ fontWeight: "normal" }}>Following</span>
            </p>
            <p style={{ margin: "5px",fontWeight: "bold" }}>
              100.6 M <span style={{ fontWeight: "normal" }}>Followers</span>
            </p>
          </div>
        </main>
      );
    }
    export default App;

Output:

Run Appium mobile testing of native and web apps. Improve your app quality with instant access to real devices on LambdaTest. Register now for free!

Reusable variables

Replicating the same code is not a good idea in the programming world. That’s the same case in CSS too.

Here, you could use object variables instead of writing the same code repeatedly for a similar UI component. All you have to do is create the object variable to store a particular style and use the variable names, not the style itself. This variable now has predefined styles, and you can use it as often as you want.

The example below shows that the same divStyles is used for two different div elements.

    const Styles = {
      divStyles: {
        color: "red",
        backgroundColor: "black",
        fontSize: "20px",
        fontWeight: "bold",
        textAlign: "center",
        padding: "1px",
        margin: "10px",
      },
      pStyles: {
        color: "Black",
        backgroundColor: "white",
        fontSize: "20px",
        fontWeight: "bold",
        textAlign: "center",
        padding: "10px",
        margin: "10px",
      },
    };

    function App() {
      return (
        <div style={Styles.divStyles}>
          <p style={Styles.pStyles}>
            React is the most loved JavaScript Library, according to StackOverflow
            survey' 2022
          </p>
          <p style={Styles.pStyles}>
            React is the most starred Front-end library on Github
          </p>
          <p style={Styles.pStyles}>3 Million+ React projects arise in one week </p>
        </div>
      );
    }

    export default App;

When adding style to a website, one of the major goals should be to use the same CSS class multiple times for similar elements. While implementing CSS in React, we use the object variables to achieve multiple styling in one go.

The advantage here is that we will reduce many redundant lines of code, thereby improving the code’s maintainability, reliability, and readability.

Output:

From the syntax, you might have noticed that inline CSS in React is still being used, owing to which we cannot use pseudo-classes, pseudo-elements, etc.

One thing to note is that if there are two or more kinds of styling (Inline + External) to the same element, Inline CSS in React will have a higher preference over the other ones.

External CSS

This is one of the preferred ways of writing CSS in React. Instead of writing the CSS code inside HTML (i.e., Inline CSS), we separate the CSS part into a separate file which is simply imported into the React component.

The advantage of external stylesheets is that we get complete control over the CSS properties (e.g., pseudo-selectors), which is impossible with inline CSS in React.

Here all we have to do is create a filename with a .css extension and import it into the React file.

Now we can give className and id to point which styles should point to which element. It is important to note that the class attribute is used in HTML, whereas className is used in React.

className: Used to style two or more elements with the same CSS in React. Different elements can have the same className
Id: Used to style a particular element. Different elements cannot have the same IDs, id’s are unique.

One thing that we should focus on is the naming convention for classes and IDs. There is a good chance that if we are writing complex web UI, we may unknowingly create multiple className with the same name.

A naming convention called BEM is the answer to the problem listed above!

Test your Puppeteer Testing scripts online. Deploy a quality build faster by running automated checks across over 3000+ browsers and OS combinations with the LambdaTest cloud. Try for free!

Naming Convention — BEM

BEM stands for Block Element Modifier. Using proper naming conventions will prepare you for the changes in the design of the website

Block Block Refers to a standalone entity. Think of Block as a container that has several children.

Element Parts of a block that have no standalone meaning. Any element is semantically tied to its block.

Modifier They are the flags on blocks or elements. Use them to change appearance, behavior, or state.

BEM is one of the most commonly used naming conventions. You can name it according to your logic.

CSS Modules

A CSS Module is a CSS file with a .module.css extension in which all class names and animation names are scoped locally by default. There is no global CSS. CSS Modules let you write styles in CSS files but consume them as JavaScript objects for additional processing and safety.

One huge advantage of the CSS modules is that you would not witness any className conflicts. The CSS properties we target are converted into unique class names during compilation.

CSS Modules In React Application

While working with CSS in React, you can use CSS Modules by creating a [name].module.css file and import it into the specific React Component file.

FileName — App.js

    import Styles from "./App.module.css";

    export default function App() {
      return (
        <div className={Styles.block}>
          <h2>
            React is a free and open-source front-end JavaScript library for
            building user interfaces based on UI components. It is maintained by
            Meta and a community of individual developers and companies
          </h2>
        </div>
      );
    }

App.module.CSS

    block {
      display: "block";
      width: 70vw;
      font-family: sans-serif;
      max-width: fit-content;
      background-color: black;
      border-radius: 5px;
      color: white;
      font-size: 24px;
      text-align: center;
      margin: auto;
      margin-top: 10px;
      padding: 5px;
    }

Output:

Here, you can see we have our App.js file and App.module.css file. Though this seems normal, the fun starts when you check it in the browser.

As you can see, we didn’t specify a class name in the CSS. Here our class name is .._src_App_module__block which is further transformed into a Unique Identifier. This will remove any chances of name collision in the React App.
CSS Modules are a great way to make CSS have local scope; everything is done during the compilation. Deciding good class names will be a thing of the past with CSS modules 🙂

In this XCUITest tutorial, learn about XCUITest framework and its benefits for mobile automation testing. Take a look at how XCUITest works and see how to use it to test your mobile applications.

CSS-in-JS

JSX would sound familiar in case you already know React. JSX looks like HTML, but it is not. Unlike HTML, it comes with the full power of JavaScript. Along similar lines, CSS in JS comes with some extra features to CSS.

CSS-in-JS is one of the approaches to write CSS, which tries to eliminate some of the blockers with plain CSS, such as scoping, portability, and dynamic functionality.

A well-designed CSS-in-JS library will group all its CSS properties and the dependencies associated with it. All style logic is now separate and reusable.

The common features of all CSS-in-JS libraries are:

Scoped CSS — You may have noticed that there will be unique names for classes when you use this kind of library. This makes it easy to handle name collisions. Since there is no concept of global styles, it does not accidentally impact any unintended element.
No inline styles — The most popular CSS-in-JS libraries are not using inline styles, due to which there is full control over all the CSS properties.
Logic separation — The layout and design/UI logic are separated, making the code easier to read and format.

Let’s now look into some popular CSS-in-JS libraries:

Styled JSX

Styled JSX is a very small library built and maintained by the NextJS team. It allows you to write encapsulated and scoped CSS in React to style your component(s).

Run the below-mentioned command to install styled JSX:

   npm install --save styled-jsx

Post that, add styled-jsx/babel to plugins in your babel configuration:

   {
      "plugins": ["styled-jsx/babel"]
    }

Now you can start using styled jsx in your React application.

Look at an example where styled jsx is used for styling the React application:

   import "./styles.css";

    export default function App() {
      return (
        <div className='App'>
          <h1>
            Hello World
            <style jsx>
              {`
                h1 {
                  color: whitesmoke;
                  background: black;
                }
                .App {
                  background: orange;
                }
                h2 {
                  color: white;
                }
                img {
                  border-radius: 50%;
                  width: 250px;
                  height: 250px;
                  object-fit: contain;
                }
                img:hover {
                  object-fit: cover;
                }
              `}
            </style>
          </h1>
          <h2>Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 40 libraries out there, each of them offers a unique set of features.</h2>
          <img
            alt=''
            src=https://cdn.statically.io/img/austingil.com/f=auto%2Cq=70/wp-content/uploads/JavaScript-Blog-Cover.png'
          />
        </div>
      );
    }

Output:

styled-component

Styled-components is a library built for React and React Native. It allows you to use component-level styles in your application. What this means is that you can create styles for particular UI components. styled-components is a mixture of JavaScript and CSS i.e. CSS-in-JS

Let’s now look at start working with styled-components:

FileName : App.js

   import "./styles.css";
    import styled from "styled-components";

    const Button = styled.a`
      /* This renders the buttons above... Edit me! */
      display: inline-block;
      border-radius: 3px;
      padding: 1rem;
      margin: 0.5rem 1rem;
      width: 11rem;
      background: black;
      text-decoration: none;
      font-size: 18px;
      color: white;
      border: 2px solid white;

      &:hover{
        color:brown;
        background:yellow;
      }
    `;
    const P = styled.p`
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      color: purple;

    `;
    export default function App() {
      return (
        <div>
          <P>As a Developer, which one do you use the most?</P>
          <Button
            href="https://github.com/styled-components/styled-components"
            target="_blank"
            rel="noopener"
            primary
          >
            GitHub
          </Button>

          <Button href="/docs">Documentation</Button>
          <Button href="/docs">Twitter</Button>
        </div>
      );
    }

Output:

These two are the most common CSS-in-JS libraries. Several other CSS-in-JS libraries like JSS, Emotion, Styletron, etc., allow you to write component-level CSS using JavaScript.

Test your website or web app online for iOS browser compatibility. Perform seamless cross browser testing on the latest iPhone tester. Try for free!

Top CSS Frameworks

Styling is not just restricted to writing raw CSS. You can also use various frontend CSS libraries like Tailwind CSS, Bulma, Ant Design, etc. Using the best CSS frameworks and libraries is now quite popular since it is developer friendly and reduces the development time by a huge margin.

Some of the best CSS frameworks are:

Tailwind CSS

Tailwind CSS is one of the most extensively-used CSS frameworks. It is a utility-first framework with nearly 13 million monthly downloads. It gives you flexibility and freedom to choose your website’s design.

Tailwind CSS has several advantages, namely that it can be customized to meet individual needs. Tailwind CSS comes with its default configuration, but you can override those. Tailwind’s utilities and components are easily customizable.

Tailwind uses a mobile-first breakpoint system which means you can specify prefixed utilities like sm: md: lg: that only take effect at the specific breakpoint and above.

FileName — App.js

    export default function App() {
      return (

    <div
    class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">

        <img
        src="/img/beams.jpg"
        alt=""
        className="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" />
        <div
        className="relative bg-white w-fit m-auto p-2 shadow-2xl shadow-red-300">
            <img
            src="https://cdnb.artstation.com/p/assets/images/images/043/120/123/large/wizix-nakamoto-master-full.jpg?1636383169"
            className="w-64 h-64 rounded-full"/>
            <p className="text-2xl text-center font-bold">Satoshi Nakamoto</p>
            <p className="text-xl text-center font-semibold">I found bitcoin</p>
        </div>
        </div>

      );
    }

Output:

Even though we are using Inline styles here, it is pretty neat and easy to manage. Tailwind CSS gives us class names for a particular style. When using Tailwind CSS, everything is under your ( read developer’s) control. You can also use pseudo-classes and pseudo-selectors with Tailwind CSS.

React Bootstrap

React-Bootstrap replaces Bootstrap JavaScript. React-Bootstrap is one of the best React component libraries that provides Bootstrap components as React components. Each component has been built from scratch as a true React component.

It is one of the best solutions and the most used UI library for React. More than 1.3 million weekly downloads are there for React-Bootstrap.

For JavaScript web applications, React dominates, while Bootstrap dominates CSS web frameworks, powering millions of websites worldwide.

React Bootstrap includes several components you can use without having to create them from scratch, such as navbars, buttons, forms, cards, etc.

FileName — App.js

    import React, { Component } from "react";

    //react bootstrap components
    import CardDeck from "react-bootstrap/CardDeck";
    import Card from "react-bootstrap/Card";
    import Container from "react-bootstrap/Container";
    import Row from "react-bootstrap/Row";

    //scss
    import style from "./styles.module.scss";

    //data for post
    import data from "./data.json";

    export default class DefaultPost extends Component {
      render() {
        return (
          <>
            <Container fluid={true}>
              <Row>
                <CardDeck className=' no-gutters '>
                  {data.map((postData) => {
                    console.log(postData);
                    return (
                     <Card key={postData.id}>
                       <Card.Img variant='top' src={postData.image} />
                        <Card.Body>
                          <Card.Title className={style.tile}>
                          {postData.title}
                          </Card.Title>

                         <Card.Text className={style.para}>
                          {postData.body}
                          </Card.Text>
                        </Card.Body>
                      </Card>
                    );
                  })}
                </CardDeck>
              </Row>
            </Container>
          </>
        );
      }
    }

Output:

Material UI

Instead of you building a new UI component, Material UI creates an individual component that can be tweaked to achieve the desired UI output.

A Material-UI component only injects the styles it needs to display and is self-supporting. They don’t rely on any global style-sheets concept. Material UI can also be used with other frameworks like Angular and vue.js to help you ship the new UI features faster and make them responsive and adaptive.

In Material UI, user interfaces are based on high-quality digital experiences that provide a high-quality digital experience while developing front-end graphics. It is based on Google’s Material Design.

With over 79,900 plus stars on GitHub, Material UI is one of the top User Interface libraries for React.

FileName — App.tsx

    import * as React from "react";
    import Container from "@mui/material/Container";
    import Typography from "@mui/material/Typography";
    import Box from "@mui/material/Box";
    import Link from "@mui/material/Link";
    import Stack from '@mui/material/Stack';
    import Rating from '@mui/material/Rating';
    import CircularProgress from '@mui/material/CircularProgress';
    import Card from '@mui/material/Card';
    import CardActions from '@mui/material/CardActions';
    import CardContent from '@mui/material/CardContent';
    import CardMedia from '@mui/material/CardMedia';
    import Button from '@mui/material/Button';


    function Copyright() {
     return (
       <Typography variant="body2" color="text.secondary" align="center">
         {"Copyright © "}
         <Link color="inherit" href="https://lambdatest.com/">
           Your Website
         </Link>{" "}
         {new Date().getFullYear()}.
       </Typography>
     );
    }

    export default function App() {
     const [value, setValue] = React.useState<number | null>(2);

     return (
       <Container maxWidth="sm">
         <Box sx={{ my: 4 }}>
           <Typography variant="h4" component="h1" gutterBottom>
             Material UI{" "}
           </Typography>

           <Typography variant="h4" component="h1" gutterBottom>
             The React UI library you always wanted{" "}
           </Typography>

           <Card sx={{ maxWidth: 345 }}>
         <CardMedia
           component="img"
           height="140"
           image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
           alt="green iguana"
         />
         <CardContent>
           <Typography gutterBottom variant="h5" component="div">
             Lizard
           </Typography>
           <Typography variant="body2" color="text.secondary">
             Lizards are a widespread group of squamate reptiles, with over 6,000
             species, ranging across all continents except Antarctica
           </Typography>
         </CardContent>
         <CardActions>
           <Button size="small">Share</Button>
           <Button size="small">Learn More</Button>
         </CardActions>
       </Card>

           <Stack sx={{ color: 'grey.500',marginTop:"12px" }} spacing={2} direction="row">
         <CircularProgress color="secondary" />
         <CircularProgress color="success" />
         <CircularProgress color="inherit" />
       </Stack>
           <Box
         sx={{
           '& > legend': { mt: 2 },
         }}
       >
         <Typography component="legend">Give us 5 star</Typography>
         <Rating
           name="simple-controlled"
           value={value}
           onChange={(event, newValue) => {
             setValue(newValue);
           }}
         />
       </Box>

           {/* <ProTip /> */}
           <Copyright />
         </Box>
       </Container>
     );
    }

Output:

There are many more UI components and CSS libraries that work well with React.

As per my experience working with global clients, I can confidently mention that there is no single best solution. The choice depends on the project and the developer’s ease with the framework. You have to decide how to style and write CSS in React!!

A complete WebDriver tutorial that covers what Webdriver is, its features, architecture and best practices.

Using LT Browser to test CSS in React

To test our project, we should use tools that make it easier to see what the pages look like and test accessibility and usability of the website or web app.

LambdaTest’s cloud-based cross browser testing helps you deliver hassle-free, user-friendly, and responsive web experiences across all browsers, operating systems, and real devices. It enables you to perform web testing on an online browser farm of 3000+ real browsers and operating systems.

You can also Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around automated browser testing, Selenium automation, Cypress automation, CI/CD, and more.

LambdaTest provides a comprehensive solution with its mobile-friendly testing tool to perform responsive testing of your website. LT Browser comes loaded with 50+ pre-installed mobile-friendly viewports, and advanced developer tools for testing react application’s responsiveness.

Wrapping It Up!

Congratulations on reaching this far! You’re a fantastic reader!!
In this detailed blog on CSS in React, we looked at how we can make our application look beautiful and pretty. Not only did we experiment with styling CSS in React, but we also discussed various best practices to implement.

Now you know how to style your application in the most effective & efficient way.

Happy Styling!