为什么CSS使用假元素?

问题描述 投票:433回答:19

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

例:

imsocool {
    color:blue;
}
<imsocool>HELLO</imsocool>

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

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

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

html css
19个回答
469
投票

为什么CSS使用假元素?

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

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

(虽然应该注意到正在开展工作来定义extend HTML with custom elements的方法,但是这项工作目前处于开发的早期阶段,因此在它成熟之前应该避免它。)

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

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

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

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


2
投票

很少使用伪造的标签,因为它们不太可能在每个当前浏览器和每个未来的浏览器中可靠地工作。

浏览器必须将HTML代码解析为它所知道的元素,然后将伪造的标签转换成适合文档对象模型(DOM)的其他内容。由于Web标准未涵盖如何处理标准之外的所有内容,因此Web浏览器倾向于以不同方式处理非标准代码。

Web开发很棘手,有许多不同的浏览器都有自己的怪癖,没有添加另一个不确定因素。最好的办法是坚持使用标准中实际存在的东西,这就是浏览器供应商试图遵循的东西,因此最有可能实际工作。


2
投票

我认为制作标签可能比带有ID的p(通常是一些文本块)更令人困惑或不清楚。我们都知道带有ID的p是一个段落,但是谁知道什么是用于制作标签的?至少那是我的想法。 :)因此,这更像是一种风格/清晰度问题,而不是功能之一。


2
投票

其他人已经提出了很好的观点,但值得注意的是,如果你看一下像divs这样的框架,就会有一个非常有效的自定义元素和属性的例子。这些不仅传达了xml更好的语义,而且还可以为网页提供行为,外观和感觉。


2
投票

CSS是一种样式表语言,可用于呈现XML文档,而不仅仅是(X)HTML文档。带有伪造标签的代码段可能是合法XML文档的一部分;如果将它包含在单个根元素中,它就是一个。可能你周围已经有一个Custom Elements?任何当前浏览器都可以显示XML文档。

当然它不是一个非常好的XML文档,它缺少语法和XML声明。如果您使用HTML声明标头(并且可能是发送正确mime类型的服务器配置),那么它将是非法的HTML。

(X)HTML优于普通XML,因为元素具有在网页表示的上下文中有用的语义含义。工具可以使用这种语义,其他开发人员知道其含义,它不易出错,更易于阅读。

但在其他情况下,最好使用带XML和/或XSLT的CSS来进行演示。这就是你做的。由于这不是你的任务,你不知道自己在做什么,而且HTML / CSS是更好的方式,你应该在你的场景中坚持使用它。

您应该在文档中添加(X)HTML标头,以便工具可以为您提供有意义的错误消息。


2
投票

...我只是将所有制作的标签更改为ID为ID的段落。

我实际上对他如何正确地做到这一点的建议提出异议。

  1. AngularJS标签用于段落。我看到人们一直使用它而不是div - 只是为了间隔目的或者因为它看起来更温和。如果它不是段落,请不要使用它。
  2. 您不需要或想要在所有内容上粘贴ID,除非您需要专门针对它(例如使用Javascript)。使用类或只是一个直接的div。

2
投票

从早期开始,CSS被设计为与标记无关,因此它可以与任何标记语言一起使用,从而生成类似于树的DOM结构(例如SVG)。任何符合<html> ...</html>生产的标签在CSS中都是完全有效的。所以你的问题是关于HTML而不是CSS本身。

HTML5规范支持带有自定义标记的元素。 HTML5标准化了必须在DOM中解析未知元素的方式。所以HTML5是第一个严格说明自定义元素的HTML规范。您只需在文档中使用HTML5 doctype <p>即可。

自定义标签名称本身...

本文档name token建议您选择包含至少一个“ - ”(短划线)符号的自定义标签。这样他们就不会与未来的HTML元素发生冲突。因此,您最好将文档更改为以下内容:

<!DOCTYPE html>

2
投票

显然没有人提到它,所以我会。

这是http://www.w3.org/TR/custom-elements/的副产品。

早在20世纪90年代互联网刚开始成为主流时,竞争就在浏览器市场中肆虐。为了保持竞争力并吸引用户,一些浏览器(最着名的是Internet Explorer)试图找出页面设计者的意思并因此允许标记不正确(例如,<style> so-cool { color:blue; } </style> <body> <so-cool>HELLO</so-cool> </body> 将正确呈现为粗体),从而试图提供帮助和“用户友好”。 -italics)。

这在某种程度上是有道理的,因为如果一个浏览器一直抱怨语法错误,而另一个浏览器吃了任何你扔掉它并吐出(或多或少)正确的结果,那么人们自然会涌向后者。

虽然许多人认为浏览器战争已经结束,但自Chrome发布以来,浏览器厂商之间的新战争在过去几年中重新引发,苹果再次开始增长并推动Safari,IE失去了主导地位。 (由于浏览器供应商对标准的合作和支持,你可以把它称之为“冷战”。)因此,即使是那些被认为严格遵守网络标准的现代浏览器实际上也试图“聪明”并且并不奇怪。允许像这样的标准破坏行为,以试图像以前一样获得优势。

不幸的是,这种宽容的行为导致了一个巨大的(browser wars甚至可能说是癌症)增长不良标记的网页。因为IE是最宽松和最受欢迎的浏览器,并且由于微软不断蔑视标准,IE因为鼓励和推广糟糕的设计以及传播和延续损坏的页面而臭名昭着。

你可能现在可以在某些浏览器上使用这样的怪癖和漏洞,但除了偶尔的拼图或游戏之外,你应该在创建网页和网站时始终坚持使用<b><i>foobar</b></i>以确保它们正确显示并避免通过浏览器更新,它们会被破坏(可能完全被忽略)。


1
投票

