Add `counter` and `counter-reset`

Open joshmoody24 opened this issue 11 months ago • 1 comments

Apple Mail supports counter and counter-reset in CSS, as demonstrated by this example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .no-counter {
      color: red;
      visibility: visible;
    }

    .counter {
      color: green;
      visibility: hidden;
    }

    @supports (counter-reset: test) {
      .no-counter {
        display: none;
      }

      .counter {
        counter-reset: section;
        visibility: visible;
      }

      .counter::before {
        counter-increment: section;
        content: "Counter: " counter(section);
        font-weight: bold;
      }
    }
  </style>
</head>
<body>
  <p class="no-counter">No counter support.</p>
  <p class="counter"></p>
</body>
</html>

Feb 07 '25 21:02 joshmoody24

Note that there's a weird bug related to using round inside of counters in certain versions of Apple Mail. Using round() only works when nested inside of a calc() in iPhones.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS Counter round() Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      :root {
        /* Test values: 19.99 × 3 ≈ 59.97 (expected: dollars=59, cents=97) */
        --price: 19.99;
        --qty: 3;
      }
      body {
        font-family: sans-serif;
        padding: 20px;
      }
      h1 {
        font-size: 1.5rem;
      }
      .test {
        margin: 20px 0;
        font-size: 1.25rem;
      }
      /* ---------------------------------------------------
         Failing Example:
         Uses round() directly for dollars.
         In Apple Mail, this yields dollars = 0.
      --------------------------------------------------- */
      .failing::before {
        counter-reset:
          dollars round(down, calc(var(--price) * var(--qty)))
          cents calc(
            calc(var(--price) * 100 * var(--qty)) -
            round(down, var(--price) * var(--qty) * 100, 100)
          );
        content: "Failing: $" counter(dollars) "." counter(cents, decimal-leading-zero);
        display: block;
      }
      /* ---------------------------------------------------
         Working Example:
         Uses plain calc() for dollars (letting Apple Mail truncate)
         and nests round() inside a calc() for the cents calculation.
         This yields the expected result.
      --------------------------------------------------- */
      .working::before {
        counter-reset:
          dollars calc(var(--price) * var(--qty))
          cents calc(
            calc(var(--price) * 100 * var(--qty)) -
            round(down, var(--price) * var(--qty) * 100, 100)
          );
        content: "Working: $" counter(dollars) "." counter(cents, decimal-leading-zero);
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>CSS Counter round() Test</h1>
    <div class="test failing"></div>
    <div class="test working"></div>
    <p>
      In Apple Mail, the <strong>Working</strong> block should display approximately
      "$59.97" while the <strong>Failing</strong> block shows "$0.97". This demonstrates that
      Apple Mail only handles <code>round()</code> correctly when it’s nested in an extra <code>calc()</code>.
    </p>
  </body>
</html>

In a web browser:

In iOS 18 (iPhone)

In iOS 18 (iPad)

Feb 07 '25 22:02 joshmoody24