The future of CSS: Nesting Selectors

Early March the first draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors)

This module describes support for nesting a style rule within another style rule, allowing the inner rule’s selector to reference the elements matched by the outer rule. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability.

Using the & selector (read this as “the nesting selector”), you can refer to the elements matched by the parent rule:

table.colortable {
  & td {
    text-align: center;
    &.c { text-transform: uppercase }
    &:first-child, &:first-child + td { border: 1px solid black }
  }
  & th {
    text-align: center;
    background: black;
    color: white;
  }
}

As it’s an actual selector, you always need to use the & selector, so you won’t be able to do this:

/* INVALID */
.foo {
  .bar {
    color: hotpink;
  }
}

(The fix would be to write & .bar instead of .bar)

The & selector can also only be used when it’s first compound selector (e.g. it appears at the first position) of an inner selector.

/* INVALID */
.foo {
  .bar & {
    color: hotpink;
  }
}

To cater to these scenarios you’ll need to use the @nest rule, which is more lax:

/* VALID */
.foo {
  @nest .bar & {
    color: hotpink;
  }
}

To me it feels like this @nest rule should go. The interpreter should be smart enough to figure things out all by itself.

CSS Nesting Module (Draft) →

Our Drone Future

In the near future, cities use semi-autonomous drones for urban security. Human officers monitor drone feeds remotely, and data reports are displayed with a detailed HUD and communicated via a simulated human voice (designed to mitigate discomfort with sentient drone technology). While the drones operate independently, they are “guided” by the human monitors, who can suggest alternate mission plans and ask questions.

Browser Market Pollution

Paul Irish on how our future as a web developer will look like.

Worst part yet: the (predicted) 10 versions of IE you’ll be supporting, sound more like 72 versions (if things keep going as they are going now).

Maybe drinking beer at this point in the post would be a smart move.

The browser adoption graphics in the post speak for themselves:

Would love the see a likewise graphic for Firefox (comparing the rollout between version 1 through 4 and 5 through 7, now that they’ve been running a new Release Schedule and have been actively pushing Firefox 5 users to new versions (this thread suggests that it’s actually working: nearly all Firefox 5 users have moved on to Firefox 6).

Browser Market Pollution →