首页 文章

为什么CSS使用假元素？

提问于
浏览 次
431

在我的课堂上，我一直在玩，发现CSS可以用化妆元素 .

例：

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

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

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

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

html css

18 回答

  • 99

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

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

    回复于
  • 54

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

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

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

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

    您应该在文档中添加（X）HTML标头，以便工具可以为您提供有意义的错误消息 .

    回复于
  • 470

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

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

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

    本文档http://www.w3.org/TR/custom-elements/建议您选择包含至少一个'-'（破折号）符号的自定义标记 . 这样他们就不会与未来的HTML元素发生冲突 . 因此，您最好将文档更改为以下内容：

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

<body>
    <so-cool>HELLO</so-cool>
</body>
    回复于
  • 69

    根据规格：

    CSS

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

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

    HTML

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

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

    它后来说

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

    我不确定具体说明在哪里或者说规范是否允许使用未知元素，但它确实讨论了无法识别的元素的HTMLUnknownElement接口 . 有些浏览器甚至可能无法识别当前规范中的元素（IE8来了心神） .

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

    回复于
  • 22

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

    回复于
  • 2

    这可以使用html5，但您需要考虑旧版浏览器 .

    If you do decide to use them then, make sure to COMMENT your html!! Some people may have some trouble figuring out what it is so a comment could save them a ton of time.

    像这样的东西，

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

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

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

    入门自定义元素允许Web开发人员定义新类型的HTML元素 . 该规范是Web Components旗下的几个新API原型之一，但它可能是最重要的 . 如果没有自定义元素解锁的功能，Web组件就不存在：定义新的HTML / DOM元素创建从其他元素扩展的元素逻辑上将自定义功能捆绑到单个标记中扩展现有DOM元素的API

    你可以用它做很多事情，它确实使你的脚本很漂亮，就像这篇文章所说的那样 . Custom Elements defining new elements in HTML .

    所以让我们回顾一下，

    Pros

    • 非常优雅，易于阅读 .

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

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

    Cons

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

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

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

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

    Update 1/2/2014

    这是一篇非常有用的文章，我发现并想到我会分享，Custom Elements .

    学习技术为什么定制元素？自定义元素允许作者定义自己的元素 . 作者将JavaScript代码与自定义标记名称相关联，然后将这些自定义标记名称与任何标准标记一起使用 . 例如，在注册一个称为超级按钮的特殊按钮后，使用超级按钮，如下所示：自定义元素仍然是元素 . 我们可以像任何标准或今天一样轻松地创建，使用，操作和组合它们 .

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

    回复于
  • 2

    YADA（另一个（不同的）答案）

    Edit: Please see the comment from BoltClock below regarding type vs tag vs element. I usually don't worry about semantics but his comment is very appropriate and informative.

    虽然已经有很多好的回复，但是你表示你的 professor 提示你发布这个问题所以看来你是（正式）在学校 . 我想我不仅会深入探讨CSS，还会介绍Web浏览器的机制 . 根据Wikipedia，“CSS是一种样式表语言，用于描述用 a 标记语言编写的文档 . 用HTML编写的" (I added the emphasis on " ") Notice that it doesn't say "”更不用说特定版本的HTML了 . CSS可用于HTML，XHTML，XML，SGML，XAML等 . 当然，您需要一些能够呈现这些文档类型的东西，这些文档类型也将应用样式 . 根据定义，CSS不具体 know / understand / care about 特定的标记语言标记 . 因此，就HTML而言，标签可能是"invalid"，但CSS中没有"valid"标签/元素/类型的概念 .

    Modern 可视化浏览器不是单片程序 . 他们是不同的"engines"的混合体，有特定的工作要做 . 至少我可以想到3个引擎，渲染引擎，CSS引擎和javascript引擎/ VM . 不确定解析器是否是渲染引擎的一部分（反之亦然），或者它是否是一个单独的引擎，但你明白了 .

    是否 visual 浏览器（其他人已经解决了屏幕阅读器可能有其他挑战处理无效标签的事实）应用格式取决于解析器是否在文档中保留"invalid"标签，然后渲染引擎是否将样式应用于标签 . 由于它会使开发/维护变得更加困难，因此不会编写CSS引擎来理解"This is an HTML document so here are the list of valid tags / elements / types." CSS引擎只是找到标签/元素/类型然后告诉渲染引擎，"Here are the styles you should apply."渲染引擎是否决定实际应用样式是它 .

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

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

    回复于
  • 1

    显然没有人提到它，所以我会 .

    这是副产品browser wars .

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

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

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

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

    你现在可以在某些浏览器上使用这样的怪癖和漏洞，但除了偶尔的拼图或游戏之外，你应该始终坚持web standards创建网页和网站以确保它们正确显示并避免通过浏览器更新，它们会被破坏（可能完全被忽略） .

    回复于
  • 2

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

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

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

    回复于
  • 2

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

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

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

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

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

    是的，相当 . 但特别是：它们没有其他用途 . 他们是html5的新手 . 在早期版本的HTML中，未知标记无效 .

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

    回复于
  • 0

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

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

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

    他为什么不知道他们存在？我不知道，除了它们不常见 . 可能他只是不知道你可以 .

    回复于
  • 13

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

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

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

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

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

    回复于
  • 4

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

    回复于
  • 2

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

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

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

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

    阅读importance of correct markup的更多信息 .

    编辑

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

    Span 指的是要素风格不同于它们当前所处的上下文，并且意图以内联方式显示，而不是作为块显示 . 一个例子是句子中的几个单词需要全部大写 .

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

    对此有非常具体的豁免，例如Angular JS

    回复于
  • 2

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

    FALSE（ish）：非标准HTML元素是“不允许”，“非法”或“无效” .

    不必要 . 他们是 "non-conforming" . 有什么不同？ Something can "not conform" and still be "allowed". W3C不会将HTML警察发送到您的家中并将您带走 .

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

    也就是说，严格的验证器会声明您的非标准元素为"invalid" . 但是，_152919的工作是确保符合其验证的任何规范，而不是确保浏览器或使用 .

    FALSE（ish）：非标准HTML元素将导致渲染问题

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

    实际上， the reason CSS can style non-standard tags 是因为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：符合规范是为了沟通和安全 . 除验证者之外的所有事物仍然允许不符合，验证者的唯一目的是强制执行符合性，但其使用是可选的 .

    例如：

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

    （我相信这会引起火焰，但我的2美分）

    回复于
  • 18

    TL;DR

    • 自定义标记在HTML中无效 . 这可能会导致渲染问题 .

    • 由于代码不可移植，使未来的开发更加困难 .

    • 有效的HTML提供了许多好处，如SEO，速度和专业性 .

    Long Answer

    some arguments带有自定义标签的代码更有用 .

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

    The Point of Valid CSS/HTML | StackOverflow

    谷歌更喜欢它，所以它对SEO有好处 . 它使您的网页更有可能在未经测试的浏览器中运行 . 它使你看起来更专业（至少对一些开发人员而言）兼容的浏览器可以渲染[有效的HTML更快]它指出了一些你可能错过的模糊错误，这些错误会影响你可能没有测试过的东西，例如页面的代码页或语言集 .

    Why Validate | W3C

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

    回复于
  • 27

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

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

    • <p> 标签用于段落 . 我看到人们一直使用它而不是div - 仅仅是为了间距目的，或者因为它看起来更温和 . 如果它's not a paragraph, don'吨使用它 .

    • 除非您需要专门针对它（例如使用Javascript），否则您不需要或想要在所有内容上粘贴ID . 使用类或只是一个直接的div .

    回复于
  • 2

    为什么CSS使用假元素？

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

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

    （虽然应该注意到正在开展工作以确定一种方法，但目前这项工作尚处于发展的早期阶段，因此在成熟之前应该避免这种做法 . ）

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

    • HTML规范不允许使用它们

    • 它们可能与具有相同名称的未来标准元素冲突

    • 可能存在更适合该任务的现有HTML元素

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

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

    回复于

相关问题