为什么没有 `<style src="">`

缘自世界

最近在Twitter上看到这样一个有趣的话题,为什么现在用的是 <link rel="stylesheet" href=""> 引入外部共享的样式文件,而不使用 <style src=""> ?详情请点击https://twitter.com/csswizardry/status/1068154542192242688

我们都知道,内联的JavaScript是在页面的 <script> ... </script> 标签内添加,内联的样式是在 <style> ... </style> 标签内添加;而外部共享的JavaScript文件,则是通过 <script src="..."></script> 来引入,共享的样式文件不是通过 <style src=""></style> 的形式引入,而是通过 <link rel="stylesheet" href="..."> 形式引入,这是为什么呢?

既然JavaScript代码片段可以通过 <script src="..."></script> 这样的共享方式引入,那么样式文件就不可以通过类似的形式引入?w3c为什么要这样设计,是不是因为历史的局限性,或者是...

好了,不扯淡了。w3c这样设计是因为JavaScript代码片段的引入和样式文件有本质的不同。

一个重要原因是,他们压根没有考虑过要实现 <style src=""></style> 来引入当前文档外部共享的样式文件,他们的想法就是使用 <link rel="..." href="..."> 来引入当前文档外部的资源,如:父文档,翻译,或者层叠样式表等。<link rel="" href="" meidia=""> 元素规定了当前文档和外部资源之间的关系,它常用来引入外部的样式表,我们可以通过rel属性设置为stylesheet来使用。通过<link>的设计原理,我们知道它应该是可以引入scripts的,但是没有定义与JavaScript相关的rel属性值,奇怪的是在HTML 3.2 中,也只是定义了<script>而没有定义属性src ,到了后来不知怎么的就添加这个属性,现在我们通过<script src="..."></script> 来引入外部共享的JavaScript文件,至于具体原因我想下面的内容可能会回答这个问题。

注:其中rel 属性它用来表示引入的外部资源和当前文档的关系,href 属性表示引入的外部资源的url,media 属性就是媒体查询,我们可以定义它的值为支持媒体查询的css代码片段,也可以是像print, screen 这样的名词,当然还有其它一些优秀的特性,如:preload,prefetch等。详情可参考MDN link

Bruce Lawson的解释可能会给你打开一些思路,他认为 <foo src=""> 形式的元素,如:<img src=""><script src=""></script> 它引入的外部文件是被插入当文档中的,而样式表不是,它是关联当前这个文档,它作用于不止一个页面,而<style><style>将样式限制在了一个文档中。

文档到这里基本上来说已经完了,Twitter中广为大家接受的就是上文中的两个观点。但是有的人可能会比较疑惑。特解释如下:

个人觉得应该是w3c设计了两个方案。第一种是<link>,它可以获取所有的跟当前document文档相关的外部文件,包括javascript脚本,这个上文中已经说了;另一种,就是<foo src="">,它是指待了一类元素如img,script,上文中说明了它是指代了一种外部文件与当前文档关系。

如果觉得还有问题,我建议还是twitter一下这个话题。

更多有趣的前端知识,可关注我的github

阅读 5.3k

前端周分享
我需要一个苹果,一个可以与你交换的苹果

心态很重要,我始终相信没有不会做的,只有不想做的,在这个人人都聪明的今天,你不凭智慧,只需努力就...

3.5k 声望
8.4k 粉丝
0 条评论

心态很重要,我始终相信没有不会做的,只有不想做的,在这个人人都聪明的今天,你不凭智慧,只需努力就...

3.5k 声望
8.4k 粉丝
文章目录
宣传栏