Yes, but in my opinion, using media queries should be avoided. Media queries try to guess the screen size from the resolution, which is a bad hack in my eyes. And they imply assumptions about which screen sizes and pixels densities exist, something I'm trying to avoid when building truly responsive websites.
This is half true; you still can't achieve exact output even with CSS (try viewing even very large sites with FF vs Chrome, they won't be identical to the pixel).
Media queries also let you adapt to devices/monitors, but realistically you can only cover the largest 5 or six cases.
At some point you're going to get user who's on some crazy screen resolution with a sideways monitor, or a strange tablet, and you'll have to sacrifice total control. 'Nature of the beast.
None of those things are what a typical website has any business accessing. Even the screen resolution for responsive layouts could (should) presumably be handled by correct application of CSS.
You're right that you still cannot do arbitrary media queries there. But from my experience (I'm not a designer though), staying within a set of predefined breakpoints (xs, sm, md, lg, xl) is often enough for most web pages.
The style attribute doesn't allow you to do anything responsive at all on the other hand.
Maybe, but I think this is a solvable problem from the browsers perspective. In my experience building websites the need for image dimensions is near zero.
1. The penalty for not displaying image dimensions is nearly insignificant because almost _all_ images that you would put width/height on are from content managers, not designers.
2. Mobile content: On a phone the content moves down after the image is loaded. (everything is just a single column) Which is a preferable action than a big empty space. So, I prefer _not_ including dimensions on user content for phones.
3. Responsive design: All CSS I have been using for years now has "max-width:100%".
Therefore (since a lot of traffic is mobile) most (rough guess) of images loaded from sites I've worked on the image dimensions are recalculated as soon as the image is loaded anyway.
4. Srcset: Multiple possible images downloaded that are _chosen_ by the browser at run time. You already have to provide dimensions. But what if they aren't exact? Go back to #1.
5. Web design: I can't even recall the last time I put an image in a design using the <img> tag that affected layout. (maybe if you go back to the 90s this would have mattered)
In a lot of cases you shouldn't even use Javascript for this, responsive layouts can be built using CSS media queries based on viewport size.
More advanced webapps might occasionally need to do something fancier than that if the mobile vs desktop functionality is (for some reason) substantially different instead of just rearranged.
Browsers need to rethink what is available via JavaScript. Scroll position, cursor location, etc. should not be readable. CSS Media queries for building responsive should still be fine to write, but the JavaScript API should be silent as to what styles are actually applied (to prevent workarounds for say, inferring the screen height/width from media query styles).
If we go back to basics, where I can make a network request, and the body includes a useful response (e.g., no need for running JS to populate the DOM, as is the case with SPAs that aren't server-side rendered), we can free ourselves from those more advanced heuristics.
It will likely always be cat-and-mouse, but we can rethink the universe of data available within the browser (that can be reported back via XHR requests), and make that universe much smaller.
It only got one short mention in the article, but doesn't lack of media query support for inline styles kill this approach for any site that needs to be responsive?
This is silly. Media Queries aren't the non standards-compliant nightmare you make them out to be. With the ability to check for greater than or less than values for a variety of widths and devices I can create a site that looks perfect on an iphone or ipad at horizontal or vertical or an htc or a notebook or laptop or desktop.
It's rarely a good idea to target specific devices with media queries. You'd rather make sure that you website displays gracefully on any possible viewport size. #futurefriendly
Yes, using fixed widths with media queries is a fairly common approach (sometimes termed adaptive web design rather than responsive web design). If you feel that the design needs more control (over proportions, etc) then it's sometimes a good trade-off but it's a decision I'd make on a project by project basis.
reply