Tyson Matanich

Media Queries Are Not The Answer: Element Query Polyfill

Responsive Web design has transformed how websites are designed and built. It has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. This, however, deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container.

Extensive use of media queries might be the answer for today, but it is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size...

Continue reading... View on GitHub

Full article is published on Smashing Magazine.

Important Update: CSS Container Queries

As element queries got closer to implementation, they received a new name that better reflected their functionality. Element queries are now CSS Container Queries. In September 2022 browser support landed in Chrome, Edge, and Safari. Opera followed suit a few months later, then on Valentine's Day 2023 Firefox joined the club and showed us all some love.

CSS Container Queries are supported in the following browsers:

  • Chrome 106 - Sep 27, 2022
  • Edge 106 - Sep 15, 2022
  • Safari 16.0 - September 12, 2022
  • Firefox 110 - February 14, 2023
  • Opera 94 - December 15, 2022
  • Chrome for Android 109 - January 10, 2023
  • Safari on iOS 16.0 - September 12, 2022
  • Opera Mobile 73 - February 2, 2023
  • Android Browser 109 - January 10, 2023

View up to date support on Can I Use. The list above was updated in February 2023.

It's exciting to see how much progress has occurred since I published my article almost 10 years ago. Thank you to everyone that helped make this possible!

Further reading