Use a Minimal Master Page

When you begin to build out your public facing site it is best to start with a minimal master page. While a minimal master will strip out a large amount of SharePoint’s OOB functionality this is the desired result as much of that functionality will not be used in a public facing website. This initial step will save you time later when you are attempting to troubleshoot branding issues across browsers by eliminating the possibility of superfluous structure and functionality causing problems. You can find a copy of a widely used minimal master by visiting CodePlex and downloading the file provided.

Conditional Comments are your Friends (In IE)

When troubleshooting CSS issues that affect IE specifically it can be tempting to use CSS Hacks to target and solve the issue. However, it is not recommended that you use CSS Hacks unless absolutely necessary, rather it is best practice to avoid them at all costs. The main reason for this is that CSS Hacks can break due to a browser update rendering the fix put in place useless. Alternatively, conditional comments are safe to use and allow for you to easily target different versions of IE using separate CSS files for each version needed. Conditional comments behave just like simple HTML comments, but they have a specific syntax that IE/Win browsers can recognize. When that syntax is exactly correct, IE will look inside the comment and parse whatever is inside. Below is an example of what the conditional comments would look like in the header of your master page. 

You might be wondering why you would break the CSS into separate files for each version thus leading to multiple http calls and potentially affecting performance. In fact there is a better alternative solution that involves replacing the html tag with a different one depending on what version of IE is loaded that looks like this:

The problem with this solution is that unfortunately this can cause potential problems in SharePoint that otherwise may not occur in normal web development. This is especially true in dialog boxes which use a different html header than the rest of the site and if replaced the dialog box will lose much of its functionality. Which it is why it is best to use separate CSS files when you are troubleshooting IE problems.

JavaScript/jQuery can Work in a Pinch

If you find yourself needing to target other browsers, like Firefox for example, there is an alternative to CSS hacks that you can be sure will always work. However, there is downside to utilizing JavaScript to correct or fix css issues. Since JS is client side script it will not run until the user has loaded the page and more often than not it will execute only after the rest of the css has been loaded. Which is why, even though this is a possible solution it is best to not become dependent on it. Also refrain from using this script to fix big problems that will make the change obvious when the page loads.

In order to target a specific browser using jQuery you will need to reference the jQuery library on your master page or page you will be using the script, this can be downloaded here. In the jQuery library there is a property “$.browser” this property enables you to detect what browser your page is being loaded in and take appropriate action. For example if we wanted to load css whenever our site is loaded using Firefox the code would look like this: 

As a Last Resort, Use Hacks

More often than not if you use conditional comments to target IE, the branding should function properly in all other browsers as they are standards-compliant. However, sometimes there is no getting around using CSS hacks, especially when building on a platform like SharePoint that does not offer full functionality across all browsers. For instance, let’s say you’ve taken care of all the bugs in IE, Firefox, and Chrome but there is just one bug in safari where a div is not aligned properly. You can’t use JS in this situation because chrome and safari are both built off of “webkit” thus any fix in JS will affect Chrome as well. So then you are left with one option, CSS hacks which when used properly and sparingly can be very useful.

Below is a comprehensive list of CSS Hacks for modern browsers currently in use:

 IE6 and below   -  html #uno  { color: red }

IE7 -  :first-child+html #dos { color: red }

 IE7, FF, Safari, Opera  -  html>body #tres { color: red }

 IE8, FF, Safari, Opera (Everything but IE 6,7)  -  html>/**/body #cuatro { color: red }

 Opera 9.27 and below, Safari 2 -  html:first-child #cinco { color: red }

Safari 2-3 -  html[xmlns*=""] body:last-child #seis { color: red }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+ -  body:nth-of-type(1) #siete { color: red }

Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */ -  body:first-of-type #ocho {  color: red }

Saf3+, Chrome1+ - @media screen and(-webkit-min-device-pixel-ratio:0){ #diez  { color: red  }}

iPhone/mobile webkit - @media screen and(max-device-width:480px){#veintiseis{color: red}}

Safari 2 - 3.1 - html[xmlns*=""]:root #trece  { color: red  }

Safari 2 - 3.1, Opera 9.25 - *|html[xmlns*=""] #catorce { color: red  }

Firefox only. 1+ - #veinticuatro,  x:-moz-any-link  { color: red }

Firefox 3.0+ - #veinticinco,  x:-moz-any-link, x:default  { color: red  }

I hope this helps you better tackle potential branding issues that you come across as you attempt to brand a public facing site. However, using these tools and hacks should not be your immediate reaction to fixing a problem you come across. Always be sure that your HTML structure and CSS has correct syntax and is not broken before you attempt cover it up with Conditional Comments, JavaScript, or CSS Hacks.