CSS-Schaltungsbedingungen

CSS hat noch keine Schaltregel oder eine bedingte, wenn die spezifische Natur von @media -Abfragen und einige tiefe Tricks mit CSS -benutzerdefinierten Eigenschaften. Schauen wir uns an, warum es nützlich wäre, wenn wir es tun würden, und einen Trick ansehen, der heute verwendet werden kann, um ihn abzuziehen.

Jüngste Geschwätz über die Möglichkeit

Während keines dieser Dinge heute verwendbar ist, gab es im letzten Jahr ein gutes Gespräch über das Konzept des generischen bedingten CSS:

• Brian Kardell schlug eine Switch () -serklärung und eine Registerkarte Atkins Riff vor.
• Jonathan Neal schlug eine Variation von Medienabfragen für bedingte Werte vor, die eine Menge Gespräche auslösten.
• Lea Verou schlug „benutzerdefinierte Eigenschaften auf höherer Ebene“ vor (hier sehen Sie sie von Bramus van Damme an), die außerordentlich nützlich erscheinen.

Also ja. Die Nachfrage nach bedingten CSS ist vorhanden.

Stellen Sie sich vor, warum bedingte CSS nützlich wären

Vielleicht eine visuelle Änderung nach einer bestimmten Menge an Scrollen. Eine visuelle Änderung nach einem numerischen Eingang liegt in einem bestimmten Bereich. Eine Komponente mit einer Handvoll Staaten.

Es gibt ein ganzes Genre von äußerst beliebten JavaScript -Bibliotheken für die Benutzeroberfläche (z. B. React, Vue usw.), die im Wesentlichen zum Aufbau von UI basieren, die auf dem Staat basieren. Dies ist eindeutig ein Entwicklerbedarf. Wenn wir dieses staatlich basierte Styling auf CSS verlagern könnten, ist das umso weniger JavaScript, das wir möglicherweise benötigen-und möglicherweise eine bessere Trennung von Bedenken.

Ein gemeinsames Thema

Wir haben bereits benutzerdefinierte Eigenschaften in CSS und könnten auf sie staatliche Veränderungslogik basieren und einen Stilblock als Nebeneffekt der benutzerdefinierten Eigenschaft ändern, die zu bestimmten Werten wechselt.

Es ist wahr, dass wir bereits Mechanismen für die Änderung von Stilblöcken haben. Wir können den Unterricht durch JavaScript ändern, und diese Klasse kann alles anwenden, was wir in CSS mögen. Das bedeutet jedoch nicht, dass ein staatliches Styling in CSS nicht nützlich wäre. Wir haben nicht immer die Fähigkeit oder möchten möglicherweise JavaScript dafür schreiben und stattdessen benutzerdefinierte Eigenschaften auf andere Weise ändern (z. B. Medienabfragen, HTML -Änderungen usw.). Wenn Sie dies in CSS tun, können Sie die separate Geschäftslogik und die visuelle Stillogik unterstützen.

Ein Trick! Verwenden Sie @keyframes für den Staat

CSS @KeyFrames können verwendet werden, um bestimmte Änderungen zu wechseln. Durch die Kraft der Animationseigenschaft wird eine Möglichkeit geöffnet, genau auszuwählen, welcher Rahmen sie angezeigt werden sollen, und sie genau auf diesem Rahmen innehalten, wodurch eine Switch-Case-Anweisung oder eine staatliche Stile effektiv nachahmt.

Lassen Sie uns dies in Aktion sehen, indem Sie mit der Animations-Delay-Eigenschaft spielen:

Hier ist, was in diesem Stift passiert:

• Animation-Zelay: Negative Verzögerungswerte erzwingen, dass ein spezifischer Rahmen (oder zwischen) wirksam wird (positive Werte funktionieren nicht so). Wir werden diesen Trick verwenden, um Zustände zu erzwingen.
• Animation-Play-State: Pausiert: Wir animieren eigentlich nichts, daher bleibt die Animation im Pause.
• Animationsdauer: Die tatsächliche Dauer spielt keine Rolle, sie benötigt nur eine, sodass es eine Zeitspanne für die Halten der verschiedenen Keyframes gibt. Wir werden es zu einem Wert wie 100.001s machen, so dass der letzte Keyframe, wenn wir um 100er Jahre verzögern, weiterhin funktioniert. Die Dauer muss länger sein als der Verzögerungswert.

Der erste Bereich Eingabe modifiziert das Animationsverzögerung zwischen einem Bereich von -100 und 0s.

Ein realer Anwendungsfall

Bevor wir direkt in das funktionierende Beispiel einsteigen, lohnt es sich, diesen Trick ausführlicher zu diskutieren, da es einige Nuancen gibt, die Sie sich bewusst sein sollten.

Zunächst einmal funktioniert der Trick nur mit numerischen Werten. Also, Farbwerte oder Zeichenfolgen, weil es streng Mathematik durchführt.

Zweitens gibt es den Booleschen Trick. Betrachten Sie eine Variable -Wert: 10, die einen numerischen Wert zwischen 0 und 100 anwenden kann. Wir möchten Farbe anwenden, wenn der Wert über 5 liegt. Woher wissen wir, ob der Wert über oder unter 5 liegt? Und selbst wenn wir wissen, wie hilft uns das tatsächlich?

 -IS-Above-5: Clamp (0, var (-Wert)-5, 1)

clamp () ist wie ein intelligenterer Calc (), da es uns ermöglicht, einen berechneten Wert streng auf den Bereich zu beschränken und gleichzeitig einen idealen Wert zu erklären. Dieser Bereich ist alles, was erforderlich ist, um eine boolesche Variable zu erreichen.

Schreiben Sie eine Mathematik in den zweiten Parameter der Clamp () und dies gibt entweder 0 (oder unten) oder 1 (oder darüber) aus. Stellen Sie sicher, dass Sie keine Mathematik schreiben, die zu einer Zahl zwischen 0 und 1 führen kann.

So funktioniert das:

Die einzige Aufgabe des Bereichseingangs besteht darin, seinen Wert zu „übertragen“, indem ein Werte für -Wert, - -min und -max definiert und dann den Wert mit einem Oninput -Ereignis geändert wird. Das ist das minimalste, was getan werden kann, um ein staatliches Verhalten in CSS zu erhalten. Kein JavaScript benötigt.

Unter Verwendung von CSS -Mathematikfunktionen ist es möglich, den „abgeschlossenen“ Prozentsatz der Fortschrittsbalken aus denselben Variablen zu schließen:

 -Abgeschlossen: calc ((var (-val)-var (-min)) / (var (-max)-var (-min)) * 100);

Jetzt wissen wir, ob der Wert über einen bestimmten Prozentsatz liegt, was uns noch einen anderen Weg gibt, um Änderungen nach Staat vorzunehmen:

 -over-30: Klemme (0, var (-abgeschlossen)-30, 1);
--over-70: Clamp (0, var (-abgeschlossen)-70, 1);
/* ...und so weiter... */

OK, großartig, aber wie können wir dies verwenden, um einen bestimmten Keyframe auszuwählen? Durch Verwendung von MAX () -Funktion:

 -Frame: max ( 
    calc (1-var (-über-30)), 
    var (-über-30) * 2, 
    var (-über-70) * 3, 
    var (-is-100) * 4 
);

Die Sache mit CSS Booleans ist, dass es viele Möglichkeiten gibt, sie zu nutzen, um ein bestimmtes Ziel zu erreichen, und man muss kreativ werden und eine Formel finden, die kurz und lesbar ist.

In der obigen Formel "schaltet" die Booleschen eine Frame -Nummer, wenn der Boolesche Wert von 1 hat. Da wir eine maximale Funktion verwenden, ist die größte Umschaltungsnummer der berechnete Wert von -Frame.

Beachten Sie, dass die Farbänderung einen leichten Übergang hat. Wir hätten dies mit dem Hintergrund tun können: CurrentColor; Auf dem Füllbereich, der die Farbe des Elternteils erbt, habe ich mich jedoch entschlossen, CSS Houdini zu verwenden, um die Leistung der Zuweisung von Übergängen an CSS -Variablen zu veranschaulichen, indem ich ihren Typ deklariert.

Ein Beispiel für einen stark verwendeten CSS-Booleschen Trick kann im folgenden Stift angezeigt werden. Dies ist eine CSS-Komponente mit vielen Variablen, die eine Vielzahl von Anpassungen ermöglichen:

Ich bin sicher, es gibt viele andere Anwendungsfälle für diesen kleinen Trick und bin gespannt, was durch die Kreativität der Gemeinschaft sonst noch erreicht werden könnte.

Das obige ist der detaillierte Inhalt vonCSS-Schaltungsbedingungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!