Languages

Languages with CSS-like syntax and rules

Presented as an incomplete list, with observations about their similarity and difference to CSS.

Cascading Attribute Sheets

Tab's Cascading Attribute Sheets proposal

Also a blog entry.

Summary

A proposal to add attributes to elements in an HTML document (in the browser) by use of "attribute sheets".

Syntax

Not much different to CSS:

The basic grammar of CAS is identical to CSS. Your attribute sheet contains rules, composed of selectors, curly braces, and declarations

Selectors are CSS selectors. Keys consist of "any attribute name"; values all have the same form: <string> | <number> | <dimension> | <ident> | <hash> | <special-values>, where special-values are one of !on, !off, or !initial. Specificity rules are respected. Additionally, allowing CSS Conditionals has been proposed.

Example

video {
  preload: metadata;
}
#content video {
  preload: auto;
}

Notes

• Not currently implemented anywhere.
• Suggested that this is run once per element (i.e. when they are inserted into the DOM) rather than re-evaluated whenever the DOM is mutated, due to dependency loops.

CartoCSS

CartoCSS, discussed in the NYC F2F

While that link appears depreciated, it seems the language is still alive and well in the new product.

Documentation

Summary

A styling language to specify how to display map data.

Syntax

Superficially similar to CSS, CartoCSS seems to have quite different semantics. Some of the differences are listed below.

Selectors consist of a layer name and an attachment name (if missing, a default attachment is assumed). They may include attribute selectors. e.g. #layer[zoom>=10]; #water[class='lake']. They may also be class names, e.g. .roads (this is advanced usage, apparently!)

Keys and values are specialised, but are very CSS-like.

Examples

#building[zoom>=16] {
  building-fill: #eee;
  building-fill-opacity: 0.9;
  building-height: 4;
}

#layer {
   line-color: #C00;
   line-width: 1;
}

#layer::glow {
   line-color: #0AF;
   line-opacity: 0.5;
   line-width: 4;
}

#layer {
  ::outline {
    line-width: 6;
    line-color: black;
  }
  ::inline {
    line-width: 2;
    line-color: white;
  }
}

#landuse[zoom>=7] {
  [class='pitch'] {
    polygon-fill: #fff; // all pitches will be white when zoom level is >= 7
  }
  [class='park'],
  [class='school'] {
    polygon-fill: #f00; // all parks and schools will be red when zoom level is >= 7
  }
  [class='cemetery'] {
    polygon-fill: #000; // all cemeteries will be black when zoom level is >= 7
  }
}

Notes

Some notable differences from CSS

• attachments allow arbitrary subdivision of layers. The syntax is either #layer::attachmentname { ... } or #layer{ ::attachmentname { ... } }. This is somewhat reminiscent of e.g. ::before and ::after, but with arbitrarially defined names. There are other instances of the latter kind of syntax that make me think it should be considered like a preprocessor.
• instances are like attachments, but apply at a property level. The syntax for them is instancename/propertyname: propertyvalue;.
• I'm not entirely sure what the difference is, or why you would prefer one over the other.
• declaration order of different properties is important. For example, if a polygon-fill is specified before or after a line-width will determine whether the line is drawn on top of or underneath the fill.
• variables are allowed; the syntax for declaration is @varname: value; and the use is property: @varname;. This is more like preprocessor variables than the CSS Variables spec.
• data field references can pull data from the layer, and have the syntax property: [data_field_name];. TODO: is this allowed in any property, or just text-name? A more complex example: text-name: [name_en] + ' (' + [type] + ')'; might produce a label of H&M (Clothes).

Ulysses Style Sheets

Ulysses Style Sheets

Summary

A system to style generated PDF and DOCX documents.

Syntax

Selectors are mostly element names, with a couple of special "generic selectors", along with some relative selectors and pseudoclasses (both similar to CSS).

Also contains variables (which behave like preprocessor variables, not the CSS Variables spec) and mixins.

Examples

heading-all {
  font-family:    "Zapfino"
}

heading-1 {
    font-size:      33pt
}

heading-2 {
  font-size:      22pt
}

$light-grey = #eeeeee

inline-mark { background-color: $light-grey; }
inline-annotation { background-color: $light-grey; }

