Here’s a weird CSS anomaly that you might have missed – Martijn Cuppens, a software engineer, has created a div that looks different on every browser.
Cuppens shared his creation on CodePen – you can see the code for yourself here.
Here’s what they look like on different browsers:
— Martijn Cuppens (@Martijn_Cuppens) July 6, 2018
Note: If you’re looking on an iPhone the differences won’t appear as all browsers on the iPhone are essentially the same – app store restrictions mean they use the same rendering engine.
According to Cuppens, the most ‘correct’ version is Edge. He explains that he came across the discovery by saying that he “wanted to know if there is a way to inset outlines… turned out ‘inset’ was a outline-style and a negative outline-offset can be used to inset outlines.”
I wanted to know if there is a way to inset outlines (like box-shadow). Turned out 'inset' was a outline-style and a negative outline-offset can be used to inset outlines. The combination of these properties led to this result.
— Martijn Cuppens (@Martijn_Cuppens) July 7, 2018
What Cuppens experiment shows is how widely browsers can vary in their interpretation of CSS. On Twitter, users responded with their own versions, like this:
— Florian (@frivoal) July 7, 2018
Others, meanwhile, were happy to offer droll responses to the challenges and occasional woes of working with CSS…
— Reza Shirazian (@kingreza) July 6, 2018