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-mode
Originally 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-tb
andtb-rl
the corresponding to the CSS3 specification horizontal-tb
and 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-mode
much more powerful than IE7. We need to pay attention to: initial value lr-tb
, tb-rl
andtb-lr
, respectively, in CSS3 horizontal-tb
, vertical-rl
and vertical-lr
.
The Chrome browser does not need private prefixes since 48. Although Chrome and Opera recognize tb-rl
the 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.