Breaking News: Grepper is joining You.com. Read the official announcement!

css container queries

CoderHomie answered on December 5, 2022 Popularity 9/10 Helpfulness 4/10

answer css container queries

css container queries

Comment

<!-- The CSS -->
<style>
/*
	You can create a containment context on the container <div>
    using the container-type property:
*/
.container {
  container-type: inline-size;
}

/*
	Once a containment context is created, you can use 
    the @container at-rule to write a container query. 
    The query in the following example will apply styles 
    to elements based on the size of the nearest ancestor 
    with a containment context. Specifically, this query 
    will apply a larger font size for the card title if 
    the container is wider than 700px:

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* Container query applied if the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

/*
	If other areas of the page are also containment contexts, 
    you can use the same component in those areas and it will 
    respond to the relevant containment context. This makes 
    reusable components a lot more flexible without needing to 
    know specifically where they will be used each time.
*/
</style>

<!-- The HTML -->
<div class="container">
  <div class="card">
    <img src="image.png" alt="Cat with two different color eyes" />
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Popularity 9/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: container-queries css html

Link to this answer
Share Copy Link

Contributed on Dec 05 2022

CoderHomie

0 Answers Avg Quality 2/10

css container queries

Contents

More Related Answers

css container queries

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.