- One of the most frequent questions
I get from my students is,
"Why does my design look this way in Browser X
"while looking another way in Browser Y?
"I mean, if the pages are structured the same
"and they're both using the same CSS,
"shouldn't they look the same?"
Well, in a perfect world, they would.
Unfortunately, the world of web browsers
is far from perfect.
The reason browsers render pages differently
has everything to do with something we call
a rendering engine.
Every browser has its own rendering engine
that it uses to parse your code
and determine how it's supposed to display.
Since most browsers developed independently of each other,
there are multiple rendering engines.
Each one has slightly different parsers,
preferences, and policies to determine
how your content is rendered.
As a designer, it's important to understand
which rendering engines are used
for various browsers and how they differ
when laying out pages and content.
That doesn't mean that you have to memorize
every layout engine there is.
But you should be familiar with Trident, Edge,
Presto, Gecko, WebKit, and Blink.
Microsoft developed both the Trident
and the Edge engines.
Trident was used to power previous versions
of Internet Explorer while the new Edge engine
is used for the next generation Edge browser.
Presto was developed by Opera software
for their browsers and was used in
all versions of Opera prior to version 15.
Gecko is an open source rendering engine
originally developed by Netscape but released
to the Open-Source Mozilla Project,
who then continued development.
It's most notably used to power Firefox.
WebKit is another open source rendering engine
developed by Apple, Google, Nokia and others.
It drives browsers such as Apple Safari browser
and multiple mobile browsers.
Google spun off Blink from WebKit
although the two remain closely related.
It's used for Chrome and was adopted by
Opera for their browser since version 15.
It's worth noting that these rendering engines
are still being developed.
And older versions of the browsers will have
older versions of the rendering engines.
This is why designers should test their pages,
not just in multiple browsers,
but in multiple versions of the same browser as well.
Now thankfully, there aren't as many differences
now as there have been in the past.
This convergence in browser behavior has been
driven in large part by something called Web Standards.
The movement towards web standards started
in the late '90s with organizations
such as the Web Standards Project,
which began as a group of designers and developers
frustrated with the current state of browser development.
They, other organizations and corporations,
began pressuring browser developers to adopt
the recommendations of the
World Wide Web Consortium.
The World Wide Web Consortium, or W3C,
began in 1994 and attempted to standardize web protocols
and technologies by issuing a series of recommendations
for everyone to follow.
In the end, the outcry from the design
and development community, along with
the rise of open-source browsers such as Firefox,
helped other manufacturers realize the advantages
of supporting web standards.
So, what makes understanding web standards
so important to designers in general
and in CSS in particular?
Well, if most modern browsers support
web standards, to a degree they all do,
that means that by learning these standards
and staying current with their development,
you ensure that your sites will have a consistent
design and user experience across multiple browsers.
To a degree, that's kind of where we find ourselves now.
As of this recording, the current versions of Firefox,
Safari, Chrome, Opera, and Internet Explorer
have far more in common with how they display pages
than they have differences.
Even more importantly, most mobile browsers
have been developed with standards in mind.
In fact, new features are often supported
in mobile browsers before they are in desktop browsers.
Now that doesn't mean that you won't eventually have to deal
with some minor browser inconsistencies or that
you still don't need to account for older browser versions.
You do.
But I haven't worried about how a page looks
in Netscape Navigator 4 or Internet Explorer 5.5
for many years.
Soon enough, dealing with a majority of browser
inconsistencies will be a thing of the past.
Until then, the best thing that you can do is
become familiar with the differences in CSS rendering
from one browser in one device to another.
Later on in this title, I'll pass along some valuable
online resources that can help you keep track of those
differences and how to deal with them.