CSS Constants Module

Abstract

This module defines parse-time constants with poweful scoping.

Status of this document

This is an unapproved working draft and has no official status at the moment.

Comments on, and discussions of this draft can be sent on the (archived) public mailing list www-style@w3.org (see instructions).

This is a working draft and may therefore be updated, replaced or rendered obsolete by other documents at any time. It is inappropriate to use Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group (members only).

To find the latest version of this working draft, please follow the "Latest version" link above.

Table of contents

Introduction

Web authors have been requesting some form of constants or variables or macros for the past decade. These requests have always been met by the suggestion to use a preprocessor. However no such processor has become a serious solution for this problem.

Daniel Glazman (Disruptive Innovations) and Dave Hyatt (Apple Software) have put forward a proposal for CSS Variables to fill this gap. It is complicated by trying to keep the variables scriptable. The goal of this counter-proposal is to define a purely parse-time syntax for CSS macros, one that addresses several of the most common use cases without burdening the implementation.

Use cases include:

• Site-wide global values, such as colors or fonts, that can be imported and used in local style rules.
• Site-wide style sheets with local style values, e.g. for changing the color of a template based on the section of the site.
• Templating common groups of style declarations, such as a border+padding combination, so that they can be assigned to multiple classes.

Implementation constraints include:

• Not complicating the CSSOM.
• Not blocking on @import loads when not necessary.
• Not allowing mutation of the constant.
• Not doing string replacement (so that '{' can't be inserted randomly where the constant is expanded).

Declaring Named Constants

There are two types of named constants: value constants and declaration constants. Constant names are case-sensitive, and each type of constant has its own name space (so a value constant name cannot conflict with a declaration constant name).

A value constant represents a property value and is declared with an @value rule. The syntax of an @value rule is the @value at-keyword followed by an identifier followed by the value. The value must conform to the core grammar for values; otherwise the at-rule is invalid and must be ignored.

@value name value;

A declaration constant represents a semicolon-separated list of property-value declarations and is declared with an @style (better names?) rule. The syntax of an @style rule is the @style at-keyword followed by an identifier followed by a declaration block. Invalid @style rules must be ignored.

@style name {
  property: value;
  property: value;
}

@value and @style rules may appear both before and after @import rules.

Scoping of Named Constants

Named constants are in-scope from the point at which they are declared until overridden by a later declaration. If declared inside an @media rule, the scope of the declaration does not end with the @media block.

The scope of a named constant does not ordinarily cross @import boundaries. However this module extends the syntax of the @import statement to allow a constants keyword between the @import keyword and the style sheet URI, and a named constant's scope does cross @import boundaries if the constants keyword is present. This allows implementations to easily process style sheets asyncronously when there are no constants to import.

@import constants "corporate-colors.css";

Expanding Named Constants