Giving up Control on the Web

The term 'pixel perfect' is thrown around a lot. But should it even be a goal to strive for? It is worth the effort to make everything look and act exactly the same in every browser? Let's find out.

Pixel Perfect

So let's dive into what exactly this term means. Basically it means that every element on the page is exactly where it should be and reacts to the user in the same way every time... down to the pixel. Meaning a user using one browser should experience the same webpage as another user on a different browser in the same exact way.

A lot of front end web developers strive for this, and it is a noble goal. But in the end, what does it really achieve? Is the end user going to notice if the icon in Internet Explorer sits a single pixel lower than other browsers? Is the whole experience ruined if the text takes up 2 more pixels down the page? Likely not.

I should mention that some pixel perfection is absolutely necessary and required. I should also mention that one should not be lazy when producing a layout. The render by the browser should not negatively impact the design or the users ability to use the website.

Let me give an example.

What are the differences between these two images?

Did you catch all the differences? You sure? Which one is the correct one? If you got the non pixel perfect would your world come crashing down?

Here are all the differences.

Did you notice all the differences?

Now let me be clear, if I had a website that was this off, I would certainly fix it because something would be wrong. This is just an example of how you are not likely to spot slight differences in websites even when they are next to each other.

Giving up Control

My point isn't to loosen standard on creating layout for the web. Quite the opposite. We should be striving to have the layouts be as close as possible to the intended design.

So what is this nonsense about giving up control. We make the web, we control what the users see right?

Well....

As web developers (front end specifically), we only tell what the browser should display. It is up to the browser to do it to the best of it's capability. Every single browser is different in the way that it renders text, layout, colors, and pretty much everything. Even how it interprets Javascript can be different. Browsers are constantly updating their software to support the latest standards in HTML, CSS, and Javascript but the fact of the matter is, is that there will always be slight differences between all of them.

Expecting two users using different browser software to have identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.
Nate Koechley

The first step in developing a website is to know that no two browsers are going to be 100% alike. There will be slight differences. If you should check to make sure that your layout and features work in all browsers at all sizes, but trying to achieve pixel perfection is the best way to be lead down a path to bankruptcy.

Progressive Enhancements

Progressive enhancement can be sometimes hard to understand. Some people perceive it graceful fallbacks to anything that isn't supported in browsers. And that is certainly part of it. I think Debra and Steve said it best:

Progressive Enhancement presents a viable approach by enabling the delivery of information as demanded by the users, while embracing accessibility, future compatibility, and determining user experience based on the capabilities of new devices.
Debra Chandra and Steve Champeon

Did you catch that? It isn't just looking into the past, but also looking to the future. Knowing what HTML, CSS, JS features are coming up about to be supported and know what you can do to support the future capabilities is all part of progressive enhancement.

So how do you plan for CSS enhancements that aren't even supported yet. Have you heard of @supports?

@supports

@supports is a very good way to test if a browser can actually support a property that you are trying to use. Think of it as a different way to do an if statement on if a browser can do something or not.

The syntax is as follows:

@supports (display: grid) {
  div {
    display: grid;
  }
}

This asks the browser, if you support grid... use this CSS. Using the power of "Cascading" part of CSS you can use this to progressively enhance your layout to something a little more modern. Alternatively you can do the reverse.

@supports not (display: grid) {
  div {
    float: right;
  }
}

Wrapping Up

Do your due diligence and make sure the layout works for all users to tend to support, but also realize that no browser is going to render a webpage 100% like the others. Don't go crazy wondering why IE is displaying a block of text 2px higher than Chrome unless it is breaking your layout.