Chris

Lee

Content

Copywriting

Design

The importance of cross-browser testing


November 12, 2018

See this code:

.big-text {
font-size: -webkit-xxx-large;
}

On Chrome, code with that class renders like this:

On Firefox however, it renders like this:

Teeny.

This is because the list of applications using webkit, there are two glaring omissions: Firefox and Edge.

How to fix this?

By defining a secondary font-size, browsers that don’t support webkit are given a fallback option. Here’s what happens when you use
.big-text {
font-size: -webkit-xxx-large;
font-size: xx-large;
}

on Firefox:

The cross is xx-large. If we inspect the element we see a yellow warning triangle next to font-size: -webkit-xxx-large: Firefox deems this an ‘invalid property value’, so moves to the next specified font-size value instead.
On Chrome, however:

The cross is xx-large, and despite the fact Chrome supports webkit, the webkit-xxx-large value is ignored in favour of the later xx-large.
Why?
Because CSS stands for cascading style sheet. The browser runs through the CSS file and assigns the final value stated for a property.
How to fix this?
Super easy, just switch the values round:
.big-text {
font-size: xx-large;
font-size: -webkit-xxx-large;
}

Now Chrome sees xx-large first, applies that, then comes across -webkit-xxx-large afterwards, and applies that instead.
Firefox sees xx-large first, applies it, then comes across an invalid property value, so sticks with the one it’s already got.
It’s easy when you know it.