W3C home > Mailing lists > Public > public-webplatform@w3.org > April 2014

CSS Media Queries -- Request for feedback on proposed schema

From: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
Date: Mon, 14 Apr 2014 20:37:48 -0600
Message-ID: <CAFDDJ7wLsVj+8e2=yt_bhpP_XM38vaQs4+p6Sx_fZ5Nebozpbw@mail.gmail.com>
To: public-webplatform@w3.org
Hello all,

While trying to make a dent on the long list of pages marked "Needs
Summary" I discovered a set of completely empty (except for a title) pages
on CSS media features (i.e., the features you would use in a media query).
 From there I discovered that there really wasn't any content about CSS
media types and queries except for a pair of tutorials imported from
Mozilla [1] [2].

That seemed to me like a good area for a new user to muck around in without
worrying about messing up anyone else's workflow.

I took a detour through the CSS data types category, and spent a good chunk
of the weekend using them to familiarize myself with the wiki.  Thanks
to Eliezer
B. on IRC who pointed me to mailing list discussions [3] from last summer
on the topic; luckily, the way I was already organizing things was pretty
much the same as the agreed-upon plan of action! Also thanks to Renoir B.
who cleaned up a couple unnecessary stub pages I created before I found all
the existing pages.

( You can check out the results from
http://docs.webplatform.org/wiki/css/data_types. Most still need
compatibility information, but each page has summaries, description, specs,
and examples. )

For the data type pages, I just used the default template structure. There
might be some benefit in adding a little extra "semantic" sugar to make the
units for each data type easier to access in lists or target as fragments
in links, but I don't think it's essential.

For the media features & media types, however, a more organized set of
templates would be useful. Opinions and suggestions on the following would
be greatly appreciated.

As I see it, there are three distinct content categories worthy of
different templates:

1. Abstract media type categories

These are categories like "visual" media or "paged" media. They are
important because CSS properties apply to a specific abstract media
category. Currently, the only content the wiki has defining these
categories is a (MediaWiki) property page [4] with a list of allowed
values, which is referenced by the CSS Property template -- however, the
media values in the CSS property pages show up as red links.

Ideally, each media type category should have its own page, auto-linked to
from those CSS property pages, with
* a summary & description of what the category means, and
* three lists (which I think *should* be straightforward to auto-generate):
- specific media types that are included in this category,
- media features that apply to this category,
- CSS properties that apply to this category.

2. Specific media types

These are types like "screen" or "print". They are the names that are used
when targetting a stylesheet or @media block to certain media types.
Each type has a list of abstract categories that it is included in. Since
the list of abstract types already exists as a MediaWiki property, it
should be straightforward to put together a form with a set of checkboxes
to define those.

Beyond that, these pages really only need a summary definition with the
potential for extra info in Notes/Usage blocks.

3. Media features

These are the properties like "width" or "resolution" that are used in a
media feature query. Each one applies to certain abstract media types. They
also have various features which determine the syntax of use -- each has a
particular data type of value that it can be associated with, some have
defined keywords, some can be used with max/min prefixes, etc.

I would want to create a form & template structure similar to what is used
for CSS properties. The final template output would be something like this

<!----------------------------------------------------------------->
=featureName=
==Summary==

==Overview Table==
| Applicable Media | (this would be one of the abstract media categories) |
|-
| Data type | (one of the CSS data types) |
|-
| Allows min/max prefixes | (boolean) |

==Allowed Values== (if the data type is "keyword")
| keyword | meaning |

==Value== (if the data type is a dimension)
(Two different text fields, one defining how the numerical value is
calculated for the media,
and one defining the general meaning of a true/non-zero value)

==Syntax== (should be auto-generatable from the above info, but I need to
learn more about templates!)
@media ({featureName})
/* Apply these rules if {insert definition of true/non-zero value} */

@media ({featureName}: {<data-type>} )
/* Apply these rules if {featureName} is exactly {<data-type>} . */

(if allows min/max is true:)
@media (min-{featureName}: {<data-type>} )
/* Apply these rules if {featureName} is at least {<data-type>} . */

@media (max-{featureName}: {<data-type>} )
/* Apply these rules if {featureName} is at most {<data-type>} . */

==Examples==
(real-world examples with numbers)

(usage, notes, specifications, compatibility)

<!----------------------------------------------------------------->

I think that should all be fairly straightforward except for the Syntax
section. If figuring out the templates for auto-generating syntax turns out
to be too much of a headache, it's not essential: there's only about a
dozen of these pages, so just creating good examples to demonstrate proper
syntax isn't going to be strenuous.

If anyone who feels comfortable with Semantic MediaWiki templates & forms
is willing to volunteer to be my first contact for questions & support, let
me know.  At some point I'll also need the intervention of someone with
admin privileges, since a (default) CSS_Media_Feature template already
exists and is protected.

And of course, if anyone is interested in the topic and would like to team
up on filling in the content once the templates are in place, that would be
great.  Probably won't be for a month or so, though!

Of course, this could all get put on hold since I noticed that Doug
Schepers' weekly agenda included something about SVG, and that's my real
area of interest...

Best,
Amelia

[1] http://docs.webplatform.org/wiki/css/mediaqueries
[2]
http://docs.webplatform.org/wiki/tutorials/targetting_css_at_different_media
[3] http://lists.w3.org/Archives/Public/public-webplatform/2013Jul/0186.html
[4] http://docs.webplatform.org/wiki/Property:Media
Received on Tuesday, 15 April 2014 02:38:16 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:20:58 UTC