CSS3 Some of the hidden advanced properties of Gecko specific property usage

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 the specified element relative to the height of the lowercase letter (x-height) rather than the height of the upper case (cap height). For example, Verdana is clearer than the same-model times font, and it has a shorter x-height. To compensate for this flaw, we can use the Font-size-adjust attribute to correct the latter.

This property is useful for fonts that have different x-height. Even if you are careful about using the small font, Font-size-adjust can provide a solution when the problem arises.

Example

If for some reason the Verdana is not installed on the user's computer, Arial will be corrected to have the same aspect ratio as the 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 in their original size, but were scaled off by designers. Depending on the size and context of the zoom, the picture may appear in a browser that is either not very good or is simply misplaced. Now, the browser has a better algorithm to display the scaled picture, but it's great to control its performance when your image is scaled.

This gecko private property is especially useful if your pictures have sharp lines and want them to hold them after zooming. The associated value is-moz-crisp-edges. The same algorithms are used in optimizespeed, while auto and optimizequality are defined as standard behaviors (scaling elements with the best possible quality). The Image-rendering property can also be used for <video> and <canvas> elements, as well as for background images. This is a CSS3 standard attribute, but currently only Firefox is supported.

It is worth noting that-ms-interpolation-mode:bicubic, although it is an IE proprietary attribute. However, it allows Internet Explorer 7 to render it a higher quality after zooming the picture. This property can be useful because the browser is poorly handled by default.

Browser support: Gecko.

-moz-border-top-colors

This attribute can be categorized as ' eye candy '. It allows you to set a different border color for border widths greater than 1px. Of course-moz-border-bottom-colors,-moz-border-left-colors and-moz-border-right-colors are also available.

The unpleasant is that there is no abbreviated-moz-border-colors abbreviation, so each border must be set separately. At the same time, the border-width to match the number of colors given, otherwise the last color value will be filled to the remaining width.

Example

In this example, the left and right sides of the element border will be the standard orange, and up and down there is a gradient-like color-red, yellow and blue three colors.

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

Browser support: Gecko.