HTML5 css文件type与content-type的联系

HTML5 css文件type与content-type的联系

今天看HTML5 link标签中的charset，联想到了css文件的渲染，所以记录一下这个测试的过程。

先了解一下charset。 该属性定义了被链接资源的字符编码. 默认值为 iso-8859-1.

使用注意: 该属性已废弃并不能再被使用. 要达到同样的效果, 在被链接资源的 HTTP 头中设置相应的 Content-Type.

看到这里想到了css的应用，其实一时间纠结了一下，我如何如设置静态文件的返回content-type,与content之间又有什么区别？

<link href="~/Content/Site.css" type="text/css" rel="stylesheet" />

这是一个简单的css应用,这里有一个type="text/css"

它是CSS样式的标记。
type->类型,这里是style的属性
text/css ->文本/css,即css文本
type="text/css"  表示的是浏览器的解释方式，如果不定义的话，有些CSS效果 浏览器解释得不一样。

如果我将text/css改为text/html会发生什么呢？

在浏览器拿到整个html DOM的时候并开始渲染它，但是发现css文件，并且type却是text/html,这是我猜测浏览器对于这种组合的标签解释不成功，但是也没有报错，只是没有发送对于当前这个css文件的请求，我在IE/chorme/firefox测试均没有发送。并且整个页面已经“混乱”。

那我现在得到的结果是这个属性是会影响浏览器对静态文件的请求与否。默认情况下是会发送的。

然后将type设置为正确的情况，我们再来看一下content-type,对于asp.net mvc的设置方式
content-type: 指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定文件接收方将以什么形式、什么编码读取这个文件

这种设置方式会明确规定返回的静态文件的content-type,如果我将这里的text/css设置成text/html会发生什么呢？

<system.webServer>
<staticContent>
      <remove fileExtension=".css" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
</staticContent>
</system.webServer>

然后查看前端，浏览器对于这个文件还是会发送请求，但是在浏览器骑不了作用，因为浏览器对于css文件的接受是text/css，对不上号了，孩还怎么渲染。

我们可以看到type与content-type是一个组合，如果任何一个出错都会影响到页面的渲染。虽然我们不进行设置全部使用默认值大部分情况都会渲染成功。但是作为开发人员我们可以避免这中可能出现的问题。

最终我将两边设置成text/css，此时这个页面终于渲染成功！