CODEWITHSUNDEEP
javascripthtmlcss
user136224
user136224

Reputation: 153

What are the best practices for making the CSS and JS of a web page cross-browser compatible?

It's always a big problem for web designers to make their page look good in all the commonly used browsers. What are the best ways to deal with this fact?

Upvotes: 2

Views: 196

Answers (9)

Guffa
Guffa

Reputation: 700870

A proper doctype on the page so that it renders in standars compliant mode.

Test in a standards compliant browser like Firefox first when you develop. If you test in Internet Explorer first, you will most likely write code that uses some of the rendering bugs in IE to make it look like you want, and then you will have a hard time to make it work in any other browser.

You will most likely have to tweak the layout to avoid some of the rendering errors in IE. Different versions have different rendering errors so you need to test several. Add an X-UA-Compatible meta tag to keep IE 8 from rendering in compatibility mode.

Use the html elements as originally intended. Links to navigate, header tags for headlines, et.c. That way the code is more likely to work as intended, and search engines will do a better job indexing the pages.

Upvotes: 1

googletorp
googletorp

Reputation: 33285

Using a good lib to make your js more cross browser safe is a good start. Also using a css framework like 960.gs or blueprint is a good choice for the css. Basically you need to do a full css reset.

Upvotes: 0

Sorantis
Sorantis

Reputation: 14732

IMHO stick to good JavaScript Library like jQuery, which promises to be crossbrowser

Upvotes: 0

DLS
DLS

Reputation: 5491

Test, test, test and learn from experience.

Use virtual machines to test in different IE versions. Download them here: http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en

Try avoiding hacks - css or js to target browsers unless really necessary.

As others said, jQuery might help a lot in Javascript to irons out the pesky browser differences.

Upvotes: 1

vaske
vaske

Reputation: 9552

Definitely JQuery, or Mootools or prototype..or some other JS library.

Upvotes: 0

brettkelly
brettkelly

Reputation: 28245

For CSS:

  1. Use a reset (like Meyer or YUI) to "level the playing field" before your style is applied
  2. Style for the weirdest browser that you have to support (like IE6), make it look right, then change what you need to for more modern browsers. Trust me, this is much easier than doing it the other way around!

For Javascript, I'd use a framework like jQuery or YUI since they go a long way in abstracting away most of the browser-specific quirks you're likely to encounter.

Good luck!

Upvotes: 5

Dan Davies Brackett
Dan Davies Brackett

Reputation: 10081

There's no universal way to ensure that everything always works. For CSS, a reset stylesheet goes a long way to standardizing looks between browsers; for JS, use a library like jQuery that handles browser compatibility issues in a sane way.

Upvotes: 0

Spencer Ruport
Spencer Ruport

Reputation: 35117

For javascript you can't go wrong with jQuery.

Upvotes: 0

rledley
rledley

Reputation: 2431

Use well supported libraries - don't try and start from scratch. For example, JQuery handles a lot of browser issues for you.

Upvotes: 1

Related Questions