7 CSS Tricks Every Web Designer Needs for Cross-Browser Compatible Design

  • Thoughts

Every web designer knows that feeling of anger and frustration...

You spend hours, days, weeks meticulously perfecting your website's CSS styling. Leonardo da Vinci himself couldn't have created a more beautiful canvas. It's just perfect. And then... out of curiosity... you open the page in Internet Explorer. Everything's ruined! Your nav bar is on the wrong side of the page, there's overlapping text everywhere, your hover effects are malfunctioning, pictures of Dracula and Hitler have replaced your bio pics. It's a nightmare, and it's one that we've all had.

So, how do you prevent this from happening? Well, you can't. At least not right away. Cross-browser compatibility is nearly impossible to achieve during the initial development phase. It usually takes lots of testing and tweaking of code to finally get it right. And even then, it's almost never the same experience on all platforms & devices.

To help you avoid ripping off your own arms in frustration during browser compatibility testing, here are some CSS tips to make your code more cross-browser friendly from the get-go.

  1. Stop using margins to fix your mistakes

    Please, for the love of God, stop doing this. If your CSS is not functioning as expected, and elements are appearing in inexplicable places, then look for the source of the problem instead of adding arbitrary margins to put elements where they need to go on the page.

    This is like spreading ice cream over a pile of cow manure, instead of cleaning it up. It looks a little better on the outside, but you haven't changed the fact that it's still a pile of shit.

    It's simple, really. The margin property is intended to be used for defining the space between elements, which is similar (but not identical, as Ben pointed out in the comments) to what the padding property does (define space within elements). If you instead attempt to use margins to "undo" another property, or even worse, to undo another element's properties (like creating a div with margin-top: -50px; because it's below a div with margin-bottom: 50px;), then you're in deep trouble. In these scenarios, it's not easy to predict how any given browser is going to interpret the specified margins, especially between multiple elements.

    Here's a bonus tip: instead of using a margin to precisely define an element's position, consider using other properties that are meant for that kind of thing, like:

    position: relative;
    top: 30px;

    This tells the browser to move the element 30px down, relative to the position it would have normally been rendered at. It doesn't funkify anything, and most browsers are very happy with this kind of styling.

    And of course, this isn't to say margins aren't useful. You can do neat stuff like this:

    margin: auto;  /* This is used to center elements like divs. */

    For more info, check out W3's documentation pages for margin, padding, positioning, and floating.

  2. Only assign properties once

    What I mean by that is: you shouldn't assign color: white; in the style attribute of your div and then assign color: black; to the same element in your stylesheet... unless you're doing it on purpose. That might seem weird, but unless you're aware of the way browsers select elements' styles, if you neglect to adequately organize your property rules, you will not be a happy camper.

    To an extent, the browser's behavior is actually predictable here, because browsers have two* pre-defined methods for choosing the order in which property rules should be overridden: specificity and sequence. Specific declarations override general ones, and later declarations override earlier ones. This gets potentially mind-boggling when you start having, for example, specific declarations earlier than general ones. In the following stylesheet

    body div > div.black {
        color: white;
    }
    body div.black {
        color: black;
    }

    what will the text color in my div be? The answer is: white. You can confirm this with my cute little JFiddle. Even though my second declaration is later than the first one, it's more general so it gets overridden by the earlier, more specific declaration. Instead of trying to keep all of this straight in your head, it's best to avoid being lazy with your property declarations.

    As an addendum: when adding pseudo-classes (:hover, :after, :before, etc) to an element, only specify the properties that will be changed. Pseudo-classes automatically inherit everything from the base selector, so there is never a good reason to copy ALL the element's properties into the pseudo-class. Consider these:

    Bad Style

    .myDiv {
        color: #f0f0f0;
        padding: 0px;
        margin: 10px 20px;
        position: relative;
        top: 0px;
    }
    .myDiv:hover {
        color: #000000;
        padding: 0px;
        margin: 10px 20px;
        position: relative;
        top: 0px;
    }

    Good Style

    .myDiv {
        color: #f0f0f0;
        padding: 0px;
        margin: 10px 20px;
        position: relative;
        top: 0px;
    }
    .myDiv:hover {
        color: #000000;
    }

    Why is this important? For the sake of simplicity. Assuming I used the first (bad) style, if I wanted to change a property of myDiv in the future, I would have to change that specific property in all of the pseudo-classes as well. Hopefully it's obvious why this could quickly become tiresome and confusing.

    *For a more in-depth view of browsers' sorting methods for property rules, look at W3's documentation on cascading order.

  3. Use CSS3 @media queries

    This is less related to cross-browser and more to cross-platform design, but if you know your default content style won't look good at a certain screen size or on a specific device (like on a mobile phone), then specify alterations for those users in your CSS. It's as simple as saying:

    /* Resize div's for tablets */
    @media screen and (max-width: 500px) {
        div {
            width: 100%;
        }
    }

    W3 has more examples, if you're interested.

  4. Specify the "obvious" properties

    This one's pretty easy. Let's say you intended to have an img appear below a p, and by golly, it's working! Or so it seems... It may look fine in your testing environment, but it could be appearing this way accidentally, for a number of reasons you hadn't thought of. For example, it could be simply because the img is too wide for the viewport you're testing inside, so it wraps to the next line.

    These kind of CSS mishaps are a dime a dozen. In order to avoid different content appearances in different browsers, a lot of the time you have to specify things that might otherwise seem obvious or trivial. In other words, for this example, we would want to give our img the property display: block; (and perhaps also float: none; clear: both; margin: auto; depending on the context), so that regardless of the viewport size, it always breaks onto the next line.

  5. Add comments to CSS vomit

    I know what you're thinking. "You want me to comment my CSS?" Well, yes, but mostly only the crazy abstract stuff - what I like to call CSS vomit.

    How many times have you ever implemented some weird IE fix from StackOverflow, only to come back a week later and have absolutely no idea what the CSS is doing? That's the code I'm talking about. A lot of frustration can be saved in the future by taking a few seconds to add a brief, concise comment so you can remember the exact function of the nonsensical alien artifacts lurking in your otherwise pristine code. You may even consider adding the source of these code snippets, as a handy way to even further contextualize and add meaning to your weird code. Like this:

    /* Make this img appear black & white */
    /* http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS */
    img.desaturate {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        filter: url(\"data:image/svg+xml;utf8,<svg version=\'1.1\' 
            xmlns=\'http://www.w3.org/2000/svg\' height=\'0\'><filter 
            id=\'greyscale\'><feColorMatrix type=\'matrix\' 
            values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333
            0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\' /></filter>
            </svg>#greyscale\");
    }
  6. Create proper meta tags

    As you know, browsers can be very picky. Along with the traditional <!DOCTYPE html> and <meta charset="UTF-8"> tags, there are some less commonly mentioned tags that will help different browsers on different platforms display your content consistently.

    1. You should always specify the viewport. This is especially important for mobile-friendly sites.
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
    2. Use the X-UA-Compatible meta tag.
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

      This not only forces IE to render your site's content using the most recent render engine available, but also enables the Google Chrome Frame plugin in IE, which essentially renders pages using Chrome's technology (including HTML5). For more info on this meta tag, see this wonderful StackOverflow answer.

    3. Enable Cleartype technology for font-smoothing in Mobile IE.
      <meta http-equiv="cleartype" content="on">
  7. Use the modernizr Javascript library

    Javascript?!? I thought you said these were CSS tips!!

    Hold your horses. Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Essentially, on page load, it adds classes to your <html> tag, defining which features are supported by the current browser. Best of all, YOU get to decide which features to look for, by generating a custom modernizr script specifically tailored for your website.

    This comes in handy for both CSS and JavaScript, allowing you to pave the way to a reliable experience for all users across all browsers and platforms.

    When using tools like Modernizr, one key idea to keep in mind (and something I'm personally still struggling to achieve) is to approach your web-design from a progressive enhancement perspective (adding advanced features to a basic design supported by all browsers), as opposed to the graceful degredation approach (degrading to basic features from a design tailored toward modern browsers). W3 wrote an excellent article on Graceful Degradation vs Progressive Enhancement, if you're interested in learning more.

  8. Bonus tip: Use Google's mobile friendly test tool

    I have mentioned mobile-friendly, responsive design several times in this article already. 'Cause if you're not already designing your cross-browser website with mobile users in mind, then seriously, what are you doing? It's 2015, bro, get with the times.

    Responsive web design has become increasingly important since April, when Google began prioritizing websites with mobile-friendly designs in their search result rankings. One way to ensure your website is truly responsive, is to use the handy-dandy Mobile Friendly Test Tool built by Google. Just enter your website url, wait 5 seconds, and voilà!

Have any other tips you'd like to share? Did I miss anything important? Let me know in the comments below.

Discussion
Want updates on the stuff I do?

Subscribe

Just a moment...

Something went wrong! Please try again.

Thank you! Please check and verify your email.