为什么CSS使用假元素？

Question

在我的课堂上,我一直在玩,发现CSS可以使用虚构的元素.

例:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

当我的教授第一次看到我使用它时,他对组成元素的工作有点惊讶,并建议我只需将所有组成元素更改为带ID的段落.

为什么我的教授不想让我使用化妆元素？他们有效地工作.

此外,为什么他不知道组成元素存在并使用CSS.它们不常见吗？

Answer 1

为什么CSS使用假元素？

(大多数)浏览器被设计为(在某种程度上)向前兼容HTML的未来添加.无法识别的元素被解析到DOM中,但没有与它们相关联的语义或专门的默认呈现.

当一个新元素被添加到规范中时,有时可以使用CSS,JavaScript和ARIA在旧版浏览器中提供相同的功能(并且元素必须出现在DOM中,以便这些语言能够操作它们以添加该功能).

(虽然应该注意的是,正在开展工作来定义一种用自定义元素扩展HTML的方法,但是这项工作目前处于开发的早期阶段,因此在它成熟之前应该避免它.)

为什么我的教授不想让我使用化妆元素？

• HTML规范不允许使用它们
• 它们可能与具有相同名称的未来标准元素冲突
• 可能存在更适合该任务的现有HTML元素

也; 为什么他不知道组成元素存在并使用CSS.它们不常见吗？

是.人们不使用它们因为它们有上述问题.

Answer 2

TL; DR

• 自定义标记在HTML中无效.这可能会导致渲染问题.
• 由于代码不可移植,因此使未来的开发更加困难.
• 有效的HTML提供了许多好处,如SEO,速度和专业性.

答案很长

有一些论点认为使用自定义标记的代码更有用.

但是,它会导致HTML无效.这对您的网站不利.

有效的CSS/HTML点| 堆栈溢出

• 谷歌更喜欢它,所以它对SEO有好处.
• 它使您的网页更有可能在未经测试的浏览器中工作.
• 它让你看起来更专业(至少对一些开发者来说)
• 兼容的浏览器可以更快地呈现[有效的HTML]
• 它指出了一些你可能错过的模糊错误,这些错误会影响你可能没有测试过的东西,例如页面的代码页或语言集.

为什么验证| W3C

• 验证作为调试工具
• 验证是一种面向未来的质量检查
• 验证可以简化维护
• 验证有助于教授良好实践
• 验证是专业化的标志

Answer 3

YADA(又一个(不同的)答案)

编辑:请参阅下面BoltClock关于类型vs标签与元素的评论.我通常不担心语义,但他的评论非常恰当且信息丰富.

虽然已经有很多好的回复,但是您表示您的教授提示您发布此问题,以便您(正式)上学.我以为我会阐述多一点点深约不仅CSS也是力学的网络浏览器.根据维基百科,"CSS是用于描述...写在一个文档的样式表语言一个标记语言." (我强调"a")注意它并没有说"用HTML编写",更不用说特定版本的HTML了.CSS可以在HTML,XHTML,XML,SGML,XAML等一起使用.当然,你需要的东西,这将使得这些文件类型也将适用造型.根据定义,CSS 不了解/理解/关心特定的标记语言标记.因此,就HTML而言,标签可能是"无效的",但CSS中没有"有效"标签/元素/类型的概念.

现代视觉浏览器不是单片程序.它们是具有特定工作要素的不同"引擎"的混合物.在一个最起码我能想到3个引擎,渲染引擎,CSS引擎和JavaScript引擎/ VM的.不确定解析器是否是渲染引擎的一部分(反之亦然),或者它是否是一个单独的引擎,但你明白了.

是否可视浏览器(其他人已经解决了屏幕阅读器可能有其他挑战处理无效标签的事实)应用格式取决于解析器是否在文档中留下"无效"标签,然后渲染引擎是否应用样式到那个标签.由于它会使开发/维护变得更加困难,因此不会编写CSS引擎来理解 "这是一个HTML文档,因此这里是有效标记/元素/类型的列表".CSS引擎只需找到标签/元素/类型,然后告诉渲染引擎,"这是你应该应用的样式." 渲染引擎是否决定实际应用样式就是它.

这是一种思考从引擎到引擎的基本流程的简单方法:解析器 - > CSS - >渲染.实际上它更复杂,但这对初学者来说已经足够了.

这个答案已经太久了,所以我会在那里结束.

Answer 4

div现代浏览器将未知元素视为s.这就是他们工作的原因.这是即将推出的HTML5标准的一部分,该标准引入了可以添加新元素的模块化结构.

在较旧的浏览器中(我认为IE7-)你可以应用一个Javascript技巧,之后它们也会起作用.

这是我在寻找示例时发现的相关问题.

这是一个关于Javascript修复的问题.事实证明,IE7确实不支持开箱即用的这些元素.

也; 为什么他不知道伪造的标签存在并使用CSS.它们不常见吗？

是的,相当.但尤其是:它们没有其他用途.而且他们是html5的新手.在早期版本的HTML中,未知标记无效.

此外,教师有时似乎在知识方面存在差距.这可能是因为他们需要向学生讲授关于特定主题的基础知识,并且知道所有的细节并且真正及时更新并不值得.我曾经被拘留过,因为老师以为我编程了病毒,只是因为我可以让电脑play在GWBasic中使用命令播放音乐.(真实的故事,是的,很久以前).但无论什么原因,我认为不使用客户元素的建议是合理的.

Answer 5

实际上你可以使用自定义元素.以下是关于此主题的W3C规范:

http://w3c.github.io/webcomponents/spec/custom/

这是一个解释如何使用它们的教程:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

