DEV Community: AmanMandal1

CSS Color-Contrast(): A Step-By-Step Guide

AmanMandal1 — Thu, 25 Jul 2024 14:09:44 +0000

Have you ever come across a website and literally got frustrated because you were having trouble using it? Maybe because the text size was too small, or perhaps it’s using some WebGL/Three.js technology that your browser doesn’t support, or the font color and contrast were too weird.

If you think back to these annoying experiences where you could not navigate through a website correctly, there’s a high probability that you’ve experienced inaccessibility in one form or another. It creates an overlap between unpleasant user experience and inaccessibility.

For example, if you found yourself struggling to read small texts on a particular website, the chances are a visually impaired person wouldn’t be able to read at all.

And somehow, if you are a designer and manage to design a website with a better font size, you would improve the experience and accessibility for all the users, including those with visual impairments. To build and launch an accessible website, the CSS color-contrast() feature can help developers provide adequately contrasting and accessible user interfaces where everyone can easily access and use information and services.

By considering the needs of visually impaired and disabled individuals during the design process, we can build websites that are easy to navigate and understand for everyone. This means using clear and concise language, providing alternative text for images, and using structured layouts that are easy to understand.

By following these principles, we can create an inclusive web accessible to all users and promote equality and inclusivity. And in this guide, we particularly see how the CSS color-contrast() helps us to create accessible user interfaces.

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.

What is Accessibility?

The term ‘Accessibility,’ sometimes shortened to Ally, means the web design that works for everyone despite their language, location, ability, or hardware (device). Accessible design is not just about accommodating attention to people with permanent disabilities but creating a seamless experience for all users regardless of their abilities. It’s about designing a website that is easy to navigate, understand, and use for everyone, including those with physical impairments.

Accessibility is crucial for creating a positive user experience for all individuals, including those with impairments. By ensuring that all users can easily navigate and access the information they need, we are promoting inclusivity and equality in the digital space. This benefits those with special needs and enhances the overall user experience. Check our tutorial on accessibility testing to learn more.

According to a survey by the World Health Organization, approximately 16% of the world’s population lives with some form of disability, which is expected to increase with an aging population. This means that a significant proportion of internet users may have difficulties accessing traditional websites.

By designing for accessibility, we can not only make the internet a more inclusive place for people with disabilities but also create new opportunities for businesses. Accessible websites can increase the potential customer base, provide a better user experience, and improve the brand reputation.

One way to achieve this is by adhering to the Web Content Accessibility Guidelines (WCAG) developed by the World Wide Web Consortium (W3C). These guidelines provide specific recommendations for creating accessible digital content, including guidelines for text contrast.

The WCAG recommends a minimum contrast ratio of 4.5:1 between text and its background to ensure that text is easy to read for all users, including those with visual impairments. By following these guidelines, designers can create websites that are accessible and user-friendly for all users, regardless of their abilities.

So, considering the contrast ratio of text and background will not only enhance the user experience of visually impaired people and all users in general. And this ease of use, specifically considering visually impaired individuals, is the foundation for creating accessible modern web designs.

Why is Web Accessibility important?

Many designers used to think that accessibility is a ‘nice to have’ feature when designing, but now accessibility is no longer considered an optional feature and has become a necessity for many organizations.

According to a report by the WebAIM organization, 96.8% of home pages studied had WCAG2 failures. Having accessibility at the top of the mind while designing a user interface (UI) will improve the user experience for not only disabled individuals but also for the general user as well.

By the way, It’s one thing to require alt text on an image element or a label for an input element, but enforcing color palettes is entirely different. So, now let’s look at how this CSS color-contrast() will help us with that!

LambdaTest's online mobile emulators allow you to seamlessly test your mobile applications, websites, and web apps on mobile browsers and devices, without the need for a physical device. Try our emulator online now.

Subscribe to the LambdaTest YouTube Channel and stay updated with the latest tutorials around Selenium testing, Playwright, Appium, and more.

Overview of CSS color-contrast() function

While writing this article, CSS color-contrast() is an experimental feature, and it’s a part of CSS Color Module Level 5.

Currently, the CSS color-contrast() feature is only available in Safari (TP). And you can turn on the feature in the Develop and Experimental Features menus.

Source

Note: Below are CodePen examples that may not work if you are not using the above-recommended browser.

The main purpose of this feature is to select the ideal contrasting color from a list when compared against a base color.

