Question

看看我在html标签中看到的网站源代码，所有这些东西都在class标签中

  class=" yui3-js-enabled
      js
      flexbox
      canvas
      canvastext
      webgl
      no-touch
      hashchange
      history
      draganddrop
      rgba
      hsla
      multiplebgs
      backgroundsize
      borderimage
      borderradius
      boxshadow
      textshadow
      opacity
      cssanimations
      csscolumns
      cssgradients
      cssreflections
      csstransforms
      no-csstransforms3d
      csstransitions
      video
      audio
      svg
      inlinesvg
      svgclippaths
      wf-futurapt-n4-active
      wf-futurapt-n5-active
      wf-bebaskai-n4-active
      wf-futurapt-n7-active
      wf-hypatiasanspro-n2-active
      wf-hypatiasanspro-n4-active
      wf-hypatiasanspro-n6-active
      wf-hypatiasanspro-n7-active
      wf-futurapt-i4-active
      wf-futurapt-n3-active
      wf-futurapt-i5-active
      wf-futurapt-i7-active wf-active"

这些东西到底是什么？有必要吗？

例如，我知道使用rgba来表示背景

#p1 {background-color:rgba(255,0,0,0.3);} /* red with opacity*/

但是如果您放

怎么办？

<html class="rgba">

Answer 1

其中许多只是标记类，指示浏览器对各种功能的支持。

这些类由javascript添加，它们会在页面加载时进行测试，以查看此特定浏览器支持哪些功能。

这可以使页面或应用程序适应其所处的环境。例如，您可能具有一些CSS规则，这些规则根据是否支持flexbox来对组件进行不同的样式设置：

html.flexbox .myComponent { 
  display: flex; /* flex supported. use it. */
}

html:not(.flexbox) .myComponent {
  display: block; /* no flex support. do something else. */
}

Answer 2

类define equal styles for elements with the same class name。

例如：

index.html

<style>
  .bg-dark{
    background-color: black;
  } 
</style>

//black background html body
<body class="bg-dark">
  ...
</body>

//black background for footer (same class)
<footer class="bg-dark">
  ...
</footer>

html类名...但不是真的吗？

2 个答案: