A Beginner’s Guide to Using and Styling HTML5 Meter

If you already know about progress bars in HTML, which display the progress of a task, you’ll find the meter element quite similar. Both elements show a current value out of a maximum value. However, the meter element is not designed to show progress.

Instead, it is used to display a static value within a specific range. For instance, you can use it to represent the amount of storage space used in a disk by illustrating how much space is filled versus how much is still available.

And not only that, the meter element has another handy feature: it lets you divide its range into three distinct regions. Let’s go back to the storage space example. Instead of just telling you how much space is taken up, I can also show you with colors if it’s almost empty (below 30%), about halfway full (between 30% and 60%), or more than half full (above 60%). This way, you’ll always know when you’re getting close to your storage limit.

Today, I’m going to show you how to style the meter bar for two different purposes: a simple gauge without any indicated regions, and two examples of gauges with three color-indicated regions. One example is a “marks” gauge that shows poor, average, and good marks, and the other is a “pH” gauge that shows acidic, neutral, and alkaline pH values.

But before we dive into the examples, let’s quickly go over the attributes of the meter element. These attributes help define the behavior and appearance of the meter, and we’ll discuss them in more detail as we explore the examples.

Here are the attributes of the meter element:

– “value” – This attribute represents the current value of the meter.

– “min” – This attribute specifies the minimum value of the meter’s range.

– “max” – This attribute determines the maximum value of the meter’s range.

– “low” – This attribute indicates the lower boundary value of the meter.

Now that we have an overview of the attributes, let’s move on to the examples and explore how to style the meter bar in different scenarios.

1. Styling A Simple Gauge

Alright, let’s start with a basic gauge using just one attribute – the value. But before we get into it, there are a few things we need to keep in mind:

First, the gauge has a default range of 0 to 1. So if the value you provide is outside this range, it will automatically be set to either the minimum or maximum value, whichever is closest to it.

Second, don’t forget to close the tag properly.

Now, here’s the syntax:

If we want to give users the ability to specify a range, we can use the min and max attributes:

2. Customizing the “Marks” Gauge

To customize the gauge, we first need to divide it into three regions: left/low, middle, and right/high. We can achieve this by setting the low and high attributes. This is how the three regions are created.

The regions are defined by the values between min and low, low and high, and high and max.

Now, there are some conditions that the low and high values must meet in order for the regions to be created:

• The low value cannot be less than min or greater than high and max.
• The high value cannot be greater than max or less than low and min.

In this example, I want to explain a concept to you. Let’s imagine we have three regions: a low region, a mid-region, and a high region. These regions are represented by different values. The lowest value is called “min,” followed by “low,” “optimum,” “high,” and finally “max,” which is the highest value.

Now, here’s where things get interesting. If a certain condition is not met, the values of the low and high regions will switch places. For example, if the low value is lower than the min value (which it shouldn’t be), it will take on the value of the min. This means that the low value will become the same as the min value.

Let me give you a visual representation of this concept. Imagine a meter with three regions: low, mid, and high. However, even though there are three regions, the meter will only display two different colors indicating two types of regions. This is because the optimum value falls within the mid-region.

So, now you understand how this concept works. It’s all about switching values when certain conditions are not met. It may seem a bit perplexing at first, but once you grasp the idea, it becomes clear.

In any of the three regions, where the best point is located, we consider it the “optimal region” and color it green by default. The region(s) right next to it are called the “sub-optimal region” and are colored orange. The one farthest away is the “not-so-optimal region,” colored red.

So far, we haven’t set a value for optimal in our example. Therefore, the default value is 50, which makes the middle region the “optimal region,” and the regions right next to it (both on the left and right) become the “sub-optimal regions.”

In short, in the above case, any value that falls into the middle region of the meter element is shown in green, while the rest is shown in orange.

That’s not what we want. We want it to be colored this way: Poor (red), Average (orange), Good (green).

I’m going to talk about our optimal region, which we call the right-region. In this region, we consider a value between 61 and 100 to be the best. So for this example, I’ll choose 90 as our optimal value. This means that the region next to the right-region is considered sub-optimal, and the far left region is not very optimal.

Now let’s see what this looks like on our gauge.

Styling The “pH” Gauge

Before we move on to our final example, I want to mention that the CSS styles we’ll be using are dependent on the User Agent and they’re experimental.

Let’s take a moment to talk about pH values. An acidic solution has a pH of less than 7, an alkaline solution has a pH of greater than 7, and if the pH is 7, then it’s a neutral solution.

With that in mind, we’ll use the following values and attributes:

The pH gauge has several attributes that we need to consider. The low value will be set to 7, the high value will also be set to 7, and the maximum value will be set to 14. The minimum value will default to zero.

Now let’s focus on colors to complete the code. We’ll use red for the Acidic region, white for Neutral, and blue for Alkaline. We’ll also consider the left region, below 7, as the “optimal” acidic region.

To achieve the desired visual effect in Firefox, we’ll use CSS pseudo elements. For the meter pseudo elements in webkit browsers and more, please refer to the links provided in the “reference” section.

.ph_meter {

background: lightgrey;

width: 300px;

}

.ph_meter:-moz-meter-optimum::-moz-meter-bar {

background: indianred;

}

.ph_meter:-moz-meter-sub-optimum::-moz-meter-bar {

background: antiquewhite;

}

.ph_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {

background: lightblue;

}

Below is the complete HTML code and the final result of the pH gauge.

References

• HTML5 Meter W3C spec
• List of webkit pseudo elements & classes
• List of vendor specific pseudo elements

When it comes to rewriting content, I got you covered! Let’s dive into the fascinating world of HTML.

You must be wondering, what does all this HTML code mean? Well, I’m here to explain it all to you.

First, I’d like to introduce you to a couple of references that will help us along the way. These references are like trusty guides that will show us the path. Check them out:

– The HTML5 Meter W3C spec

– A list of webkit pseudo elements & classes

– And finally, a list of vendor-specific pseudo elements

Now, what exactly is all this HTML5 Meter W3C spec business? Don’t worry, I’ll tell you.

The HTML5 Meter W3C spec is a set of guidelines created by a group called the World Wide Web Consortium, or W3C for short. These guidelines outline the rules and features of a specific HTML element called the “meter”. The meter element is used to measure and display values on a scale, kind of like a thermometer or a speedometer. It’s a neat way to show information in a visually appealing manner.

Next up, we have webkit pseudo elements & classes. Pseudo elements and classes are special keywords in HTML that allow us to style certain parts of a webpage. The “webkit” part refers to a specific browser engine called WebKit, which is used by popular browsers like Safari and Chrome. So, this list will give you all the details on how to make your web elements look extra spiffy using these special keywords.

Finally, we have vendor-specific pseudo elements. These are similar to webkit pseudo elements, but they’re specific to certain browsers or vendors. Each browser or vendor may have their own set of special keywords for styling, so this list will keep you in the loop on all the possibilities.

So, there you have it! With these references by your side, you’ll be an HTML whiz in no time. Happy coding!