An Interactive Guide to CSS Container Queries
Another terrific interactive tutorial from Ahmad, this time on container queries.
HTML Video Sources Should Be Responsive | Filament Group, Inc.
Removing
mediasupport from HTML video was a mistake.
Damn right! It was basically Hixie throwing a strop, trying to sabotage responsive images. Considering how hard it is usually to remove a shipped feature from browsers, it’s bizarre that a good working feature was pulled out of production.
Related links
Extending Responsive Video with HTML Web Components | Scott Jehl, Web Designer/Developer
Scott gives a thorough step-by-step walkthrough of building an HTML web component, in this case for responsive video:
In this post, I’m going to talk briefly about responsive video, but most of the post will be about using HTML web components to extend native video behavior in very helpful ways. But even if you’re not particularly interested in video development, stick around as I’ll demonstrate how to build an HTML Web Component to progressively enhance anything you need.
Sizes=”auto” pretty much requires width and height attributes — ericportis.com
Huh! I did not know this. Good to know!
Getting started with CSS container queries | MDN Blog
Michelle has written a detailed practical guide to container queries here.
The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed
Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.
- Responsive to the content
- Responsive to the viewport
- Responsive to the container
- Responsive to the user preferences
Related posts
Writing on web.dev
A new free course on responsive web design.
Someday
Changing defaults in browsers …someday.
Fanfare for the common breakpoint
“Common” breakpoints are the new fold.
Respond
Another way of ensuring Internet Explorer gets your layout styles.
Windows mobile media queries
Solving that pesky Windows Phone 7 problem.