.dcss-share

Gives each item’s share of the list’s total.

Example

Result
Markup
<link rel="stylesheet" href="dcss.css">
<link rel="stylesheet" href="families/array.css">
<link rel="stylesheet" href="families/format.css">

<figure class="dcss-share">
  <ol>
    <li style="--value: 96">
    <span class="dcss-share-read">
    <span class="dcss-share-result">
    <output class="dcss-format-percent" style="--value: var(--dcss-share); --precision: 1"></output></span></span></li>
    <li style="--value: 224">
    <span class="dcss-share-read">
    <span class="dcss-share-result">
    <output class="dcss-format-percent" style="--value: var(--dcss-share); --precision: 1"></output></span></span></li>
    <li style="--value: 0">
    <span class="dcss-share-read">
    <span class="dcss-share-result">
    <output class="dcss-format-percent" style="--value: var(--dcss-share); --precision: 1"></output></span></span></li>
  </ol>
</figure>

Browser support

BrowserSupport
ChromeYes
SafariYes
FirefoxWhole numbers only