HTML5 meter 元素

以下是 Pankaj Parashar 的客座文章。Pankaj 之前曾在此发表过文章，上次是关于 progress 元素。因此，再次撰写关于与其密切相关的 meter 元素的文章非常合适。它们在功能和语义上都不同，所以请继续阅读！

如 W3C 定义，

meter 元素表示已知范围内的标量测量值或分数值；例如磁盘使用情况、查询结果的相关性或投票人群中选择特定候选人的比例。这也称为量规。

如果您像我一样，在深入研究实现之前，上述规范可能意义不大。因此，让我们从 meter 元素的基本标记开始

<meter></meter>

与它的同级元素 progress 元素类似，meter 元素也必须同时具有开始标签 (<meter>) 和结束标签 (</meter>)。当我们在本文后面为不支持 meter 元素的旧版浏览器设计稳健的回退技术时，这将非常有用。

内容模型

meter 元素使用 短语内容模型，这意味着它可以包含文档的文本以及标记该文本的元素，但其后代中不得有（其他）meter 元素。

属性

除了全局属性外，meter 元素还可以具有 6 个其他属性。

value – 表示测量范围的当前值的浮点数。它必须介于 min 和 max 值之间（如果指定）。

min – 指示测量范围的下限。它必须小于 max 值（如果指定）。如果未指定，则最小值为 0。

max – 指示测量范围的上限。它必须大于 min 值（如果指定）。如果未指定，则最大值为 1.0。

low – 它表示测量范围低端的上限。它必须大于 min 属性，但小于 high 和 max 值（如果指定）。如果未指定，或小于最小值，则 low 值等于 min 值。

high – 它表示测量范围高端的下限。它必须小于 max 属性，但大于 low 和 min 值（如果指定）。如果未指定，或大于 max 值，则 high 值等于 max 值。

optimum – 此属性指示最佳值，并且必须在 min 和 max 值的范围内。与 low 和 high 属性一起使用时，它表示给定范围的首选区域。例如

• min ≤ optimum ≤ low – 如果最佳值介于 min 和 low 值之间，则较低范围被视为首选区域。
• high ≤ optimum ≤ max – 如果最佳值介于 high 和 max 值之间，则较高范围被视为首选区域。

包含所有内容的 meter 元素如下所示

<meter min="0" low="10" optimum="50" high="90" max="100"></meter>

经验法则

1. 上述所有属性都可能是浮点数，例如 12、-8、3.625
2. 根据每个属性的定义，以下不等式成立，
   • min ≤ value ≤ max
   • min ≤ low ≤ high ≤ max（如果指定了 low/high）
   • min ≤ optimum ≤ max（如果指定了 optimum）
3. 在 meter 元素中没有明确指定单位的方法，但 鼓励作者使用 title 属性指定单位。例如，<meter max="256" value="120" title="GB">已使用 120GB，共 256GB</meter>

请勿使用 meter 元素来…

1. 指示任务的进度完成情况（请改用 progress 元素）。
2. 表示任意范围内的标量值 — 例如，报告人的体重或身高。

实验 #1 – meter 元素的不同状态

此实验展示了在每个属性的不同输入值组合下 meter 元素的各种状态。随意编辑主代码的属性值以调整 meter 量规输出。

查看 Pankaj Parashar 在 CodePen 上发布的笔 HTML5 Meter 元素（@pankajparashar）。

实验 #2 – OSX 样式磁盘使用情况

在此实验中，我们将尝试使用 meter 元素模拟 OS X 中磁盘使用面板的外观，并尽可能使其跨浏览器兼容。

使用已知的输入值集填充 meter 标签的内部属性。

• 磁盘的总大小 – 120.47GB（我们的 max 属性）
• 当前磁盘使用情况 – 55.93GB（我们的 value 属性）
• 最小磁盘大小 – 0（我们的 min 属性，因为默认值为 0，所以不需要）
• 单位 – GB（我们的 title 属性，指定单位）

<meter max="120" value="55.93" title="GB"></meter>

在应用任何 CSS 之前，meter 量规在 OX X 10.9 上的 Chrome 30 中如下所示。

这几乎是我们可以在 HTML 中完成的所有操作，因为其余工作由 CSS 完成。在此阶段，我们不必担心支持不理解 meter 元素的旧版浏览器的回退技术。

设置 meter 元素的样式

