The time for CSS-Tricks is over. Now is the time for CSS Crimes!
In this current landscape of content service providers, users are often limited to expressing themselves in text, links, and images. Sanitization rules tend to strip out HTML, JavaScript, and various attributes.
Social media service Cohost allows users to have greater freedom with markup and inline styles than we may be typically used to. Some users have taken advantage of this freedom to commit CSS Crimes! It has resulted in creative recreations of familiar interfaces and interactive games by using properties in unconventional ways.
Blackle Mori created a contraption where pulling a handle slowly turns a series of gears, pulleys, and chains. Eventually an aperture opens to reveal the site’s mascot (“eggbug”) and the proclamation “Good Job!”. I have stared at this in Developer Tools and it is an amazing combination of grid
, resize
, transform
, and calc()
. I ended up adding a border
to all <div>
s to try and get a better understanding of how each individual element moved.
resize
to allow viewers rudimentary click and drag functionality. <details>
and <summary>
. There have been situations in the past where I have been restricted from using the full toolkit of HTML, JavaScript, and CSS. There have been many instances of using decorative CSS shapes to get around images. I have used :hover
as a workaround for mouseenter
and mouseleave
. I have used input:checked
as a sibling selector for toggling.
While CSS Crimes are probably not something you would want to employ on a regular basis, we should embrace experiments within constraints that can foster creative solutions.
To Shared Link — Permalink on CSS-Tricks
Committing CSS Crimes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
Having fun with Bramus’ new Caniuse CLI tool. This’ll save lots of trips to the…
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your…
Getting right to it: the CSS-Tricks Almanac got a big refresh this week! I’m guessing…
I’m working on a refresh of my personal website, what I’m calling the HD remaster.…
Only Chris, right? You’ll want to view this in a Chromium browser: CodePen Embed Fallback…
I’m a big Lynn Fisher fan. You probably are, too, if you’re reading this. Or…