! Wichtig ist eigentlich nützlich (in Druckstilblättern)

Die arme alte! Wichtige Aussage erhält viel Flak in der CSS -Community und aus gutem Grund. Es ist unnötig, schafft einen Wartungsalptraum und verspottet die Kaskade. Ich habe seit Jahren nicht über die Verwendung!

Stellen wir uns vor, wir möchten eine Bildergalerie erstellen. Wir geben unser Bestes, um die Ideale der progressiven Verbesserung zu ehren, und stellen zunächst sicher, dass die Bilder in einer HTML -Liste enthalten sind. Schließlich möchten wir JavaScript verwenden, um einen Abschluss-/Ausfall-Diashow-Effekt zu erstellen, aber unsere Basis ist eine einzelne Bildersäule. Wenn ein Besucher JavaScript deaktiviert hat, wird dies das sehen.

Okay, so weit so gut. Wenn wir jedoch ein Druckstilblatt erstellen, entdecken wir einen Fehler in unserem Plan: Wenn Sie JavaScript verwenden, um HTML -Elemente zu animieren, ändern Sie unweigerlich das Attribut der Elemente. In unserer Diashow hat JavaScript die Position und Opazität der Bilder verändert, so dass jeweils nur einer enthüllt wird. Wenn wir die Galerie -Seite drucken, obwohl wir eine einzelne Bilderspalte wünschen, ist das, was wir am Ende drucken, nur ein einzelnes Bild. Dies liegt daran, dass Sie keinen Zielmedienstyp für CSS angeben können, der in einem Element -Style -Attribut deklariert ist. Sie können nicht sagen, dass alle im Style -Attribut deklarierten Stile nur für den Bildschirm sind.

Sie brauchen also eine Möglichkeit, Druckstile anzugeben, die die Inline -Stile überschreiben können. Es gibt nur einen Weg, dies zu tun :! Wichtig. Setzen Sie in Ihrem Druckstilblatt die Position und Deckkraft der Bildelemente zurück und fügen Sie hinzu! Wichtig:

img.gallery {
  position: static !important;
  opacity: 1 !important;
}

Das war es wirklich; Ich fand eine legitime Verwendung für! Wichtig und wollte sie teilen.

Das obige ist der detaillierte Inhalt von! Wichtig ist eigentlich nützlich (in Druckstilblättern). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!