# Browser compatibility and testing

{% hint style="info" %}
This process was written a long time ago and is due for review. It's been left here in case it's useful to you, but a different approach may apply for your projects.
{% endhint %}

A web browser is the primary window through which all of our work is seen. It's vital that we're testing our work across a suite of standard browsers so that we can be confident in achieving compatibility.

## How to test your work for for browser support

Whenever you work on something that affects the frontend layer of a site it's likely that you'll need to do some browser testing. It's essential to test your work before passing it over to our internal testing process.

When working on a frontend task you should satisfy yourself that the component you are working on will meet the compatibility requirements of your project and you should test in as many browsers as it is necessary to do that for.

For testing on devices and alternative operating systems we use BrowserStack.

When deciding which browsers to test your work in, consider the following:

* The complexity of the change which you are making. A new component which makes heavy use of CSS grid will need more time and attention than a layout modification to an existing component.
* Chrome, Firefox, and Safari all have different rendering engines, except on iOS which is always Safari. 
* Rendering engines are generally consistent across platforms, but be aware of common gotchas - for example Windows and macOS have different default font sets and Chrome on Android has some modifications for battery life and performance, so it isn't always exactly the same as viewing on a desktop in "responsive mode"

## Our default support table

We divide browser support into two categories:

1. **Full support.**\
   In these browsers, we strive to provide the full user experience as designed and design our technical architecture to avoid the need for compromise.
2. **Content compatible**\
   For these browsers, the content of the site should be accessible, but compromises can be made on enhancement and purely cosmetic functionality.

Many of our clients will have their own specification for browser support so you should check before working on a task exactly which specification you are working to. Here's our default list of supported browsers:

| **Operating System** | **Browser**      | **Support**        |
| -------------------- | ---------------- | ------------------ |
| iOS                  | Safari           | Full support       |
| iOS                  | Safari (in-app)  | Content compatible |
| Android              | Google Chrome    | Full support       |
| Android              | Webview          | Content compatible |
| Android              | Samsung Internet | Content compatible |
| Windows              | Edge             | Full support       |
| Windows              | Google Chrome    | Full support       |
| Windows              | Firefox          | Content compatible |
| macOS                | Safari           | Full support       |
| macOS                | Google Chrome    | Full support       |
| macOS                | Firefox          | Content compatible |

## Client specific requirements

Many of our clients will have their own specifications for browser testing based on their own analytics and audience figures. Before you start work on any task you should be aware of the necessary support level for that client so that you can make appropriate architectural decisions about your technical approach.

[![Creative Commons Licence](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-sa/4.0/)\
This work is licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-sa/4.0/).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dxtech.tpximpact.com/best-practice/browser-compatibility-and-testing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.