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

时间:2015-11-04 20:34:57

标签: html css html5 css3 less

我可以使用此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%;
    }
  }
}

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

制作自己的标记语言:

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

答案 2 :(得分:1)

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元素(或仅divspan元素)并使用class和{{ 1}}描述的值。您可以使用类和ID来描述您喜欢的内容。请在此处查看我的答案以获取指导: