为什么CSS使用假元素?

在我的课上，我玩了一下，发现CSS与虚构的元素一起工作。

例子:

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

When my professor first saw me using this, he was a bit surprised that made-up elements worked and recommended I simply change all of my made up elements to paragraphs with ID's.

Why doesn't my professor want me to use made-up elements? They work effectively.

Also, why didn't he know that made-up elements exist and work with CSS. Are they uncommon?

19521 次浏览
小开

我认为编造的标签可能比带有id的p更令人困惑或不清楚(通常是一些文本块)。我们都知道带ID的p是一个段落，但是谁知道创建的标记是用来干什么的呢?至少我是这么想的。:)因此，这更多的是一个风格/清晰度问题，而不是功能问题。

小开
为什么他不想让你用他们?它们既不常见，也不是HTML5标准的一部分。 从技术上讲，这是不允许的。他们就是个笨蛋。< / p >

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

此外，正如其他人指出的那样，它们是无效的，因此不能携带。

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

小开

博士TL;

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

长回答

在一些参数中，带有自定义标记的代码更有用。

但是，这会导致无效的HTML。这对你的网站不好。

有效的CSS/HTML | StackOverflow

Why Validate | W3C

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

现代浏览器将未知元素视为__abc。这就是它们有效的原因。这是即将到来的HTML5标准的一部分，该标准引入了模块化结构，可以向其中添加新元素。

在较老的浏览器(我认为是IE7-)中，你可以应用javascript技巧，之后它们也能正常工作。

这是一个相关的问题，我发现当寻找一个例子。

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

也;为什么他不知道自制标签的存在和CSS的工作。它们不常见吗?

是的,相当。但特别的是:它们没有额外的用途。他们是html5的新手。在HTML的早期版本中，未知标记是无效的。

而且，老师们有时似乎在知识上有差距。这可能是因为他们需要教学生某一学科的基础知识，知道所有的里里外外和真正的最新信息并没有真正的回报。 我曾经被留校，因为一个老师认为我编程了一个病毒，只是因为我可以用GWBasic中的play命令让电脑播放音乐。(这是真实的故事，是的，很久以前)。但是不管是什么原因，我认为不使用自定义元素的建议是合理的
小开
最佳答案

为什么CSS使用假元素?

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

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

(自定义元素有一个规范，但它们有特定的命名要求，并且需要使用JavaScript注册。)

为什么我的教授不让我使用合成元素?

  • 它们不被HTML规范所允许
  • 它们可能与将来同名的标准元素冲突
  • 可能有一个现有的HTML元素更适合这个任务

也;为什么他不知道构成元素的存在并与CSS一起工作。它们不常见吗?

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

小开

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

< a href = " http://w3c.github。io / webcomponents /规范/定制/ noreferrer“rel = > http://w3c.github.io/webcomponents/spec/custom/ < / >

这里有一个教程来解释如何使用它们:

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

正如@Quentin所指出的:这是开发早期的规范草案，它对元素名称施加了限制。

小开

人们很少使用自制的标记，因为它们不太可能在当前的每个浏览器和未来的每个浏览器中都可靠地工作。

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

在不增加不确定性元素的情况下，使用一堆不同的浏览器进行Web开发已经足够棘手了，这些浏览器都有自己的怪癖。最好的办法是坚持那些标准中的东西，那是浏览器供应商试图遵循的，所以它有最好的机会实际工作。

小开

这对于html5来说是可行的，但是你需要考虑到旧的浏览器。

如果你决定使用它们，一定要注释你的html!!有些人可能很难弄清楚它是什么，所以注释可以节省他们大量的时间。

就像这样，

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

当你创建自己的自定义标签/元素时，旧的浏览器将不知道这是什么，就像html5元素nav/section一样。

如果你对这个概念感兴趣，那么我建议你用正确的方法去做。

开始

自定义元素允许web开发人员定义新的HTML类型 元素。该规范是几个新的API原语之一 Web组件的保护伞，但它很可能是最 重要的。如果没有通过解锁的特性，Web组件就不存在 自定义元素:< / p >

定义新的HTML/DOM元素 元素从逻辑上将自定义功能捆绑在一起 扩展现有DOM元素的API

您可以使用它做很多事情，并且它确实可以使您的脚本更漂亮，就像本文想说的那样。自定义元素在HTML中定义新元素。

让我们回顾一下，

优点

  • 非常优雅，易于阅读。

  • 很高兴没有看到这么多divs。: p

  • 让代码有一种独特的感觉

缺点

  • 较老的浏览器支持是需要考虑的重要因素。

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

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

选择完全取决于您，您应该根据项目的要求来选择。

更新1/2/2014

这里有一篇非常有用的文章，我发现并想分享，自定义元素。

