Element Query talk

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

• http://kth.diva-portal.org/smash/get/diva2:850230/FULLTEXT01.pdf
• http://ricg.io/
• http://gridstylesheets.org/guides/ccss/