Detaillierte Erläuterung der Verwendung Gecko-spezifischer Eigenschaften einiger versteckter erweiterter Eigenschaften in CSS3

font-size-adjust

Diese nützliche CSS3-Eigenschaft wird derzeit nur von Firefox unterstützt. Wir können damit festlegen, dass die Textgröße (Schriftgröße) eines bestimmten Elements relativ zur Höhe von Kleinbuchstaben (x-Höhe) und nicht zur Höhe von Großbuchstaben (Versalhöhe) sein soll. Beispielsweise ist Verdana klarer als die Times-Schriftart des gleichen Modells und hat eine kürzere x-Höhe. Um diesen Fehler auszugleichen, können wir ihn mithilfe der Eigenschaft „font-size-adjust“ beheben.

Diese Eigenschaft ist nützlich für Schriftarten mit unterschiedlichen x-Höhen. Auch wenn Sie darauf achten, kleine Schriftgrößen zu verwenden, kann Ihnen Font-Size-Adjust bei Problemen eine Lösung bieten.

Beispiel

Wenn Verdana aus irgendeinem Grund nicht auf dem Computer des Benutzers installiert ist, wird Arial so korrigiert, dass es das gleiche Seitenverhältnis wie Verdana (0,58) hat.

   p {
font-family:Verdana, Arial, sans-serif;
font-size: 12px;
font-size-adjust: 0.58;
}

Browserunterstützung: Gecko.

Bildrendering

Vor vielen Jahren wurden Bilder nicht in Originalgröße angezeigt, sondern durch den Designer verkleinert. Je nach Zoomgröße und Kontext wird das Bild im Browser möglicherweise nicht gut angezeigt oder fehlt einfach. Browser verfügen mittlerweile über bessere Algorithmen zur Anzeige skalierter Bilder, aber es wäre schön, vollständige Kontrolle darüber zu haben, wie sich Ihre Bilder bei der Skalierung verhalten.

Diese private Gecko-Eigenschaft ist besonders nützlich, wenn Ihre Bilder scharfe Linien haben und diese nach der Skalierung beibehalten werden sollen. Der relevante Wert ist -moz-crisp-edges. Derselbe Algorithmus wird in „optimateSpeed“ verwendet, während „auto“ und „optimizeQuality“ als Standardverhalten definiert sind (Elemente mit der bestmöglichen Qualität skalieren). Das Bildrendering-Attribut kann auch für die Elemente

Es ist erwähnenswert, dass -ms-interpolation-mode: bicubic, obwohl es sich um eine IE-spezifische Eigenschaft handelt. Dies führt jedoch dazu, dass Internet Explorer 7 das Bild nach der Skalierung in einer höheren Qualität rendert. Da dieser Browser die Dinge standardmäßig schlecht handhabt, könnte dieses Attribut nützlich sein.

Browserunterstützung: Gecko.

-moz-border-top-colors

Dieses Attribut kann als „Augenschmaus“ klassifiziert werden. Sie können damit verschiedene Rahmenfarben festlegen, wenn die Rahmenbreite größer als 1 Pixel ist. Natürlich sind auch -moz-border-bottom-colors, -moz-border-left-colors und -moz-border-right-colors verfügbar.

Leider gibt es für -moz-border-colors keine Abkürzung, sodass jeder Rand separat festgelegt werden muss. Gleichzeitig muss die Rahmenbreite mit der Anzahl der angegebenen Farben übereinstimmen, andernfalls füllt der letzte Farbwert die verbleibende Breite aus.

Beispiel

In diesem Beispiel sind die linken und rechten Ränder des Elements standardmäßig orange und die Ober- und Unterseite haben eine verlaufsähnliche Farbe – Rot, Gelb und Blau.

div {
border: 3px solid orange;
-moz-border-top-colors: red yellow blue;
-moz-border-bottom-colors: red yellow blue;
}

Browserunterstützung: Gecko.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung Gecko-spezifischer Eigenschaften einiger versteckter erweiterter Eigenschaften in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!