为什么要自定义元素?自定义元素让作者进行定义 他们自己的元素。作者将JavaScript代码与自定义标记相关联 名称，然后像使用任何标准一样使用这些自定义标记名称 标签。< / p > 例如，在注册一个特殊类型的按钮称为 超级按钮，像这样使用超级按钮:

自定义元素仍然是元素。我们 能像其他的一样轻松地创建、使用、操纵和组合它们吗 标准或今天。

这似乎是一个非常好用的库，但我注意到它没有通过windows的构建状态。我相信这也是一个预alpha版本，所以我会密切关注它的发展。

小开

根据规格:

CSS

a 类型选择器是使用CSS限定名称语法编写的文档语言元素类型的名称

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

超文本标记语言

在文档中包含您想要的任何标签没有官方限制。但是，文档确实说了

作者不得将元素、属性或属性值用于与其相应的语义目的不同的目的，因为这样做会妨碍软件正确处理页面

然后它说

作者不能使用本规范或其他适用规范不允许的元素、属性或属性值，因为这样做会大大增加将来扩展该语言的难度。

我不确定该规范具体在哪里或是否说未知元素是允许，但它确实谈到了未识别元素的HTMLUnknownElement接口。有些浏览器甚至不能识别当前规范中的元素(我想到了IE8)。

虽然有自定义元素草稿，但我怀疑它在任何地方都没有实现。

小开

虽然浏览器通常会将CSS与HTML标记关联起来，不管它们是否有效，但你绝对不应该这样做。

从CSS的角度来看，这在技术上没有什么问题。然而，在HTML中绝对不应该使用编造的标签。

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

您创建的标记不对应于任何类型的信息。这将产生来自网络爬虫的问题，如谷歌。

阅读有关正确标记的重要性的更多信息。

编辑

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

span指的是与它们当前所在的上下文样式不同的元素，它们应该内联显示，而不是作为块显示。一个例子是句子中的几个单词需要全部大写。

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

对此有非常特定的豁免，例如角JS

小开

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

编辑:请参阅下面BoltClock关于类型、标签和元素的评论。我通常不担心语义学，但他的评论非常合适，信息量很大。

虽然已经有很多好的回复，但你指出你的教授促使你发布这个问题，所以看起来你是(正式的)在学校。我想我将更深入地阐述CSS和web浏览器的力学。根据维基百科，“CSS是一种用于描述…用<强> < / >强标记语言编写的文档。”(我强调了“a”)注意，这里并没有说“用HTML编写的”，更不用说特定版本的HTML了。CSS可以用于HTML, XHTML, XML, SGML, XAML等。当然，你需要一些东西渲染这些文档类型也将应用样式。根据定义，CSS没有知道/理解/关心特定的标记语言标记。因此，就HTML而言，标签可能是“无效的”，但在CSS中没有“有效”标签/元素/类型的概念。

现代可视化浏览器不是单一的程序。它们是不同“引擎”的混合体，各自承担着特定的任务。在最低限度中，我可以想到3个引擎，渲染引擎，CSS引擎和javascript引擎/VM。不确定解析器是否是呈现引擎的一部分(反之亦然)，或者它是否是一个单独的引擎，但您可以理解。

视觉浏览器(其他人已经解决了screen readers在处理无效标记时可能遇到的其他挑战)是否应用格式化取决于解析器是否在文档中保留“无效”标记，然后呈现引擎是否对该标记应用样式。因为这将使开发/维护更加困难，所以CSS引擎不会写到理解，“这是一个HTML文档，所以这里是有效标签/元素/类型的列表。”CSS引擎简单地找到标签/元素/类型，然后告诉呈现引擎，“这是你应该应用的样式。”渲染引擎是否决定实际应用这些样式取决于它。

这里有一个简单的方法来考虑基本< em > < / em >流从引擎到引擎:parser -> CSS ->渲染。实际上，它要复杂得多，但这对于初学者来说已经足够好了。

这个答案已经太长了，所以我就到此为止。

小开

其他人提出了很好的观点，但值得注意的是，如果你看看AngularJS这样的框架，自定义元素和属性是非常有效的。它们不仅向xml传递更好的语义含义，而且还可以为web页面提供行为、外观和感觉。

小开

CSS是一种样式表语言，可用于表示XML文档，而不仅仅是(X)HTML文档。带有自制标记的代码片段可以是合法XML文档的一部分;如果你把它包含在一个根元素中，它就是1。可能你已经在它周围有一个<html> ...</html> ?当前的任何浏览器都可以显示XML文档。

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

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

但在其他上下文中，最好使用CSS和XML和/或XSLT来表示。这就是你所做的。因为这不是你的任务，你不知道你在做什么，HTML/CSS是更好的方式，大多数时候你应该在你的场景中坚持使用它。

您应该在文档中添加一个(X)HTML头，以便工具能够为您提供有意义的错误消息。

小开

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

