Digital marketing consultant

&

Writer

Testimonials • Results • Blog • Now • Hire me My book

Uncategorised

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.