Element (Container) Queries - BDConf DC - October 2015

Element Queries Patrick Fulton @patrickfulton October 2015 // BDConf DC

Released June 2007 Happy 8.5 yr Anniversary!

bit.ly/1gSKdcl

The Internet in 2015

Choose Your Weapons Fluid Grids Flexible Images Media Queries An
Open Mind A New Way of Thinking

Choose Your Weapons An Open Mind A New Way of
Thinking

“The web’s greatest strength, I believe, is often seen as
a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.” JOHN ALLSOPP “A Dao of Web Design” ALA #58 - April 7, 2000

Choose Your Weapons Fluid Grids Flexible Images Media Queries

❤ Media Queries ❤ Device Screen Color Aspect Ratio Orientation
Resolution Height Width

Media Queries .product { background-color: #ede5e2; } @media (min-width: 500px)
{ .product { background-color: green; } } @media (min-width: 700px) { .product { background-color: blue; } }

<body class="internal detail-view"> _category.scss _detail.scss _related.scss _callout.scss

Element Queries

IAN STORM TAYLOR “Media Queries are a Hack” http://bit.ly/1CRGquH “Writing
modular code is about making small objects, and making them self-contained. Media queries don’t let you do that. In most cases, you don’t actually care about the width of the entire document (or screen), you care about the width of your element.”

Element Queries .product { background-color: red; } .product (min-width: 27em)
{ background-color: orange; }

.product { background-color: red; } .product (min-width: 27em) { background-color:
orange; } @media (min-width: 500px) { .product { background-color: green; } } @media (min-width: 700px) { .product { background-color: blue; } }

.product { background-color: red; } .product (min-width: 27em) { background-color:
orange; } @media } } @media } }

❤ Element Queries ❤ Currently, element queries DO NOT have
native browser support.

Polyfills! Rely on data attributes (sometimes) <div class="product" data-eq-pts="small: 300,
medium: 500"> And attribute selectors (also, sometimes) .container[data-eq-state$="small"], .container[data-eq-state$="medium"] { font-size: 1em; }

Polyfills! elementQuery Tyson Matanich http://is.gd/mRliE5 “Media Queries Are Not the
Answer: Element Query Polyfill”  http://is.gd/cotama

elementQuery scans the document.styleSheets collection for CSS rules <nav class="menu"
min-width="500px"> .menu[min-width~="500px"] { background-color: #eee; } Then, it appends attributes to the appropriate selector(s)

Polyfills! BoomQueries BoomTown http://is.gd/ejubum

BoomQueries Uses JS to target selectors, then applies classes at
defined breakpoints boomQueries.add('.component', [ [480, "component--md"], [600, "component--lg"] ]); .component.component--md { background: red; } .component.component--lg { background: orange; } Regular, ol’ CSS

Polyfills! eq.js Sam Richard | @snugug http://is.gd/cadeyi

eq.js Data attribute & values in HTML (data-eq-state gets appended
on resize) <div data-eq-pts="small: 300, medium: 500” data-eq-state="small"> Uses attribute selectors to apply styles .container[data-eq-state$="small"], .container[data-eq-state$="medium"] { font-size: 1em; }

In Production CNN Weather.com Telemundo.com

Code Responsibly Progressive Enhancement

Set Your Goals 1. Rock-solid, mobile-first designs and code 2.
Consider where components will appear

Set Your Goals MEDIA QUERY Use when a module is
always the full-width of viewport ELEMENT QUERY Use when a module appears in multiple contexts

“Most every component we build has a basic and an
enhanced experience, though many have one or more middle levels of enhancement as well. The level of enhancement that each component receives is simply based on the features that are supported by a browser” SCOTT JEHL “Grade the Components”  http://is.gd/RvqtA0

Grade Components, Not Browsers Each component gets a basic experience
and an enhanced experience. Levels of enhancement are based on features that the browser supports

PE for EQs Consider element queries to be a first-level
enhancement. Fallback to mobile-first designs that work well in a single-column layout.

.product (min-width: 500px) { width: 499px; } Infinitely looping style
changes #sadface

http://is.gd/xocuco USE CASES & REQUIREMENTS FOR CONTAINER QUERIES

Recap •We ❤ media queries (but they’re kind of a
hack) •Viewport size reporting via media queries is sometimes too broad. •We can get a component’s specific context by taking advantage of element container queries. •We can use element container queries today with the help of polyfills & progressive enhancement.

Recap •Update your vocab (container queries, not element queries) •Experiment,
experiment, experiment

Element Container Queries Patrick Fulton @patrickfulton October 2015 // BDConf
DC

Element (Container) Queries - BDConf DC - Octob...

Element (Container) Queries - BDConf DC - October 2015

More Decks by Patrick Fulton

Other Decks in Technology

Featured

Transcript