正如@Quentin所指出的那样:这是开发初期的草案规范,它对元素名称的含义施加了限制.

Answer 6

关于其他答案的一些事情要么措辞不当,要么可能有些不正确.

FALSE(ish):非标准HTML元素是"不允许","非法"或"无效".

不必要.他们"不合格".有什么不同？某些东西可能"不符合"并仍然"被允许".W3C不会将HTML警察发送到您的家中并将您带走.

由于某种原因,W3C以这种方式留下了东西.一致性和规范由社区定义.如果您碰巧有一个较小的社区消费HTML用于更具体的目的,并且他们都同意一些新的元素,他们需要使事情更容易,他们可以拥有W3C所称的"其他适用的规范".(显然,这是一个严重的过度简化,但你明白了)

也就是说,严格的验证器会声明您的非标准元素是"无效的".但这是因为验证者的工作是确保符合其验证的任何规范,而不是确保浏览器或使用的 "合法性" .

FALSE(ish):非标准HTML元素将导致渲染问题

可能,但不太可能.(将"will"替换为"might")这会导致呈现问题的唯一方法是,如果您的自定义元素与另一个规范冲突,例如更改HTML规范或在同一系统中遵守的其他规范(例如SVG,数学或其他自定义).

事实上,CSS可以设置非标准标签的原因是因为HTML规范明确指出:

用户代理必须将他们不理解的元素和属性视为语义中立; 将它们留在DOM中(对于DOM处理器),并根据CSS(对于CSS处理器)对它们进行样式化,但不会从它们中推断出任何含义

注意:如果您想使用自定义标记,请记住稍后对HTML规范的更改可能会影响您的样式,因此请做好准备.但是,W3C实际上不太可能实现<imsocool>标签.

非标准标签和JavaScript(通过DOM)

您可以使用JavaScript访问和更改自定义元素的原因是因为规范甚至讨论了如何在DOM中处理它们,这是一个(非常可怕的)API,允许您操作页面上的元素.

HTMLUnknownElement接口必须用于未由此规范(或其他适用规范)定义的HTML元素.

TL; DR:符合规范是为了沟通和安全.除了验证器之外的所有东西仍然允许不符合,验证器的唯一目的是强制符合性,但其使用是可选的.

例如:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(我相信这会引起火焰,但我的2美分)

Answer 7

根据规格:

CSS

一个类型选择为文档语言元素类型的使用CSS资格名称的语法写名字

我以为这被称为元素选择器,但显然它实际上是类型选择器.该规范继续讨论CSS qualified names哪些对名称实际上没有限制.也就是说,只要类型选择器匹配CSS限定名称语法,它在技术上是正确的CSS并且将匹配文档中的元素.对特定规范中不存在的元素(HTML或其他)没有特定于CSS的限制.

HTML

在文档中包含所需的任何标记没有官方限制.但是,文档确实说

作者不得将元素,属性或属性值用于除其适当的预期语义目的之外的目的,因为这样做会阻止软件正确处理页面.

它后来说

作者不得使用本规范或其他适用规范不允许的元素,属性或属性值,因为这样做会使语言在将来更难扩展.

我不确定具体说明在哪里或者说规范是否允许使用未知元素,但它确实讨论了HTMLUnknownElement接口,用于无法识别的元素.有些浏览器甚至可能无法识别当前规范中的元素(IE8会浮现在脑海中).

虽然有自定义元素的草稿,但我怀疑它是否已在任何地方实现.

Answer 8

使用html5可以实现这一点,但您需要考虑旧版浏览器.

如果您决定使用它们,请务必注意您的HTML!有些人可能会在确定它是什么时遇到一些麻烦,因此评论可以为他们节省大量时间.

像这样的东西,

<!-- Custom tags in use, refer to their CSS for aid -->

当你制作自己的自定义标签/元素时,旧的浏览器将不知道像nav/的html5元素那样section.

如果您对这个概念感兴趣,那么我建议以正确的方式进行.

入门

自定义元素允许Web开发人员定义新类型的HTML元素.该规范是登陆Web Components的几个新API原型之一,但它可能是最重要的.如果没有自定义元素解锁的功能,则Web组件不存在:

定义新的HTML/DOM元素创建从其他元素扩展的元素将自定义功能逻辑地捆绑到单个标记中扩展现有DOM元素的API

你可以用它做很多事情,它确实使你的脚本很漂亮,就像这篇文章所说的那样.自定义元素在HTML中定义新元素.

让我们回顾一下,

优点

• 非常优雅,易于阅读.

• 很高兴看不到这么多divs.:p

• 允许对代码有独特的感觉

缺点

• 较旧的浏览器支持是一个值得考虑的强项.

• 其他开发人员可能不知道如果他们不了解自定义标签该怎么做.(向他们解释或添加评论以告知他们)

• 最后要考虑的一件事,但我不确定,是块和内联元素.通过使用自定义标签,您将最终编写更多的CSS,因为自定义标签不会有默认的一面.

选择完全取决于您,您应该根据项目的要求进行选择.

更新1/2/2014

这是一篇非常有用的文章,我发现并想到我将分享自定义元素.

学习技术为什么定制元素？自定义元素允许作者定义自己的元素.作者将JavaScript代码与自定义标记名称相关联,然后将这些自定义标记名称与任何标准标记一起使用.

例如,在注册一个称为超级按钮的特殊按钮后,使用超级按钮,如下所示:

自定义元素仍然是元素.我们可以像任何标准或今天一样轻松地创建,使用,操作和组合它们.

这似乎是一个非常好的库,但我确实注意到它没有通过Window的Build状态.这也是一个预先的alpha我相信所以我会在它发展的时候关注它.