Instantly share code, notes, and snippets.

View dabblet.css
/**
* Progress bar that changes width AND color using a CSS variable
*/
div {
display: flex;
height: .8em;
margin: 1em 0;
background: hsl(220,10%,80%);
}
View dabblet.css
/**
* sRGB clipping test
* If these are the same color, RGB components are clipped to 255
*/
div { padding: 100px; background: #0ff; display: inline-block; }
div div { background: rgb(0, 400, 400); }
View dabblet.css
/**
* Weird space
*/
div {
background: #f06;
position: absolute;
}
div::before {
View dabblet.css
/**
* Flexbox experiment
*/
.container {
display: flex;
flex-flow: column;
border: 2px solid red;
width: 300px;
height: 200px;
View dabblet.css
/**
* Scissors on dotted border, ask asked by Sabine Melnicki on Twitter
*/
div {
width: 300px;
height: 200px;
border: .1em dotted;
margin: 2em auto;
position: relative;
View dabblet.css
/**
* Video & wrapper that never gets bigger than the viewport?
* (Does not work right now. It resizes correctly for available width, but not available height)
*/
.media-frame {
border: 10px solid red;
width: fit-content;
max-width: 100%;
max-height: -webkit-fill-available;
View dabblet.css
/**
* Test pointer media query
*/
@media (pointer: coarse) {
body { --pointer: "coarse" }
}
@media (pointer: fine) {
body { --pointer: "fine" }
View dabblet.css
/**
* Using calc() in <integer>
* If yellow underneath green and blue: No calc() support
* If yellow above green and below blue: Multiplication OK, division dropped
* If yellow on top of both green and blue: calc() fully supported
*/
div {
background: yellowgreen;
border: 1px solid;
View dabblet.css
/**
* No browser seems to support calc() in grid-column-end properly
*/
div {
display: grid;
grid-template: 1fr / repeat(10, 1fr);
height: 200px;
}
View dabblet.css
/**
* cross-fade() interpolation
* Compare behavior of mousing out before the transition finishes with mousing out after letting the transition finish.
*/
body {
background: url(https://placekitten.com/200/200);
height: 99vh;
transition: 2s;
}