Re: [csswg-drafts] [css-values-4] Add vhc value (#4329)

> > * If the definition of `vh` _is_ being considered for change within the CSS spec (for example, to mean "relative to the largest possible viewable area"), either here or in some other proposal, then please can someone point me to that, so that I can comment there?
> 
> I think of this as less a _change_, and more a _clarification_, to reflect existing practice of how browsers are already interpreting `vh` on mobile platforms.

I'd like to challenge the point about this being a _clarification_ not a _change_. About a year to a year and a half ago, all browsers, including mobile browsers, were interpreting `vh` as being relative to the _visible_ viewport. This was [its initial definition back in 2005](https://www.w3.org/TR/2005/WD-css3-values-20050726/#vh), was also [its defintion in the first candidate recommendation back in 2012](https://www.w3.org/TR/2012/CR-css3-values-20120828/#viewport-relative-lengths) and remains [its unambiguous definition in the CSS current spec](https://www.w3.org/TR/css-values-3/#viewport-relative-lengths):

- "*Viewport*-percentage lengths" defined relative to the `initial containing block`: https://www.w3.org/TR/css-values-3/#viewport-relative-lengths
- ... and the definition of `initial containing block` links this to the `viewport`, "For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media." https://www.w3.org/TR/CSS21/visudet.html#containing-block-details
- ... and the `viewport` definition makes it clear that this is the area and through which users can interact with the content:  "User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document."

From the moment `vh` became widely available in browsers, content creators (like ourselves) were using it for both positioning and scaling content. Then, in the past year and a bit mobile browsers, wanting to implement hiding toolbars, found that their chosen design didn't provide a good user experience. Instead of changing the design to fix it, they took a wrong turn and decided to reinterpret `vh` to be the maximum possible viewport size instead in an attempt to patch the problem. However, this patch had the unintended consequence of breaking websites like our own that were using `vh` for positioning of content within the visible viewport. The [current draft of this proposal](https://github.com/w3c/csswg-drafts/pull/5108/commits/425c077f1de39b16844be7425f9a8b3cb9d13e4c#diff-2e9de5b8f86c45f34eab818168ca5773e588678b632e2f5f8dcf5227c5a83e19R1008) unnecessarily (and unacceptably in my view) formalises a change of the definition of `vh` from "relative to the viewport area (the viewport being what you can see and interact with)" to "relative to the maximum possible viewport area". It is therefore accepting a backwards incompatible change that results in breakage for websites that have been using the current definition of `vh` - which has been in the spec in some form for 15 years. The current draft text definitely represents a _change_ and not a _clarification_, since it changes the way that some websites using `vh` function in such a way that they are broken.

The wrong turn that mobile browsers have made is relatively recent in the grand scheme of things and I observe that the design of such features is still in flux, and so it can be fixed/undone/improved. So I don't see any need to change the spec with regards to `vh` meaning the visible viewport. However, clarification on how browsers should handle changes in the visible viewport due to additional toolbars and whatnot and giving some leeway for brief/temporary overlays, [as per my previous post](https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-731476294), would be useful, I think and would hopefully allow browsers to update their design in a way that is good for user experience and content creators alike.

-- 
GitHub Notification of comment by mind-bending-forks
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-731567612 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 21 November 2020 11:42:34 UTC