StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>No sites I know of actually manually keep different versions of a big CSS file for each browser. Usually, they just keep a main stylesheet and sub-stylesheets as per in the first case, but merge them together using a script into a static file. Maintaining a different copy of <em>all of the</em> CSS styles for each browser is just not worth the trouble.</p> <p>The two ways you listed both are valid, and have their own advantages:</p> <p><strong>Master stylesheet with sub-stylesheets for each browser:</strong> This method is simple and works well normally.</p> <ul> <li>Pro: It doesn't require you to have a script to merge the browser-specific stylesheets with the main stylesheet before they're displayed to the user.</li> <li>Con: More pages need to be loaded, and this might be a bit slower; <a href="http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/" rel="nofollow noreferrer">CSS precedence</a> problems may be harder to debug, since the CSS is spread across multiple pages</li> </ul> <p><strong>Merged master stylesheet and browser-specific stylesheets:</strong> This method is ideal for <em>big</em> (and I mean <em>big</em>) sites that have lots of requests: (e.g. Yahoo, which has this CSS file that accepts a query string to merge CSS files); the Pros and Cons are basically the converse of the above.</p> <p>I recommend that you simply choose the first solution unless your site is very big; with PHP and server-side browser detection, the code might be like this:</p> <pre><code>echo "<link rel='stylesheet' type='text/css' href='/css/main.css' />\n"; $browser = get_browser(null, true); $browser = $browser['browser']; if ($browser == 'Firefox') { echo "<link rel='stylesheet' type='text/css' href='/css/firefox.css' />\n"; } elseif ($browser == 'Internet Explorer') { ... </code></pre> <p><strong>Please note that it is best if your design requires no browser-specific CSS at all.</strong> Most of the time, it is not necessary and caused by a bad understanding of CSS attributes. To fix minor default browser discrepancies, a CSS library such as <a href="http://developer.yahoo.com/yui/reset/" rel="nofollow noreferrer">YUI reset</a> can be very helpful.</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