CSS Variablen und Mixins, Interaktive Validierung und Pre-Rendering

Es scheint es geht im neuen Jahr auch gleich wieder richtig los mit Entwicklungen. Die Höhepunkte im Januar waren einige Pläne für Verbesserungen von CSSOM, der Implementierung von CSS-Variablen und die Integration von Interactive Validation in WebKit. Ich werde mich nicht mit H.264 befassen. Darüber haben sich schon genügend andere Personen Gedanken gemacht.

Falls du an Neuerungen im Bereich HTML interessiert bist, empfehle ich dir den Artikel  von Anne van Kesteren über die neuesten Änderungen rum um WHATWG. Der Beitrag befasst sich hauptsächlich mit Diskussionen aus der Verteilerliste whatwg@whatwg.org und ist recht interessant!
Tab Atkins, Mitglied der CSS-Arbeitsgruppe und des Google-Chrome-Teams, hat die Präsentation, die er gehalten hat, veröffentlicht. Darin kommt CSSOM - die Schnittstelle zwischen Javascript und CSS – nicht gerade gut weg. Die Präsentation stellt vier relativ neue Konzepte vor:

CSS Variablen
Mit der Festlegung eine Variable über die @var Regel, kann ihr Typ und Wert, alles von Farben bis Längen, Drehungen und Funktionen definiert werden und sie ist für alle CSS im Dokument verfügbar. Des Weiteren werden auch lokale Variablen über die @local at-Regel unterstützt.

@var petersh-paragraph-size length 12px;
 @var petersh-paragraph-color color rgba(0,0,0,0);
 p {
  color: var(petersh-paragraph-color);
  font-size: var(petersh-paragraph-size);
 }

CSS Mixins    
Mit Mixins kannst du im Grunde jede Regel mit bestimmten allgemeinen Eigenschaften erweitern. Sie verwenden Parameter vergleichbar zu CSS-Variablen, einschliesslich der Fähigkeit Standardwerte für diese zu besitzen.

CSS Verschachtelung     
Verschachtelungen in CSS, besonders wenn ohne Klassen oder IDs verwendet, können recht viel Stress bedeuten. Die @this at-Regel wird für die Verwendung in CSS-Regeln vorgestellt. Der Selektor, den du dahinter verwendest, wird gemäss der aktuellen Regel nur auf nachkommende Elemente angewendet. Das macht den Weg frei für folgende Strukturen:

header {
  color: red;
  @this a {
   color: blue;
  }
 }

CSS Module    
Nein, nicht die CSS Module, die CSS Level 3 ausmachen. Im Wesentlichen sind CSS Module Namensräume für CSS Variablen und Mixins. Du kannst dich auf Mixins und Variablen auch weiterhin beziehen, indem du dem Namen die Bezeichnung des Namensraumes voranstellst oder die @use at-Regel integrierst, so dass der Parser alle verarbeitet.

Auch wenn das eine gute Idee ist, finde ich, dass dies nicht Teil der Spezifikation sein sollte. Es ist einfach für Autoren ihren Namen dem Variablennamen vorzustellen. Beispiel: "petersh-header-color" anstatt "header-color". Zwei Arten von Namensräumen mit einer ähnlichen Schreibweise, das sorgt einfach nur für Verwirrung.

Während der aktuelle Code nur auf ein paar Rechnern in Sydney verfügbar ist, plant Google eine erste Spezifikation in diesem Quartal zu veröffentlichen und die Änderungen bis zum Ende des Jahres zu implementieren. Wenn man bedenkt, dass weder diese Pläne für CSS Variablen noch die CSS Mixins und Verschachtelungen bis jetzt auf der www-Verteilerliste mitgeteilt wurden, ist sicher interessant, wie andere Anbieter darauf reagieren werden. Ähnliche Diskussionen einige Jahre zurück haben gezeigt, dass dies ein doch recht umstrittenes Thema ist, bei dem die Meinungen weit auseinandergehen.

Vor einiger Zeit erklärte Kent Tamura seine Unterstützung für die 'Interactive Validation'-Benutzeroberfläche nach dem neuen Shadow DOM Modell. Die meisten Fehler sind behoben, Nachrichten und eine – wenn auch interne – API sind für Chromium, um diese Funktion zu aktivieren, verfügbar, somit dürfte es nicht mehr lange dauern, bevor es in den Nightlies integriert wird.

In anderen Nachrichten, wird das Scroll-Event nun asynchron gefeuert. Das WebKitCSSMatrix-Objekt im DOM akzeptiert nun 'none' als gültiges Schlüsselwort und die Anwendung der toDataURL-Methode für ein Canvas in Chromium wird nun auf einer schwarzen Oberfläche aufbauen, wenn das Zielformat keinen Alphakanal unterstützt.