Verstehen Sie schnell die CSS4-Farbanpassungseigenschaft in 5 Minuten

Dieser Artikel vermittelt Ihnen in 5 Minuten ein schnelles Verständnis der CSS4-Farbanpassungseigenschaft. Er hat einen gewissen Referenzwert für Freunde in Not Ich hoffe, es wird Ihnen hilfreich sein.

1. Kurze Beschreibung des Farbanpassungsattributs

Farbanpassung war ursprünglich ein nicht standardmäßiges Attribut, wurde aber kürzlich dem Arbeitsentwurf von hinzugefügt CSS Color Module Level 4, das als nützlich erachtet wird. Da ich nun einen guten Ruf habe, verdient es eine Einführung.

Die Funktion des CSS-Attributs „Farbanpassung“ kann in einem Satz ausgedrückt werden: ob der Browser seine eigene Farbe anpassen darf, um ein besseres Leseerlebnis zu erzielen.

Syntax

color-adjust: economy;
color-adjust: exact;

wobei:

Wirtschaftlichkeit

Standardwert. Die wörtliche Übersetzung von „Economy“ im Englischen bedeutet „Wirtschaft“ und „Sparen“. Dies bedeutet, dass der Browser (oder ein anderer Client) den Stil des Elements anpasst und die Anpassungsregeln vom Browser selbst festgelegt werden, um bessere Ausgabeeffekte zu vermeiden. Beim Drucken lässt der Browser beispielsweise alle Hintergrundbilder weg und passt die Textfarbe an, um sicherzustellen, dass der Kontrast zum Lesen auf weißem Papier optimal ist.

Wir schreiben das Jahr 2018. Moderne Geräte außer Druckern verfügen über sehr leistungsstarke Monitore. Es scheint, dass wir nicht auf diese Art von Szenario „Hintergrundfarbe speichern“ und „Farbwert speichern“ stoßen können. Beispielsweise verfügt macOS neben dem coolen Nachtsichtmodus über eine Szene, die einen erhöhten Kontrast erfordert, und das Gerät sollte die Möglichkeit erhalten, die Stilleistung frei anzupassen. In Zukunft wird es weitere Geräte mit anderen Leseszenarien geben. Aus zukunftsorientierter Sicht hat das Attribut Farbanpassung seinen Wert.

exakt

exakt bedeutet „genau“ und „genau“. Es bedeutet, dem Browser mitzuteilen, dass die von mir eingestellten Farben, Hintergründe usw. notwendig sind und genau übereinstimmen. Seien Sie nicht schlau und helfen Sie mir, Anpassungen vorzunehmen.

Um das Lesen zu erleichtern, fügen wir der Tabelle beispielsweise grau-weiß gestreifte Zebrastreifen hinzu. Wenn wir diese Seite jedoch zu diesem Zeitpunkt drucken, wird der graue Hintergrund entfernt, was Auswirkungen hat Zu diesem Zeitpunkt können wir die Zebrafarbe der grauen Streifen auf „genau“ einstellen, sodass die grauen Streifen normal gedruckt werden.

Kompatibilität

Der folgende Screenshot:

Sowohl Chrome als auch Firefox unterstützen es, Chrome muss das Präfix -webkit-private hinzufügen. Was Chrome jedoch laut meinen Tests nicht unterstützt, ist das Attribut -webkit-print-color-adjust, das als Vorgänger von color-adjust angesehen werden kann, bevor es einen Namen hatte.

-webkit-print-color-adjust- und color-adjust-Attributwerte und -Funktionen sind gleich.

2. Ein Fall zur Farbanpassung

Sie können hier klicken: Die Hintergrundfarbe zeigt beim Drucken weiterhin eine Kontrastdemo an

Strg + P oder auswählen Im Menü „Drucken“ des Browsers können Sie zu diesem Zeitpunkt den Unterschied erkennen:

Der Grund, warum die folgende Tabelle beim Drucken der Vorschau mit Streifen angezeigt wird, ist folgender: Folgendes CSS ist eingestellt:

table {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}

Unter dem Firefox-Browser gibt es ein ähnliches Verhalten:

Three or five seconds are up

Lassen Sie uns zum Schluss noch kurz auf das Farbanpassungsattribut eingehen.

Es ist schwierig, elegantes und nicht auf das Aussehen bezogene CSS zu verwenden. Wenn wir nicht lernen oder zuhören, wird dies kaum Auswirkungen auf unsere tägliche Arbeit haben. Es wird geschätzt, dass es schwierig sein wird, Szenen zu finden, die die Verwendung des Farbanpassungsattributs erfordern, selbst wenn ich weitere 10 Jahre arbeite.

Genau wie diese unbeliebten Nischenfilme sind sie für uns kein Muss, obwohl sie ihre eigene künstlerische Qualität und ihren eigenen Wert haben.

Zum Glück hat es nur 5 Minuten gedauert. Darüber hinaus ist das Wissen selbst möglicherweise nicht in der Lage, mit einigen speziellen Geräten oder speziellen Szenen umzugehen. Zu diesem Zeitpunkt ist die Farbanpassung eine lebensrettende Eigenschaft. Daher ist die Kosteneffizienz des Lernens tatsächlich sehr gut. Wenn Sie es verstehen, lernen Sie es.

Das Obige ist eine kurze Einführung in die CSS4-Farbanpassungseigenschaft in 5 Minuten. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonVerstehen Sie schnell die CSS4-Farbanpassungseigenschaft in 5 Minuten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!