Designing For Every Browser: How To Make Your Site Fully Cross Browser Compatible
What consumers see as freedom of choice when choosing a browser, coders can sometimes see as a nightmare. Here’s a quick list of popular browsers, just off the top of my head:
- Google Chrome (Latest, and older desktop versions)
- Google Chrome (mobile for iOS and Android)
- Firefox Version 65.0
- Firefox (Older desktop versions)
- Firefox for iOS
- Firefox Focus for Android
- Internet Explorer 9 and older
- Internet Explorer 10
- Internet Explorer 11
- Opera (Latest, and Older versions)
- Opera Touch (Mobile)
- Safari (Latest, and older)
- and more…
There are numerous browsers listed right there, and that doesn’t even count all the other ones you can find in the app store! How do you create a design that looks the same in so many different browsers? Well, you start by bookmarking this post.
I’ve included something for everyone: From different renderings of the box model, to ready made 100% cross browser compatible CSS layouts and even ways to check your site in different browsers.
- Cross Browser CSS For Your Site
Emil Stenstrom writes some guidelines for making your CSS cross browser compatible. This site has very good advice and comes from ideas being practiced, not theories. - Starting With CSS: Revisited
Every browser out there has default styling applied to HTML tags. The problem is that every browser’s default styling is a little different. Using the stylesheet applied, you can remove the default padding and margins and start with all browsers rendering the same. - undohtml.css
This is another variation of the technique above. This one is a little more widely adopted and removes ALL padding and margins. - Two CSS Hacks For Identical Pages Two CSS hacks that can be implemented for cross browser rendering. The article also has excellent advice on what to do when you start coding.
- CSS Hacks & Issues
This article covers little tips and tricks you can use to get rid of some of the quirks in Internet Explorer’s rendering of your CSS. - Box Model Hack
Internet Explorer 5 and 5.5 incorrectly render the box model. Use this “hack” in your CSS to get them to render it the correct way. - Eric Meyer On CSS
CSS Guru Eric Meyer talks about tricking browsers and hiding styles. Sometimes a you have to be a little sneaky to get cross browser support for your CSS. - /* Position Is Everything */
This is absolutely required reading for anyone wanting to code CSS layouts. After reading this site you will understand exactly how to write for all browsers. - glish.com : CSS layout techniques
glish.com has published examples of 3 column layouts, 2 column layouts and fluid versions of many more. The best part is they all validate and work the same in EVERY browser. - 100 Percent Cross Browser, Pure CSS Layouts
Another website with pure CSS layouts. This one is especially noteworthy because there are tons of layouts here and all of them you have probably seen on a website somewhere. - Rendering Mode and Doctype Switching
Did you know that in “standards mode” Internet Explorer 6 renders the box model correctly? Putting all browsers into “standards mode” is an easy way to ensure that your CSS is rendered the same in all browsers. This page shows you what DOCTYPE to use to trigger “standards mode”. - Activating the Right Layout Mode Using the Doctype Declaration
This site has a table showing all modern browsers and the effect (standard or quirks mode) each doctype has on them. - In Search of the Holy Grail
This article from A List Apart shows you how to create a fluid, 3 column layout that works in every browser currently on the market. If you want you can always just copy the final code and modify it, but it’s better to understand why the CSS is written the way it is. - Litmus Labs: CSSVista
CSSVista is an application from Litmus Labs that enables you to edit CSS live in both Firefox and Internet Explorer. No more refreshing two browsers every time you make a change. - Browser Shots
This online tool takes screenshots of your website in all sorts of browsers and displays the results. It’s great for testing in different browsers without having to install any. - IE NetRenderer
Another online tool that instantly renders your site in a variety of Internet Explorer versions.
