Element Queries - Converge 2015

Element Queries Patrick Fulton @patrickfulton April 2015 // ConvergeSE

Released June 2007 Happy 8th 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

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; } }

❤️ 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://bit.ly/1xmdvti ! ! “Media Queries Are
Not the Answer: Element Query Polyfill”  http://bit.ly/1DwQQzM

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://bit.ly/1JAuqOP

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://bit.ly/1z6iSww

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”

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.

http://bit.ly/1CJUrGL USE CASES & REQUIREMENTS FOR ELEMENT 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 queries. •We can use element queries today with the help of polyfills & progressive enhancement.

Recap •Experiment, experiment, experiment

Element Queries Patrick Fulton @patrickfulton April 2015 // ConvergeSE

Element Queries - Converge 2015

Element Queries - Converge 2015

More Decks by Patrick Fulton

Other Decks in Technology

Featured

Transcript