W3C home > Mailing lists > Public > www-style@w3.org > July 2007

Re: Embraced rulesets

From: Mihai Sucan <mihai.sucan@gmail.com>
Date: Mon, 30 Jul 2007 16:41:35 +0300
To: Mihai Alexandru Bîrsan <mihai.birsan@grapefruit.ro>, www-style@w3.org
Message-ID: <op.tv95nlr3mcpsjgr0b0dp@localhost.localdomain>

Le Mon, 30 Jul 2007 12:33:19 +0300, Mihai Alexandru Bîrsan  
<mihai.birsan@grapefruit.ro> a écrit:

>
> Hello!
> I'd like to propose something for the CSS3 syntax regarding recursive  
> rules within declaration blocks. I've sent this email to Bert a couple  
> of months ago, but got no reply, so I thought I'd try this list out.
>
>
> This following example will clear it out:
> Before:
> form {
>   overflow: hidden;
> }
> form select,
> form input.text,
> form textarea {
>   border: 1px solid #d8d2c7;
>   font: 11px Tahoma, sans-serif;
>   color: #333;
> }
> After:
> form {
>   overflow: hidden;
>   select,
>   input.text,
>   textarea {
>     border: 1px solid #d8d2c7;
>     font: 11px Tahoma, sans-serif;
>     color: #333;
>   }
> }

Hello Mihai!

As far as I know, there've been suggestions for introducing new syntax  
features for "aliasing" a set of properties, to be able to easily reuse  
them in other places. I don't know how far those suggestions got.

The syntax you have suggested doesn't seem to allow much code reuse. It's  
just a convenient way of not having to repeat the complete selector.

Also, one important factor is your syntax doesn't seem backwards  
compatible. As I understand, such syntax can cause very unpredictable  
behaviour in older user agents.

Any new syntax must be thought out with backwards compatibility in mind.  
You should take into consideration the CSS 2.1 syntax (see "Parsing  
errors"). [1]

Given the example above, with form:

> After:
> form {
>   overflow: hidden;
>   select,
>   input.text,
>   textarea {
>     border: 1px solid #d8d2c7;
>     font: 11px Tahoma, sans-serif;
>     color: #333;
>   }
> }

Quickly looking over the specification, current user agents would likely  
parse the above code as:

form {
    overflow: hidden;
    font: 11px Tahoma, sans-serif;
    color: #333;
}

This is not desired, because this breaks the rendering of the elements  
matched by the parent selectors (in this case "form").


[1] http://www.w3.org/TR/CSS21/syndata.html



-- 
http://www.robodesign.ro
Received on Monday, 30 July 2007 13:42:02 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:51 GMT