.png)
As a website creator, you want your site to look great however it’s viewed — no matter the device, platform, or browser. One key factor to help you perfect your responsive web design and development, is cross-browser compatibility.
This can be tricky, as browsers support features differently, and platforms may show semantic elements in completely separate ways. For example, a button on your website in its default state will look different on a Mac compared to Windows.
The importance of cross-browser compatibility
The websites you create should look great and leave a strong impression on clients and users, regardless of whether they’re using Opera, Chrome, Safari or anything else.
Cross-browser compatibility is a commonly overlooked step when creating a new website. Often, the designers and developers will be using a single browser to create it — and they may quickly check it on a handful of other browsers before they consider the project complete. This can be sufficient for simple sites which aren’t mission-critical, however if you’re building more complex sites, your site may look vastly different on other browsers.
Of course, testing every page on every different combination of device, platform and browser is nearly impossible, and very costly. So how can we make sure our site will look and behave just as we envisioned on as many browsers as possible?
If you're building a website on Editor X, you can rest assured that it will be automatically compatible across different browsers. If you’re coding your own website from scratch, check out the tips below:
Ensuring cross-browser compatibility
1. Don’t Repeat Yourself (D.R.Y.)
When developing your website, keep your code simple and reusable. Instead of copying and pasting code in many files, write a reusable function (be that a JavaScript function or a Sass mixin) which you can call when you need it. This means that whenever a problem arises, you’d only have one function to fix rather than many different files, minimizing the chance of making mistakes.
2. Define a doctype
At the start of your HTML file(s), define the language the code is written in so that browsers interpret it correctly. For example, in HTML5 the doctype declaration is simply:
<!DOCTYPE html>
In older files, you may see something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is due to earlier versions of HTML relying on a Document Type Definition (DTD).
3. Validate your code
Erroneous HTML and CSS code can make your website misbehave in different ways across all browsers. The bugs can be hard to spot and the webpage will still typically build with small, seemingly random problems — which in turn makes it hard to debug.
A way to avoid this is to validate your code. You can validate HTML and CSS with the W3C validators, or install extensions in your IDE which will check your code as you write it. Some styling languages which require pre-processing, like Scss, will not compile if there are errors. This isn’t a bad thing, as they typically point out where your mistake is and that can help you fix it.
4. Use a CSS reset
By default, browsers may apply their own default styles to your website. For example, Chrome will apply a default margin to your page — it’s small, but noticeable if you use a darker background color.
To fix this, you can use some code to reset the defaults - removing the guesswork as to why some styles are different on other browsers. Here’s an example courtesy of meyerweb:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
5. Review support for your CSS properties
Different browsers don’t all support CSS properties equally — what is perfectly usable in one browser may not exist in another. For example, the backdrop-filter property is fully supported by Chrome, but is non-existent in Firefox. If you rely on it, then it will behave unexpectedly for your Firefox users.
Tools such as Can I Use allow you to check CSS properties for their browser support. This means that you won’t waste a lot of time designing with a poorly-supported property, only to have to redevelop it later.
6. Create responsive websites
Responsive web design allows the design to adjust to any device it may be viewed on, from desktop to mobile to everything in between. It’s important to ensure that all functionality is possible and that all information is accessible on any device and browser, no matter the size.
You can create responsive websites on an advanced platform like Editor X, or through media queries.
For example, if we wanted to set the margin of a container class when the screen is below 600px wide, we could write a media query like this:
@media only screen and (max-width: 600px) {
.container {
margin: 0 16px;
}
}
7. Provide fallback solutions
There may be some instances when we cannot avoid using a property which isn’t supported completely by other browsers. In this case, we may want to provide a fallback file for specific browsers. For example:
<link href=”styles.css” rel=”stylesheet”/>
<!--[if lte IE 8]>
<link href=”ie-styles.css” rel=”stylesheet”/>
<![endif]-->
This tends to be a more organized solution than putting the properties in the same CSS file, with older ones first and more modern ones second. For example:
.navbar {
background-color: black;
opacity: 0.9; // The older property
backdrop-filter: blur(10px); // The newer property
}
8. Utilize cloud-based browser testing
In an ideal world you would be able to test your website on many different devices and browsers in-person. However, in smaller teams this might not be possible, so you might want to look into cloud-based browser testing where your website can be simultaneously run on many different combinations of browsers. LambdaTest, BrowserStack and SmartBear all offer cross-browser compatibility testing quickly and efficiently.