错误(略):非标准的HTML元素是“不允许”、“非法”或“无效”的。

不一定。他们“non-conforming"。有什么不同?某事不能“不符合”;而且仍然“被允许”。 W3C不会派HTML警察到你家把你拖走。

W3C这样做是有原因的。一致性和规范是由一个团体定义的。如果恰好有一个较小的社区出于更特定的目的使用HTML，并且他们都同意一些他们需要的新元素以使事情更容易，他们可以拥有W3C称为“其他适用规范”;的元素。(显然，这是一种过于简单的做法，但你可以理解)

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

FALSE(略):非标准HTML元素将导致呈现问题

有可能，但不太可能。(取代“will"与“might")导致呈现问题的唯一原因是您的自定义元素与另一个规范冲突，例如对HTML规范的更改或同一系统中使用的另一个规范(如SVG、Math或其他自定义的东西)。

事实上，CSS可以样式非标准标签的原因是因为HTML规范清晰的状态:

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

注意:如果你想使用自定义标记，只要记住稍后对HTML规范的更改可能会破坏你的样式，所以要做好准备。然而，W3C不太可能实现<imsocool>标记。

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

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

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

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

例如:

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

(我确信这会引起争议，但这是我的2分)

小开

.．.我只是简单地将我所有的自制标签更改为带有ID的段落。

我实际上不同意他关于如何正确做这件事的建议。

  1. <p>标记用于段落。我看到人们一直在使用它而不是div——仅仅是为了空格的目的，或者因为它看起来更温和。如果不是一个段落，就不要用。

  2. 你不需要或想要把ID贴在所有东西上，除非你需要专门针对它(例如用Javascript)。使用类或直接使用div。

小开

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

浏览器通常将CSS应用于HTML中的未知标记，因为这被认为比完全破坏要好:至少它们可以显示一些东西。但是故意使用“假”标签是不好的做法。这样做的一个原因是，新标签确实会时不时地定义，如果一个定义看起来有点像你的假标签，但不完全以相同的方式工作，这可能会导致你的网站在新浏览器上出现问题。

小开

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

HTML5规范支持带有自定义标记的元素。HTML5标准化了DOM中解析未知元素的方式。所以严格来说，HTML5是第一个支持自定义元素的HTML规范。你只需要在你的文档中使用HTML5文档类型<!DOCTYPE html>。

至于自定义标签名称本身……

本文档http://www.w3.org/TR/custom-elements/建议自定义标记至少包含一个“-”(破折号)符号。这样它们就不会与将来的HTML元素冲突。因此，你最好把你的文档修改成这样:

<style>
so-cool {
color:blue;
}
</style>


<body>
<so-cool>HELLO</so-cool>
</body>
小开

令人惊讶的是，没有人(包括我过去的自己)提到可访问性。使用有效标记而不是自定义标记的另一个原因是为了与最大数量的软件兼容，包括屏幕阅读器和人们出于可访问性目的所需的其他工具。此外，像WAI 需要这样的可访问性法律使网站变得可访问，这通常意味着要求他们使用有效的标记。

显然没人提过，所以我来。

这是浏览器之战的副产品。

回到20世纪90年代，当互联网刚开始成为主流时，浏览器市场的竞争加剧了。为了保持竞争力和吸引用户，一些浏览器(最著名的是Internet Explorer)试图通过试图找出页面设计者的意思来帮助和“用户友好”，从而允许不正确的标记(例如，<b><i>foobar</b></i>将正确地呈现为粗体-斜体)。

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

虽然许多人认为浏览器战争已经结束，但自从Chrome发布以来，浏览器厂商之间的新战争在过去几年里重新燃起，苹果开始重新增长并推动Safari, IE失去了主导地位。(你可以称之为一场“冷战”，因为浏览器供应商认为这是一场合作和对标准的支持。)因此，即使当代的浏览器据说严格符合web标准，实际上也试图变得“聪明”，并允许像这样的打破标准的行为，以试图获得像以前一样的优势，这并不奇怪。

不幸的是，这种放任行为导致了大量(一些甚至可以说是癌症)标记不良的网页的增长。因为IE是最宽容、最受欢迎的浏览器，而且由于微软对标准的持续蔑视，IE因鼓励和推广糟糕的设计、传播和延续坏页面而臭名昭著。

现在你可能能够在一些浏览器上使用这样的怪癖和漏洞，但除了偶尔的谜题或游戏或其他东西，你应该始终坚持web标准创建网页和网站，以确保它们正确显示，并避免它们在浏览器更新时被破坏(可能完全忽略)。

小开

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

因为如果该元素在未来由规范定义，则元素将具有不可预测的行为。

另外，为什么他不知道存在虚构元素，并与CSS一起工作。它们不常见吗?因为他，像大多数其他web开发人员一样，明白我们不应该使用可能在未来随机破坏的东西。


提交答案