One of the most frustrating aspects of Web design is constantly dealing with the00:04subtle and
sometimes not so subtle differences in browser rendering.00:08While the move to a standards-based
CSS control presentation model has made life00:13infinitely easier for web designers, dealing with bad
browser behavior is one of00:17the unfortunate side effects.00:19So why don't all browsers render your
page the same?00:23Well, as I explained in more detail in the "How Do Browsers Work"
movie,00:27each browser reads and renders your HTML and CSS based on its internal rendering
engine.00:34There are four major rendering engines being used by the majority of00:37browsers today
and each of them have subtle differences in how they render00:41layout and typography.00:43In
addition, each updated version of the rendering engine will contain new00:47rendering rules than the
last one. Meaning that even within a browser,00:51older versions will render pages differently than new
ones.00:54If you think about it, this type of behavior is inevitable.00:57New standards are being issued
as the web evolves, and how a browser decides to01:02support those standards is up to the
manufacturer.01:05As new properties and capabilities have been added to CSS, browsers must change
to keep up.01:10So how do you design for such a wildly inconsistent landscape?01:15Well, the first off,
it's not as bad as it sounds.01:18Most modern standards-compliant browsers will handle almost any
valid HTML and01:23CSS you throw at them without blinking.01:25So, step one is to learn how to write
valid HTML code and make sure you01:29understand how to code CSS properly.01:32Focus on not just
learning CSS syntax and properties, but also on learning01:36how to write standards-compliant CSS and
mastering layout concepts, such as01:41floats and the box model.01:44Often rendering problems aren't
the browsers' fault, but the result of the01:47incorrect layout values that ask the impossible. Trying to
put 1000 pixels worth01:52of content and padding into a 900 pixel wide layout for example.01:57Next,
learn as much as you can about the different browsers and their02:00support level of CSS.02:02There
are tons of articles, charts and tutorials that discuss browser version02:06support for CSS
properties.02:08One of my favorite is he chart found on QuirksMode.02:11It lists browsers by making
version and shows their level of support for02:15specific CSS properties.02:17Once you know the level
of CSS support that a browser has, it is much easier to02:22avoid problems with your styles and to know
when you might need to do a02:25workaround for specific browsers.02:28Once you have a solid grasp
on CSS and its browser level support, you can begin02:32to build a strategy around dealing with multiple
browsers.02:35Every designer is unique and each site might require a slightly different02:39strategy.
However, there are some basic steps that you can take to help you02:43avoid getting bitten by browser
bugs.02:46First, know your audience. Not just their likes and dislikes and level of
visual02:50sophistication. Understand who they are and what browsers and what versions of02:55those
browsers they are likely to have.02:57Older browsers lack significant CSS support and coding around
their03:01idiosyncrasies was a major pain point.03:04As new browsers are adopted, it is not uncommon
for designers to stop supporting03:09certain older versions. The trick is to know your audience and what
level of03:13browser support they require.03:14For example, at the time of this recording, Internet
Explorer 8 is the most03:19current version of the browser. A large portion of Internet Explorer users
still03:23use IE 7 and to some degree use IE 6.03:27Therefore when I'm creating a page, I pay close
attention to making sure that my03:31CSS works in IE's versions 8, 7 and 6. But for the most part I've
stopped03:36worrying about IE 5 and lower, that is unless my audience still uses it.03:41If I'm working
on a project that will be used on a company's intranet or one03:45that will be visited frequently by
individuals using older equipment,03:48IE 5 could still pop back up.03:50Understanding your audience
gives you the ability to understand what level of03:54CSS support and workarounds you'll need to focus
on.03:57Second, use coding practices that avoid browser hacks.04:01Browser hacks are ways of writing
CSS properties that gives specific values to04:05one browser and another set of values to
others.04:08Now this is usually done by writing CSS using odd escape characters or by
using04:13selectors that older browsers don't recognize.04:15Now while these are effective, they cause
your CSS to be cluttered and hard to maintain.04:20Making a simple edit will sometimes require that
you make changes in04:24several different parts of your code.04:26By avoiding hacks altogether you'll
eliminate the need to constantly refine them,04:30edit them and make sure they don't cause newer
browsers to break.04:33Avoiding hacks isn't that hard.04:35It just involves understanding very clearly
how specific browsers work and then04:40avoiding triggering those behaviors.04:42Let me give you an
example.04:42In older versions of IE, putting a margin on the same side of an element that04:47you've
floated it on caused Internet Explorer to double the floated margin.04:51In most browsers, people
would see one margin, but they would see twice that04:55margin in the Internet Explorer.04:56Now as
you can imagine the last would often break quite badly in IE. A hack was05:01found to fix this problem
by simply changing the display CSS property to inline05:06for that floated element.05:07No one knew
why it worked but it worked.05:10Well, this was great, except for the fact that the inline property of a
floated05:14element is not valid CSS.05:17As such, your CSS would not validate and there was no
guarantee that future05:21browsers wouldn't break because of this property.05:23A simpler way to
deal with this issue was to simply not place margins on floated elements.05:28There are a plenty of
other ways to ensure proper spacing within layouts and05:31following this rule prevented me from ever
having to worry about the dreaded05:35double float margin bug.05:37By making avoiding bugs part of
your CSS workflow in coding practices,05:41you eliminate 80% of the headaches caused by bad browser
behavior.05:45There are instances where using a hack or code workaround just can't be
avoided.05:49So here's some advice when you have to employ a CSS hack.05:52First, realize that all
browsers aren't created equal. While Opera, Firefox,05:57and Safari all have their quirks by far, the
worst offender in CSS support is Internet Explorer.06:04You'll find that well over half of your time is
spent dealing with one issue or06:07another in the Internet Explorer and as such when you do have to
write a few06:12workarounds you can keep your main CSS hack-free by creating an
Internet06:16Explorer bug specific style sheet.06:18CSS styles are usually kept in an external CSS file and
then linked to your pages.06:23By creating a separate style sheet for just Internet Explorer bugs, you
can use06:27what is known as a conditional comment that pass the IE specific style sheet to06:31just
Internet Explorer.06:33These conditional comments are special HTML comments that are read by IE
but06:37ignored by other browsers.06:39You can even specify a specific version or range of versions for
Internet06:42Explorer, so that you can pass fixes for older and new browsers in separate files.06:48For
other non-IE related hacks, I recommend grouping them in consistent06:52locations in your styles. This
makes them easier to find, update and remove when needed.06:57Finally, there is no substitute for
testing thoroughly in as many browsers as you can.07:02You should install as many browsers as you can
on your system and preview your07:06pages throughout the development process.07:08An hour before
launch is no time to learn that your layout doesn't work in Safari.07:13Try to have multiple testing
platforms as well. Having a Mac OS, Window OS and07:18multiple versions of browsers can be a
demanding requirement, but it can make07:23all the difference in ensuring consistent
design.07:25There are multiple online emulation services that will show you how your page07:30layout
appears in multiple browsers.07:32browsershots.org is a free one that offers a wide range of
platforms.07:36Using these emulators will give you a good idea about how your page is going
to07:40translate over multiple browsers but they're usually not as revealing as07:44actually testing the
page yourself.07:46By planning and maintaining a specific approach for designing for
multiple07:50browsers, you'll come closer to the ever elusive goal of ensuring a consistent07:54user
experience across multiple browsers.07:57You'll also find that as a byproduct of this you begin to focus
very clearly on08:01creating valid, standards compliant HTML and CSS code.08:05Now regardless of
which browser you target, this practice will help your sites08:09become more portable and accessible as
well.