index.bs

<pre class='metadata'>
Title: Container Queries
Shortname: container-queries
Level: 1
Status: CG-Draft
Group: ricg
URL: https://github.com/ResponsiveImagesCG/container-queries
Editor: Mat Marquis, Bocoup http://bocoup.com
Abstract: Container queries allow an author to control styling based on the size of a containing element rather than the size of the user’s viewport.
!Version History: <a href="https://github.com/ResponsiveImagesCG/container-queries/commits/gh-pages">Commit History</a>
!Version History: <a href="https://twitter.com/respimg_commits">Github commits on Twitter</a>
!Participate: <a href="http://w3c.responsiveimages.org/">Join the Responsive Issues Community Group</a>
!Participate: <a href="http://list.responsiveimages.org/">Public Mailing List</a>
!Participate: <a href="irc://irc.w3.org:6665/#respimg">IRC: #respimg on the W3C IRC server</a>
!Participate: <a href="https://twitter.com/respimg">Twitter</a>
!Participate: <a href="https://github.com/ResponsiveImagesCG/container-queries/">GitHub</a>
</pre>

Introduction {#intro}
=====================

	Given a complex responsive layout, developers often require granular control over styling elements relative to the size of their parent container rather than the viewport size. Container queries allow an author to control styling based on the size of a containing element rather than the size of the user’s viewport.


## Abstract ## {#abstract}

### Limitations of Viewport-Based Media Queries ## {#mq-problems}
(This section is not normative.)

Limiting breakpoints to viewport size fundamentally conflicts with the goal of creating modular page components, often requiring a number of redundant CSS rules and complex exception cases spanning multiple viewport-based breakpoints. This problem is compounded depending on how dramatically a module adapts at each of its breakpoints. Once viewport-based breakpoints have been tuned to suit the limited and predictable number of contexts a module might occupy, adjustments to styling elsewhere on the page (layout, width, padding/margins, etc.) may cause a need to revisit a module’s viewport-based breakpoints completely, as those styles are disconnected from the context of the module itself.

## When to use Container Queries ## {#when-to-use}

	Container queries are intended for use when…


## Examples of Usage ## {#usage}

[[Inside a CSS stylesheet, one can declare that sections apply to certain media types:]]

<div class="example" id="example-1">
	```css
		.element:media( min-width: 30em ) screen {
			
		}
	```
</div>


Container Queries {#container-queries}
=====================

## Syntax ## {#syntax}

	The formal container query syntax is described in this section, with the rule/property grammar syntax defined in [[!CSS3SYN]] and [[!CSS3VAL]].


Definitions {#defs}
=====================

	The following terms are used throughout this specification so they are gathered here for the readers convenience. The following list of terms is not exhaustive; other terms are defined throughout this specification.


Acknowledgements {#acks}
=====================

	A <a href="http://www.w3.org/community/respimg/participants">complete list of participants</a> of the Responsive Issues Community Group is available at the W3C Community Group Website.