StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There is a third option:</p> <p><strong>Minimize or eliminate the need for browser detection and CSS hacks.</strong></p> <p>I try to use things like jQuery plug-ins that take care of any browser differences for you (for widgets and the like). This doesn't take care of everything but it does a lot and has delegated the effort of supporting multiple browsers to someone who has spent and will spend far more effort on it than you can afford to or want to.</p> <p>After that I follow these princples:</p> <ul> <li>Use what I call <strong>minimal CSS</strong>, meaning only use features that are widely supported;</li> <li>Use tables for complex layout if necessary. You may not like this but frankly to do things like side-by-side layout, tables will work on browsers going back a decade and will be a lot less effort than getting divs to work with combinations of absolute positioning, floating and the like;</li> <li><a href="http://www.quirksmode.org/css/quirksmode.html" rel="nofollow noreferrer"><strong>Force IE6 into strict rather than quirks mode by adding a DOCTYPE</strong></a>. I can't stress how much easier this will make your life but oddly many people don't seem to do it still;</li> <li>Minimize <a href="http://css.maxdesign.com.au/listamatic/about-boxmodel.htm" rel="nofollow noreferrer">box model</a> issues by either using the correct DOCTYPE or using nested block elements rather than the other <a href="http://css-discuss.incutio.com/?page=BoxModelHack" rel="nofollow noreferrer">box model hacks</a>; and</li> <li>If necessary include extra CSS files for relevant browsers. I tend to do this on the server rather than the client with generated pages (which, let's face it, is most of them). Many projects I've worked on have had IEfix.css files.</li> </ul> <p>After that, I divide browsers into tiers:</p> <p>Tier 1:</p> <ul> <li>Firefox 3;</li> <li>IE7.</li> </ul> <p>My website <strong>must</strong> work on these.</p> <p>Tier 2:</p> <ul> <li>Firefox 2;</li> <li>Safari;</li> <li>Opera;</li> <li>Chrome.</li> </ul> <p>My website <strong>should</strong> work on these. This may offend some people but frankly the market share of these browsers is so low that they're simply not as important as Firefox 3 or IE7.</p> <p>Tier 3:</p> <ul> <li>IE6;</li> <li>Others.</li> </ul> <p>Minimal effort will be made to work on these unless it is, for example, a company requirement. IE6 is the nightmare one but it's <a href="http://www.w3schools.com/browsers/browsers_stats.asp" rel="nofollow noreferrer">market share</a> as of December was 20% and rapidly falling. Plus there are valid security concerns (on financial websites for example) for dissuading or even disallowing the use of IE6 such that sites like <a href="http://www.hyperborea.org/journal/archives/2008/04/21/blocking-ie6/" rel="nofollow noreferrer">Paypal have blocked IE6</a> and <a href="http://tech.slashdot.org/article.pl?sid=09%2F01%2F01%2F145231&from=rss" rel="nofollow noreferrer">Google tells users to drop IE6</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload