logo标签列表

<span>/<div> CSS缩写 - 是否合法？

htmlcss
12

如果我创建一个HTML元素：

sc {
    font-variant: small-caps;
}

然后像这样应用：

I want to display <sc>this text</sc> in small-caps.

它按预期工作（当然除了IE）。 它变成了缩写形式

.sc {
    font-variant: small-caps;
}

I want to display <span class='sc'>this text</span> in small-caps.

这是有意为之/有文档记录的行为吗？它有一个名称吗？

你可以在Javascript中手动创建元素，以使IE也能识别它们，使用document.createElement('sc');。尽管我不确定这些新元素是否在官方规范中未经验证。 - Dan
5个回答
9
XHTML（以及它基于的XML）旨在让您以类似的方式添加自定义元素，但是使用自定义的 XML命名空间与元素名称。然后，您可以直接使用CSS对这些元素进行样式设置，或者使用XSLT将其转换为真正的HTML元素。这就是（或至少之一）为什么符合标准的浏览器可以处理DOM中的非标准元素。在HTML 4及早期版本中，随意添加自己的非标准元素始终无效（不确定HTML5的可扩展性）。无论哪种方式，IE都不会自动了解DOM中的自定义元素，因此需要在DOM完成加载之前使用document.createElement()来创建它们。
2

虽然这样可以工作，但只有在使用XHTML（真正的XHTML，具有正确的Content-Type等）和名称空间时才是有效的…而不是有害的XHTML：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>&lt;span&gt; shorthand for css - is this legit?</title>
  </head>
  <body>

    <h1>Custom tags in XHTML</h1>

    I want to display
    <sc xmlns="http://le-dorfier.example.com">
      this text
    </sc>
    in small-caps.

  </body>
</html>

欲了解更多信息，请查看MDN文档中的命名空间入门课程。

2

如果您添加document.createElement('sc');，它也可以在IE上正常工作，并且是"合法的"。这就是HTML5 shiv所做的。

然而，与大多数Javascript函数不同，这必须在元素的实际使用之前调用，而不是在页面/DOM加载后调用。

1

未被识别的元素会被处理，并且在所有现代浏览器中都可以正常工作。但是它应该显示为无效标记。

在旧版本的IE中，您无法为未被识别的元素设置样式 - 不过您可以在JavaScript中使用document.createElement('sc')。

1
假设您未指定HTML文档类型且将文档视为XML文档，则可以将样式表附加到文档中，以定义任何标记的可视行为。
有关更多信息，请参见 http://csszengarden.com/。
基本上，您可以拥有一个仅带CSS样式表的XML文档，并将其布局按照您的意愿进行排列。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接