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!