为什么CSS使用假元素?

HTML CSS

猿EvaL

2020-03-18

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

例:

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

当我的教授第一次看到我使用此功能时,他对组合元素起作用感到有些惊讶,建议我将所有组合元素更改为带有ID的段落。

为什么我的教授不希望我使用虚构元素?他们有效地工作。

另外,他为什么不知道组成元素存在并且可以与CSS一起使用。他们不常见吗?

第2191篇《为什么CSS使用假元素?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

16个回答
理查德猪猪伽罗 2020.03.18

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

为什么我的教授不希望我使用虚构元素?因为如果将来该元素由规范定义,则您的元素将具有不可预测的行为。

另外,他为什么不知道组成元素存在并且可以与CSS一起使用。他们不常见吗?因为他像其他大多数Web开发人员一样,理解我们不应该使用将来可能会随机中断的东西。

古一NearEva 2020.03.18

尽管CSS有一个叫做“标签选择器”的东西,但是它实际上并不知道标签是什么。剩下的就是文档的语言来定义。CSS的设计不仅可以与HTML一起使用,还可以与XML一起使用,在XML中(假设您未使用DTD或其他验证方案)标签几乎可以是任何东西。您也可以将其与其他语言一起使用,尽管您需要针对“标签”和“属性”所对应的内容提出自己的语义。

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

理查德Tony 2020.03.18

...我只是将所有组成的标签更改为带有ID的段落。

实际上,我对他关于如何正确执行操作的建议持怀疑态度。

  1. 一个<p>标记是段落。我看到人们一直在使用它而不是div-仅仅是出于间隔目的或因为它看起来更柔和。如果不是段落,请不要使用它。

  2. 您不需要或不想在所有内容上粘贴ID,除非您需要专门针对它(例如,使用Javascript)。使用类或仅使用纯正div。

伽罗GreenNear 2020.03.18

CSS是一种样式表语言,可用于呈现XML文档,而不仅是(X)HTML文档。您的带有虚构标签的代码段可能是合法XML文档的一部分;如果将其包含在单个根元素中,它将是一个。大概您已经有<html> ...</html>周围了吗?当前任何浏览器都可以显示XML文档。

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

(X)HTML与普通XML相比具有优势,因为元素具有在网页演示环境中有用的语义。工具可以使用这种语义,其他开发人员也可以理解其含义,它不那么容易出错,更易于阅读。

但是在其他情况下,最好将CSS与XML和/或XSLT一起使用来进行演示。这就是你所做的。由于这不是您的任务,所以您不知道自己在做什么,而在大多数情况下,应坚持使用HTML / CSS是更好的方法。

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

阳光LEY 2020.03.18

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

这是浏览器大战的副产品

Back in the 1990’s when the Internet was first starting to go mainstream, competition incrased in the browser market. To stay competitive and draw users, some browsers (most notably Internet Explorer) tried to be helpful and “user-friendly” by attempting to figure out what page designers meant and thus allowed markup that are incorrect (e.g., <b><i>foobar</b></i> would correctly render as bold-italics).

This made sense to some degree because if one browser kept complaining about syntax errors while another ate anything you threw at it and spit out a (more-or-less) correct result, then people would naturally flock to the latter.

While many thought the browser wars were over, a new war between browser vendors has reignited in the past few years since Chrome was released, Apple started growing again and pushing Safari, and IE lost its dominance. (You could call it a “cold war” due to the perceived cooperation and support of standards by browser vendors.) Therefore, it is not a surprise that even contemporary browsers which supposedly conform strictly to web standards actually try to be “clever” and allow standard-breaking behavior such as this in order to try to gain an advantage as before.

Unfortunately, this permissive behavior led to a massive (some might even say cancerous) growth of poorly marked up webpages. Because IE was the most lenient and popular browser, and due to Microsoft’s continued flouting of standards, IE became infamous for encouraging and promoting bad design and propagating and perpetuating broken pages.

You may be able to get away with using quirks and exploits like that on some browsers for now, but other than the occasional puzzle or game or something, you should always stick to web standards when creating web pages and sites to ensure they display correctly and avoid them becoming broken (possibly completely ignored) with a browser update.

神乐米亚 2020.03.18

尽管浏览器通常会将CSS与HTML标签相关联,无论它们是否有效,但您绝对不应这样做。

从CSS的角度来看,这在技术上没有错。但是,永远不要在HTML中使用虚构标签。

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

您组成的标签与任何类型的信息都不对应。这将给网络爬虫(例如Google)造成问题。

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

编辑

Divs是指多个相关元素的组合,旨在以块形式显示并且可以按此方式进行操作。

跨度是指元素的样式与其当前所处的上下文不同,并且将以内联方式显示,而不是作为块显示。例如,某个句子中的几个单词是否必须全部大写。

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

非常特殊的豁免,例如Angular JS

Green斯丁 2020.03.18

其他人提出了很好的观点,但是值得注意的是,如果您查看诸如AngularJS之类的框架,那么自定义元素和属性的情况非常有效。这些不仅向xml传达了更好的语义含义,而且还可以提供网页的行为,外观和感觉。

西里小胖小卤蛋 2020.03.18

我认为,与ID(通常为某些文本块)相比,伪造的标签可能比p的标签更容易混淆或不清楚。我们都知道带有ID的ap是一个段落,但是谁知道虚假标签是用于什么的呢?至少那是我的想法。:)因此,这更多是样式/清晰度问题,而不是功能之一。

用户7049302300 2020.03.18

虚构标签几乎从未使用过,因为它们不太可能在每个当前浏览器以及将来的每个浏览器中可靠地工作。

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

Web开发对于一堆具有自己独特特点的不同浏览器来说非常棘手,而又不会增加不确定性。最好坚持使用标准中实际存在的内容,这是浏览器供应商试图遵循的内容,这样才有最好的机会真正起作用。

西里神无Pro 2020.03.18

他为什么不希望您使用它们?它们并不常见,也不是HTML5标准的一部分。从技术上讲,它们是不允许的。他们是骇客。

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

而且,正如其他人指出的那样,它们是无效的,因此不可移植。

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

樱ProL 2020.03.18

div现代浏览器将未知元素视为这就是为什么他们工作。这是即将到来的HTML5标准的一部分,该标准引入了可以向其中添加新元素的模块化结构。

在较旧的浏览器(我认为是IE7-)中,您可以应用Javascript技巧,之后它们也将正常工作。

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

这是有关Javascript修复的问题事实证明,确实是IE7不支持这些元素。

也; 他为什么不知道虚假标签存在并与CSS一起使用。他们不常见吗?

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

而且,有时老师的知识似乎也有不足。这可能是由于他们需要教给学生有关给定主题的基础知识,而了解所有来龙去脉并保持最新状态并没有真正的回报。我曾经被拘留是因为老师认为我编写了病毒,只是因为我可以使用playGWBasic中命令使计算机播放音乐(真实的故事,是的,很久以前)。但是无论出于何种原因,我认为不使用custome元素的建议都是合理的。

神无小胖 2020.03.18

根据规格:

的CSS

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

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

的HTML

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

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

后来说

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

我不确定具体在何处或规范中是否允许使用未知元素,但我确实谈到了无法识别元素HTMLUnknownElement接口。某些浏览器甚至可能无法识别当前规范中的元素(想到了IE8)。

虽然有一个自定义元素草案,但是我怀疑它是否可以在任何地方实现。

猴子神无 2020.03.18

YADA(还有另一个(不同的)答案)

编辑:请参阅以下BoltClock关于类型vs标签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->呈现。实际上,它要复杂得多,但这对于初学者来说已经足够了。

这个答案已经太久了,我将在此处结束。

Jim村村 2020.03.18

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

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

这是说明如何使用它们的教程:

http://www.html5rocks.com/zh-CN/tutorials/webcomponents/customelements/

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

StafanJim 2020.03.18

TL; DR

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

长答案

一些参数认为使用自定义标签的代码更有用。

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

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

  • Google更喜欢它,因此对SEO很有好处。
  • 它使您的网页更有可能在未经测试的浏览器中工作。
  • 它使您看起来更加专业(至少对于某些开发人员而言)
  • 兼容的浏览器可以呈现[更快的有效HTML]
  • 它指出了您可能会错过的一堆难以理解的错误,这些错误会影响您可能尚未测试的内容,例如页面的代码页或语言集。

为什么要验证 W3C

  • 验证作为调试工具
  • 验证为永不过时的质量检查
  • 验证简化了维护
  • 验证有助于教导良好做法
  • 验证是专业精神的标志
StafanGO 2020.03.18

为什么CSS使用假元素?

(大多数)浏览器旨在(在某种程度上)与将来添加的HTML向前兼容。无法识别的元素被解析到DOM中,但是没有语义或与之关联的专用默认呈现。

当在规范中添加新元素时,有时CSS,JavaScript和ARIA可用于在旧版浏览器中提供相同的功能(这些元素必须出现在DOM中,这些语言才能操纵它们以添加功能) )。

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

为什么我的教授不希望我使用虚构元素?

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

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

是。人们不使用它们,因为它们存在上述问题。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android