Skip to content

Instantly share code, notes, and snippets.

@LeaVerou

LeaVerou/dabblet.css

Last active February 14, 2025 05:03
Show Gist options
  • Save LeaVerou/af2e51f27f2d019806fd6aaf096c0aab to your computer and use it in GitHub Desktop.
Save LeaVerou/af2e51f27f2d019806fd6aaf096c0aab to your computer and use it in GitHub Desktop.
Download ZIP
Safari color space conversion bug Part 2
Raw
dabblet.css
/**
* Safari color space conversion bug Part 2
*/
div {
width: 12em;
height: 3em;
border: 1px solid silver;
}
Raw
dabblet.html
<section style="--color: #e5f6ff;">
<p>Raw color:
<div style="background: var(--color)"></div>
<p>color-mix(in oklch, oklch(from var(--color) l c h), oklch(none none 230.5)):
<div style="background: color-mix(in oklch, oklch(from var(--color) l c h), oklch(none none 230.5));"></div>
<p>color-mix(in oklch, oklch(from var(--color) l c 0), oklch(none none 230.5)):
<div style="background: color-mix(in oklch, oklch(from var(--color) l c 0), oklch(none none 230.5));"></div>
<p>color-mix(in oklch, oklch(from var(--color) l c none), oklch(none none 230.5)):
<div style="background: color-mix(in oklch, oklch(from var(--color) l c none), oklch(none none 230.5));"></div>
</section>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment