:lang 选择器最佳实践

在公司做项目的时候遇到一个情况。
项目需要做国际化,并且中英文环境下,样式会有不同。所以选择了:lang 选择器

按照w3c 文档上描述,我在每个标签上设置了 lang 属性 并设置了每种语言的样式。如下:

//html部分
<Input lang={(navigator.language||navigator.userLanguage).substr(0,2)} />
<label lang={(navigator.language||navigator.userLanguage).substr(0,2)}><label/>
//css
Input:lang(en){
 ...
}
Input:lang(zh){
 ...
}

不过这样写就太傻了。这种东西可以写到立即执行函数中,如下:

!function(a){
    var x=a.document;
    var y=x.documentElement;
    y.lang = (navigator.language||navigator.userLanguage).substr(0,2);
}(window)

如此一来,就直接写css 样式的部分就好了,不用在标签里挨个写了。

PS:我写的是React应用下的方式,立即执行函数放在index.html 文件中script标签里。因为是单页应用,所以只有一个根HTML文件。所以在立即执行函数执行好后,就相当于整个文档都加了lang属性。

总结:写代码,大局观很重要。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,695评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,320评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,908评论 18 139
  • 今天在成都办事,处处能体会到每个人都是那么的温暖,那么的舒服,也许是自己的心打开了吧,没有了以前在陌生环境中...
    细雨飞纷阅读 226评论 4 6