- From: Brian Kardell <bkardell@gmail.com>
- Date: Wed, 27 Jul 2011 10:47:25 -0400
- To: www-style@w3.org
So to put this into somewhat more concrete terms, here is something
more detailed in terms of what might be a useful meta-definition that
could be exposed for "things that look like rules" which, for whatever
reason, that the browser
cannot understand but can still mostly parse because of the
forward-compatiblity ideas in CSS...
Rule definition (object):
"selectors" - an array of selector definitions
(see below - array because of groups)
"declarations": - an object defining the guts of the rules in meta terms
Selector definition (object):
"select" - a simple string representation of a selector
"specificity" - a numerical representation of the selector's specificity
Declarations definition (object):
"module": - the name of the module (background, border, etc... )
Easily recognizable as any property before a dash or
alone in shorthand, right?
("properties" - an object whose keys are the properties specified
for this module
and whose values are value definition objects.
||
"shorthand") - an array of unnamed value definition objects
Values definition (object):
"type" - string whose purpose is to help identify
parseable css types
"values" - an array of primitives or nested value definitions
(mostly for aiding further parsing of complex
values which include functions - see examples below)
While I understand the idea of not prefixing and wanting to use
prefixed properties, I'm not going to use them in these examples
because I think it adds complexity in reading, and as I discussed
before - there may be "safe" ways to avoid that by requring that these
be in a seperate sheet with a differnt mime type or something. In any
case, using this as a definition, if you had this today and someone
had this definition, but a browser didn't support it...
div {
transition-property: opacity, left, top, width;
transition-duration: 2s, 1s;
}
Today, things like shims have to go scan the document for all of the
links/style tags, then in the case of links make an XHR to get the
text, then parse the text, then somehow identify which ones need
shimming in this particular browser, etc. This would allow them to
just ask the browser for the "things that look like rules, but I am
unable to respect" and it would give you the rule above as:
{
"selectors": [ { "select": "div", "specificity": 1 } ],
"declaration": {
"module": "transition",
"properties": {
"property": [
{ "type": "constant", "values": ["opacity"] },
{ "type": "constant", "values": ["left"] },
{ "type": "constant", "values": ["top"] },
{ "type": "constant", "values": ["width"] }
],
"duration": [
{ "type": "time", value: ["2s"] },
{ "type": "time", values: ["1s"] }
]
}
}
Or if the rule was:
div {
transition: opacity 1s, height 2s;
}
Then it would give you:
{
"selectors": [ { "select": "div", "specificity": 1 } ],
"declaration": {
"module": "transition",
"shorthand": [
[
{ "type": "constant", "values": ["opacity"] },
{ "type": "time", "values": ["1s"]
],
[
{ "type": "constant", value: ["height"] },
{ "type": "time", values: ["2s"] }
]
]
}
This format would also allow the complex values and functions (not shorthand):
.article{
box-shadow: rgba(1, 0, 0, 0.4) 10px 10px;
}
... to be parsed fairly generically into something much easier to deal with:
{
"selectors": [ { "select": ".article", "specificity": 16 } ],
"declaration": {
"module": "box",
"properties": {
"shadow": [
{
"type": "complex",
"values": [
{
"type": "function"
"name": "rgba",
"values": [
{
"type": "number",
"values": [1]
},
{
"type": "number",
"values": [0]
},
{
"type": "number",
"values": [0]
},
{
"type": "number",
"values": [0.4]
}
]
},
{
"type": "pixel-unit",
"values": [10]
},
{
"type": "pixel-unit",
"values": [10]
}
]
},
{ "type": "constant", "values": ["left"] },
{ "type": "constant", "values": ["top"] },
{ "type": "constant", "values": ["width"] }
]
}
}
Received on Wednesday, 27 July 2011 14:47:53 UTC