LeaVerou

/**
 * Chrome bug all: unset !important;
 */
span {
	font-size: 500%;
	color: green;
	border: 2px solid red;
}

LeaVerou

/**
 * Aspect ratio
 */

img, svg {
	background: yellow;
	max-height: 1em;
}

LeaVerou

/**
 * Box
 */

.box {
	position: absolute;
	bottom: 300px;
	margin-top: 300px;
	xperspective: 600px;
	--width: 600px;

LeaVerou

/**
 * border-image: SVG
 */

html { background: white }
body {
	border: 20px solid transparent;
	border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6">\
		<path fill="red" d="m 0,1 L 1,0 2,1 3,0 4,1 5,0 6,1 5,2 6,3 5,4 5,3 5,4 6,5 5,6 4,5 3,6 2,5 1,6 0,5 1,4 0,3 1,2 z" />\
	</svg>') 33.33% fill round;

LeaVerou

/**
 * SVG cursors experiments
 */

html {
height: 100vh;
cursor: busy;
cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100">\
	<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
	<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>'), not-allowed; 

LeaVerou

/**
* rotate test
*/
body {
	background: #E3516E;
}

p {
	width: 200px;
	height: 200px;

LeaVerou

/**
 * Cannot insert emojis in input with maxlength="1"
 */

input {
	font-size: 20px;
	width: 30em;
}

LeaVerou

/**
 * Checkbox hack with display: none?
 */

input { display: none }
label { display: inline-block; background: yellow; font: bold 300% sans-serif; }
input:checked + label { background: indianred; }

LeaVerou

/**
 * content property on non-pseudos
 */

img {
	content: url('http://placekitten.com/200/300');
}

LeaVerou

/**
 * Pattern from teachingmama.org
 */

--color: hsl(0, 0%, 83%);
--size: 22px;
--pattern: radial-gradient(circle, var(--color) 10%, transparent 0 20%,
                                   var(--color) 0 30%, transparent 0 40%,
                                   var(--color) 0 50%, transparent 0);
background: var(--pattern) 0 0, var(--pattern) var(--size) calc(var(--size) * .5);