Syntax:

 color: color-contrast(#505050 vs #fff, #000 )

Our article refers to the first parameter as the “base color” and the second parameter as the “color list.” The CSS color-contrast() function can accept any browser-supported CSS color formats like

Hexadecimal (#ff3300)
RGB (rgb(255, 0, 0))
RGBA (rgba(25, 32, 65, 0.86))
HSL colors (hsl(120, 100%, 125%))

There’s also a third parameter to the function which is target contrast, but we will talk about it in the later part of this blog.

Getting Started with CSS color-contrast()

The CSS color-contrast() function ensures that text on a webpage has enough contrast with its background for easy readability. This is particularly important for visually impaired users who may struggle to read text with low contrast.

From Rachel Andrew’s talk at AxeCon 2022, New CSS With Accessibility in Mind, we come to know how big of an impact a CSS feature can have in the world of accessible design.

Rachel also demoed the new feature by dynamically defining text colors based on the background colors. Here is the CodePen example for CSS color-contrast().

So, let’s take a quick look at this feature by setting some background colors and text colors.

:root {
        --primary-background: #1e1e1e;
      }


      .content {
        Background-color: var(--primary-background);


        color: color-contrast(var(--primary-background) vs #fff, #000);
      }

In the above code block, we defined the –primary-background custom property as a shade of dark grey, #1e1e1e. And then, we used the same property as the base color in the color-contrast () function and compared it against each item in the color list to find the highest contrasting value.

Now let’s take it a little further and try to experiment with the function. We can effectively chain the color-contrast () functions by simply using the result of the base color of another function. This sounds tough, but let’s take the previous example of .content only and try to chain it!

A comprehensive end-to-end Testing tutorial that covers what E2E Testing is, its importance, its benefits, and how to perform it with real-time examples.

:root {
        --primary-background: #5e5c5c;
        --primary-color: color-contrast(
          var(--primary-background) vs #fff,
          #000
        );
      }


      .content {
        background-color: var(--primary-background);



  color: var(--primary-color);
      }


      .content > p {
        color: color-contrast(var(--primary-color) vs #fff, #000);
      }

In the above code block, we defined the –primary-background custom property as a shade of dark grey, and we use the same custom property as the base color in the color-contrast() function and then compared it with the items in the color list, i.e., white and black and stored it in a custom variable called –primary-color. Then in the .content class, we used the background color and the color as variables, but here comes the interesting part!

Inside the content class, we changed the text color of all the paragraphs (p tag) by chaining the color-contrast () function. We simply used the –primary-color variable, i.e., a color derived using the color-contrast () we defined earlier in the root as the base color. We compared it with the items in the color list.

Here’s the complete 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=device-width, initial-scale=1.0" />
    <title>Blog</title>
  </head>
  <body>
    <div class="container">
      <h2>CSS color-contrast() demo</h2>



      <div class="content">
        <p>
          A simple paragraph example for the css color contrast function! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima molestias
        ullam voluptas et obcaecati sapiente veritatis fugit exercitationem
          dolorem illo quidem sit soluta, tempore
        </p>
      </div>
    </div>
</body>
</html>

CSS:

:root {
        --primary-background: #505050;
        --primary-color: color-contrast(
          var(--primary-background) vs #fff,
          #000
        );
        /* --primary-color: white; */
      }


      body {
        margin: 0;
        padding: 0;
      }


      .container {
        width: 450px;
        margin: 0 auto;
        margin-top: 50px;
        border: 1px solid gray;
        font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
      }


      .container > h2 {
        padding-left: 20px;
        font-size: 2rem;
      }


      .content {
        background-color: var(--primary-background);
        color: var(--primary-color);
        padding: 20px;
      }


      .content > p {
        line-height: 1.4rem;
        font-size: 1.2rem;
        margin: 0;
        color: color-contrast(var(--primary-color) vs #fff, #000);
      }

<div class="container">
      <h2>CSS color-contrast() demo</h2>

      <div class="content">
        <p>
          A simple paragraph example for the css color contrast function! Lorem
          ipsum, dolor sit amet consectetur adipisicing elit. Minima molestias
          ullam voluptas et obcaecati sapiente veritatis fugit exercitationem
          dolorem illo quidem sit soluta, tempore
        </p>
      </div>
    </div>

The above code is an example of how to use the CSS color-contrast() function to ensure that text color meets the minimum recommended contrast ratio as defined in the WCAG. It uses the CSS color-contrast() function to compare the contrast ratio of the text color against the background color and assigns a new class to the text if the contrast ratio is not met. This helps ensure that text is legible for all users, including those with visual impairments.

By using the CSS color-contrast() function, the code can automate the process of checking for contrast ratios and enhance the user experience for all users. The above code is an example of how to implement accessibility features in a website. It adds value to accessibility by providing a simple and efficient way to ensure that text is legible for all users, including those with visual impairments.

But we can take it further using the ::selection pseudo-element. Here’s how we can implement it.

HTML:

<div class="container">
      <h1>CSS Color-Contrast() ::Selection</h1>


      <article class="article article-top">
        <h2>Selenium Test Automation Cloud</h2>
        <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>
      </article>


      <article class="article article-bottom">
        <h2>Cypress Automation Testing</h2>
        <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>
      </article>
    </div>

CSS:

    .content {
        --content-bg: #eef5ff;
        --content-color: color-contrast(var(--content-bg) vs #fff, #000);


        background: var(--content-bg);
        color: var(--content-color);
        padding: 0.5rem 1rem;
        border: 1px solid black;
        border-radius: 12px;
        margin-bottom: 12px;
      }


      .content:last-of-type {
        --content-bg: #4992af;
      }


      .content::selection {
        @supports (background: color-contrast(#000 vs #fff, #eee)) {
          background: color-contrast(var(--content-color) vs #8fc8de, #595959);
        }
      }


      :root {
        --body-base: #fbf8cc;
        --color-primary: #8fc8de;
        --scrollbar-bg: #222;
      }


      body::-webkit-scrollbar {
        width: 10px;
      }
      body {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary) var(--scrollbar-bg);
      }
      body::-webkit-scrollbar-track {
        background: var(--scrollbar-bg);
      }
      body::-webkit-scrollbar-thumb {
        background-color: var(--color-primary);
        border-radius: 6px;
        border: 3px solid var(--scrollbar-bg);
      }


      html,
      body {
        color: #000;
        font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
          "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        font-size: 100%;
        letter-spacing: 0.25px;
        line-height: 1.75;
        margin: 0;
        padding: 0;
      }


      body {
        background: rgb(194, 226, 228);
        block-size: 100%;
        display: grid;
        min-block-size: 100vh;
        place-items: center;
      }


      a {
        color: #c8553d;
        text-decoration: underline 1px dashed;
        text-underline-offset: min(5px, 1em);
      }


      a:focus {
        outline: 1px solid currentColor;
        outline-offset: 3px;
      }


      a:hover {
        color: #131313;
      }


      h1,
      h2 {
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
          sans-serif;
        line-height: 1.25;
      }


      .container {
        inline-size: min(750px, 50vw);
      }

<div class="container">
      <h1>CSS Color-Contrast() ::Selection</h1>

      <article class="article article-top">
        <h2>Selenium Test Automation Cloud</h2>
        <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>
      </article>

      <article class="article article-bottom">
        <h2>Cypress Automation Testing</h2>
        <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>
      </article>
    </div>

In the above code block, we used the CSS color-contrast() function with the ::selection pseudo-element, and as you can see how effective it is!

But the color-contrast() function isn’t limited to only comparing HEX codes (#000000). The previous example can be tweaked to use different color types simultaneously while returning the same results.

:root {
        --content-bg: rgb(43, 23, 244);
        --content-color: color-contrast(
          var(--content-bg) vs #fff,
          hsl(0, 100%, 12%)
        );
      }


      .content {
        background-color: var(--content-bg);
        color: var(--content-color);
      }


      .content::selection {
        background: color-contrast(
          var(--article-color) vs hsl(0, 1%, 26%),
          white
        );
      }

The color-contrast() function can simply chain HSL colors, RGBA colors, RGB colors, etc. at the same time without giving any potential errors. So, because of this particular feature, working with contrasts will be easier and more accessible.

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.

CSS Color-Contrast() with Pseudo Classes

We have used the ::selection pseudo-element with CSS color-contrast() function, and setting colors dynamically while selecting fonts is fascinating. But it’s more of a static thing, like text colors and backgrounds won’t change after they are rendered.

So, let’s look at something much more intriguing, i.e., changing contrasts on interactive elements and their CSS pseudo-classes.

When navigating through a website, we sometimes use only our keyboard, and there are a variety of tab stops along the way, like buttons, input elements, links inside the body, and maybe a linked image or a card. While each element must have a compliant focus indicator, it’s not easy to create a focus pseudo-element for all the elements present. And here, color-contrast() can help!

:root {
        --background-primary: #737272;
        --background-button: #1a73e8;
        --button-text-color: color-contrast(
          var(--background-button) vs #fff,
          #000
        );
        --button-hover: #13427e;
        --color-list: var(
          var(--background-button),
          var(--button-text-color),
          rgb(158, 113, 113),
          rgb(93, 88, 88)
        );
      }


      .rounded-btn {
        background: var(--background-button);
        color: var(--button-text-color);
      }


      .rounded-btn:hover {
        background-color: var(--button-hover);
      }


      .rounded-btn:focus {
        box-shadow: 2px 1px 23px 3px
          color-contrast(var(--background-primary) vs var(--color-list));
      }

Let’s see what is going on in the above snippet.

The — background-button custom property is used as the base color in the color-contrast() function for selecting the value of — button-text-color. Anytime the — background-button changes, the custom — button-text-color will also change because they are chained. Then we defined — button-hover custom property for the :hover pseudo-element.

Now comes one of the most important pseudo-element when talking about accessibility, the :focus element. The :focus style is where the color-contrast() function can be expanded by using the — background-primary custom property as the base color in the function. It’s compared to the current style of button, which provides the ability to have contextually-aware focus styles.

Let’s take a look at the example and try to understand it better.

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>Blog</title>
  </head>
  <body>
    <h1>CSS Color-Contrast() :hover & :focus pseudo-classes</h1>
    <div class="container">
      <h3>Selenium Test Automation Cloud</h3>
      <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.
        browser.
      </p>


      <button class="btn">Test Online</button>
    </div>
  </body>
</html>

CSS:

:root {
        --body-base: #131e25;
        --color-primary: rgba(255, 124, 0, 1);
        --scrollbar-bg: #222;
      }
      html,
      body {
        color: #fff;
        font-family: "Barlow", sans-serif;
        font-size: 100%;
        letter-spacing: 0.25px;
        line-height: 1.75;
        margin: 0;
        padding: 0;
      }


      .container {
        width: 500px;
        border: 1px solid lightgray;
        padding: 20px;
        border-radius: 12px;
        background-color: #2d043a;
      }


      .container > h3 {
        color: rgb(181, 210, 212);
        font-size: 1.5rem;
      }


      .btn {
        --btn-base: #76d8ff;
        --btn-color: color-contrast(var(--btn-base) vs #fff, #000);
        --btn-gradient: linear-gradient(
          180deg,
          rgb(94, 150, 223) 0%,
          rgb(27, 83, 87) 100%
        );


        background: var(--btn-base);
        background: var(--btn-gradient);
        border: 5px solid var(--body-base);
        border-radius: 12px;
        color: var(--btn-color);
        padding: 1em 2em;
        font-size: 14px;
      }


      .btn:hover {
        --btn-base: #0079b1;
        --btn-gradient: linear-gradient(
          180deg,
          rgb(38, 88, 196) 0%,
          rgb(2, 53, 112) 100%
        );


        background: var(--btn-base);
        background: var(--btn-gradient);
        cursor: pointer;
      }


      .btn:focus {
        box-shadow: 0 0 1px 3px
          color-contrast(var(--body-base) vs var(--btn-base), #bbb);
      }
      .btn:active {
        opacity: 0.95;
        transform: scale(0.98);
        transform-origin: center;
      }


      body {
        background: #96a1a8;
        block-size: 100%;
        display: grid;
        min-block-size: 100vh;
        place-items: center;
      }


      h1,
      h2 {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        line-height: 1.25;
      }


      section {
        inline-size: min(750px, 50vw);
      }

 <body>
    <h1>CSS Color-Contrast() :hover & :focus pseudo-classes</h1>
    <div class="container">
      <h3>Selenium Test Automation Cloud</h3>
      <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.
        browser.
      </p>

      <button class="btn">Test Online</button>
    </div>

  </body>
</html>

As you can see in the above example, we have used the color-contrast() function with pseudo-classes. Stephanie Eckle’s presentation on “Modern CSS Upgrades To Improve Accessibility” provides a detailed and clear overview of various CSS upgrades that can improve accessibility for users. The presentation covers topics such as CSS color-contrast(), semantic HTML, and responsive design and offers clear examples to illustrate the concepts. The presentation is a great resource for those looking to improve the accessibility of their websites.

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

Target Contrast Ratio

In the beginning of this article, I talked about the optional third parameter for the CSS color-contrast() function. Now let’s dig deeper into this feature.

The optional third parameter for the color-contrast() function defines a target contrast ratio. The parameter accepts either a keyword — AA, AA-large, AAA, and AAA-large — or a number. When a target contrast is defined, the first color from the color list that meets or exceeds it is selected.

Let’s take a look at an example to understand the feature properly.

HTML:

<body>
    <section class="container">
      <h1>Target Contrast Ratio</h1>
      <p>
        CSS color-contrast() function is having a third parameter called as
        <span style="color: red">Target contrast ratio</span> . This feature is
        only available in Safari Browser right now, so if you are using any
        other browser this won't work!
      </p>


      <div class="sample-block">
        <p>Target Ratio: <span>AA (4.5)</span></p>
      </div>


      <form>
        <label>
          Ratio Keywords
          <select id="ratios">
            <option value="AA (4.5)" selected>AA (4.5)</option>
            <option value="AA-Large (3)">AA-Large (3)</option>
            <option value="AAA (7)">AAA (7)</option>
            <option value="AAA-Large (4.5)">AAA-Large (4.5)</option>
          </select></label
        >


        <label>
          Custom Ratio
          <input
            id="slider"
            type="range"
            min="0"
            max="20"
            value="4.5"
            step="0.1"
          />
        </label>
      </form>
    </section>


    <style>

CSS:

body {
        --contrast-target: AA;
      }


      .sample-block {
        --color-set: #001908, #005f73, #b5e62e, #bff5e3, #544107, #ee9b00;
        --base: color-contrast(
          var(--body-base) vs var(--color-set) to var(--contrast-target)
        );


        background: var(--base);
        display: grid;
        padding: 0.75em 1em;
        place-items: center;
      }


      .sample-block {
        background-color: whitesmoke;
        border-radius: 20px;
        margin-bottom: 30px;
      }


      .sample-block > p {
        color: black;
      }


      /* .sample-block > p {
        color: color-contrast(
          var(--base) vs var(--color-set),
          #fff to AA-Large
        );
      } */




      body::-webkit-scrollbar {
        display: none;
      }


      html,
      body {
        color: #fff;
        font-family: "Barlow", sans-serif;
        font-size: 100%;
        letter-spacing: 0.25px;
        line-height: 1.75;
        margin: 0;
        padding: 0;
      }


      body {
        block-size: 100%;
        display: grid;
        min-block-size: 100vh;
        place-items: center;
      }


      .container {
        background: rgb(24, 40, 52);
        padding: 20px;
        border-radius: 20px;
      }


      .container > h1 {
        text-align: center;
        margin-bottom: 30px;
        padding-bottom: 30px;
      }


      a {
        color: #e9d8a6;
        text-decoration: underline 1px dashed;
        text-underline-offset: min(5px, 1em);
      }


      a:hover {
        color: #ffe8d6;
      }


      a:focus {
        outline: 1px solid currentColor;
        outline-offset: 3px;
      }


      h1,
      h2 {
        line-height: 1.25;
      }


      section {
        inline-size: min(750px, 50vw);
      }


      form {
        display: grid;
        grid-gap: 2rem;
        grid-template-columns: 1fr 1fr;
        padding-block-end: 1rem;
      }


      label {
        display: grid;
        font-size: 1.2rem;
        font-weight: 600;
      }


      select,
      input {
        display: block;
      }

JavaScript:

document
        .querySelector("#ratios")
        .addEventListener("change", (e) => {
          document.body.style.setProperty("--contrast-target", e.target.value);
          document.querySelector(".sample-block span").innerHTML =
            e.target.value;
        });


      document.querySelector("#slider").addEventListener("input", (e) => {
        document.body.style.setProperty("--contrast-target", e.target.value);
        document.querySelector(".sample-block span").innerHTML = e.target.value;
      });

<section class="container">
      <h1>Target Contrast Ratio</h1>
      <p>
        CSS color-contrast() function is having a third parameter called as
        <span style="color: red">Target contrast ratio</span> . This feature is
        only available in Safari Browser right now, so if you are using any
        other browser this won't work!
      </p>

      <div class="sample-block">
        <p>Target Ratio: <span>AA (4.5)</span></p>
      </div>

      <form>
        <label>
          Ratio Keywords
          <select id="ratios">
            <option value="AA (4.5)" selected>AA (4.5)</option>
            <option value="AA-Large (3)">AA-Large (3)</option>
            <option value="AAA (7)">AAA (7)</option>
            <option value="AAA-Large (4.5)">AAA-Large (4.5)</option>
          </select></label
        >

        <label>
          Custom Ratio
          <input
            id="slider"
            type="range"
            min="0"
            max="20"
            value="4.5"
            step="0.1"
          />
        </label>
      </form>
    </section>

When the target contrast ratio is defined, the color-contrast() function will return the very first value from the color list that meets the target. However, when no value in the color list meets the target contrast, that’s where the magic happens!

h1{
        color: color-contrast(#000 vs #111, #222 to AA);
      }

As you can see in the above code snippet, the base color is black(#000), and the color list consists of two dark shades of grey, but no value would meet the AA(4.5) target contrast. So what will happen then?

CSS will fill in the blanks if the color list doesn’t contain a value that meets the target contrast — either black or white. In this case, color-contrast() could enable designers to enforce a specific level of accessibility.

.background-primary {
        --background: #000;
        --color-list: #111, #222;
      }


      .background-primary {
        background: var(--background);
        color: color-contrast(var(--background) vs var(--color-list));
      }
      .background-primary.with-target-ratio {
        color: color-contrast(var(--background) vs var(--color-list) to AA);
      }

Let’s have a look at the above code snippet and try to understand the target ratio.

The base .background-primary class does not use a target contrast. And this results in the color being defined as #222, the highest contrasting value from the color list relative to the base color, black. But is the color #222 (another black shade) accessible here? The clear answer is a NO!

Now let’s compare this to when the .background-primary and the .with-target-ratio classes are combined, and a target contrast is specified. The results are very different despite using the same base color and color list. If none of the colors in the color list meet the AA contrast target, the function chooses the color that does. In this case, White!

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

Inevitable Drawbacks of CSS color-contrast()

As we know, the CSS color-contrast() function is still an experimental feature, so there are many improvements at the time of writing this article. Let’s look at what they are and how to deal with them!

Visual Contrasts and Colors are not the same
Highest contrast doesn’t mean the accessible one
No Gradients support as of now

<h1>Color-contrast</h1>

It’s a Wrap!

That was a lot to take in, but let’s quickly review what we’ve learned about the CSS color-contrast() function.

So, the color-contrast() function is an experimental feature that selects the greatest contrasting color. It takes three arguments: the base color, the color list, and the target contrast ratio (optional). The CSS color-contrast() simply compares the base color to the color list and returns the highest contrasting color, which helps to improve accessibility on the web on a much larger scale.

Once the spec has been implemented and supported by browsers, the color-contrast() function can be the game-changing feature. There are plenty of unexplored areas and use cases for CSS color-contrast(). In the near future, we are hoping to see this feature on all browsers so that we all can start using it. Until then, keep experimenting and keep

A Complete Guide On CSS Typography And Encoding

AmanMandal1 — Tue, 13 Dec 2022 14:25:26 +0000

Have you ever stumbled on a website and asked yourself questions like, Who made this ??? How can I read this ???

Then you proceed to another site, and you are like WOWWW !! This is so cool !!. Now let’s ask ourselves two questions:

What made the first website so unreadable and awful to you?
What made the second website so enjoyable and cool?

For the second website, you might just scroll and keep scrolling, probably without actually reading anything, but you marvel at the developer’s creation.

There are a lot of factors that determine if a site is readable/enjoyable or not, but we will talk about CSS Typography today! It is only logical to say that a designer should get good training in the main discipline of shaping written information, in other words: CSS Typography.

This is intended as a practical guide to learning CSS typography and encoding. We’ll cover a range of practical and useful topics, like how to choose and use fonts. We will discuss some usability aspects if proper fonts are not used, but more importantly, how to create a pleasant user experience. We’ll go over the principles of CSS typography and the properties that control them.

Let’s begin with our CSS typography tutorial!

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

What is Typography?

Typography is the art of arranging letters and text to make the website legible, clear, and visually appealing to the reader. Typography involves font style, appearance, and structure, which aims to bring out certain emotions and convey specific messages.

Type is the user interface for conveying information on the web. We can pull many levers to affect the usability of reading text, and that’s how we can create a pleasant user experience.

After usability, typography is all about emotion. Do letters complement your content or contradict it? Do they amplify your brand’s personality or dampen it? Different types will make people feel different things applied to the same text.

Typography isn’t an exact science. Good guidelines will get you most of the way there, but you’ll need to apply a little intuition too. Luckily, we’ve been reading text our whole life — books, magazines, the Internet — so we have much more instinct than we think!

Fonts and Typefaces: Differences

There’s some confusion surrounding the difference between typefaces and fonts, with many treating the two as synonyms. A typeface is a design style comprising various characters of varying sizes and weights, whereas a font is a graphical representation of text characters.

Put simply, a typeface is a family of related fonts, while fonts refer to the specific size, weight, or style of a typeface.

In essence, a typeface is like a song, and the font is like its MP3 file. Both terms are used in typography literature, so it’s worth knowing the distinction. But, more recently, you can use both terms interchangeably, and designers will understand what you mean.

Do you use a Mac and want to run the test in Internet Explorer? This article explores how to test Internet explorer for Mac.

Categorization of Fonts

The broadest split is between serif and sans-serif typefaces. You’ve likely come across these terms just by seeing some typeface name floating around.

Serif

A “serif” is a small stroke attached to the ends of letters, giving them a traditional feel. Most books and newspapers are set in serif typefaces. The ‘serif’ category includes sub-categories such as Old Style, Classical, Neo-Classical, Transitional, Clarendon, etc.

Below is what the “Times New Roman” font looks like. Notice the tiny feet present at the tops and bottoms of each letter.

Sans Serif

“Sans” comes from the French “without.” As the name states, sans-serif typefaces don’t have these extra strokes, giving them a smooth, modern feel. It includes humanist, geometric and grotesk, etc., as sub-categories.

Below is the font called “Roboto” in the Sans Serif category. Again, notice the clean and straight lines compared to the serif fonts.

Monospace

Monospace fonts are a noteworthy category all on their own. Each glyph (i.e., letter/number.symbol) in a monospace font has the same width (hence the mono spacing terminology), so it’s possible to arrange them into visual structures.

You may be well familiar with monospace because we developers see it often when writing code, whether it’s helpful to make brackets and indents line up visually.

Below is the font called “Courier Prime” in the Monospace category. Again, notice how the width between the letters are same (mono) compared to the other fonts.

Upload your app for testing within seconds using the LambdaTest cloud and perform mobile app test right away. Find bugs early on, improve performance, quality, user experience and make the most of mobile application testing on LambdaTest.

“Web safe” Fonts vs Custom Fonts

A font is “web safe” if most computers have it installed already, and they don’t have to download it separately when visiting your site. Examples include Arial, Times New Roman, Courier, Georgia, Verdana, and many more.

A website can declare a custom font as a resource, just like CSS, images, or JavaScript. The visiting browser will download the font and apply it to the texts on the website.

Another significant way to shed some of the weight of custom web fonts is to use a service that will host and serve them for you. The core benefit here is that third-parties store the files on a CDN (e.g., Cloudflare, StackPath, etc.), optimize them, and serve them to your site via a JavaScript snippet that gets dropped into the document head.

Let’s see how it is to use a hosted service,

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>

The above example is from Google Fonts — the most popular hosted service. It’s free to use and has a catalog of more than 1000 font families. It has fonts with beautiful design, different weights, bold/italics, and many advanced features.

Another trendy one is Adobe Fonts. It comes with more than 1500 fonts. These are typically high-quality fonts which are paid ones.

There are many other options like Fontspring, MyFonts by Monotype, etc.

Try an online Selenium testing tool to run your browser automation testing scripts. Our cloud infrastructure has 3000+ desktop & mobile environments. Try for free!

One wrong choice leads to another hassle

Many websites and applications are made to be used by many people to indulge in purchasing activities such as buying services or products online, consuming content, etc. They catalyze the process of creating a brand identity. Therefore, one wrong choice in selecting typography could lead to hassle and severe problems for the brand later.

While selecting typography for a website/application, a small mistake might lead to a domino effect. This is why it is important to avoid making unsure decisions. There are some common errors the designers tend to commit, such as misjudged text line lengths, wrongly paired typefaces, poor body font choices, bad color choices, and wrongly chosen line height between two lines of text. All of these should be given utmost attention as they are prominent parts of helping users read fluently.

Improper spacing, instability, and rare alignments in the selection of font families, sizes, and colors can ruin the overall brand image.

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!

CSS and Typography

Ok, so far, we have covered almost all the fundamentals and concepts of topography. Now let’s move on to the intersection of design and development. Now we can turn our attention to what properties we have to manipulate and style fonts, specifically with CSS.

Font Sizing

Changing font size is something inevitable in a project. The font-size property in CSS is used to specify the height and size of the font. It affects the size of the text of an element. This property accepts values, percentages, and a handful of keyword values. We use different units to measure fonts in CSS. Those are mainly divided into two categories, ‘Absolute’ and ‘Relative.’

The actual size of an element expressed in relative units depends on other parts (e.g., parent element, or size of the viewport, etc.) of the page, while the actual size of an element expressed in absolute units is always the same. And as you might expect, that difference is important because they serve different functions, depending on design needs. Px (pixels), em, rem, and percentage are mainly used.

Example: Font Size (specified in px)

Below is an example of how you could specify the font sizes in absolute units (i.e., pixels).

HTML:

<p class="box">A text with font size 20px </p>

CSS:

   body{
        text-align:center;
      }

      .box{
        background: #EEEEEE;
        margin : 40px auto;
        width : 250px;
        font-size : 20px;
        padding: 40px 20px;
        border : 1px solid;
      }

Output :

HTML:

<p class="box">A text with font size 20px </p>

CSS:

body{
  text-align:center;
}

.box{
  background: #EEEEEE;
  margin : 40px auto;
  width : 250px;
  font-size : 20px;
  padding: 40px 20px;
  border : 1px solid;
}

In the above code sample, the font size of the text is set to 20 px. We used the ‘px,’ an absolute unit, but we should avoid using absolute units like px and instead use relative units like ‘em’ or ‘rem’ as much as possible.

This Playwright tutorial will guide you through the setup of the playwright browser testing framework, which will enable you to write end-to-end tests for your future projects.

Example: Font Size (specified in rem)

Let’s look at the same example above, but we will use the relative unit ‘rem’ this time. It is important to note that rem depends upon the size of the root element of the HTML (1 rem = 16px).

HTML:

<p class="box">A text with font size 2 rem </p>

CSS:

body{
        text-align:center;
      }

      .box{
        background: #EEEEEE;
        margin : 40px auto;
        width : 250px;
        font-size : 2rem;
        padding: 40px 20px;
        border : 1px solid;
      }

Output:

HTML:

<p class="box">A text with font size 2 rem </p>

CSS:

body{
  text-align:center;
}

.box{
  background: #EEEEEE;
  margin : 40px auto;
  width : 280px;
  font-size : 2rem;
  padding: 40px 20px;
  border : 1px solid;
}

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

Font Weight

Font weight is the “value” placed on your font to determine how bold or light your text will appear. There are many “values” that you can use depending upon your requirement. The weights available depend on the ‘font-family’ that is currently set.

Different weights are used for different purposes on our website. Designers mostly prefer bold/bolder weights for the heading and the sub-headings and normal (300–600) weights for the content.

Let’s take a look at the syntax:

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
Font-weight: revert-layer;
font-weight: unset;

/* Keyword values */
font-weight: normal;
font-weight: bold;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;

The ‘font-weight’ property is specified using any one of the values listed below:

Normal: Normal font weight. Same as 400
Bold: Bold font weight. Same as 700
Lighter: A relative font weight. Lighter than the parent element
Bolder: A relative font weight. Bolder than the parent element

HTML:

    <h3>Font Weights</h3>

    <div class="container">
      <p>Text with the font-weight of parent.</p>
      <p class="normal">Text with the font-weight 'normal'</p>
      <p class="bold">Text with the font-weight 'bold'</p>
      <p class="lighter">Text with the font-weight 'lighter'</p>
      <p class="bolder">Text with the font-weight 'bolder'</p>
    </div>

CSS:

  body {
        text-align: center;
        font-weight: 600;
      }

      .container {
        font-size: 20px;
        background: #eeeeee;
        margin: 40px auto;
        width: 400px;
        padding: 40px 20px;
        border: 1px solid;
      }
      .normal {
        font-weight: normal;
      }
      .bold {
        font-weight: bold;
      }
      .lighter {
        font-weight: lighter;
      }
      .bolder {
        font-weight: bolder;
      }

Output:

HTML:

<h3>Font Weights</h3>

<div class="container">
  <p>Text with the font-weight of parent.</p>
  <p class="normal">Text with the font-weight 'normal'</p>
  <p class="bold">Text with the font-weight 'bold'</p>
  <p class="ligter">Text with the font-weight 'lighter'</p>
  <p class="bolder">Text with the font-weight 'bolder'</p>
</div>

CSS:

body {
  text-align: center;
  font-weight: 600;
}

.container {
  font-size: 20px;
  background: #eeeeee;
  margin: 40px auto;
  width: 400px;
  padding: 40px 20px;
  border: 1px solid;
}
.normal {
  font-weight: normal;
}
.bold {
  font-weight: bold;
}
.lighter {
  font-weight: lighter;
}
.bolder {
  font-weight: bolder;
}

In the above code example, all the texts are given different classes concerning their different font weights. The text with the class ‘normal’ has a normal font weight (400). The text with the class of ‘bold’ has a font weight of bold (700).

The text with the class of ‘lighter’ has a font weight of lighter, i.e., a relative unit. It makes the font lighter than the parent’s font weight. And the last text with a class of bolder (a relative unit) makes the font bolder than the parent’s font.

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

Line Height

Line height is one of the most important factors affecting readability. It’s controlled by the line-height property in CSS, best expressed as a unit-less number corresponding to multiple of the defined font size.

When applied to a block-level element, the line-height property defines, as its name suggests. The line-height property uses the following units:

px
em
%
unitless numbers (e.g., 1.5)

The unitless values act like percentages. So 150% is equal to 1.5. The purpose of the line height is to define a readable line spacing for your text. Because readability depends upon the text’s size, it is recommended to use a dynamic value relative to the text’s size.

Using ‘px’ is not recommended because it defines a static value. The recommended method is to use unitless numbers.

Syntax:

p {
    line-height: 1.5;
   }

For body text, a line height of 1.4 or 1.5 times the size of the text is recommended.
For headings, a line height of 1.2 is recommended.

HTML:

<h4>Line Height</h4>
    <div class="container">
      <p class='first'>An aim is a goal or objective to achieve in life. In order to succeed in life, one must have a goal. My aim in life is to be a teacher. Teaching is a noble and responsible profession. I have come to know that the ever-increasing misery and distress, are </p>

      <p class='second'>An aim is a goal or objective to achieve in life. In order to succeed in life, one must have a goal. My aim in life is to be a teacher. Teaching is a noble and responsible profession. I have come to know that the ever-increasing misery and distress, are </p>
    </div>

CSS:

body{
  font: 15px Georgia, serif;
  text-align: center;
}

.container{
  text-align: left;
  background: #EEEEEE;
  padding: 20px 20px;
  border: 1px solid;
  margin: 30px auto;
  display: flex;
  width: 30rem;
  gap: 30px;
}

.first{
  line-height: 1.2;
}

.second{
  line-height:1.5;
}

Output:

HTML:

 <h4>Line Height</h4>
<div class="container">
  <p class='first'>An aim is a goal or objective to achieve in life. In order to succeed in life, one must have a goal. My aim in life is to be a teacher. Teaching is a noble and responsible profession. I have come to know that the ever-increasing misery and distress, are </p>

  <p class='second'>An aim is a goal or objective to achieve in life. In order to succeed in life, one must have a goal. My aim in life is to be a teacher. Teaching is a noble and responsible profession. I have come to know that the ever-increasing misery and distress, are </p>
</div>

CSS:

body{
  font: 15px Georgia, serif;
  text-align: center;
}

.container{
  text-align: left;
  background: #EEEEEE;
  padding: 20px 20px;
  border: 1px solid;
  margin: 30px auto;
  display: flex;
  width: 30rem;
  gap: 30px;
}

.first{
  line-height: 1.2;
}

.second{
  line-height:1.5;
}

As you can see in the above code example, the left paragraph has a line height of 1.2, and the right side paragraph has a line height of 1.5. Line height plays a significant role in typography. So here are some guidelines to define a good line height:

Increase line height for thick fonts.
Increase line height when fonts are a dark color.
Increase line height for long-form content.

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.

Letter Spacing

Letter spacing is one of the most important factors affecting readability. It is controlled by the CSS letter-spacing property. The letter-spacing property controls the space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), absolute values (px), and the normal property, which resets to the font’s default.

Using font-relative values is recommended so that the letter-spacing increases or decreases appropriately when the font size is changed, either by design or by user behavior.

In general, you only need to worry about the letter spacing for text elements that are particularly big or small because most fonts are spaced well at typical paragraph size.

Syntax:

p {
      letter-spacing: 1em;
    }

The most important point to note when using letter-spacing is that the specified value does not change the default — it is added to the browser’s default spacing.

Note: letter-spacing also supports negative values, which will tighten the appearance of text rather than loosening it. Let’s have a look at the below code example.

HTML:

<h3>Letter Spacing</h3>
<div class="container">
<p>A sentence with no additional spacing</p>
<p class="loose">A sentence with little loose spacing of <span>2px</span></p>
<p class="tight">A sentence with little tight spacing of <span>-1.5px</span></p>
</div>

CSS:

body{
  font: 15px Georgia, serif;
  text-align: center;
  }
  .loose {
  letter-spacing: 2px;
  }
  .tight {
  letter-spacing: -1.5px;
  }
  .container {
  font-size: 20px;
  background: #eeeeee;
  margin: 40px auto;
  width: 350px;
  padding: 30px 20px;
  border: 1px solid;
  }

Output:

HTML:

<h3>Letter Spacing</h3>
<div class="container">
  <p>A sentence with no additional spacing</p>
  <p class="loose">A sentence with little loose spacing of <span>2px</span></p>
  <p class="tight">A sentence with little tight spacing of <span>-1.5px</span></p>
</div>

CSS:

body{
  font: 15px Georgia, serif;
  text-align: center;
}
.loose {
  letter-spacing: 2px;
}
.tight {
  letter-spacing: -1.5px;
}
.container {
  font-size: 20px;
  background: #eeeeee;
  margin: 40px auto;
  width: 350px;
  padding: 30px 20px;
  border: 1px solid;
}

In the above code example, the sentence with the class ‘loose’ has a letter-spacing of 2px, and the sentence with the class ‘tight’ has a letter-spacing of -1.5px. You can see how much difference a horizontal space can make in the CSS typography.

Let’s take a look at letter-spacing with another example,

In the above image, the top one has no letter-spacing, whereas the second has a letter-spacing of 1px and the bottom one letter-spacing is -1px. It’s not a giant change, but I think it’s obvious which is easiest to read.

In this Ad hoc testing tutorial, let’s deep dive into what ad hoc testing is, its advantages, disadvantages, types, characteristics, and their best practices.

Text Alignment

The text-align property in CSS is used to specify the horizontal alignment of text in an element. It is used to set the alignment of the content horizontally inside a block element. It plays a major role in CSS typography because of its nature.

Syntax:

  p {
        text-align: center;
      }

These are the traditional values for text-align:

left

The default value. The content aligns along the left side.

HTML:

<h4>Text Align (Left)</h4>
  <p class='box'>The text is left aligned!</p>

CSS:

 body{
    font:15px Georgia, serif;
    text-align: center;
  }

  .box{
    text-align: left;
    border: 1px solid;
    width: 300px;
    margin : 20px auto;
    padding: 30px 0;
    background: #EEEEEE;
  }

Output:

HTML:

<h4>Text Align (Left)</h4>
<p class='box'>The text is left aligned!</p>

CSS:

body{
  font:15px Georgia, serif;
  text-align: center;
}

.box{
  text-align: left;
  border: 1px solid;
  width: 300px;
  margin : 20px auto;
  padding: 30px 0;
  background: #EEEEEE;
}

right

The content aligns along the right side.

HTML:

<h4>Text Align (Right)</h4>
  <p class='box'>The text is right aligned!</p>

CSS:

  body{
    font:15px Georgia, serif;
    text-align: center;
  }

  .box{
    text-align: right;
    border: 1px solid;
    width: 300px;
    margin : 20px auto;
    padding: 30px 0;
    background: #EEEEEE;
  }

Output:

HTML:

<h4>Text Align (Right)</h4>
  <p class='box'>The text is right aligned!</p>

CSS:

 body{
    font:15px Georgia, serif;
    text-align: center;
  }

  .box{
    text-align: right;
    border: 1px solid;
    width: 300px;
    margin : 20px auto;
    padding: 30px 0;
    background: #EEEEEE;
  }

center

Content centers between left and right edges, and the white spacing on each line’s left and right sides should be equal.

HTML:

<h4>Text Align (Center)</h4>
  <p class='box'>The text is center aligned!</p>

CSS:

 body{
    font:15px Georgia, serif;
    text-align: center;
  }

  .box{
    text-align: center;
    border: 1px solid;
    width: 300px;
    margin : 20px auto;
    padding: 30px 0;
    background: #EEEEEE;
  }

Output:

HTML:

<h4>Text Align (Center)</h4>
  <p class='box'>The text is center aligned!</p>

CSS:

body{
    font:15px Georgia, serif;
    text-align: center;
  }

  .box{
    text-align: center;
    border: 1px solid;
    width: 300px;
    margin : 20px auto;
    padding: 30px 0;
    background: #EEEEEE;
  }

justify

Content spaces out so that as many blocks fit onto one line as possible, the first word on that line is along the left edge, and the last word is along the right edge.

HTML:

<h4>Text Align (justify)</h4>
    <p class="box">
      I'm justified. I fill the space exactly (except on the last line), even if
      I have to stretch a bit at times
    </p>

CSS:

  body {
        font: 15px Georgia, serif;
        text-align: center;
      }

      .box {
        text-align: justify;
        border: 1px solid;
        width: 300px;
        margin: 20px auto;
        padding: 30px 5px;
        background: #eeeeee;
      }

Output:

HTML:

<h4>Text Align (justify)</h4>
<p class='box'>
  I'm justified. I fill the space exactly (except on the last line), even if I have to stretch a bit at times
</p>

CSS:

body{
    font:15px Georgia, serif;
    text-align: center;
  }

  .box{
    text-align: justify;
    border: 1px solid;
    width: 300px;
    margin : 20px auto;
    padding: 30px 5px;
    background: #EEEEEE;
  }

inherit

The value will be inherited from the parent element.

HTML:

 <h4>Text Align (inherit)</h4>
    <p class="box">
      I inherit the alignment of my parent. In this case, that means left.
    </p>

CSS:

   body {
        font: 15px Georgia, serif;
      }
      h4 {
        text-align: center;
      }
      .box {
        text-align: inherit;
        border: 1px solid;
        width: 300px;
        margin: 20px auto;
        padding: 30px 5px;
        background: #eeeeee;
      }

Output:

HTML:

<h4>Text Align (inherit)</h4> 
<p class='box'>I inherit the alignment of my parent. In this case, that means left.</p>

CSS:

body {
  font: 15px Georgia, serif;
}
h4{
  text-align: center;
}
.box {
  text-align: inherit;
  border: 1px solid;
  width: 300px;
  margin: 20px auto;
  padding: 30px 5px;
  background: #eeeeee;
}

In this article, we look at what Regression testing is, its importance and types, and how to perform regression test.

Pseudo Elements in CSS

A pseudo-element in CSS is a keyword added to a selector that lets you style a specific part of the selected elements. For example, styling the first letter or line of an element.

Pseudo-elements are like virtual elements that we can treat like regular HTML elements. They don’t exist in the document tree or DOM, which means we don’t type pseudo-elements in HTML but rather create them with CSS. Also, the double colon(::) and the single colon(:) difference is merely a visual distinction between CSS2 and CSS3 pseudo-elements. You are free to use either.

In short, inserting content before or after the content of an element can be done using Pseudo Elements in CSS.

Syntax:

selector::pseudo-element {
         property: value;
       }

There are many Pseudo Elements in CSS, but the ones which are most commonly used are,

:: first-line Pseudo-element
:: first-letter Pseudo-element

First-Line Pseudo Element

::first-line Pseudo-element applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text.

Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, line-height, etc.

HTML:

  <h3>First-Line Pseudo Element</h3>
    <p class='box'>
      This is a paragraph using first-line pseudo-element <br />
      to style first line of the paragraph. Content in the first line turns red
      and becomes bold.
    </p>

CSS:

body {
        background-color: whitesmoke;
        text-align: center;
      }

      .box {
        background: #eeeeee;
        margin: 20px auto;
        width: 400px;
        border: 1px solid;
        padding: 20px 10px;
      }
      p::first-line {
        color: Red;
        font-weight: bold;
      }

Output:

HTML:

<h3>First-Line Pseudo Element</h3> 
<p class='box'>
  This is a paragraph using first-line pseudo-element <br />
  to style first line of the paragraph. Content in the first line turns red
  and becomes bold.
</p>

CSS:

body {
  background-color: whitesmoke;
  text-align: center;
}

.box{
  background: #EEEEEE;
  margin: 20px auto;
  width: 400px;
  border: 1px solid;
  padding: 20px 10px;
}
p::first-line {
  color: Red;
  font-weight: bold;
}

In the above code example, ::first-line pseudo-element for the

tag is set with the red color, which makes the first line of the paragraph red.

First-Letter Pseudo Element

::first-letter Pseudo-element
applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images).

HTML:

   <h3>First-Letter Pseudo Element</h3>
    <p class='box'>
      This is a paragraph using first-letter pseudo-element <br />
      to style first letter of the paragraph. Content in the first letter turns red
      and becomes bold.
    </p>

CSS :

body {
        background-color: whitesmoke;
        text-align: center;
      }

      .box {
        background: #eeeeee;
        margin: 20px auto;
        width: 400px;
        border: 1px solid;
        padding: 20px 10px;
      }
      p::first-letter {
        color: Red;
        font-weight: bold;
      }

Output:

HTML:

<h3>First-Letter Pseudo Element</h3>
<p class='box'>
  This is a paragraph using first-letter pseudo-element
  to style first letter of the paragraph. Content in the first letter turns red and becomes bold.
</p>

CSS:

body {
  background-color: whitesmoke;
  text-align: center;
}

.box {
  background: #eeeeee;
  margin: 20px auto;
  width: 400px;
  border: 1px solid;
  padding: 20px 10px;
}
p::first-letter {
  color: Red;
  font-weight: bold;
}

In the above code example, ::first-letter pseudo element is used on the

tag, which turns the first letter into bold and red.

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

Deep dive into Character Encoding

If you use anything other than the most basic English text, people may not be able to read the content you create unless you say what ‘character encoding’ you used. Not only does a lack of character encoding information spoil the readability of displayed text, but it may mean that your data cannot be found by a search engine.

So what’s a character encoding?

Words and sentences in text are created from characters. Examples of characters include the Chinese ideograph ‘诶‘ or the Devanagari character ‘ख’. Characters needed for a specific purpose are grouped into a character set. The characters are stored in the computer as one or more bytes.

Basically, you can visualize this by assuming that all characters are stored in computers using a special code. A character encoding provides the key to unlock (i.e., crack) the code. It is a set of mappings between the bytes in the computer and the characters in the character set. Without the key, the data looks like garbage.

So when you input text using a keyboard or in some other way, the character encoding maps characters. You choose specific bytes in computer memory. Then, it reads the bytes back into characters to display the text.

How to declare a Character Encoding?

You should always specify the encoding used for an HTML page. If you don’t, you risk that characters in your content are incorrectly interpreted. This is not just an issue of human readability. Due to the increase in machines, they need to understand your data too.

Declaring character encodings in HTML provides quick recommendations for everyone who just wants to be told what to do and more information for those who need it.

Declaring character encoding in CSS provides information for CSS.

Byte-Order Mark (BOM)

The byte-order mark or BOM is something you will come across when using a Unicode-based character encoding, such as UTF-8 and UTF-16. Most of the time, you will not have to worry about the byte-order mark in UTF-8.

In HTML5, browsers are required to recognize the UTF-8 and use it to detect the encoding of the page, and recent versions of major browsers handle the BOM as expected when used for UTF-8 encoded pages.

Using Character Escapes

Character escapes are a way of writing a character in markup using only ASCII code points. They are useful if you cannot type in the actual character or want to clearly show invisible characters.

Using only ASCII characters, you can use a character escape to represent any character from the Unicode character set in HTML or CSS.

Character Encoding Best Practices

In this tutorial on CSS typography, let’s look at some of the best practices of character encoding.

Content is composed of a sequence of characters. Characters represent letters of the alphabet, punctuations, etc. But content is stored in a computer as a sequence of bytes, in numeric form. Sometimes to represent a single character, more than one byte is used. The way that the sequence of bytes is converted to character depends on what key is used to encode the text, and that key is called character coding. Let’s have a look at some best practices to follow,

Always save your pages as UTF-8.
Always declare the encoding of your document. Use the HTTP header if you can. You can use @charset to declare the encoding of your style sheet, but you only need to do so if your style sheet contains non-ASCII characters. Use the HTTP header if you can.
Try to avoid using the BOM (Byte-Order Mark) in UTF-8.

Using LT Browser to test CSS Typography and Encoding

If you’re a web designer or front-end developer, chances are you’ve used the popular Android devices to check your site’s layout. We don’t really think about any other devices at all when we’re in the midst of a project. That is, until we come across a problem that only occurs in iPhone or Samsung (you know, like that one image that refuses to display properly).

If you can’t figure out what’s going on with it in Android, your only recourse is to switch over and test it on another device. When it comes to testing the mobile view of CSS typography and encoding of your site, however, there’s a better way than switching back and forth between devices all day long: LT Browser from LambdaTest.

LT Browser is a one-of-a-kind mobile-friendly testing tool with cutting-edge capabilities. It comes loaded with 50+ preloaded viewports for mobile, tablets, desktop, and laptops to simulate various resolutions and device orientations, along with advanced display and network controls to perform responsive testing of your website.

LT Browser is a complementary tool for web developers offered by LambdaTest platform. LambdaTest is a cloud-based cross browser testing solution that is the modern way to test your web experience. It allows you to automatically produce bug-free, responsive applications that work across 3000+ devices and browsers.

By leveraging LambdaTest’s online browsers, you can perform browser compatibility testing of your CSS typography and encoding and ensure they are working correctly on every major browsers and OS combinations.

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.

It’s a Wrap!

CC typography and encoding are often overlooked, but they are crucial to user interface design. Mastering the skill of CSS typography will see you well on your way to becoming a fantastic UI designer and a better developer.

In this tutorial on CSS typography and CSS encoding, we had a detailed discussion about typography and how we can use CSS to make it better by using some of the CSS properties like font-weight, font-size, line-height, etc. Still, this is not an exhaustive guide, but something I hope will encourage you to take control of CSS typography in your future projects.

I hope you liked this article on CSS typography and CSS encoding. Feel free to share with your friends and other developers. Any retweets and or LinkedIn shares are always welcome.

Happy Styling!

A Complete Guide To CSS Container Queries

AmanMandal1 — Fri, 09 Dec 2022 17:49:22 +0000

In 2007, Steve Jobs launched the first iPhone, which revolutionized the world. But because of that, many businesses dealt with the problem of changing the layout of websites from desktop to mobile by delivering completely different mobile-compatible websites under the subdomain of ‘m’ (e.g., https://m.facebook.com). And we were all trying to figure out how to work in this new world of contending with mobile and desktop screen sizes.

But after a few years, in 2010, Ethan Marcotte introduced the concept of Responsive Design. Responsive Web Design is the idea that design and development should respond to the user’s behavior and environment based on the screen size, device, and orientation. And central to that idea was the availability of CSS Media Query, which allowed setting various layout rules depending on the size of the viewport.

The responsive design opened up many more layout solutions with the help of Media Query. Frameworks like Bootstrap rose in popularity due to providing responsive grid systems. As per W3Techs, Bootstrap is used by 19.3% of all websites, with a market share of 79.5%.

Nowadays, component libraries (ReactJS) have gained popularity because of its ‘build once, deploy anywhere’ nature. A component is built once and can be used anywhere in the layout to make complex interfaces more efficient. And those components come together to create a webpage.

Currently, you can only change the webpage layout with respect to the viewport using Media Query. But when writing media queries for UI elements, we are trying to find a “magic” viewport value for a breakpoint like 320px — 480px for mobile devices, 481px — 768px for tablets/iPads, 769px — 1024px for small laptops and 1025px — 1200px for big screen laptops/pc, so that the target element has minimum dimensions, and the layout doesn’t break. This value usually differs from the viewport dimension and leads to bugs when the inner container’s dimension or layout changes.

This is one of the issues that CSS Container Queries attempt to fix. CSS Container Queries extend existing media query functionality with queries that depend on the target element dimensions. And in this blog, we will dive deep into the concept of CSS Container Queries.

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

Getting Started with CSS Container Queries

The most important thing to know about CSS Container Queries is that “containers” are the elements being queried, but rules within the CSS Container Queries affect only the descendants of the container. In other words, you may define the ‘body’ element, ‘ main’ element, or perhaps event list items. Then, CSS Container Queries will allow defining rules for how elements within those change across container sizes.

CSS Container Queries are not as straightforward as regular media queries. You’ll have to add the container property to the parent UI element to make CSS Container Queries work, but there’s a reason, and we’ll cover that next.

Browser Support

CSS Container Queries are by default enabled in Chrome (the latest version). For smooth and better performance, you can install the latest browser.

**Note:* If you are not using the above-recommended browser, the following CodePens might not work. So an image showcasing the intended working example will be provided alongside the CodePens demo.*

Accelerate your release velocity with blazing fast test automation cloud!

Contain Property

CSS contain property has been added to most modern browsers and has a decent 90% browser support when writing this article.

The contain property is mainly used for performance optimization by hinting to the browser which parts of the page can be treated as independent and won’t affect the other elements of the page. If a change occurs in a single element, the browser will re-render only that part instead of the whole page. With contain property values, we can specify which types of containment we want to use — layout, size, paint, content, or none.

The level 3 draft specification adds the inline-size and block-size keywords to contain. In addition, the draft specification proposes some new properties:

Container-type

Defines an element as a query container. Descendants can query aspects of its sizing, layout, and state.

Container-name

Specifies a list of query container names for @container rules to filter which query containers are targeted.

Container

A shorthand property to set both container-type and container-name.

Try an online Selenium automation Grid to run your browser automation testing scripts. Our cloud infrastructure has 3000+ desktop & mobile environments. Try for free!

Container-Type

It assigns a query container to an element. Depending on the value, descendants can query aspects of its size, layout, style, and state of the object. This helps to make setting the contain property easier with arguments that combine different properties.

The container type property can have the following values:

Size: Creates a query container that supports dimensional queries on both the inline and block axis.
Inline-size: Creates a query container that supports dimensional queries on the inline axis.
Block-size: Creates a query container that supports dimensional queries on the block axis.
Style: Allows for style queries by defining a query container.
State: Allows for state queries by defining a query container.

Size, Inline-size, and Block-size are also given layout, size, and style containment.

But what does the CSS Contain property used for optimization have to do with CSS Container Queries? For CSS Container Queries to work, the browser must know if a change occurs in the element’s children layout. It should re-render only that component. The browser will know to apply the code in the container query to the matching component when the component is rendered or the dimension of the container changes.

Let’s have a look at contain property with a small code example.

HTML:

<div class="wrapper">
    <div class="container">
      <article class="card">
        <header>
          <h3 class='header'>
            Order Pizza Anywhere & Anytime
          </h3>
        </header>

        <div class="image"><img src="https://i.imgur.com/OzPVEvW.jpg" alt="a pizza"></div>

        <div class="content">
          <p class='para'>Delicioussss Pizza at your doorstep!! All you have to do click the 'Order' button and enjoy your amazing pizza </p>
          <button class='btn'>Order now</button>
        </div>

      </article>
    </div>

CSS :

* {
          box-sizing: border-box;
        }

        img {
          max-width: 100%;
          height: 100;
          display: block;
        }

        body {
          font: 1.2rem Roboto, sans-serif;
          background: whitesmoke;
          line-height: 1.5;
        }

        .wrapper {
          padding: 20px;
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: 20px;
        }

        .card {
          background: white;
          box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
          border-radius: 12px;
          display: grid;
          overflow: hidden;
          padding: 15px;
        }

        .card .image {
          border-radius: 10px;
        }

        .image > img {
          border-radius: 10px;
        }

        .card .content {
          padding: 10px;
        }

        .para {
          font-size: 14px;
        }

        .btn {
          cursor: pointer;
          color: black;
          background: lightgray;
          padding: 10px 20px;
          border-radius: 5px;
          border: none;
        }

        .btn:hover {
          background: gray;
          color: white;
        }

        .card h2 {
          margin: 0;
          padding: 10px;
        }

        .container {
          container-type: inline-size;
        }

        @container (min-width: 500px) {
          .card {
            grid-template-columns: 1fr 2fr;
            grid-template-rows: auto 1fr;
            align-items: start;
            column-gap: 20px;
          }

          .card h2 {
            padding: 0;
            margin: 0.5em 0 0 0;
          }

          .card header {
            grid-row: 1;
            grid-column: 2;
          }

          .card .image {
            grid-row: 1 / 3;
            grid-column: 1;
          }

          .card .content {
            grid-column: 2;
            grid-row: 2;
            padding: 0 20px 20px 0;
          }
        }

As we can see in the above code block, we are not adding the ‘container’ property to a more distant parent like ‘wrapper’ and keeping the container as close to the affected element as possible.

That is why we should correctly signal the browser about the change. Wrapping a distant parent element with a ‘container’ property can be counter-productive and negatively affect page performance. In worst-case scenarios of misusing the ‘container’ property, the layout may break, and the browser won’t render it correctly.

That’s all for now about the ‘container’ property. Now let’s look at the CSS Container Queries and how they work.

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

What are CSS Container Queries?

A Container (also called a Wrapper) is an element that contains another element(s). So in simple terms, CSS Container queries specify changes to an element in relation to its parent container or element rather than the entire viewport.

When a component is placed within an item, it’s contained within it. That means we can query the width of its parent and modify the component based on that. CSS Container Queries enable developers to approach responsiveness from a component standpoint, where elements on a page are designed to be responsive as individual units. This means that regardless of where these elements are placed on the page, they will adjust based on the parent element’s size rather than the entire page’s size.

After the container property has been added to the card element wrapper in the above code example, we can write a container query. We’ve added a container property to an element with a container class, so now we can include any of its child elements in a container query.

\    .container {
          container-type: inline-size;
        }

Just like a regular media query, we need to define a query using min-width or max-width properties and nest all selectors inside the block. However, we’ll use the @container keyword instead of @media to define a container query.

 @container (min-width: 500px) {
          .card {
            grid-template-columns: 1fr 2fr;
            grid-template-rows: auto 1fr;
            align-items: start;
            column-gap: 20px;
          }

          .card h2 {
            padding: 0;
            margin: 0.5em 0 0 0;
          }

          .card header {
            grid-row: 1;
            grid-column: 2;
          }

          .card .image {
            grid-row: 1 / 3;
            grid-column: 1;
          }

          .card .content {
            grid-column: 2;
            grid-row: 2;
            padding: 0 20px 20px 0;
          }
        }

HTML:

<div class="wrapper">
  <div class="container">
    <article class="card">
      <header>
        <h3 class='header'>
          Order Pizza Anywhere
        </h3>
      </header>

      <div class="image"><img src="https://i.imgur.com/F5W5bY6.jpg" alt="a pizza"></div>

      <div class="content">
        <p class='para'>Delicioussss Pizza at your doorstep!! All you have to do click the 'Order' button and enjoy your amazing pizza </p>
        <ul>
          <li>Loaded with Cheese</li>
          <li>Rich in taste</li>
          <li>50% off on first order</li>
        </ul>
        <button class='btn'>Order now</button>
      </div>

    </article>
  </div>

CSS:

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: 100;
  display: block;
}

body {
  font: 1.2rem Roboto, sans-serif;
  background: whitesmoke;
  line-height: 1.5;
}

.header{
}

.wrapper {
  padding: 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
}

.card {
  background: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 12px;
  display: grid;
  overflow: hidden;
  padding: 15px;
}

.card .image {
/*   border: 10px solid #000; */
  border-radius: 10px;
}

.image > img{
  border-radius: 10px;
  height: 400px;
  object-fit:cover;
}

.card .content {
  padding: 10px;
}

.content > ul{
    display:none;
  }

.para{
  font-size: 14px;
}

.btn{
  cursor: pointer;
  color: black;
  background: lightgray;
  padding : 10px 20px;
  border-radius: 5px;
  border: none;   
}

.btn:hover{
  background: gray;
  color: white;
}

.card h2 {
  margin: 0;
  padding: 10px;
}

.container{
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 20px;
  }

  .card h2 {
    padding: 0;
    margin: .5em 0 0 0;
  }

  .card header {
    grid-row: 1;
    grid-column: 2;
  }

  .card .image {
    grid-row: 1 / 2;
    grid-column: 1;
  }

  .card .content {
    grid-column: 2;
    grid-row: 1/2;
    padding: 60px 20px 20px 0;
  }

  .content > ul{
    display:flex;
    flex-direction:column;
    list-style:none;
    padding-left:0;
    font-size:14px;
    color: green;
    line-height:30px;
  }
}

CSS Container Queries provide a new and refreshing approach to responsiveness. However, it is by no means a replacement for media queries. Instead, consider it a cool new addition to the developer’s responsive toolbox.

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.

What problems do CSS Container Queries solve?

CSS Container Queries offer a unique solution for developers working on large-scale projects where different components make up different parts of the webpage. They allow components to modify their appearance to fit the context in which they’re put. This means that the components can be used repeatedly, making them reusable.

Many websites have components that need to change their layout based on the container’s available width. This may not always be related to the viewport’s size but to where the component is placed in the layout. CSS Container Queries provide a solution for developers to change component style and layout depending on the available width of the container or parent element.

Here’s a proper example so that we can see the power of container queries:

HTML:

<div class="wrapper">
    <div class="left">
      <article class="card">
        <header>
          <h2>Little Doggo</h2>
        </header>

        <div class="image"><img src="https://i.imgur.com/0l8iHZD.jpg" alt="a little puppy in the grass"></div>

        <div class="content">
          <p>A dog is a beautiful creature on the earth that consists of four legs and sharp teeth. The teeth of a dog are tough and bright, which helps in biting the flesh of the body. Dogs have an intelligent nature, which is why they help officers in catching thieves and strangers. They consist of a very loud barking nature..  </p>
        </div>

      </article>
    </div>
    <div class="right">
    <article class="card">
        <header>
          <h2>Little Doggo</h2>
        </header>

        <div class="image"><img src="https://i.imgur.com/0l8iHZD.jpg" alt="a little puppy in the grass"></div>

        <div class="content">
          <p>A dog is a beautiful creature on the earth that consists of four legs and sharp teeth. The teeth of a dog are tough and bright, which helps in biting the flesh of the body. Dogs have an intelligent nature, which is why they help officers in catching thieves and strangers. They consist of a very loud barking nature.. </p>
        </div>

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

CSS :

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  display: block;
}

body {
  font: 1em Roboto, sans-serif;
  background: whitesmoke;
}

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
}

.card {
  background: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 12px;
  display: grid;
  overflow: hidden;
}

.card .image {
/*   border: 10px solid #000; */
  border-radius: 10px;
}

.card .content {
  padding: 10px;
}

.card h2 {
  margin: 0;
  padding: 10px;
}

/* make the two grid items a containment context */
.left,
.right{
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 20px;
  }

  .card h2 {
    padding: 0;
    margin: .5em 0 0 0;
  }

  .card header {
    grid-row: 1;
    grid-column: 2;
  }

  .card .image {
    grid-row: 1 / 3;
    grid-column: 1;
  }

  .card .content {
    grid-column: 2;
    grid-row: 2;
    padding: 0 20px 20px 0;
  }
}

HTML:

<div class="wrapper">
  <div class="left">
    <article class="card">
      <header>
        <h2>Cross Browser Testing</h2>
      </header>

      <div class="image"><img src="https://i.imgur.com/dV3ywkg.png"></div>

      <div class="content">
        <p>Browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems. </p>
      </div>

    </article>
  </div>
  <div class="right">
  <article class="card">
      <header>
        <h2>Cross Browser Testing</h2>
      </header>

      <div class="image"><img src="https://i.imgur.com/dV3ywkg.png"></div>

      <div class="content">
        <p>Browser & app testing cloud to perform both exploratory and automated testing across 3000+ different browsers, real devices and operating systems. </p>
      </div>

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

CSS:

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: 100%;
  display: block;
}

body {
  font: 1.2rem Roboto, sans-serif;
  background: whitesmoke;
  line-height: 1.5;
}

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
}

.card {
  background: white;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 12px;
  display: grid;
  overflow: hidden;
  max-width:400px;
}

.card .image {
/*   border: 10px solid #000; */
  border-radius: 10px;
}

.image > img{
/*   object-fit:contain; */
}

.card .content {
  padding: 10px;
}

.card h2 {
  margin: 0;
  padding: 10px;
}

/* make the two grid items a containment context */
.left,
.right{
  container-type: inline-size;
}

/* the card is placed as a child of the two grid items, displaying as one or two columns  */
@container (min-width: 500px) {
  .card {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 20px;
  max-width:100%;

  }

  .card h2 {
    padding: 0;
    margin: .5em 0 0 0;
  }

  .card header {
    grid-row: 1;
    grid-column: 2;
  }

  .card .image {
    grid-row: 1 /3;
    grid-column: 1;
    height:100%;
/*     object-fit: cover; */
  }

  .card .content {
    grid-column: 2;
    grid-row: 2;
    padding: 0 20px 20px 0;
  }
}

Note: View this example in Chrome Canary with container queries enabled.

For those who aren’t using Chrome canary, here are the output images at different container sizes.

We created a simple card that resizes and adapts to fit any layout and container in our example. Our one container has a width of ⅔ and the other one of ⅓. This means our card component will have a width of 1066px and 534px at a viewport width of 1600px.

We want our container to look slightly different at different breakpoints depending on its available space while remaining responsive. We could do this with a media query, but to do that, we’d have to make changes regarding the viewports meta-information rather than the container itself. This means we must constantly watch for changes to the screen size and adjust our components according to that particular size.

Although this might not seem like an issue, it could quickly lead to the use of too many media queries to target if we had multiple containers because we would need to make sure all elements on the page, not just the card component, are responsive.

This is where CSS Container Queries come into play. Let’s go over our above code example again and see how we can turn this into a container:

<div class="wrapper">
    <div class="left">
      <article class="card">
        <!-- Card Content -->
      </article>

To query elements, we first need to make the parent element a container by setting the container property on the parent element. The container property takes two values: container-type and container-name.

Notice how the element with the .card class is wrapped by a parent element? This would be our parent container, and our card would adjust its size, layout, and styles based on the meta information of this element.

Let’s go ahead and make our element with the left class a container, so its children elements can be queried based on its meta-information.

.left{
  container: inline-size;
}

We set the container property to inline-size because we want containment to happen on the inline axis.

The container property and value are set on our .left class, which automatically turns the container element into a queryable container. So now, we can change the card element whenever the size of our container element changes.

We can change the style or layout of our card element at certain breakpoints. We can set these breakpoints similarly to how media queries breakpoints are set. You can learn more about it by going through our blog on CSS breakpoints.

Let’s look at the breakpoints we put in the above example to see how CSS Container Queries handle changes based on our breakpoints and how CSS Container Queries compare to media queries.

In our example, we started by building out how our card component would look when its parent container has the smallest width, which is any width less than 500px. We want it to look like this:

This would be our starting point for our card component. Since its parent container is now a container that can be queried, we can go ahead and start making changes to the layout and style at different breakpoints depending on the current width of the parent container.

We do that by setting breakpoints. Our breakpoint is when our parent container is at a min-width of 500px (500px or greater), and we start defining a new look for our card container. Here we want our container to look like this:

Code Example:

@container (min-width: 500px) {
    .card {
      grid-template-columns: 1fr 2fr;
      grid-template-rows: auto 1fr;
      align-items: start;
      column-gap: 20px;
    }

    .card h2 {
      padding: 0;
      margin: .5em 0 0 0;
    }

    .card header {
      grid-row: 1;
      grid-column: 2;
    }

    .card .image {
      grid-row: 1 / 3;
      grid-column: 1;
    }

    .card .content {
      grid-column: 2;
      grid-row: 2;
      padding: 0 20px 20px 0;
    }
  }

If we want our card element to look slightly different at another breakpoint, we can simply follow the same process for every new breakpoint.

CSS Container Queries enable us to create more robust and reusable UI components that can adapt to nearly any layout and container, as shown in the above two examples. This would’ve been a lot more difficult with media query because it relies on the information of the entire viewport.

With container queries, the card component could be placed in a narrow or wide column on the webpage and still look good and responsive. Furthermore, if there is enough space in our container queries example, it displays as a two-column layout, otherwise, it has a block layout.

In our example above, container queries helped us achieve this:-

A block layout for smaller sections of the webpage:

A two-column layout for when we have more space:

The examples above show the power of CSS Container Queries and how vital they are in the component-driven development world. Now that we have a basic understanding of CSS Container Queries and how they function, let’s look at a more detailed code example.

HTML:

<div class="page-container">
  <div class="card-container card-1" data-size="0">
    <div class="card">
      <figure>
        <img src="lamdatest.png" />
      </figure>
      <div>
        <div class="meta">
          <h2>Cloud Selenium Testing</h2>
          <span class="subtitle">A cross-browser testing platform</span>
        </div>

        <div class="notes">
          <p class="desc">
            In this episode we narrow our focus on user-preference-based media
            queries, which enable you to create personalized experiences based
            on your users custom settings and needs.
          </p>
          <div class="links">
            <h3>Lists</h3>
            <ul>
              <li>
                Selenium Testing →
                <a href="#">https://www.lambdatest.com/selenium-automation</a>
              </li>
              <li>
                Cypress Testing →
                <a href="#">https://www.lambdatest.com/cypress-testing</a>
              </li>
              <li>
                Hyper Execute<a href="#"
                  >https://www.lambdatest.com/hyperexecute</a
                >
              </li>
              <li>
                Visual Regression Cloud
                <a href="#"
                  >https://www.lambdatest.com/smart-visual-ui-testing</a
                >
              </li>
              <li>
                Automation Testing Cloud<a href="#"
                  >https://www.lambdatest.com/automation-testing</a
                >
              </li>
            </ul>
          </div>
        </div>

        <button>Start Free Testing</button>
      </div>
    </div>
  </div>
  <div class="card-container card-2" data-size="0">
    <div class="card">
      <figure>
        <img src="lamdatest.png" />
      </figure>
      <div>
        <div class="meta">
          <h2>Cloud Selenium Testing</h2>
          <span class="subtitle">A cross-browser testing cloud</span>
        </div>

        <div class="notes">
          <p class="desc">
            LambdaTest is a cloud-based cross browser testing tool that allows
            you to perform cross browser testing for web applications across
            more than 2000 browsers, operating systems, and devices
          </p>
          <div class="links">
            <h3>Lists</h3>
            <ul>
              <li>
                Selenium Testing →
                <a href="#">https://www.lambdatest.com/selenium-automation</a>
              </li>
              <li>
                Cypress Testing →
                <a href="#">https://www.lambdatest.com/cypress-testing</a>
              </li>
              <li>
                Hyper Execute →
                <a href="#">https://www.lambdatest.com/hyperexecute</a>
              </li>
              <li>
                Visual Regression Cloud →
                <a href="#"
                  >https://www.lambdatest.com/smart-visual-ui-testing</a
                >
              </li>
              <li>
                Automation Testing Cloud →
                <a href="#">https://www.lambdatest.com/automation-testing</a>
              </li>
            </ul>
          </div>
        </div>

        <button>Start Free Testing</button>
      </div>
    </div>
  </div>
</div>

CSS:

body {
  font-family: "Google Sans", system-ui, serif;
  line-height: 1.5;
  padding: 2rem 1rem;
  background: whitesmoke;
}

.page-container {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 1rem;
}

img {
  width: 100%;
}

.card {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 2rem;
  margin: 0 auto;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 1rem;
  border-radius: 7px;
}

.card-container:before {
  content: attr(data-size);
  position: absolute;
  padding: 4px;
  left: 0;
  right: 0;
  top: -1.4rem;
  width: 6ch;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  border-radius: 4px;
  background: black;
  color: white;
}

h2 {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
}

h3 {
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 1rem 0 0.25rem;
  line-height: 1;
}

a {
  color: gray;
}

a:hover {
  color: black;
}

.subtitle {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 300;
  color: gray;
}

button {
  border: none;
  padding: 0.7rem;
  background: black;
  color: white;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin-top: 1rem;
}

/* Container Queries */

.card-container {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .subtitle {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 2.2rem;
  }
}

@container (max-width: 650px) {
  .desc {
    display: none;
  }

  h2 {
    font-size: 2rem;
  }

  .card {
    gap: 1rem;
  }
}

@container (max-width: 460px) {
  .card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }

  button {
    display: block;
    margin: 1rem auto 0;
  }
}

@container (max-width: 300px) {
  h2 {
    font-size: 1.5rem;
  }

  .subtitle {
    display: none;
  }
}

HTML:

<div class="page-container">
  <div class="card-container">
    <div class="card">
      <figure>
        <img src="https://i.imgur.com/2xiaL5l.png" />
      </figure>
      <div>
        <div class="meta">
          <h2>Cloud Selenium Testing</h2>
          <span class="subtitle">A cross-browser testing platform</span>
        </div>

        <div class="notes">
          <p class="desc">In this episode we narrow our focus on user-preference-based media queries, which enable you to create personalized experiences based on your users custom settings and needs.</p>
          <div class="links">
            <h3>Features</h3>
            <ul>
              <li>Selenium Testing </li>
              <li>Cypress Testing </li>
              <li>Hyper Execute </li>
              <li>Visual Regression Cloud </li>
              <li>Automation Testing Cloud </li>
            </ul>
          </div>
        </div>

        <button>Start Free Testing</button>
      </div>
    </div>
  </div>
  <div class="card-container">
    <div class="card">
      <figure>
        <img src="https://i.imgur.com/2xiaL5l.png" />
      </figure>
      <div>
        <div class="meta">
          <h2>Cloud Selenium Testing</h2>
          <span class="subtitle">A cross-browser testing cloud</span>
        </div>

        <div class="notes">
          <p class="desc"> LambdaTest is a cloud-based cross browser testing tool that allows you to perform cross browser testing for web applications across more than 2000 browsers, operating systems, and devices</p>
          <div class="links">
            <h3>Features</h3>
            <ul>
              <li>Selenium Testing </li>
              <li>Cypress Testing </li>
              <li>Hyper Execute </li>
              <li>Visual Regression Cloud </li>
              <li>Automation Testing Cloud </li>
            </ul>
          </div>
        </div>

        <button>Start Free Testing</button>
      </div>
    </div>
  </div>
</div>

CSS:

body {
  font-family: 'Google Sans', system-ui, serif;
  line-height: 1.5;
  padding: 2rem 1rem;
  background: whitesmoke;
}

.page-container {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 1rem;
}

img {
  width: 100%;
}

.card {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 2rem;
  margin: 0 auto;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 1rem;
  border-radius: 7px;
}

h2 {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
}

h3 {
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 1rem 0 0.25rem;
  line-height: 1;
}

li {
  color: gray;
  cursor:pointer;
  letter-spacing:1px;
}

li:hover{
  color: black;
}

.subtitle {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 300;
  color: gray;
}

button {
  border: none;
  cursor:pointer;
  padding: 0.7rem;
  background: black;
  color: white;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin-top: 1rem;
}

button:hover{
  color: lightgray;
}

/* Container Queries */

.card-container {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .subtitle {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 2.2rem;
  }
}

@container (max-width: 650px) {
  .desc {
    display: none;
  }

  h2 {
    font-size: 2rem;
  }

  .card {
    gap: 1rem;
  }
}

@container (max-width: 460px) {
  .card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }

  button {
    display: block;
    margin: 1rem auto 0;
  }
}

@container (max-width: 300px) {
  h2 {
    font-size: 1.5rem;
  }

  .subtitle {
    display: none;
  }
}

strong {
  font-weight: 800;
}

i {
  font-style: italic;
}

We created two similar card components that can resize and adapt to fit in any container by using the CSS Container Queries. Now, we want our container to look slightly different at different breakpoints depending on its available space while remaining responsive. So as we can see in the above CSS code, we added 4 different breakpoints for four different layouts. Let’s have a look at them:

For containers more than 850px:

For containers less than 850px :

For containers less than 650px:

For containers less than 460px:

For containers less than 300px:

As we’ve seen from the previous examples, CSS Container Queries are best used for highly reusable components with a layout that depends on the available container space and that can be used in various contexts and added to different containers on the page.

This Playwright tutorial will guide you through the setup of the playwright automation framework, which will enable you to write end-to-end tests for your future projects.

How to perform responsiveness testing of CSS Container Queries?

It’s important to test your website on multiple screen sizes to ensure that it looks and behaves correctly on all of them.

You can use a mobile-friendly tester like LT Browser to test the responsiveness of your website across various pre-installed device viewports for Android, iOS, Windows, and macOS. It also offers other features like:

Check mobile view of websites.
Compare side-by-side view of the website.
Generate performance reports of your websites powered by Google Lighthouse.
Get JavaScript Error reports.
Test websites across different network conditions.
One-click bug logging and video recording of test sessions.

You can also try our new Chromium-based LT Browser 2.0, which has several new features and enhancements. Try LT Browser 2.0 now.

To get started, check our support documentation — Getting started with LT Browser 2.0.

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

It’s a Wrap!

Once the spec has been implemented and widely supported by browsers, CSS Container Queries might become a game-changing feature. CSS Container Queries are an impending approach for moving beyond media queries tied to the viewport. For many years, developers have desired the ability to change an element’s width based on its container’s width. Therefore, it is only logical that elements have a way to be responsive based on their parent’s container meta information rather than the entire viewport.

As it stands, CSS Container Queries are still in an early experimental phase, and the implementation is prone to change. We hope to see the final draft specifications for this feature soon so we can all start using it. Until then, keep experimenting !!

Thank you for reading.