至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。
为什么呢?是因为 direction
长得丑吗?
虽然说 direction
确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。
那是因为兼容性吗?
那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction
就已经被支持。
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
2.0+ | 1.3+ | Any | 9.2+ | 5.5+ | Any | 3.1+ |
那究竟是什么原因呢?
原因就在于我这篇文章写得太晚了!
CSS direction
属性简单好记,属性值少,兼容性好,关键时候省心省力,是时候给大家宣传宣传,不要埋没了人家的特殊技能。
基本上,大家只要关心下面这两个属性值就好了:
direction: ltr; // 默认值 direction: rtl;
其中, ltr
是初始值,表示left-to-right,就是从左往右的意思,再具体描述下,就是内联内容是从左往右依次排布的,我们平时网页的处理都是这样的,比方说前后两个图片,默认情况下,DOM在前的就显示在左边。
rtl
则是另外一个值,right-to-left缩写,就是从右往左的意思,再具体描述下,就是内联内容是从右往左依次排布的,加入应用了这个CSS声明,则前后两个图片,默认情况下,DOM在前的就显示在右侧;而且是在容器的右端。
例如mm1是张含韵,DOM结构如下:
<p class="rtl"><img src="mm1.jpg"> <img src="mm2.jpg"></p>
结果,张妹子跑到了最右边,而不是左边,同时,貌似右对齐容器了,如下截图:
改变的只是内联元素块的左右顺序
需要注意的是,当 direction
属性的值是 rtl
的时候,我们的文字的前后顺序是不变了,例如:
<p class="rtl"><span>span1</span> <span>span2</span></p>
结果,还是span1在左边,span2在右边:
因为改变的只是 内联元素块
的左右顺序,所有的文字,即使使用内联标签分隔,实际上,还是一个同质内联盒子,是当作一个整体处理的,因此,只有近似右对齐效果,而具体每个文字都没有左右顺序的变化。
那什么是“内联元素块”呢?包括替换元素(replaced element),如 <img>
, <button>
, <input>
, <video>
, <object>
等,或者 inline-block
水平的元素。因此,上面span1, span2的例子,只有任意一个 span
设置 display:inline-block
,都会看到左右顺序的变化。
您可以狠狠地点击这里: CSS direction属性与左右顺序测试demo
在IE浏览器下(至少IE11),设置 direction:rtl
会改变容器默认的 text-align
值,因为IE11在内的浏览器(IE11以上版本我尚未测试)都不支持 text-align:start/end
等CSS3属性值,而Chrome和FireFox浏览器均不会修改 text-align
值,因为这些浏览器的 text-align
初始值是 start
,这里大家也应该或多或少感受到了 text-align:start/end
这个新声明的作用和意义了——当 direction
值为 ltr
的时候, start
就表示 left
,当 direction
值为 rtl
的时候, start
就表示 right
。
CSS direction
可以让我们不改变DOM前后顺序的情况下,调换元素的前后顺序,在有些场景下非常有用。
下面是我真实遇到的例子:
基本上,做PC页面项目里都有一个Panel或者Dialog组件,就是弹框什么的。其中,下面会有“确定”,“取消”按钮,如下截图:
然后,具体很奇怪的,有几个Dialog,设计希望这两个按钮顺序是相反的。
如果只是上图的需求,想要改变按钮前后顺序变换其实只要使用浮动就可以了,所有按钮都 float:right
:
.button { float: right; }
这个不难。但是,假如说我们的弹框按钮是居中显示的,例如,科科:
别说浮动了,飞动都满足不了需求,是不是又要求助万能的JS了,去改变DOM顺序?
别傻了,一行CSS direction:rtl
十几个字母,包你省心到家。我敢打包票,这一定是性价比最高的方法!
您可以狠狠地点击这里: CSS direction控制居中按钮顺序改变demo
当然,我们还有其他解决思路,不过兼容性嘛,咳咳~
.container, .button { transform: scaleX(-1); }
就是父级容器和按钮同时水平翻转,IE7,IE8倒是可以使用IE的翻转滤镜试试,好像是
flipH
,完整写法:
filter: FlipH;
不过,滤镜内再滤镜是否支持,我就不确定了,而且我也没兴趣对这些占着茅坑不拉屎的浏览器做测试,大家有兴趣可以自己试试看。
实际上 direction
属性关心的少,是因为……我想了想,还是因为大家没今早看到想本文这样分析介绍 direction
的文章,会让很多小伙伴,即使眼睛瞟到了,也认为是那个嘎吱角落的上世纪淘汰的CSS属性,实际上,人才被埋没了。
CSS direction
还有一个近亲 writing-mode
,可比 direction
复杂的多,也有意思的多,争取月底前也给大家介绍下。
以上,欢迎交流!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: http://www.zhangxinxu.com/wordpress/?p=5302
(本篇完)