Variable substitution in inherited font shorthand

by kmouse

HTML

<div id="d1">X</div>
<div id="d2">X</div>
<div id="d3">X</div>
<div id="d4">X</div>
<div id="d5">X</div>
<div id="d6">X</div>

CSS

body {
    --size: 100px;
    font: var(--size) sans-serif;
}

div {
    width: 120px;
    height: 120px;
    margin: 10px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    border: 2px solid #6c6;
}

div#d1 {
}

div#d2 {
    --size: 30px;
}

div#d3 {
    --size: 30px;
    font: var(--size) sans-serif;
}

div#d4 {
    font-size: 80px;
}