CSS-4 and min|max-device-width

I learned this week that CSS4 plans to deprecate device-width queries.

That in my opinion is a mistake and will cause me to not use CSS4.

I've known for awhile that Google and some others recommend against 
using them, but I personally never found their reasoning very compelling 
and device-width queries are very important to me.

Let me start by saying I do not design for iOS. I occassionally test on 
iOS when I have opportunity and so far, designing for Android has worked 
well whenever I test on iOS but iOS devices are just beyond my budget to 
purchase, for mobile I test on an Android phone (variety of browsers) 
and an Android tablet (variety of browsers) and so far using 
device-width that has been good enough to "just work" even when I get 
the opportunity to test on Android devices I didn't design with and with 
iOS devices.

With Android devices, the browser always uses the full available space. 
If there is a way to shrink it so the viewport doesn't use all the 
available space, I'm not aware of it nor have I ever seen people doing 
it, that's a desktop user thing. So on mobile devices there probably 
isn't much consequence to use viewport width instead of device-width but 
the problem exists on the desktop.

I have my own html5 audio player. The browser html5 audio players do not 
support WebVTT captions or chapters and I need both, so I created my own 
audio interface that supports both, complete with its own web font for 
glyphs on the controller interface.

Horizontal space is at a premium on phones, and buttons can't be too 
close together, so I need to know what device is playing the audio and 
max-device-width is the most reliable way to distinguish between phone 
and tablet and laptop/desktop.

On phones/tablets I do not need volume control, those devices have 
easily accessibly physical buttons that allow the user to adjust the 
volume of the media playing.

On phones I don't need need the buttons for next / previous chapter - 
they are nice, but not having them on devices with < 640 CSS px means 
there are fewer buttons on the controls interface reducing the changes 
the user will press the wrong one (the chapter menu for selecting 
individual chapters is still there)

On phones in portrait mode, the progress bar is on a second row from the 
controls - and pressing it doesn't cause the audio to seek, as in 
testing I sometimes pressed it accidentally when trying to press a 
different button.

Using CSS media queries on max-device-width makes it easy to determine 
what the device most likely is.

When I don't use max-device-width but use max-width instead, there's a 
problem on my laptop - a thinkpad T410.

What happens, sometimes I zoom the browser in because I can't see 
something on an image at default. This reduces the CSS pixels and since 
it already is not a widescreen (I hate widescreen), the CSS pixels ends 
up going into tablet range, especially when I don't have the browser 
full screen, and suddenly the layout changes on me - hiding stuff that 
should be there on a laptop / pc including things like media player 
controls.

It's really frustrating on some websites that use responsive images 
where they serve different images to different devices. I'll be zooming 
in on a web page trying to read text on an image and suddenly not only 
does the layout change, but the image itself changes - often serving a 
completely different image.

When max|min-device-width is used for the media queries, that doesn't 
happen. Sure sometimes I end up with a horizontal scrollbar but that's 
preferable to having a tablet layout on my laptop.

max|min-device-width was never required, it was always optional, but for 
many of us it is a very useful feature of CSS that solves problems. It 
makes no sense to remove it from the specification and say that we 
shouldn't be using it.

I may be a nobody, but maybe you should think about the perspective of 
people using those properties before just deciding they are to removed. 
Sometimes knowing the viewport width isn't enough, and it is very bad 
form to have entire images change because a user chose to zoom causing 
the viewport to trigger a different layout.

If you have a logical reason to recommend against it (and I never found 
the arguments Google made to be very logical) then by all means feel 
free to put that in the spec, but remove it?

Sorry but that's a deal breaker for me, and I will not use CSS4 if it 
removes something that is incredibly useful for me for which the 
alternative lowers the quality of my web design.

Alice Wonder of Alice Wonder Miscreations

Thank you for your time

Received on Sunday, 7 January 2018 10:40:39 UTC