<style>标签放置位置规范

        一般来说,html页面样式文件的引入主要有三种方式:
        1,直接通过style属性写在html标签内,也就是行内样式;
        2,引入外部css文件的形式,也即外联样式;
        3,通过<style></style>标签嵌入到html头部<head>标签内,就是嵌入式。

        在我们绝大部分的开发过程中,基本都是以上三种情况来放置css样式代码,这三种方式也能满足绝大部分的开发需求。但是最近项目中的一些问题,让我开始寻求css放置位置的另一种可能,最终也找到了相应的解决方案。就是在<body>标签中放置<style>标签。

        我们遇到的问题是,在模块化开发的过程中,每一个模块都是一个独立的小系统,有自己的html,css,js;js通过requirejs绑定加载,实现了模块的移植便利性;但是css的引入却是个问题。问题在于一个页面要使用这个模块,要么在头部用link标签引入对应的css文件,要么直接把模块的css放在全局css进行打包;前者属于有的放矢,有效的保证了资源的利用,但是需要人工引入,不方便;后者直接放在全局,虽然实现了方便性,但也对于不需要此模块的页面增加了负担,也增加了css样式相互影响的风险。如果,我们能够直接把css样式include到模块的html中,那么以上的问题就都解决了。问题是,style放在body/div中,符合规范吗

         实际上,在html5规范之前,我们就可以把<style>嵌入body里面,绝大部分浏览器也都是可以正确解析并生效的,但碍于规范,这么做还是不建议的。通过查看w3c的html5文档,我们可以发现html5规范里已经明确提示style标签可以放在head以外的位置,当然也包括body。嵌入body里面

W3C关于style标签放置位置的规范,html5中,无论是div/seciton/aside等块元素,都可以包裹style标签。

         如此,我们的问题就解决了。

         在查阅w3c文档的过程中还有一个相关的意外收获,就是html新增的style标签的“scoped”属性,我们看看w3c文档是如何描述的:

w3c关于scoped属性的描述 

         大意就是,style加入此属性后,这些属性只会在当前包裹它的元素及其子元素内生效,如果没有此属性,则会在全局生效;scoped的属性值可以是“scoped”或者空“”或者不写值。

scoped属性使用示例

         如图,此时class=“test”的div中包裹了一个style标签,style标签有scoped属性。那么style中的css样式只会在当前 .test的div及其子孙元素中生效,而不会影响全局的其它元素。如此一来,我们不仅实现了模块的移植便利,还很好的控制了模块的css作用范围,再也不用担心选择器冲突导致的各种样式混乱啦。

         是不是很开心,是不是很美好?接下来你会想念一个人。

一张让你想静静的图

          除了firefox之外的浏览器,包括手机浏览器暂时都不支持scoped属性,也就是说scoped属性并不能发挥它的限制css作用区域的功能。因此,还是老老实实的用选择器做限定吧。目前我们的做法是,所有模块都有一个唯一的id,模块内的所有样式的选择器前都会加上所在模块的id,这样就避免了模块间的css样式到处跑了。至于scoped,聊胜于无嘛,写上总比没写好,以后浏览器终归是要支持的吧。

附上参考链接:
        w3c关于style的规范
        StackOverflow关于在body中嵌入style标签的讨论

================我是分割线================

更新:2016-07-18

       最近在使用这一属性的过程中,发现了之前没有提到的一个点:scoped属性内的css样式,不会被后面的权重更高的样式覆盖。因此,我们在使用过程中应该规避此类事件的发生。我此次碰到的情况是,当一个公共模块被其它多个页面调用时,每个页面的个性化方案会对模块的样式有所更改;而如果这个公共模块的style加了scoped属性,则调用此模块的其它页面的css覆盖代码,即使选择器的权重更高,也不会生效(firefox才支持scoped,请测试此情形的同学知悉)。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,881评论 1 88
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 87,548评论 13 122
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 14,099评论 33 447
  • 作者 褚迎 我一直觉得我的爸爸妈妈之间是没有爱的,因为我从来没有听他们之间的任何一个对彼此说过我爱你,连最基本的...
    小粉红55阅读 21评论 0 0
  • 今天游泳有进步了,昨天还是慢腾腾的,并且不会一次蹬腿一次换气,今天突然就会了,这也许就是刘老师说的,日不见增,月见...
    聆听花开_5a8a阅读 71评论 0 0