虽然浏览器通常会将CSS与HTML标记相关联,无论它们是否有效,您都应该绝对不要这样做。

从CSS的角度来看,技术上没有任何问题。但是,使用组合标签是你不应该在HTML中做的事情。

HTML是一种标记语言,这意味着每个标记对应于特定类型的信息。

您制作的标签与任何类型的信息都不对应。这会从网页抓取工具(如Google)中产生问题。

阅读有关some的更多信息。

编辑

Div指的是多个相关元素的组,意味着以块的形式显示,并且可以这样操作。

Spans指的是与它们当前所处的上下文不同地设置样式的元素,并且意图以内联方式显示,而不是作为块显示。一个例子是句子中的几个单词需要全部大写。

自定义标记与任何标准都不相关,因此span / div应与class / ID属性一起使用。

对此有非常具体的豁免,例如web standards


0
投票

尽管CSS有一个称为“标签选择器”的东西,但它实际上并不知道标签是什么。这是留给文档的语言来定义的。 CSS不仅用于HTML,还用于XML,其中(假设你没有使用DTD或其他验证方案)标签几乎可以是任何东西。您也可以将它与其他语言一起使用,但您需要提出自己的语义,以确定“标签”和“属性”之类的内容。

浏览器通常将CSS应用于HTML中的未知标记,因为这被认为比完全破坏更好:至少它们可以显示某些东西。但故意使用“假”标签是非常糟糕的做法。其中一个原因是新标签会不时定义,如果定义的标签看起来有点像假标签,但效果不一样,那么可能会导致新浏览器出现问题。


0
投票

为什么CSS使用假元素?因为它不会伤害任何人,因为你不应该使用它们。

为什么我的教授不想让我使用化妆元素?因为如果该元素在将来由规范定义,则您的元素将具有不可预测的行为。

此外,为什么他不知道组成元素存在并使用CSS。它们不常见吗?因为他像大多数其他Web开发人员一样,明白我们不应该使用可能在将来随机破坏的东西。


98
投票

TL; DR

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

答案很长

some arguments,使用自定义标签的代码更有用。

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

The Point of Valid CSS/HTML | StackOverflow

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

Why Validate | W3C

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

68
投票

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

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

虽然已经有很多好的回复,但是您表示您的教授提示您发布此问题,以便您(正式)上学。我想我不仅会深入探讨CSS,还会介绍Web浏览器的机制。根据Wikipedia的说法,“CSS是一种样式表语言,用于描述......用标记语言编写的文档。” (我强调“a”)注意它并没有说“用HTML编写”,更不用说特定版本的HTML了。 CSS可用于HTML,XHTML,XML,SGML,XAML等。当然,您需要一些能够呈现这些文档类型的东西,这些文档类型也将应用样式。根据定义,CSS不了解/理解/关心特定的标记语言标记。因此,就HTML而言,标签可能是“无效的”,但CSS中没有“有效”标签/元素/类型的概念。

现代视觉浏览器不是单片程序。它们是具有特定工作要素的不同“引擎”的混合物。至少我可以想到3个引擎,渲染引擎,CSS引擎和javascript引擎/ VM。不确定解析器是否是渲染引擎的一部分(反之亦然),或者它是否是一个单独的引擎,但你明白了。

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

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

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


53
投票

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

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

这是我在寻找一个例子时发现的related question

这是一个question about the Javascript fix。事实证明,IE7确实不支持开箱即用的这些元素。

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

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

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


27
投票

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

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

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

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

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


22
投票

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

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

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

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

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

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

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

事实上,CSS可以设置非标准标签的原因是因为HTML规范clearly states

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

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

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

您可以使用JavaScript访问和更改自定义元素的原因是因为specification even talks about how they should be handled in the DOM,它是(非常可怕的)API,允许您操作页面上的元素。

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

TL;DR: Conforming to the spec is done for purposes of communication and safety. Non-conformance is still allowed by everything but a validator, whose sole purpose is to enforce conformity, but whose use is optional.

例如:

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

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


18
投票

根据规格:

CSS

A type selector is the name of a document language element type written using the syntax of CSS qualified names

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

HTML

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

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.

它后来说

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

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

但是有一个draft for custom elements,但我怀疑它是否已在任何地方实施。


13
投票

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

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

像这样的东西,

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

当你制作自己的自定义标签/元素时,旧浏览器将不知道像qazxsw poi / qazxsw poi这样的html5元素。

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

入门

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

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

你可以用它做很多事情,它确实使你的脚本很漂亮,就像这篇文章所说的那样。 nav

让我们回顾一下,

优点

  • 非常优雅,易于阅读。
  • 很高兴看不到这么多的section。 :p
  • 允许对代码有独特的感觉

缺点

  • 较旧的浏览器支持是一个值得考虑的强项。
  • 其他开发人员可能不知道如果他们不了解自定义标签该怎么做。 (向他们解释或添加评论以告知他们)
  • 最后要考虑的一件事,但我不确定,是块和内联元素。通过使用自定义标签,您将最终编写更多的CSS,因为自定义标签不会有默认的一面。

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

更新1/2/2014

这是一篇非常有用的文章,我发现并想到我会分享,Custom Elements defining new elements in HTML

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

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

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

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


4
投票

他为什么不要你用它们?它们不是常见的,也不是HTML5标准的一部分。从技术上讲,他们是不允许的。他们是一个黑客。

不过我自己也喜欢他们。您可能对XHTML5感兴趣。它允许您定义自己的标签并将其用作标准的一部分。

此外,正如其他人所指出的,它们是无效的,因此不便携。

他为什么不知道他们存在?我不知道,除了它们不常见。可能他只是不知道你可以。

© www.soinside.com 2019 - 2024. All rights reserved.