在<body>中包含<style>是一个错误的主意吗?


12

在下面的代码中,我将内部样式表放置在body标签中,而不是放在头部。对于单页应用程序,我正在考虑对仅适用于该页面的样式进行此操作,而不要使用单独的pagespecific.css文件。

是否存在一个不利之处,因为我没有在头部提到相同内容?

<!-- myPartial.html starts here --> 
<!-- Like to keep styles unique to this html right here in this file --> 
<div>
  <style>
    body { background-color: red; }
    #myText { color: white; }
  </style>

  <span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here --> 

Answers:


18

一个style内部元素body的元素违反HTML语法规则。(除了根据HTML5草案提供的scoped属性外,在某些情况下允许使用该属性;某些浏览器支持此属性。)另一方面,浏览器不在乎。headbody元素的划分是理论上的。

但是,与使用styleinside 相反,使用无效语法不会获得任何收益head。唯一的借口是在某些创作环境中的技术限制,这可能会阻止您将任何内容放入head零件中。

使用style元素与外部样式表via的link问题与该问题完全正交。


1
答案的第一部分不一定是正确的
patricksweeney 2014年

1
@patricksweeney,在这种情况下,我认为这在某种程度上是理论上的,但是是正确的观察。答案已更新。
Jukka K. Korpela 2014年

我将“浏览器无关”视为对我的做法的肯定。因为我的页面是局部页面(单页应用程序),所以我不能有<head>部分,这是我尝试放入<body>或body元素内的原因。
萨兰2014年

2
@Galaxy,我不明白为什么单页应用程序缺少head元素。HTML页面始终只有一个。
Jukka K. Korpela 2014年

@ JukkaK.Korpela,我更新了问题中的代码部分以回答您的问题。
萨拉(Saran)2014年

6

(由于我们位于SE.SX,因此更具战略性的方法可能是对常规技术考虑因素的宝贵补充。)

[序言] HTML5规范是一个不断发展的目标,并且他们有一项政策可以跟进已建立的惯例。他们过去已经过时和复活了功能,改变了其他功能的含义,转移了有条不紊的建议的重点等。这并非永远写成人类拥有所有智慧的永恒。规范不是真理的神圣来源。有时候浏览器正确是很自然的。[/前言]

OP的情况极为普遍和有效。

您有一个CMS,其主题已经设计并安装好了,所有的CSS都可以从HEAD正确加载,然后,页面编辑器就剩下一个时髦的WYSIWYG框,您可以(感谢上帝!)切换到“源代码模式”,并且在HTML标记中输入(粘贴)(以前是在其他地方制作的,使用了更合适的工具)。幸运的是,您甚至可以包含STYLE标签(可能是由于标签过滤器中的偶然遗漏)...大量重复的破坏灵魂的重复工作为我们节省了一天。但是,无论如何,您仍然无法通过页面编辑方案来干扰系统的HEAD元素。

是否应该仅仅因为规范说明,就使您无法直接将CSS与HTML片段一起使用CSS?

或者,您有一个单页AJAX应用程序。

它运行很长时间,无需重载,并且有来自各种随机来源的联合内容,这些内容都是任意和独立样式的。要求将它们首先转换为仅使用内联STYLE属性,而不是仅与嵌入式STYLE元素一起使用将是荒谬的。

而且:您可以a)BODY通过STYLE属性已经将任何CSS嵌入到中的任何位置,因此CSS从理论上讲在那儿是合法的;b)无论何时,只要您想从Javascript(或更多)中使用Java,就可以使用几乎任何样式进行所需的操作,因此CSS也已经可以以病态的不良方式被滥用。而且我们谁也不会反对这些功能。W3C也没有。

那么,STYLE元素中到底有什么邪恶BODY呢?这些额外的不利影响会给我们广泛的滥用HTML构造带来什么样的负面影响?更差的表现?大概。有时。

这是废除这种令人难以置信的有用做法的正当理由,并且每个浏览器都支持其原因吗?不在百万英里之内!

我们不是白痴。好吧,不是全部,或者不是总是...;)可能会记录性能不佳的技术,而不仅仅是禁止使用。在网络的早期,我们曾经有Java applet,但后来得以幸存。汽车可能会被滥用,造成痛苦,甚至食物也可能以令人不安的低效方式使用,而且可以吃饭的驾驶员平均而言比普通的网页设计师还要愚蠢。此外,亲爱的W3C,不必担心:愤怒的HTML修补匠群的腿被静止的STYLE元素击中,BODY无法追赶W3C并报仇。他们不知道地址。而且他们没有腿。

因此,请:不要让您的声音STYLE成为合法BODY!轻描淡写地引用案文,但未能提供比当前情况更好的可行替代方案没有任何帮助。这实际上是对这种最后解决方法的威胁。

请记住:HTML5规范被称为推荐


更新:规格终于赶上了:STYLE目前有效BODY!;)
lunakid

1
更新2:规格未引起注意,因为他们改变了主意(单击lunakid的链接,它已更新)。
Maximillian Laumeister

2

HTML规范规定,

没有范围属性的样式元素仅限于出现在文档的开头。

scoped属性是一个布尔值,指示应仅将其应用于以样式元素的父元素为根的子树。

目前只有Firefox支持scoped属性。http://www.w3schools.com/tags/att_style_scoped.asp


5
w3schools网站不应作为参考,或完全不应作为参考;参见w3fools.com
Jukka K.

2
这并不能回答问题。
Jukka K. Korpela 2014年

1
谢谢@ JukkaK.Korpela,这是我发现的第一个链接,引用了范围属性浏览器的支持。其他评论提供了更好的引用。+1您的答案-1您不那么建设性的意见。
crad

+1指的是规范,同时指出缺乏对范围的支持(必须遵守规范)。我认为您应该先读答案,然后再把枪@ JukkaK.Korpela扔到那里,非常可怜。您真的无法获得比规格更值得信赖的功能,它可以完美地回答问题。“ 在身体上拥有风格会是一个错误的想法 ”-根据规范“ 是的。
弗格斯(Fergus)在伦敦,2014年

1

将CSS放在文件中而不是样式标签中有一些技术原因:

  • 使用CSS缩小器的能力(我不认为缩小器可用于样式标签)
  • 要使css文件能够被浏览器缓存。

基于意见的使用文件的理​​由:

  • 您可以使用出色的CSS预处理程序,例如Sass(Compass)或Less。
  • 您正在维护将CSS添加到应用程序的两种方法。

我个人的喜好是使用Compass为每个页面保留单独的文件,然后使用它将它们全部编译为一个文件。单个文件将包含在每个页面中。如果在旅途中,无论出于何种原因都需要将文件分开,但同时也不值得麻烦。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.