Welcome to IE9

README.md

Now that the bar has been set to Internet Explorer 9, I’m excited to bring some CSS to your attention.

Select things by their hierarchy: :first-child, :last-child, :only-child, :nth-child, :nth-last-child

Or by type: :first-of-type, :last-of-type, :only-of-type, :nth-of-type, :nth-last-of-type

Or not:

.transaction:not(.cancelled)

Style missing things:

.cell:empty {
  display: none;
}

Style IDs when they match the #hash. Accessible nav wins:

<a href="#navigation" class="hamburger">

#navigation { display: none; }
#navigation:target { display: block; }

Working with forms? :enabled, :disabled, :checked, :indeterminate

Gain massive control of the copy displays: ::first-line, ::first-letter

And speaking of :: double colons, write truer versions of some old favorites: ::before, ::after

And speaking of forgotten IE8 features, remember how useful this can be:

section {
  counter-reset: some_arbitrary_name;
}

section .heading:before {
  content: counter(some_arbitrary_name);
  counter-increment: some_arbitrary_name;
}

Now, welcome to the oughts, because we finally have these properties:

x {
  opacity: 0.875;
  quotes: '“'' '”'' '‘' '’';
}

And we can finally use these values:

.light--important {
  background: hsla(170, 50%, 45%, 0.8);
  color: rgba(0,0,0,0.75);
}

And speaking of color, reference the current color:

.hr {
  background-color: currentColor;
}

Join the tenties, because we have media querties:

@media (min-device-width: 20em) {}

And we can move elements:

.rad {
  transform: rotate, scale, skew, translate, matrix, perspective, and 3D stuff;
}

And we can reference the root font size:

.row {
  font-size: 0;
}

.col {
  font-size: 1rem;
}

It gets better.

We can go absolutely crazy with element metrics using calc:

.callout {
  border-width: calc(1em / 3);
  width: calc(100% - 1rem);
}

And do the same with backgrounds:

.ad {
  background-clip: border-box; /* works like box-sizing for coverage or positioning */
  background-origin: content-box; /* see above  */
  background-size: cover / contain / 100% 50%;
}

And speaking of backgrounds, we can use data URIs (without 32KB limit):

.bg--monkey {
  background-image: url(data:[<mime>][;charset=<charset>][;base64],<encoded data>);
}

While we’re here, we can leverage SVGs (and use them as data URIs!).

Also, we can drop everything but WOFF (and use them as data URIs, too!)

Oh, and speaking of fonts, you can use more than four weights and styles to a single font family.

Thanks, Jonathan. This is awesome.