CSS / HTML
Show or hide HTML with Toggly feature flags using a generated stylesheet. No JavaScript SDK, build step, or identity is required.
This is not a package. The ClientSide CDN at client.toggly.io serves a defs.css file for your app and environment. JavaScript SDKs fetch JSON from definitions.toggly.io instead.
Installation
Add a stylesheet link in <head>:
<link
rel="stylesheet"
href="https://client.toggly.io/<YOUR_APP_KEY>-<YOUR_ENVIRONMENT>/defs.css"
/>
Use a <link rel="stylesheet"> tag. A <script> tag will not apply the rules.
The tenant segment is {appKey}-{environment}, matching the create-app picker. Flags that are not marked Available to Client SDK are omitted from this file.
Mark elements
Every element with a feature-key attribute is hidden by default. The stylesheet then shows matching elements when the listed flags evaluate to on (or off, when you negate).
<div feature-key="MyFeature">Visible when MyFeature is on</div>
<div feature-key="MyFeature" negate="true">Visible when MyFeature is off</div>
Unknown keys stay hidden.
Multiple keys
Space-separate keys on feature-key. The default combination is any (visible if any listed flag is on).
<div feature-key="FeatureA FeatureB">Visible if FeatureA or FeatureB is on</div>
<div feature-key="FeatureA FeatureB" feature-condition="any">Same as the default</div>
<div feature-key="FeatureA FeatureB" feature-condition="all">Visible only if both are on</div>
negate="true" inverts that result:
<div feature-key="FeatureA FeatureB" negate="true">
Visible when neither FeatureA nor FeatureB is on
</div>
<div feature-key="FeatureA FeatureB" feature-condition="all" negate="true">
Hidden if every listed flag is on
</div>
Attribute names are feature-key, feature-condition, and negate. feature-condition accepts any or all.
What CSS can and cannot do
The stylesheet is the same for every visitor of that app and environment. Toggly evaluates flags when it generates defs.css, not in the browser.
| Filter / capability | CSS / HTML | JavaScript SDKs |
|---|---|---|
| Always on / off | Yes | Yes |
| Time window | Yes (baked into the file) | Yes |
| Percentage / sticky rollouts | No | Yes |
| Targeting (identity, groups, claims) | No | Yes |
| Signed definitions / WebSocket live updates | No | Yes |
Use a JavaScript SDK when you need per-visitor targeting, percentage rollouts, or live updates without a refresh.
Vanilla JavaScript
Need programmatic checks, identity, or hooks in the same page? Use the Vanilla JavaScript SDK. You can load both the CSS file (for static show/hide) and the JS SDK (for logic).
Best practices
- Client App Key only — never put a management API key in HTML.
- Mark flags for the client SDK — otherwise they will not appear in
defs.css. - Prefer
feature-condition="all"when every listed flag must be on — the default is any. - Cache — browsers cache CSS. After a flag change, visitors see the new file after cache expiry or a hard refresh.
- Progressive enhancement — hide marketing or layout blocks with CSS; keep security-sensitive decisions on the server.