Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Div That Looks Different on Every Browser

DZone's Guide to

The Div That Looks Different on Every Browser

A look at the, by now, rather well-known case of the 'div that looks different on every browser.' Sounds like the beginning of a geeky detective novel...

· Web Dev Zone ·
Free Resource

Classify programming languages: Build a model that predicts a code's programming language based on its text.  Content provided by IBM Developer. 

If you've been around the internet lately, you may have heard of the div that looks different in every browser.

But if you haven't or unsure of what it's all about, here's the situation:

A guy named Martin Cuppens coded a div in CSS which made a fairly simple green square. However, when you look at it across different browsers, it transforms completely into another shape.

Image title

In fact, almost every browser gives you something different than the last. The shapes range from a square with a hole in the middle to two green squares to a solid square to different versions of the original shape. The browser even affects color properties, changing the hues and shades of green depending on Firefox, Chrome, IE, Edge, etc. You can see a few versions in this CrossBrowserTesting screenshot test:

This phenomenon has gone a bit viral on Twitter, Reddit, and HackerNews with designers and devs scratching their heads and examining what went wrong.

If you look in CodePen, the HTML is pretty basic, but the CSS is where things get more tricky. If you have any experience with CSS, you know this is where browser rendering can go haywire.

Most devs are aware of these idiosyncrasies when developing for cross-browser problems. We can see from Martin's code that he uses outline-offset, which seems to be what causes the issue.

Since each browser renders the offset value differently, it causes the shape to morph according to those varying rules.

"I wanted to know if there is a way to inset outlines (like box-shadow). Turned out 'inset' was an outline-style and a negative outline-offset can be used to inset outlines. The combination of these properties led to this result," said Martin in a Twitter thread.

So what does this teach us? For one thing, it's probably a good idea to avoid outline-offset. But ultimately, it reinforces the importance of cross-browser testing your code.

Martin's div gives a visual representation of why cross-browser testing matters, and what can happen when your code isn't cross-compatible. We can plainly see that there are so many ways for different browsers to interpret a few lines of code.

His example provided a fun insight into how CSS can go wrong, but you wouldn't want this happening to your web application with elements looking different in every browser.

CSS can be complex, but by testing your site in a selection of browsers, you can avoid the surprise that comes when you haven't checked how your site looks in Safari.

This article was first published on the CrossBrowserTesting blog.

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

Topics:
web dev ,cross browser testing ,css

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}