Re: [css3-meadiaqueries] Proposal for "content-width" and "content-height" media features

Hopefully everyone will move to overlay scrollbars, making this less
of an issue. Most (if not all) mobile platforms does that already and
there seems to be plans for Chrome going down this road on desktop as
well:

http://www.youtube.com/watch?v=cfyI8NFzQ6w&feature=c4-overview&list=UUhksX9sM2u0-5RoVlKWxXbg

Kenneth



On Mon, Sep 9, 2013 at 11:47 AM, Robert Koritnik
<robert.koritnik@gmail.com> wrote:
> To whom it may concern
>
> Current W3C Recommendation document about CSS3 media queries defines width
> (and height) and device-width (and device-height) media features. Let's
> focused on the former and see why it's problematic and how it could be
> solved.
>
> The problem
> Width and height ("these" from now on) media features gives responsive web
> designers/developers the possibility to adjust content to available space.
> The problem is they don't get pixel-accurate control as these media features
> also include scrollbars which can vastly differ in their size over different
> browsers and operating systems. Touch devices usually don't even display a
> permanent scrollbar on scrollable content. All these differences mean that
> there is no reliable to efficiently control the amount of available space to
> designers/developers. The usual approach to applying media queries is to
> apply some safety space which can be occupied by a scrollbar when displayed.
> This means that for non-fluid layout we can't use the whole space which
> becomes even more apparent when there're no scrollbars as on touch devices
> that usually already have less space to start with.
>
> The proposed solution
> I would like to propose additional media features content-width and
> content-height that only account for actual available space not including
> scrollbars when they're displayed on root element. This would give
> designers/developers exact control of available space and they could use it
> accurately down to a single pixel. As scrollbars would be excluded from
> these values it would make it browser and OS independent and always correct.
>
> Example
> This is an example of a CSS media query:
>
> @media screen and (max-content-width: 320px) {
>     ...
> }
>
>
> Alternative solution
> As W3C Recommendation describes, media queries syntax could include complex
> expressions:
>>
>> Properties may accept more complex values, e.g., calculations that involve
>> several other values.
>
>
> If there was additional media feature scrollbar-width (and scrollbar-height)
> available content space could as well be accurately calculated.
>
> Kind regards,
> Robert Koritnik
> Pleiado d.o.o.
> Developer/consultant on Microsoft platforms and technologies
> mobile +386 41 322 735
> skype +44 20 71 93 08 46
> skype robert.koritnik
> twitter @robertkoritnik
> google+ Robert Koritnik
> linkedin Robert Koritnik
> blog Erratic software development



-- 
Kenneth Rohde Christiansen
Web Platform Architect, Intel Corporation.
Phone  +45 4294 9458 ﹆﹆﹆

Received on Wednesday, 9 October 2013 13:04:27 UTC