CSS Houdini - CSS bekommt Magie!

Paint API

Als erstes wollen wir uns mit der Paint API beschäftigen. Diese erzeugt über die Paint-Funktion einen Image Value. Der Image Value kann allen Elementen zugeordnet werden, die ein Image erwarten.

Das kann zum Beispiel sein:

• Background Image
• Border Image
• List Style Image
• Mask Image

Als Beispiel habe ich eine Border erstellt, die eine random Farbe annehmen und in drei verschiedenen Positionen verwendet werden kann: top, center und bottom.

h1{
    font-size: 3em;
    margin-top: 3em;
    padding: .1em;
    width: 500px;
    --border-height:20;
    --border-position: bottom;
    background-image: paint(borderRandomColor);
}

Für dieses Beispiel haben wir zwei neue Parameter registriert. Einen Positions-Parameter, sowie einen Parameter für die Stärke der Border. Zu guter Letzt setzen wir noch das background-image auf die Paint-Funktion "borderRandomColor". Mittels dieser Funktion wird nun entsprechend eine Border generiert.

Nun müssen wir noch eine JavaScript-Klasse mit zwei notwendigen Methoden erstellen. Die anderen sind von mir frei gewählt. Als erstes brauchen wir eine Methode "inputProperties". Dort definieren wir, welche Properties im CSS gesetzt werden können.

Als Zweites erwartet unsere Paint-Funktion drei Parameter:

• ctx - PaintRenderingContext2D - dieses ist ein Teil von CanvasRenderingContext2D, weshalb einiges ähnlich ist. Da es darauf aufbaut, kann man sich prima am Canvas-Parameter orientieren.
• size/geom - enthält die Höhe und die Breite des Elements wo die Paint-Funktion verwendet wird. In unserem Beispiel enthält es die Höhe und Breite der h1
• props enthält unsere gesetzten Parameter. Über einen Getter können wir diese abrufen.

class borderRandomColor{

    static get inputProperties() {
        return [
            '--border-height',
            '--border-position'
        ];
    }

    paint(ctx,size,props){

        if(props.get('--border-height').length != 1 || props.get('--border-position').length != 1){
            return false;
        }

        var height = props.get('--border-height')[0];
        var position = props.get('--border-position')[0].trim();
        var color = this.randomColor();

        if(position == "top"){
            position = 0;
        }

        if(position == "bottom"){
            position = size.height;
        }

        if(position == "center"){
            position = size.height/2;
            height = height/2;
        }

        ctx.beginPath();

        ctx.lineWidth = height;

        ctx.moveTo(0, position);
        ctx.lineTo(size.width, position);

        ctx.strokeStyle = color;
        ctx.stroke();

    }

    randomColor(){
        return "rgb(" + this.getRandom(0,255) + "," + this.getRandom(0,255) + "," + this.getRandom(0,255) + ")";
    }

    getRandom(min, max) {
        return Math.random() * (max - min) + min;
    }
}

registerPaint('borderRandomColor',borderRandomColor);

Mittels der Funktion "registerPaint" können wir nun die Paint-Methode "borderRandomColor" registrieren, damit sie im CSS zur Verfügung steht.

Um nun unsere borderRandomColor als PaintletWorker zur Verfügung zu stellen, müssen wir dieses noch registrieren.

CSS.paintWorklet.addModule('borderRandomColor.js');

Properties & Values API

Die Properties und Value API gibt euch die Möglichkeit, eigene Propertys und deren Standardwerte zu definieren. So kannst du, nachdem du Folgendes in JS Registriert hast, in CSS var(—color) verwenden, ohne diesen Wert zu definieren und es wird der Standardwert rot angenommen.

CSS.registerProperty({
    name: "--color",
    syntax: "<color>",
    initialValue: "red",
    inherits: false
});

Zukünftig sollte auch eine direkte Registrierung der Werte in CSS möglich sein. Momentan funktioniert diese allerdings noch nicht - die Syntax sähe wahrscheinlich so aus - momentan ist dieses Feature aber in noch keinem Browser vorhanden:

@property --color{
    syntax: '<color';
    inital-value: red;
    inherits: false;
}

Typed OM

Das Typed OM ist eine coole Neuerung. Mittels Typed OM sind Styles von nun an Objekte und es muss nicht mehr mit Strings gearbeitet werden. Stattdessen können mittels Getter und Setter die Styles verändert werden.

Das alte CSSOM zum Setzen eines Padding-top sah zum Beispiel so aus:

el.style.paddingTop = "50px";

Mittels des neuen CSSOM ist diese Variante nicht mehr notwendig - und diese Vereinfachte Variante kann verwendet werden:

el.attributeStyleMap.set('padding-top',CSS.px(50));

Der Vorteil ist, dass wir mit richtigen Einheiten und Integern arbeiten können. Und wenn wir uns mit einem get einen Wert holen, müssen wir für diesen nicht mehr die Einheit entfernen, sonder können direkt auf den Value der CSSUnitValue zugreifen, ohne string Replace oder Sonstiges auszuführen.

console.log(el.attributeStyleMap.get('padding-top'));
// CSSUnitValue {value: 50, unit: "px"}

Fazit

CSS Houdini wird uns mit einer grandiosen Integration zwischen CSS und JavaScript die Zukunft von CSS bringen; spätestens, wenn auch noch die anderen vier APIs voll verfügbar sind und dann auch noch der Browser Support für Firefox und Safari komplett da ist. Momentan sind erst drei APIs verfügbar.

Diese APIs fehlen im Chrome zum Beispiel noch komplett bzw. sind in einem sehr frühen Stadium der Entwicklung:

• Layout API
• Parser API
• AnimationWorklet
• Font Metrics API

Ich bin gespannt, was uns die Zukunft und CSS Houdini noch bringen wird. Gibt es irgendwann Frameworks, die CSS komplett neu erfinden? Oder eigene Layout Typen und Weiteres durch Custom Properties?