就像任何其他元素一样，我们可以通过指定 width 和 height 来定义 meter 的尺寸。

meter {
  width: 500px;
  height: 25px;
}

这里事情变得有趣起来，因为通常大多数 A 级浏览器提供单独的伪类来设置 meter 元素的样式。尽管 Opera 迁移到 Blink 使我们无需过多关注其他浏览器。在此阶段，我们实际上不必了解每个浏览器的哪些版本支持 meter 元素，因为我们的回退技术将处理其余部分。我们将它们分类如下

• Webkit/Blink
• Firefox
• Internet Explorer

1. Webkit/Blink（Chrome/Safari/Opera/iOS）

通过检查 Chrome 开发者工具中的 meter 元素，我们可以对 WebKit 浏览器中规范的实现进行逆向工程。

此外，WebKit 的用户代理样式表提供了大量有关如何使用各种伪类访问 meter 元素的不同状态的信息。

伪类	描述
-webkit-meter-inner-element	其他标记，用于将 meter 元素呈现为只读。
-webkit-meter-bar	保存值的 meter 量规的容器。
-webkit-meter-optimum-value	meter 元素的当前值，并且当 value 属性落在 low-high 范围内时，默认情况下为绿色。
-webkit-meter-suboptimum-value	当 value 属性落在 low-high 范围之外时，为 meter 元素提供黄色。
-webkit-meter-even-less-good-value	当值和最佳属性超出低-高范围但在相反区域时，为仪表元素赋予红色。例如，value < low < high < optimum 或 value > high > low > optimum

首先，让我们使用-webkit-appearence: none;重置仪表默认外观。

meter {
  width: 500px;
  height: 25px;
  -webkit-appearance: none; /* Reset appearance */
  border: 1px solid #ccc;
  border-radius: 3px;
}

在这个实验中，我们只会使用-webkit-meter-bar（用于样式化容器）和-webkit-meter-optimum-value（用于样式化值）伪类。背景线性渐变中的每个颜色都表示子类别（如应用程序、电影、照片等）所占用的空间。

meter::-webkit-meter-bar {
  background: none; /* Required to get rid of the default background property */
  background-color: whiteSmoke;
  box-shadow: 0 5px 5px -5px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
    90deg, 
    #8bcf69 5%, 
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
}

CSS3 过渡/动画

WebKit 浏览器支持 meter 元素的过渡和动画。仅仅为了测试，我尝试使用过渡更改值的宽度（在:hover时），并使用keyframes为容器的背景位置添加动画。虽然不适用于实际使用，但这两个实验在所有三个浏览器上都运行良好。

meter::-webkit-meter-optimum-value {
  -webkit-transition: width .5s;
}

meter::-webkit-meter-optimum-value:hover {
  /* Reset each sub-category to 20% */
  background-image: linear-gradient(
    90deg, 
    #8bcf69 20%, 
    #e6d450 20%,
    #e6d450 40%,
    #f28f68 40%,
    #f28f68 60%,
    #cf82bf 60%,
    #cf82bf 80%,
    #719fd1 80%,
    #719fd1 100%
  );
  transition: width .5s;
  width: 100% !important; /* !important required. to override the inline styles in WebKit. */
}

meter::-webkit-meter-bar {
  /* Let's animate this */
  animation: animate-stripes 5s linear infinite;
  background-image:
    linear-gradient(
      135deg,
      transparent,
      transparent 33%,
      rgba(0, 0, 0, 0.1) 33%,
      rgba(0, 0, 0, 0.1) 66%,
      transparent 66%
    );
  background-size: 50px 25px;
}

@keyframes animate-stripes {
  to { background-position: -50px 0; }
}

伪元素

在撰写本文时，只有 WebKit 浏览器支持仪表上的伪元素。在这个实验中，我们可以使用伪元素显示元信息，例如 HD 名称、可用空间，位于仪表正上方。

meter {
  margin: 5em;
  position: relative;
}

meter::before {
  content: 'Macintosh HD';
  position: absolute;
  top: -100%;
}

meter::after {
  content: '64.54 GB free out of 120.47 GB';
  position: absolute;
  top: -100%;
  right: 0;
}

除了 WebKit 之外，其他浏览器对伪元素的支持不存在。因此，至少目前没有充分的理由将内容嵌入伪元素中。

2. Firefox

