html - 为什么CSS和伪元素一起工作?

  显示原文与译文双语对照的内容

在我的课上,我在玩,发现CSS与made-up元素一起工作。

例如:


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

<body>
 <imsocool>HELLO</imsocool>
</body>

id,的。当我的教授第一次看到我在用这个,他是有点惊讶的是made-up元素完成并且推荐我只需要更改所有对我由元素应用于段落

为什么我的教授不希望我使用made-up元素? 它们有效工作。

另外,他为什么不知道made-up元素存在并使用 CSS 。 它们不常见?

时间:

磅;DR博士

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

长的应答

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

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

的角度有效的css/html | StackOverflow

  • 谷歌喜欢它,所以它非常适合搜索引擎优化。
  • 它使你的网页更可能在你没有测试过的浏览器中工作。
  • 它让你看起来更加专业( 至少对一些开发者而言)
  • 兼容的浏览器可以呈现 [valid HTML faster ]
  • 它指出了一些晦涩的Bug,你可能漏掉了一些影响你可能没有测试 比如 代码页或者页面语言的东西。

为什么验证| W3C

  • 验证作为调试工具
  • 验证作为future-proof质量检查
  • 验证简化了维护
  • 验证有助于教授良好的实践
  • 验证是专业的标志

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

在老版本浏览器中,此后他们仍可以正常工作 well, ( 我认为 ie7 - ) 可以应用一个

下面是一个相关的问题,我在寻找一个例子时发现了。

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

另外,他为什么不知道made-up标签存在并使用了 CSS 。 它们不常见?

是的,非常重要,但特别是它们不提供额外的用途。 他们是html5新手。 在早期版本的HTML中,未知标记无效。

同时,教师在他们的知识方面似乎有差距,有时。 这可能是由于这一事实,他们需要教导学生了解这些的基本知识关于给定的分析对象,和它不真的收益的所有来龙去脉,并真正做到最新。 我曾经被拘留是因为老师认为我编写了病毒,只是因为我可以使用 play 命令在GWBasic中使用命令。 ( 真实的故事,是的,很久以前) 。 但是不管原因如何,我认为建议不要使用客户元素是一个声音。

根据规格:

CSS

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

我认为这就是所谓的元素选择器,但显然不是它实际上是 类型的选择器。 规范继续谈论 CSS qualified names,它对名称的实际含义没有限制。 也就是说,只要类型选择器匹配CSS限定名语法,它在技术上就是正确的CSS,并将与文档中的元素匹配。 在一个特定的规范 -- HTML或者otherwise,元素,它的没有CSS-specific限制不存在。

HTML

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

作者不能使用元素,属性或者属性值作为它的适当的预期语义目的,这样就防止软件正确处理页面。

后来它说

作者不能使用这里规范或者其他适用规范不允许的元素,属性或者属性值,这样将来的语言将难以扩展。

于无法识别elements,相关我不知道具体从哪里开始或者规范中指出,unkown因素,如果允许,但是它确实介绍一下 HTMLUnknownElement 界面,并且 有些浏览器甚至不能识别当前规范( IE8想到了) 中的元素。

有一个草稿对于自定义元素,但是,但是我很怀疑他们还被实现在任何地方。

这对于html5是可能的,但是你需要考虑老的浏览器。

然后,请务必注释 html 如果你真的决定使用它们 ! 有些人可能无法理解为什么,搞清楚它是如此的一个注释可以节约他们的时间。

像这样的东西


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

当你制作你自己的自定义标签/元素较旧的浏览器将像 nav/section 却一点都不知道那是什么就像 html 5 元素。

如果你对这个概念感兴趣,那么我建议你用正确的方式。

入门

自定义元素允许网站开发人员定义新的HTML元素类型。 规范中充满了几个新API原语之一着陆伞,根据该网站的组件,但它是很有可能是最重要的。 没有由自定义元素解锁的功能,Web组件不存在:

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

有一个与它和美丽的,因为它确实使你的脚本本文你会遇到许多喜欢放它。 自定义元素定义 HTML 中的新元素。

让我们来总结一下

优点

  • 非常优雅,易于阅读。

  • 看不到这么多的divs 是很好的。 :p

  • 允许对代码的独特感觉

缺点

  • 旧的浏览器支持是一个强大的考虑因素。

  • 其他开发人员可能不知道如果他们不知道自定义标记,该怎么办。 ( 向他们解释或者添加评论来通知他们)

  • 最后要考虑的一点是,我不确定的是块和内联元素。 通过使用定制标记你打算就不能写多个css对它了,因为,自定义标签将不会有一个默认的部分。

选择完全取决于你,你应该根据项目要求的内容来决定。

更新 1/2/2014

这是我发现的一个非常有用的文章,我将共享它,自定义元素

了解自定义元素的技术原因? 自定义元素让作者定义自己的元素。 作者将JavaScript代码与自定义标记名称相关联,然后使用自定义标记名称,因为它们将与任何标准标记相同。

例如注册一个名为super-button的特殊按钮后,使用超级按钮,就像这样:

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

这似乎是一个非常好用的库,但我注意到它并没有通过窗口状态的构建。 在这里同时它也develops,这是pre-alpha中我相信会我会保持一个营运商,

...