A few questions about styling a meter element. Is there a way to :

- set the various colours (optimal, low, high)
- have it vertical
- animate a change in the value
?

Andrew Poulos

Andrew Poulos wrote:

> A few questions about styling a meter element. Is there a way to :
>
> - set the various colours (optimal, low, high)

As always with native controls, it is usually not possible to style them in
a compatible way. By trial-and-error (in the Chrome Dev Tools “Elements”
tab) I have not found even a WebKit-specific CSS property to set the color.

If you need a consistent look, you have to design your own control or use an
existing library.

> - have it vertical

As always:

translate: rotate(-90deg);

or

translate: rotate(90deg);

> - animate a change in the value
> ?

Only with scripting, I suppose.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Andrew Poulos wrote:

> A few questions about styling a meter element. Is there a way to :
>
> - set the various colours (optimal, low, high)
> - have it vertical
> - animate a change in the value
> ?

You should (have) do(ne) this:

<https://www.google.com/search?q=style+meter+element>

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

On 7/05/2021 7:40 am, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> A few questions about styling a meter element. Is there a way to :
>>
>> - set the various colours (optimal, low, high)
>> - have it vertical
>> - animate a change in the value
>> ?
>
> You should (have) do(ne) this:
>
> <https://www.google.com/search?q=style+meter+element>

I did try that but with MDN warnings on things like ::webkit-meter-bar
"This feature is non-standard and is not on a standards track. Do not
use it..." I didn't know if it was practical to look for a CSS solution.

Andrew Poulos

In Message: <45ydnWK-J_tIDwn9nZ2dnUU7-RPNnZ2d@westnet.com.au>
Andrew Poulos <ap_prog@hotmail.com> wrote:

[snip]

> I did try that but with MDN warnings on things like
> ::webkit-meter-bar "This feature is non-standard and is not on a
> standards track. Do not use it..." I didn't know if it was practical
> to look for a CSS solution.

@supports selector(::-webkit-meter-bar)…
@supports selector(::-moz-meter-bar)…

:root {
--bar: gold;
--opm: brown;
--sub-opm: purple;
--sub-sub-opm: blue;
}

meter {
width: 8em;
height: 1em;
}

@supports selector(::-webkit-meter-bar) {
meter::-webkit-meter-bar {
background: var(--bar);
}

meter::-webkit-meter-inner-element {

}

meter::-webkit-meter-optimum-value {
background-color: var(--opm);
}

meter::-webkit-meter-suboptimum-value {
background: none;
background-color: var(--sub-opm);
}

meter::-webkit-meter-even-less-good-value {
background-color: var(--sub-sub-opm);
}

}
@supports selector(::-moz-meter-bar) {
div {
width: -moz-fit-content;
}

meter {
background: none;
box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
border-radius: 1em;
background-color: var(--bar);
}

meter::-moz-meter-bar {
border-radius: 1em;
}

meter:-moz-meter-optimum::-moz-meter-bar {
background: none;
background-color: var(--opm);
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: none;
background-color: var(--sub-opm);
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: none;
background-color: var(--sub-sub-opm);
}

}

<meter min="0" max="100" low="25" high="75" optimum="100"
value="20"></meter>

<meter min="0" max="100" low="25" high="75" optimum="100"
value="50"></meter>

<meter min="0" max="100" low="25" high="75" optimum="100"
value="80"></meter>

--
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

Andrew Poulos wrote:

> On 7/05/2021 7:40 am, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> A few questions about styling a meter element. Is there a way to :
>>>
>>> - set the various colours (optimal, low, high)
>>> - have it vertical
>>> - animate a change in the value
>>> ?
>>
>> You should (have) do(ne) this:
>>
>> <https://www.google.com/search?q=style+meter+element>
>
> I did try that but with MDN warnings on things like ::webkit-meter-bar
> "This feature is non-standard and is not on a standards track. Do not
> use it..." I didn't know if it was practical to look for a CSS solution.

I found this as the first hit:

<https://css-tricks.com/html5-meter-element/>

Note that it was last updated in 2015, but *still* works in Chromium
“89.0.4389.114 (Developer Build) built on Debian 10.9, running on Debian
10.0 (64-bit)”.

Note also that it says:

| Do not use “meter” element to…
|
| 1. indicate the progress completion of a task (use “progress” element
| instead).
| 2. represent a scalar value of an arbitrary range — for example,
| to report a weight, or height of a person.

The caveat you read is sound. Whether you should do this depends on your
use-case.

However, it should also be noted that WebCore and its forks have become
the dominant layout engines (with “Chrome” at a world-wide market share of
≈ 60 % across *all* platforms)¹, and features that were first introduced
by WebKit for WebCore, like text shadows, gradients, transforms,
transitions, and animations, have become part of the CSS standard.

In that regard it is quite instructive to compare the current CSS standard
against old entries in the WebKit blog. Formerly available only via the
Internet Archive, it appears to have been fully restored to the redesigned
WebKit site:

<https://webkit.org/blog/>

For example:

<https://webkit.org/blog/386/3d-transforms/>

(on 2009-07-16) vs. (now)

<https://developer.mozilla.org/en-US/docs/Web/CSS/transform>

___________
¹ <https://gs.statcounter.com/browser-market-share#monthly-202004-202104>
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

On 8/05/2021 11:41 am, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 7/05/2021 7:40 am, Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> A few questions about styling a meter element. Is there a way to :
>>>>
>>>> - set the various colours (optimal, low, high)
>>>> - have it vertical
>>>> - animate a change in the value
>>>> ?
>>>
>>> You should (have) do(ne) this:
>>>
>>> <https://www.google.com/search?q=style+meter+element>
>>
>> I did try that but with MDN warnings on things like ::webkit-meter-bar
>> "This feature is non-standard and is not on a standards track. Do not
>> use it..." I didn't know if it was practical to look for a CSS solution.
>
> I found this as the first hit:
>
> <https://css-tricks.com/html5-meter-element/>
>
> Note that it was last updated in 2015, but *still* works in Chromium
> “89.0.4389.114 (Developer Build) built on Debian 10.9, running on Debian
> 10.0 (64-bit)”.

Yes, I saw it and that cases 5 and 6 in experiment 1 don't seem to do
anything so it didn't fill me with confidence.

> Note also that it says:
>
> | Do not use “meter” element to…
> |
> | 1. indicate the progress completion of a task (use “progress” element
> | instead).
> | 2. represent a scalar value of an arbitrary range — for example,
> | to report a weight, or height of a person.
>
> The caveat you read is sound. Whether you should do this depends on your
> use-case.

The things I need a meter to do (be predictable, be vertical, work
consistently across browsers, have all aspects readily style-able and
animate-able) means I will probably return to coding one using DIVs.

Though I do like the idea of a meter bar changing it's colour based on
whether the value is high, low, or optimal.

> However, it should also be noted that WebCore and its forks have become
> the dominant layout engines (with “Chrome” at a world-wide market share of
> ≈ 60 % across *all* platforms)¹, and features that were first introduced
> by WebKit for WebCore, like text shadows, gradients, transforms,
> transitions, and animations, have become part of the CSS standard.
>
> In that regard it is quite instructive to compare the current CSS standard
> against old entries in the WebKit blog. Formerly available only via the
> Internet Archive, it appears to have been fully restored to the redesigned
> WebKit site:
>
> <https://webkit.org/blog/>
>
> For example:
>
> <https://webkit.org/blog/386/3d-transforms/>
>
> (on 2009-07-16) vs. (now)
>
> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform>
> ___________
> ¹ <https://gs.statcounter.com/browser-market-share#monthly-202004-202104>

Interesting.

Andrew Poulos