Detailed explanation of the usage of Gecko-specific properties of some hidden advanced properties in css3

font-size-adjust

This useful CSS3 property is currently only supported by Firefox. We can use it to set the text size (font-size) of a specified element should be relative to the height of lowercase letters (x-height) instead of the height of uppercase letters (cap height). For example, Verdana is clearer than the Times font of the same model, and it has a shorter x-height. To make up for this flaw, we can use the font-size-adjust property to correct the latter.

This property is very useful for fonts with different x-heights. Even if you are careful to use small font sizes, font-size-adjust can provide a solution when problems arise.

Example

If for some reason Verdana is not installed on the user's computer, Arial will be corrected to have the same aspect ratio as Verdana (0.58).

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

Browser support: Gecko.

image-rendering

n years ago, images were not displayed according to their original size, but were scaled by the designer Lose. Depending on the zoom size and context, the image may not display well in the browser or may simply be missing. Browsers now have better algorithms for displaying scaled images, but it would be nice to have complete control over how your images behave when they are scaled.

This Gecko private property is especially useful if your images have sharp lines and want them to maintain it after scaling. The relevant value is -moz-crisp-edges. The same algorithm is used in optimizeSpeed, while auto and optimizeQuality are defined as standard behavior (scale elements with the best quality possible). The image-rendering attribute can also be used on the 39000f942b2545a5315c57fa3276f220 and 5ba626b379994d53f7acf72a64f9b697 elements, just like it is used on background images. This is a CSS3 standard property, but currently only supported by Firefox.

It is worth noting that -ms-interpolation-mode: bicubic, although it is an IE-specific property. However, it causes Internet Explorer 7 to render the image to a higher quality after scaling it. Since this browser handles things poorly by default, this attribute might be useful.

Browser support: Gecko.

-moz-border-top-colors

This attribute can be classified as 'eye candy'. It allows you to set different border colors when the border width is greater than 1px. Of course -moz-border-bottom-colors, -moz-border-left-colors and -moz-border-right-colors are also available.

Unfortunately, there is no abbreviation for -moz-border-colors, so each border must be set separately. At the same time, the border-width must be consistent with the number of colors given, otherwise, the last color value will fill the remaining width.

Example

In this example, the left and right borders of the element will be standard orange, and there will be a gradient-like color above and below - red, yellow and blue.

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

Browser support: Gecko.

The above is the detailed content of Detailed explanation of the usage of Gecko-specific properties of some hidden advanced properties in css3. For more information, please follow other related articles on the PHP Chinese website!