Skip to content

Instantly share code, notes, and snippets.

@jonathantneal

jonathantneal/README.md

Created October 10, 2012 19:34
Show Gist options
  • Save jonathantneal/3867890 to your computer and use it in GitHub Desktop.
Save jonathantneal/3867890 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Elements
Raw
README.md

Responsive Elements

Responsive Elements is a proposal to extend the functionality of Media Queries to apply to Elements, allowing individual Elements to respond to local changes. Like existing Media Queries, these element media queries would consist of at least one expression that limits the scope of the selector; such as width, height, and aspect ratio.

Syntax

[selector]:media([query]) { [declarations] }

Examples

.heading { font-size: 2em; }

.heading:media(max-width: 479px) {
	font-size: 1em;
}

Example 1

Example 2

.calendar *:matches(.day, .panel) {
	width: 100%;
}

.calendar:media(min-width: 360px) *:matches(.day, .panel) {
	width: 50%;
}

Example 1

Example 2

Advantages

Responsive Elements respond to local conditions, even when the document conditions do not change. For example, a widget can change its appearance when displayed in a narrow column or a wide column, even if in both scenarios the document width is the same.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment