Note: When in standards compliant mode, Internet Explorer does not support comma separators in clip:rect() statements. According to the defintion, there have to be commas. If IE is in quirks mode, using commas is just fine. This is really weird.

Warum kann man Cascading Stylesheets eigentlich nicht verschachteln? Und zwar so:

ul#navigation {
  background-color:#000;

  a {
    color:#FFF;

    strong, em {
      font-weight:normal;
      padding:0.25em 0.5em;
      border:2px solid #FFF;

      :first-letter {
        font-size:1.5em;
        text-transform:uppercase;
      }
    }

    em {
      background-color:#555;
    }
  }
}

In “normalem” CSS würde das dem Folgenden entsprechen:

ul#navigation {
  background-color:#000;
}

ul#navigation a {
  color:#FFF;
}

ul#navigation a strong, ul#navigation a em {
  font-weight:normal;
  padding:0.25em 0.5em;
  border:2px solid #FFF;
}

ul#navigation a strong:first-letter, ul#navigation a em:first-letter {
  font-size:1.5em;
  text-transform:uppercase;
}

ul#navigation a em {
  background-color:#555;
}

Der Platzbedarf wird zwar damit nicht geringer, aber ich finde es deutlich leichter zu lesen und man kommt sich mit irgendwelchen Anweisungen nicht so leicht in die Quere.

This article exists also in english

Da mir alle bisherigen Dropshadow-Techniken nicht so recht zugesagt haben, weil sie entweder auf IE-Filtern (damit der Schatten auch im IE sichtbar wird) oder zusätzlichem Markup basieren. Andere haben auch das Problem, dass die Ecken der Schatten ziemlich abrupt aufhören und kein weicher Übergang an den Ecken besteht. Das Beste: Meine Methode kommt komplett ohne zusätzlichem Markup und ohne CSS-Hacks aus. Zu Beginn gleich ein Beispiel wie das ganze später ausschauen wird. (Nur mit modernen Browsern nachzuvollziehen - der Internet Explorer fällt nicht darunter).

Diesen Artikel gibt’s auch auf deutsch

Nearly all drop shadow techniques don’t suit my needs because the either rely upon IE filters (that the shadow is also visible in IE) or upon additional markup. Others have the problem that the corners are not smoothly rounded - and that doesn’t look very nice. The best thing: My method is not based on any additional markup and works completely without CSS hacks. First I want to show you the final result (you can see the effect only in modern browsers - the Internet Explorer is no modern browser).