1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • meter element

    From Andrew Poulos@21:1/5 to All on Thu May 6 12:03:17 2021
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Andrew Poulos on Thu May 6 17:13:02 2021
    This is a multi-part message in MIME format.
    On 06/05/2021 03:03, 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


    Not sure what exactly are you asking about but do you know the
    transition properties in CSS?

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



    --

    With over 1.3 billion devices now running Windows 10, customer
    satisfaction is higher than any previous version of windows.


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body text="#008000" bgcolor="#faf0e6">
    <div class="moz-cite-prefix">On 06/05/2021 03:03, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote type="cite"
    cite="mid:WJKdnbmVf9P70w79nZ2dnUU7-RHNnZ2d@westnet.com.au">A few
    questions about styling a meter element. Is there a way to :
    <br>
    <br>
    - set the various colours (optimal, low, high)
    <br>
    - have it vertical
    <br>
    - animate a change in the value
    <br>
    <br>
    </blockquote>
    <p><br>
    </p>
    <p>Not sure what exactly are you asking about but do you know the
    transition properties in CSS?</p>
    <p><a class="moz-txt-link-rfc2396E" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">&lt;https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions&gt;</a></p>
    <p><br>
    </p>
    <p><br>
    </p>
    <div class="moz-signature">-- <br>
    <div class="table" style="display: table;">
    <div class="tr" style="display: table-row;">
    <div class="td" style="display:table-cell;width:
    100vw;box-sizing:border-box;padding: 10px; vertical-align:
    middle; background-color: #003300;color:
    chartreuse;height:80px;font-size: 1.2em;text-align:
    center;font-weight: 900;border-radius: 5px;">
    <p>With over 1.3 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version
    of windows. </p>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to Andrew Poulos on Thu May 6 23:34:02 2021
    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.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to Andrew Poulos on Thu May 6 23:40:54 2021
    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.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Thomas 'PointedEars' Lahn on Fri May 7 11:07:31 2021
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From James Kirk@21:1/5 to Andrew Poulos on Thu May 6 21:45:54 2021
    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𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Thomas 'PointedEars' Lahn@21:1/5 to Andrew Poulos on Sat May 8 03:41:13 2021
    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.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Thomas 'PointedEars' Lahn on Sat May 8 13:02:22 2021
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)