我有一个
HTML django模板页面,它是RTL和LTR(取决于用户的区域设置).
什么是根据语言环境左右切换属性的最佳方法?这个问题在CSS中是否有内置的属性? (我不想使用JS,感觉太乱)
我有:
.elem{ left: 10px; bottom: 10px; position: absolute; }
我想要这样的东西:
.elem{ right-or-left-according-to-html-dir: 10px; bottom: 10px; position: absolute; }
目前我可以想到的唯一选择是将文件变成模板:
.elem{ {{dir}}: 10px; bottom: 10px; position: absolute; }
解决方法
你说你正在使文档rtl或ltr取决于区域设置.在这种情况下,您可以使用:lang()选择器来使文档的某些部分具有取决于区域设置的样式.
> http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:lang
> http://www.w3.org/TR/css3-selectors/#lang-pseudo
如果你想要更多的支持(IE7),你可以使用属性选择器选择器[lang =’en’],尽管这只会测试指定的选择器上的属性.
> http://www.w3.org/TR/css3-selectors/#attribute-selectors
如果您在html元素(您应该使用lang =“en”)中指定语言,则可以将html选择器放在要在某些语言环境中应用的类之前:
.elem { margin: 0 10px 0 0; color: blue; } html[lang='en'] .elem { margin: 0 0 0 10px; }
更好的是,如果你指定了dir属性,你可以直接在css中使用它:
.elem[dir='rtl'] { margin: 0 10px 0 0; }
请注意,通过身体元素上的课程,您将始终依靠该课程始终在那里.但是,dir和lang属性可以在更具体的范围内指定,如单个div,并且仍然在css中使用,以及“其他”阅读方向的样式.
编辑
最后,为了注意未来,CSS Selectors’Level 4’将包含一个psuedo标签,可以对文本方向进行过滤.当然,这些规范正在开发中,浏览器的采用可能需要几年的时间才能可靠地使用它: