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
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…