Some rare but useful properties in css

 Here is just a summary of the title, a brief description of the role and usage

1、writing-mode

compatibility:

  • light green= support
  • Red= not supported
  • pink= partial support
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-11.0 2.0-37.0 4.0-27.0 6.0-8.0-webkit- 15.0-27.0-webkit- 6.0-8.3-webkit- 2.1-3.0 18.0-26.0
28.0-41.0-webkit- 4.0-4.4.4-webkit- 27.0-40.0-webkit-

 writing-mode作用 

  writing-modeOriginally designed to control the display of inline elements (the so-called text layout - Text Layout). Because in Asia, especially in East Asian countries like China, the typesetting of existing characters is not horizontal, but vertical, such as Chinese ancient poetry and ancient writing.

 writing-mode syntax

/* Keyword value */ 
writing-mode: horizontal-tb;     /* Default value */
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Global value - keyword inherit IE8+, initial and unset IE13 only support */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

Notice:

  If your project needs to be compatible with IE7, you only need to pay attention to these two values: the initial value lr-tbandtb-rl the corresponding to the CSS3 specification horizontal-tband vertical-rl!

  If your project only needs to be compatible with IE8+, congratulations, you can completely correspond to CSS3 specification properties, and IE8 is writing-modemuch more powerful than IE7. We need to pay attention to: initial value lr-tbtb-rlandtb-lr , respectively, in CSS3 horizontal-tbvertical-rland vertical-lr.

  The Chrome browser does not need private prefixes since 48. Although Chrome and Opera recognize tb-rlthe old IE attribute values, it is just recognition, not a bird at all, and has no effect.

  Compatible writing is as follows (add a private prefix depending on the situation):

writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
writing-mode: horizontal-tb | vertical-rl | vertical-lr;

  If you want to know the past and present of writing-mode, you can go to Mr. Zhang Xinxu 's writing-mode attribute that changes the vertical and horizontal rules of the CSS world.

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324500551&siteId=291194637