Re: [mediaqueries] Add "<" and ">" syntax?

On 12/11/2013 7:10 PM, Tab Atkins Jr. wrote:
> Media Queries currently states that it purposely went with the
> min/max- prefix approach for range-type queries specifically to avoid
> any issues with the "<" character in HTML/XML syntax.
>
> These characters have no issues in modern <style> elements, though I
> suspect they might once have had some, before all browsers recognized
> the contents of <style> as plain text.
>
> Thus, it may be time to reconsider this decision.  I believe that the
> min/max prefixes are harder to use for authors.  You always have to be
> careful with the words "min" and "max", as they can mean opposite
> things depending on exactly how you're using them.  For example, the
> min() function selects the smaller of its argument, but if you have a
> "minimum number", then you take the *larger* of the minimum and the
> attempted value.
>
> Instead, I propose we add another syntax possibility to MQs:
>
> (width < 400px)
> (device-height > 1000px)
> etc
>
> The meaning is the obvious one.  Spaces aren't required around the
> characters. You can use "<", ">", "<=", or ">=".
>
> Possibly extensions are to allow values on either side, like:
>
> (400px < width < 800px)
>
> ...similar to how Python does, for easier statements of ranges.  This
> would make some common practices less fragile and order-dependent.
>
> This idea was independently suggested by the IndieUI group, for
> similar usability reasons.
>
> Thoughts?
>
> ~TJ

How does that work with a link stylesheets?

<link rel="stylesheet" media="speech and (device-aspect-ratio > 16/9)" 
href="example.css">

<link rel="stylesheet" media="screen and (device-width > 800px)" 
href="example.css" />

According to what characters can appear in HTML5 attributes. The HTML5 
spec states that 'unquoted attribute values' must not be used with angle 
brackets [1] so the Media Queries spec must show the following as 
invalid since they could cause failure of HTML parsing.

<link rel=stylesheet media=speech and (device-aspect-ratio > 16/9) 
href=example.css>

<link rel=stylesheet media=screen and (device-width > 800px) 
href=example.css />


1. http://www.w3.org/TR/html5/syntax.html#attributes-0


ALan



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 13 November 2013 03:40:50 UTC