@code { 
    font-face:   "Menlo"; 
    font-weight: normal;
    font-slant:  normal;
}

block-code : @code { }
inline-code : @code { }

Metapolator Cascading Properties Sheets

Metapolator Cascading Properties Sheets

Summary

Metapolator is a "parametric font tool" for creating fonts; Cascading Properties Sheets are used to define the fonts (?).

Syntax

The linked project page says a lot:

CPS is not CSS and this name conveys that you can't use the properties that you know from CSS. However the syntax is very much the same and in fact we use a CSS Parser program to read CPS.

How CPS is similar to CSS:

• CSS syntax means you can write CPS in a familiar way, with a familiar way of thinking
• CSS selectors allow us to specify rules for a set of elements, or for just one distinct element
• CSS cascading so that when more than one rule can apply to an element, the most specific one wins

How CPS is not like CSS:

• CSS properties are different, as we have our own structure, MOM
• CSS media-queries are different, with our own @-rules
• CSS selectors are only partially available today, so selecting the glyph after the glyph 'a' with glyph#a + glyph is not yet possible
• You can define CPS properties with CPS - it is self-extensible!

Why is this a good thing?

• If you know CSS, you will feel comfortable with CPS
• CPS has broad possibilities, so we hope other applications can use it

Example

Note: I'm not entirely sure which parts of this are actually a part of CPS, and which are there to show how it ignores unrecognised commands.

body {
    background-color /*property comment*/:  #fff;
    margin:  0 auto;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='a.png',sizingMethod='scale');
}

/* And a comment */

strange>.selector/* selector comment 
 with linebreak */,
and another onemissing.delim > {
    any-param:  unheard-of(style + css);
    /* a comment within a block */
    another-one: /*this param has a comment*/  def-unheard-of(style + css);
}

@media whatever{ hi{name:val} }

SVG / CSS

SVG’s flavor of CSS could be considered one such language

Text editor themes

Many text editors use a CSS-like syntax for styling themes, e.g. http://wiki.macrabbit.com/SyntaxThemes/

Syntax

Espresso syntax themes are CSS files with some special comment metadata

Also has a special selector :document-base (which seems similar in function to :root), and defines some non-CSS properties (with normal CSS syntax).

Examples

:document-base {
    color: #000000;
    background-color: #FFFFFF;
    insertion-point-color: #000000;
    selection-background-color: default;
    current-line-background-color: #fff8dd;
}

apache, css, js, php, python, ruby, tag, sourcecode, source {
    spell-check: disabled;
}

Cascading Tree Sheets

Cascading Tree Sheets, research project

Simple Tree Transformation Sheets

Daniel’s ancient STTS proposal

Summary

A transformation language, similar to XSLT. Originally proposed to allow easy migration from style-containing HTML markup to 'clean', semantic HTML.

Syntax

Selectors are very similar to CSS, but "without pseudo-elements" and with some additional pseudo-classes (which actually look a lot like some of the more modern psudo-classes we have now, like :first-of-type). It also has a combinator - (which exists in CSS 3 as ~), a modifier called :selected() which can be used like a parent selector, and a content selector [[ ... ]] to match textual content.

Keys and values are specified similarly to CSS, and the syntax is similar, but the actual rules are quite different. Of note, the "order of declarations matters : first read, first applied".

Examples

BODY {
        modify-context : ^[BGCOLOR]^[TEXT] ;
        add-style : "background-color : " attr(bgcolor) ;
        add-style : "color : " attr(text) ;
       }
A { modify-context : [TITLE=content()] }

H1 { modify-context : HR + :selected() + HR }

Clink

Clink

Summary

Used by Opera (still?) for surfacing hyperlink data to users, e.g. in WML documents.

Syntax

Selectors seem to be as in CSS. Properties have a microsyntax, as usual. Of note are the functions attr() (as proposed for CSS), next-attr() (similar, but applies to siblings), and the function found-in(), which takes a selector as a parameter.

Examples

reference { link: attr(href) }
reference:before { content: attr(title) }

title { link: found-in(link) }

Other

I’ve been in the middle of several discussions about more such languages (both in the industry/standards world, as well as in academia), though not all have produced something I can publicly link to.