CSS-Only Secret Password Detection? Believe It
Louis Lazaris breaks down some genuinely surprising CSS trickery from Jane, a CodePen demo that pulls off keyboard-triggered secret text detection with zero JavaScript. The interaction works in two steps: first, press a special key combination, then type a hidden password. Once both conditions are met, a secret message appears on screen.
What makes this remarkable is that it's accomplished entirely with HTML and CSS. The demo leans on a stack of rarely used features and clever techniques: HTML's accesskey and pattern attributes, and CSS selectors like :not(), :placeholder-shown, and :valid. Add in the custom property toggle trick, and you've got a feature that looks like it should require a scripting language — yet the actual code footprint is remarkably small.
