.dcss-solve-every

Finds every root of your formula in a range, one solve for each piece of the range.

Example

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

<div class="dcss-solve-every sn" style="--from: 0.5; --to: 10">
  <div class="dcss-solve sn"><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i>
    <output class="dcss-format-fixed" style="--value: var(--dcss-solve); --precision: 3"></output></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i>
  </div>
  <div class="dcss-solve sn"><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i>
    <output class="dcss-format-fixed" style="--value: var(--dcss-solve); --precision: 3"></output></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i>
  </div>
  <div class="dcss-solve sn"><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i>
    <output class="dcss-format-fixed" style="--value: var(--dcss-solve); --precision: 3"></output></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i>
  </div>
  <div class="dcss-solve sn"><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i><i>
    <output class="dcss-format-fixed" style="--value: var(--dcss-solve); --precision: 3"></output></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i></i>
  </div>
</div>
CSS
.sn i { --dcss-formula: sin(var(--dcss-input) * 1rad); }
.dcss-solve-every output { display: block; }

Notes

Each call takes your own formula, written once as --dcss-formula in terms of --dcss-input. A .dcss-solve with data-dcss-steps="n" halves the range n times, one nested element a step, and BASICSS writes those elements for you: npx basicss page.html -o built.html.

Browser support

BrowserSupport
ChromeYes
SafariYes
FirefoxWhole numbers only