sandbox (</code>)</td><td>maximum restrictions</td><td>token list <em>relaxing</em> them: <code>sandbox="allow-scripts allow-forms"</code></td></tr><tr><td><code>crossorigin</code></td><td>same as <code>anonymous</code></td><td><code>anonymous</code> | <code>use-credentials</code></td></tr><tr><td><code>capture</code> (<code><input type=file></code>)</td><td>prefer a camera/mic</td><td><code>user</code> | <code>environment</code> (which camera)</td></tr><tr><td><code>popover</code></td><td>same as <code>auto</code></td><td><code>auto</code> | <code>manual</code> | <code>hint</code></td></tr><tr><td><code>preload</code> (media)</td><td>same as <code>auto</code></td><td><code>none</code> | <code>metadata</code> | <code>auto</code></td></tr></tbody></table><p>Note <code>sandbox</code> is backwards from intuition: adding tokens <em>loosens</em> it.</p><h3>2. Look boolean, but <code>="false"</code> actually works</h3><p>This is the nastier category, because it inverts the rule you learn from <code>disabled</code>/<code>checked</code> (where <code>disabled="false"</code> still disables):</p><ul type="list"><li><code>contenteditable</code> -- <code>true</code> | <code>false</code> | <code>plaintext-only</code>; bare = true</li><li><code>spellcheck</code> -- <code>true</code> | <code>false</code></li><li><code>draggable</code> -- <code>true</code> | <code>false</code> (bare is <em>invalid</em>; default is auto)</li><li><code>translate</code> -- <code>yes</code> | <code>no</code></li><li><code>writingsuggestions</code>, <code>autocorrect</code> -- <code>true</code> | <code>false</code></li></ul><p>So <code><div contenteditable="false"></code> is genuinely not editable, while <code><input disabled="false"></code> is still disabled. Same-looking syntax, opposite outcomes.</p><h3>The actually-pure booleans</h3><p>Value is ignored entirely for: <code>disabled</code>, <code>checked</code>, <code>readonly</code>, <code>required</code>, <code>multiple</code>, <code>selected</code>, <code>open</code>, <code>autofocus</code>, <code>novalidate</code>, <code>formnovalidate</code>, <code>async</code>, <code>defer</code>, <code>nomodule</code>, <code>ismap</code>, <code>reversed</code>, <code>loop</code>, <code>muted</code>, <code>autoplay</code>, <code>controls</code>, <code>playsinline</code>, <code>default</code>, <code>inert</code>, <code>allowfullscreen</code>, <code>itemscope</code>, <code>shadowrootclonable</code>.</p><p>For all of these, the only way to turn them off is to <strong>remove the attribute</strong> -- which is why frameworks special-case them (React drops the attribute on <code>false</code>, Vue does the same for its known boolean list).</p>
|
