• http://simon.incutio.com/archive/2003/07/22/featureRequest
• http://www.w3.org/TR/NOTE-CSS-potential List of suggested extensions to CSS

Approach Apply standard good engineering practices to CSS design and syntax. Enable and define clear consistent mapping to CSS 2.1 syntax so automated conversion is possible. Keep it as simple as possible.

Defines a constant token to use in rules. Token usage must not occur within the definition.

  // ILLEGAL:
  @define bodyfont(Garamond, $textfont)

Include part of stylesheet based on token value. Conditional blocks cannot be nested.

Approach Apply standard good engineering practices to CSS design and syntax. Enable and define clear consistent mapping to CSS 2.1 syntax so automated conversion is possible.

Mapping:

Clear -- remove "//", wrap comment in / / pair.

Mapping:

Clear: split into several rules with the same value for individual properties.

Declares that the CSS expects an URI parameter. The parameter is then used as if it was defined via @define (see below). The default value must be defined for each parameter for cases when the stylesheet is not accessed by an URI.

Mapping:

Replace param usage ($param) by the value.

Mapping:

Replace token usage ($name) by the value.

Mapping:

Expand into a series of rules with the region name prepended to each selector.

Mapping:

Include only that part of conditional sheet for which the condition holds.

• http://lists.w3.org/Archives/Public/www-style/2002Nov/0010.html from where macros (@define below) idea comes

• http://lists.w3.org/Archives/Public/www-style/2002Aug/0379.html from where the multi-property idea (below) comes

• http://www.glazman.org/weblog/dotclear/index.php?2004/12/14/746-calling-for-a-new-css-revolution which also notes other needs, notably offset positioning (e.g. "the right side of this element 3em plus 2px to the left of that element).

References:

• http://www.glazman.org/weblog/dotclear/index.php?2004/12/14/746-calling-for-a-new-css-revolution

Proposed solution

Approach Apply standard good engineering practices to CSS design and syntax.

Goal Clear consistent mapping to CSS 2.1 syntax so automated conversion is possible.

Proposed changes

A few additional constructs to modularize the sheets:

• @param -- enable CSS to pick params from HTTP GET request
• @define -- define constants used in rules
• @region -- relate part of CSS to a block in HTML
• @if/@elsif/@else -- conditionally apply part of stylesheet
• multi-properties -- enable several properties before ":" in rules

one-line comments -- enable // comments in addition to / */

Details are listed below.

One-line comments

Allow C++ style comments "from here to end of line".

Example:

See the examples of other constructs below.

Multi-properties

Allow several properties to be listed in one rule.

Example:

  // hide text by color
  p.invisible {
    background, color: white;
  }

@param

Declares that the CSS expects an URI parameter. The parameter is then used as if it was defined via @define (see below).

Example:

 
  @param fg(black)    // parameter 'fg' with default value 'black'
  @param bgcol        // default value undefined
  /* use: style.css?fg=red&bgcol=#d0d0d0 */

@define and $value

Defines a constant token to use in rules.

Example:

  @define textfont(Times New Roman, serif)

  body {
    font-family: $textfont;   // here the constant's value is substituted
    font-size: small;
  }

@region

Creates a scope in the CSS that is related to a named block in HTML. The name of the region is a CSS selector consisting only of "id" or "class" HTML element attributes. Inside the @region declaration, regular rules can be used -- their selectors then apply only within the named HTML block. Region declarations cannot be nested.

Example:

Assume the following HTML code:

<div id="menu">
  <ul>
  <li><a href="first">First option</a></li>
  <li><a href="second">2nd option</a></li>
  <li><a href="last">Last option</a></li>
  </ul>

  <ul class="admin">
  <li><a href="copy">Copyright</a></li>
  <li><a href="mailto:addr@domain.tld">Email us</a></li>
  </ul>
</div>

Then the following CSS can be defined:

@region #menu {

  background: silver;     // these apply to the #menu DIV
  color: black;
  font-size: small;

  ul { margin-left: 0; }  // scoped elements, as if #menu ul etc. selectors
  ul li { list-style: none; margin-left: 0; }
}

@region #menu .admin {
  li a, li a:visited { color: gray; }
}

@if blocks

Include part of stylesheet based on token value.

Possible extensions to this conditional are (1) use references to properties in condition (e.g. if (body.color = black) ... ) and (2) use regexp comparison in addition to the plain string equal/nonequal.

Example:

#footer {
  @if ($fg) {    // token "fg" is defined
    color: $fg;
  }
  @else {
    color: black;
  }
}

#page {
  background: white;
}
@if ($pgborder != none) {    // re-style also inner blocks if border is used
  #page { background: silver; border: $pgborder; }
  #page #menu { border: none; }
}

ModularCSS project/idea

The problem Cascading Style Sheets are a maintainability nighmare: they badly scale for large/complex sites, they use magic values instead of constants (so double maintenance problem occurs, e.g. consistently changing trivial things like colours across the website), they don't relate to page structure.

Proposed solution Apply standard good engineering practices to CSS design and syntax.

Back to NametyPruzkumy (in Czech)