1 min read

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:

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.”

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:

Others, meanwhile, were happy to offer droll responses to the challenges and occasional woes of working with CSS…

Read next

Google announces Chrome 67 packed with powerful APIs, password-free logins, PWA support, and more

Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more

Subscribe to the weekly Packt Hub newsletter. We'll send you the results of our AI Now Survey, featuring data and insights from across the tech landscape.


Please enter your comment!
Please enter your name here