A random thought on square braces [] this morning

HTML & CSS
1

I don’t think square braces are used anywhere in the css spec. A thought occurred to me this morning - why not use them for subproperties - like this


body {
  font [
    face: Arial;
    size: 2em;
    style: italic;
    weight: bold;
  ]
}

Yeah, we have property shorthands, but for some modules this is getting out of hand. In particular backgrounds. When a property can have multiples they can be comma separated…


body {
  background: [
    image: url(some/path);
    opacity: .2;
    color: #fff;
    position: fixed;
    size: 50;
  ], [
    image: url(some/path);
    opacity: .2;
    color: #fff;
    position: fixed;
    size: 50;
  ]
}

The idea further is that these could be nestable as seen here with border, where the top property has a more specific call than the other three.


div {
  border [
    width: 1em;
    style: solid;
    top [
      width: 2em;
    ]
  ]

Just a thought. Now someone can come in and tell me why this is utterly stupid and unworkable :slight_smile:
BTW, this isn’t a replacement for multi-property shorthand (for example: border: 1px solid #ff0). It’s a more approachable, legible alternative (as it doesn’t require the reader to have memorized the argument order).

2

Attribute selectors is usually where you’ll find them used: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

3

Ah, forgot those. Still, contextually, that isn’t within the property lists though, so it still could work.


input[type=text] {
  background [
    color: #fff;
    size: 1em;
  ]
}
4

It would screw up all of us using Python, Javascript, JSON etc.

{} denotes objects and name-value pairs to us. So using array-like symbols would be weird.

Maybe background=[{‘color’: ‘#fff’}, {‘size’: ‘1em’}, {‘etc’: ‘etc’}]; but then it starts getting way too verbose.

Since all those fancy CSS preprocessors make all sorts of syntax changes (some, like clevercss, seem to change syntax just for the hell of it), might as well use one of those or home-brewed and let browsers stick with what they already know.