HTML

Question

我可以使用此CSS（自定义元素，自定义属性）（例如） IE 9 吗？这有效吗？有什么负面影响？

我希望有更多可读代码......没有div。

HTML

<row center>
  <column number="6">A</column>
</row>

CSS / LESS

row {
  background: #444;
  display: flex;

  &[center] {
    justify-content: center;
  }

  column {
    background: #222;
    color: #fff;

    &[number="6"] {
      padding: 1rem;
      width: 50%;
    }
  }
}

Answer 1

针对自定义元素的案例已由其他答案提出。作为这个想法的替代，HTML 5 has a number of new elements。其中包括<article>，<aside>，<figure>，<header>，<nav>和<section>。使用这些元素应该使您的页面布局在语义上有意义，避免让您迷失在<div>和<span>元素的海洋中，并被现代浏览器所理解。

Answer 2

制作自己的标记语言：

可能与将来添加到HTML的其他功能发生冲突（至少如果您告诉浏览器它是带有Content-Type: text/html HTTP标头的HTML）。
用户代理无法正确理解，您无法完全覆盖CSS（例如屏幕阅读器，文本浏览器和搜索引擎）。
未来可能需要维护您的代码的其他开发人员不会理解。
无法使用HTML验证程序进行廉价的基本QA传递

Answer 3

W3C正在开发标准调用Custom Elements，允许作者定义自己的元素。你可以在这里阅读：

Custom Elements, defining new elements in HTML
自定义元素允许Web开发人员定义新类型的HTML   元素。该规范是登陆的几个新API原语之一   Web Components的保护伞，但它可能是最多的   重要。如果没有解锁功能，则Web组件不存在   自定义元素：
- 定义新的HTML / DOM元素
- 创建从其他元素扩展的元素
- 将自定义功能逻辑捆绑到一个标记
- 扩展现有DOM元素的API
Introduction to Custom Elements

自定义元素使开发人员能够创建自己的自定义HTML 标签，让他们在他们的网站和应用程序中使用这些标签，并启用更容易重用组件。
W3C Custom Elements

为Web开发人员提供一种构建自己的，功能齐全的方法 DOM元素。虽然很可能用它来创建DOM元素 HTML中的任何标记名称，这些元素都不是很实用。通过为Web开发人员提供了通知解析器如何使用的方法正确构造一个元素并对一个生命周期的变化作出反应元素，规范消除了对 DOM-as-a-render-view脚手架，现在必须存在于大多数Web中框架或库。

但是，如果您今天的目标是编写更易读的代码，那么请考虑使用标准HTML元素（或仅div和span元素）并使用class和{{ 1}}描述的值。您可以使用类和ID来描述您喜欢的内容。请在此处查看我的答案以获取指导：

我可以将自定义元素和属性用作有效的HTML吗？

HTML

CSS / LESS

3 个答案: