Zwingende CSS-Eigenschaft alle: ungesetzt

Question

Für ein CSS-Framework ich die Entwicklung bin ich all: unset verwende, die von selbst funktioniert gut:

#foo { all: unset; } 

jedoch in bestimmten Fällen möchte ich die „Rückgängig“ Wirkung dieser Regel, wie in

#foo:hover { all: auto; } 

Doch dies funktioniert natürlich nicht, weil es kein Wert auto für all ist. Stattdessen haben wir die Werte inherit und initial, die, anstatt die Eigenschaft all zu "annullieren", unterschiedliche Auswirkungen haben: alle Werte auf den Wert ihrer Eltern zurückzusetzen oder ihre Initiale (ich nehme an, dies bedeutet Standardwerte auf Systemebene).

Um das zu erreichen, was ich will, ich derzeit

#foo:not(:hover) { all: unset; } 

tue, der gut arbeitet, ist aber nicht zu skalierbar, wenn ich dies für mehr Pseudo-Klassen tun will, zum Beispiel, und ich würde es vorziehen, überschreiben Sie die all: unset Eigenschaft? Gibt es einen Weg dazu?

Answer 1

versucht, es nicht zu sein scheint möglich, die Auswirkungen der all Eigenschaft rückgängig zu machen, sobald sie festgelegt wurde. Dies kann daran liegen, dass all eine Kurzschrifteigenschaft ist (die nur die CSS-weiten Schlüsselwörter als Werte akzeptiert). Sie können eine Kurzschreibweise aus der Kaskade nicht auf die gleiche Weise löschen, wie die Einführung des Schlüsselwortes revert durch css-cascade-4 das Löschen von Deklarationen auf Autorenebene ermöglicht, weil eine Kurzschreibeigenschaft nicht existiert eigene Entität in der Kaskade; Stattdessen repräsentiert es einfach alle seine Komponenteneigenschaften. Wie bei den traditionelleren Kurzschrifteigenschaften wie background und font besteht die einzige Möglichkeit, eine angewandte Kurzschriftdeklaration zu überschreiben, darin, die Werte für die Longhands, die überschrieben wurden, entweder über Langhanddeklarationen oder über eine andere Kurzschriftdeklaration neu festzulegen. Letzteres ist jedoch mit der Eigenschaft all nicht möglich, da nur CSS-weite Schlüsselwörter akzeptiert werden.

Da erstere offensichtlich nicht praktikabel ist mit der all Kurzschrift, da Sie nicht vorhersagen können, welche Author-Level-Deklarationen zu Beginn überschrieben werden, ist Ihre einzige andere Option, es über einen Selektor zu beschränken, wodurch es verhindert jemals unter bestimmten Umständen in erster Linie anwenden. Hoffentlich werden wir in naher Zukunft weitere Implementierungen von Level 4 :not() sehen, was das Schreiben von Selektoren etwas einfacher macht.

Answer 2

Haben Sie

all: revert 

Mehr Infos hier MDN

Answer 3

Zusätzlich zu dem, was BoltClock erklärt hat, ist das, was Sie wollen, derzeit nicht möglich, auch nicht für Kurzschreibweisen.

* { color: red; } 
#foo { color: unset; } 
#foo:hover { color: /* How to revert to red? */ } 

Sobald Sie einen Wert hinzuzufügen, die die Kaskade gewinnt, gibt es nicht Weg, um die Kaskade zu sagen, „zurück“ und die vorherigen Gewinner stattdessen zu bekommen. Sie müssen es explizit einstellen, aber das ist nur möglich, wenn Sie es wissen.

Die nächste Sache ist die revert keyword, eingeführt von CSS Cascade 4, die die Kaskade auf vorherige Ursprungsebene zurückrollt. Es ist derzeit jedoch nicht möglich, die Kaskade auf denselben Ursprung auf den vorherigen Gewinner zurückzuspielen.

Dann beschränkt die Lösung Ihre Selektoren, nur dann anzuwenden, wenn Sie sie möchten. Auf diese Weise muss nicht rückgängig gemacht werden.