Drunk CSS

Summary

A decade ago, I was writing about how you should test your user interface on drunk people. It was a semi-serious idea. Some of your users will be drunk when using your app or website. If it is easy for them to use, then it should be easy for sober people to use. Of course, necking a few shots every time you update your website isn't great for your health - so is there another way? Click the "🥴 Drunk" button at the top of the page and see what happens! These are a relatively simple set of CSS rules which you can apply to any site in order to simulate inebriation. (I may have changed these since writing the post. Check the source for the latest version.) First, monkey around with the fonts. This sets all the lower-case vowels to be rendered in a different font - as discussed in "targetting specific characters with CSS rules": CSS/* Drunk */ @font-face { font-family: "Drunk"; src: url("/blog/wp-content/themes/edent-wordpress-theme/assets/fonts/CommitMonoV143-Edent.woff2") format("woff2"); /* Lower-Case Vowels */ unicode-range: U+61, U+65, U+69, U+6F, U+75 ; size-adjust: 105%; } The rest of the characters will be rendered in the system's default Cursive font. Characters will also be slanted. The first character of every paragraph will be shrunk: CSS:root:has(input#drunk:checked) * { font-family: "Drunk", cursive; font-style: oblique -12deg; text-align: end; } :root:has(input#drunk:checked) p::first-letter { font-size: .5em; } Next, use the child selectors to rotate and skew various elements. While we wait for CSS randomness to come to all browsers this is a simple way to select various elements: CSS:root:has(input#drunk:checked) *:nth-child(3n) { transform: rotate(2deg); } :root:has(input#drunk:checked) *:nth-child(5n) { transform: skew(5deg, 5deg); } :root:has(input#drunk:checked) *:nth-child(7n) { transform: rotate(-3deg); } Make the entire page blurred and saturate the colours: CSS:root:has(input#drunk:checked) body { filter: blur(1px) saturate(2.5); } Make any hyper...