StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In the ASP.NET world, I've tended to use the built-in BrowserCaps feature to write out a set of classes onto the body tag that enable you to target any combination of browser and platform.</p> <p>So in pre-render, I would run something like this code (assuming you give your tag an ID and make it runat the server):</p> <pre><code>HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody"); _body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion); </code></pre> <p>This code enables you to then target a specific browser in your CSS like this:</p> <pre><code>.IE8 #nav ul li { .... } .IE7 #nav ul li { .... } .MacPPC.Firefox #nav ul li { .... } </code></pre> <p>We create a sub-class of System.Web.UI.MasterPage and make sure all of our master pages inherit from our specialised MasterPage so that every page gets these classes added on for free.</p> <p>If you're not in an ASP.NET environment, you could use jQuery which has a browser plugin that dynamically adds similar class names on page-load.</p> <p>This method has the benefit of removing conditional comments from your markup, and also of keeping both your main styles and your browser-specific styles in roughly the same place in your CSS files. It also means your CSS is more future-proof (since it doesn't rely on bugs that may be fixed) and helps your CSS code make much more sense since you only have to see</p> <pre><code>.IE8 #container { .... } </code></pre> <p>Instead of </p> <pre><code>* html #container { .... } </code></pre> <p>or worse!</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