与 WebKit 类似，Firefox 使用-moz-appearence: meterbar绘制仪表。我们可以通过将其重置为none来去除默认的斜面和浮雕效果。

meter {
  /* Reset the default appearence */
  -moz-appearance: none;
  width: 550px;
  height: 25px;
}

Firefox 附带了一系列完整的伪类，用于为仪表的不同状态设置样式。下面的快照是从 Firebug 内部访问的forms.css文件中获取的。

伪类	描述
-moz-meter-bar	表示仪表的当前值，可用于设置仪表值的属性样式。
-moz-meter-optimum	当值属性落在低-高范围内时，为仪表元素赋予绿色。
-moz-meter-sub-optimum	当值属性超出低-高范围时，为仪表元素赋予黄色。
-moz-meter-sub-sub-optimum	当值和最佳属性超出低-高范围但在相反区域时，为仪表元素赋予红色。例如，value < low < high < optimum 或 value > high > low > optimum

在这个实验中，我们只会使用::-moz-meter-bar来设置仪表值背景的样式。

meter::-moz-meter-bar {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
    90deg, 
    #8bcf69 5%, 
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
}

有趣的是，在 Firefox 中，可以使用 meter 选择器本身来设置容器的背景样式。

meter {
  /* Firefox */
  background: none; /* Required to get rid of the default background property */
  background-color: whiteSmoke;  
  box-shadow: 0 5px 5px -5px #333 inset;
}

Firefox 不支持仪表上的::before和::after伪元素。对 CSS3 过渡和动画的支持也有些摇摆不定。因此，在浏览器之间的行为变得一致之前，没有充分的理由使用它们。

3. Internet Explorer

据我所知，没有稳定的 Internet Explorer 版本支持仪表元素。即使 Modernizr 测试套件也无法检测到Windows 8.1 上的 IE11 预览版中的仪表。这可能只给我们留下了将在下一节中讨论的回退方法。

if ('value' in document.createElement('meter')) {
  alert("Meter element is supported");
} else {
  alert("Meter element Not supported");
}

不支持仪表的浏览器怎么办？

Can I Use（以及简单的测试）报告仪表在以下浏览器中得到原生支持：Firefox 16+、Opera 11+、Chrome、Safari 6+。但是，Internet Explorer任何版本都不提供任何支持。如果您想让meter元素在旧版浏览器中工作，则有两个选择

1. Polyfill

Randy Peterman 已经编写了一个 polyfill，使仪表元素可以在旧版浏览器（尤其是 IE）中工作。在我的跨浏览器测试中，我发现 polyfill 对所有 IE 浏览器（低至 IE6！）都有效，这使得它成为生产环境中使用的良好选择。

2. HTML 回退

这是我首选的（无 JS）方法。它使用了我在之前为 CSS-Tricks 撰写关于HTML5 progress 元素的文章中也讨论过的一种常用技术。

<meter value="55.93" min="0" max="120.47" title="GB">
  <div class="meter-gauge">
    <span style="width: 46.42%;">Disk Usage - 55.93GB out of 120GB</span>
  </div>
</meter>

其思路是使用 div 和 span 在仪表标签内模拟仪表的外观。支持仪表的现代浏览器将忽略标签内的内容。无法呈现仪表元素的旧版浏览器将忽略标签并呈现其中的标记。

.meter-gauge {
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: whiteSmoke;
    box-shadow: 0 5px 5px -5px #333 inset;
    width: 550px;
    height: 25px;
    display: block;
}

.meter-gauge > span {
  height: inherit;  
  box-shadow: 0 5px 5px -5px #999 inset;
  background-color: blue;
  background-image: linear-gradient(
    90deg, 
    #8bcf69 5%, 
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
  display: block;
  text-indent: -9999px;
}

通常将这两种技术结合使用，并且在生产网站中使用是完全安全的。演示应该在所有浏览器（低至 IE6！）中都能正常运行。在所有版本的 Internet Explorer 中，仪表的颜色都是蓝色。Opera 11 和 12 不允许更改仪表的颜色。因此，它显示默认的绿色。演示还使用一些额外的标记来显示每个子类别（如应用程序、电影、照片等）的磁盘使用情况。

查看 Pankaj Parashar 在 CodePen 上的笔 OSX 风格磁盘使用情况 (@pankajparashar)

更多资源

• meter 的官方 W3C 规范
• meter 的 MDN 文档
• HTMl5Doctor：使用 meter 标签进行测量