celeryclub/element-queries.md

Last active January 14, 2016 17:37

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/celeryclub/562c8d520a8312a29819.js"></script>
Save celeryclub/562c8d520a8312a29819 to your computer and use it in GitHub Desktop.

Download ZIP

Element Query talk

Raw

element-queries.md

What are Element Queries?

Also called container queries
A way to change style based on element dimensions
Good for reusable components
They don't exist

The Problem with Element Queries

Circular dependencies
Parents affect size of children
Children affect size of parent (float, position: absolute)
Performance

The Future Solution

Viewport element - like an iframe
Its dimensions cannot be altered by its descendants

The Good Enough for Now Solution

Prollyfills
Good: https://github.com/elqteam/elq
Not that good: http://elementqueries.com/
Use CSS in combination with these prollyfills
Demo: http://codepen.io/celeryclub/pen/NxvmOV

Notes

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