Media Query
`<pura-mediaquery>` evaluates a CSS media query and projects the `match` slot when it matches or the `default` content (or the unnamed default slot) when it doesn't, updating live as the viewport changes. Use it to swap markup declaratively without breakpoint JavaScript. Being agent-native, it exposes machine-readable state (`data-pura`, `data-query`, `data-matches` on the host and a global registry `window.__puraMediaQueries`), letting agents read the page's responsive state without measuring the viewport.
Preview
<div style="border:1px solid #ddd;border-radius:8px;padding:16px;font-family:system-ui">
<p style="margin:0 0 8px;color:#666">Resize the window to see the content swap:</p>
<pura-mediaquery query="(max-width: 640px)">
<strong slot="match" style="color:#e11">Mobile layout (screen ≤ 640px)</strong>
<strong slot="default" style="color:#16a34a">Desktop layout (screen > 640px)</strong>
</pura-mediaquery>
<p id="estado" style="margin:12px 0 0;color:#999;font-size:13px"></p>
</div>
<script type="module">
import "/pura/lib/mediaquery.js";
const mq = document.querySelector("pura-mediaquery");
const estado = document.getElementById("estado");
mq.addEventListener("pura-mediaquery:change", (e) => {
estado.textContent = `query: ${e.detail.query} | matches: ${e.detail.matches}`;
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
query | string | — | The CSS media query to evaluate, for example "(max-width: 640px)". Absent or invalid never matches, so the default content is shown. Observed: it swaps live when changed. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/mediaquery.js"></script>import "./pura/lib/mediaquery.js";