CSS <relative-size> Data Type - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Base and layout */
:root {
    font-size: 16px; /* 1rem */
}
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    margin: 20px;
    color: #222;
}
.container {
    max-width: 900px;
}
h1 {
    margin-bottom: 12px;
    font-size: 1.125rem;
}
.grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.sample {
    padding: 10px 14px;
    border-radius: 6px;
    background: #f5f7fa;
    border: 1px solid #e1e6ee;
}
.sample.xx-small { font-size: xx-small; }
.sample.x-small  { font-size: x-small; }
.sample.small    { font-size: small; }
.sample.medium   { font-size: medium; }
.sample.large    { font-size: large; }
.sample.x-large  { font-size: x-large; }
.sample.xx-large { font-size: xx-large; }

/* Demonstrate 'smaller' and 'larger' relative to parent */
.relative-parent {
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed #cdd6e0;
    border-radius: 6px;
}
.parent-label {
    margin: 0 0 8px 0;
    font-size: 1.25rem; /* makes the parent larger than root */
}
.relative-children {
    display: flex;
    gap: 12px;
}
.child {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 4px;
    margin: 0;
}
.child.smaller { font-size: smaller; }
.child.larger  { font-size: larger; }

/* make samples readable on small screens */
@media (max-width: 480px) {
    .grid { gap: 8px; }
    .sample { padding: 8px 10px; }
}</style></head><body><div class="container">
    <h1>CSS <relative-size> examples</h1>

    <div class="grid">
        <div class="sample xx-small">xx-small</div>
        <div class="sample x-small">x-small</div>
        <div class="sample small">small</div>
        <div class="sample medium">medium (base)</div>
        <div class="sample large">large</div>
        <div class="sample x-large">x-large</div>
        <div class="sample xx-large">xx-large</div>
    </div>

    <div class="relative-parent">
        <p class="parent-label">Parent (font-size: 1.25rem)</p>
        <div class="relative-children">
            <p class="child smaller">Child with font-size: smaller</p>
            <p class="child larger">Child with font-size: larger</p>
        </div>
    </div>
</div></body></html>