如何设计HTML5 标签

I am wondering how I could style the new <meter> tag.

我想知道如何设计新的标签。

<meter value=80 min=0 max=100>
  80/100
</meter>

I just want to change the background color and the value color, but I can't find the right CSS properties. For webkit-based browsers I've found these:

我只是想改变背景颜色和值颜色，但是我找不到合适的CSS属性。对于基于webkit的浏览器，我发现了以下几点:

meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}

Where can I find the right CSS properties for gecko-based browsers (Firefox), Opera and IE?

在哪里可以找到适合geckbased浏览器(Firefox)、Opera和IE的CSS属性?

4 个解决方案

#1

I got the meter styled with a nice subtle gradient in Webkit browsers using the following code:

我使用以下代码在Webkit浏览器中创建了一个精细渐变的仪表样式:

meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsers

meter::-webkit-meter-bar {
    background: #FFF;
    border: 1px solid #CCC;
}

meter::-webkit-meter-optimum-value {
    background: #87C7DE;
    background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
    background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

However, Chris Coyier over at CSS-Tricks recommends the following HTML code:

然而，Chris Coyier在css -戏法中推荐了以下的HTML代码:

<div class="meter">
    <span style="width: 25%"></span>
</div>

... rather than the HTML5 <meter> or <progress> tags. At this point in time (February 2013), I agree with him:

…而不是HTML5 或标签。此时(2013年2月)，我同意他的观点:

To make things worse, things are very different across browsers, even between different WebKit browsers. Pseudo elements also work inconsistently. I hate to leave things hanging like this, but this is really a topic for another time. Suffice it to say, for these particular progress bars, the div/span thing is the ticket for now.

更糟糕的是，在不同的浏览器之间，甚至在不同的WebKit浏览器之间，情况都非常不同。伪元素也不一致地工作。我不想让事情像这样悬而未决，但这确实是另一个话题。我只想说，对于这些特殊的进度条，div/span是现在的门票。

Browsers just don't really seem ready to accept the new HTML5 standard tags for <meter> and <progress>. With that said, I'd suggest that people get over the desire to go straight for the future and rather go for something that works visually until further notice. I should also mention that at the current point in time, the current browser support for these tags is at 53%... that's not worth it for me, but I'll leave that to your project's discretion.

浏览器似乎还没有准备好接受和的HTML5标准标签。话虽如此，我还是建议人们不要只想着未来，而要追求视觉上的效果，直到得到进一步的注意。我还应该指出，目前对这些标签的浏览器支持是53%……这对我来说不值得，但我把它留给你的项目来决定。

#2

Below are the rules for FireFox. I included a screenshot on where to find the rules in the Firefox inspector.

下面是FireFox的规则。我提供了一个在Firefox检查器中查找规则的屏幕截图。

::-moz-meter-bar {
  /* Block styles that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;

  -moz-appearance: meterchunk;
  height: 100%;
  width: 100%;
}

:-moz-meter-optimum::-moz-meter-bar {
  /* green. */
  background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
  /* orange. */
  background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  /* red. */
  background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

#3

Meter elements look like progress bars used elsewhere on the platform you are on. try this to replace the meter elements:

仪表元素看起来像在平台上其他地方使用的进度条。试着用这个来代替仪表元件:

<div style="padding:2px;background:#CCC;">
  <div style="width:25%;background:#F00;text-align:center;">
    <span>25%</span>
  </div>
</div>

#4

You can style the meter size and position using something like the following in your css:

您可以在css中使用类似以下内容的方式来设置仪表的大小和位置:

meter {
    margin: 0 auto 4.5em;
    width: 450px;
    height: 50px;
    display: block;
}

For colours, you need to use a webkit appropriate to your browser.

对于颜色，您需要使用适合您的浏览器的webkit。