Browser compatibility is one of those grey areas of both life and software development that we need to be ready to deal with, just as we would deal with rainy weather on our long-awaited sunny vacation. What can you do when your website displays a different style depending on whether the client is on Windows, iOS or Android? In this article, I will explain how I encountered this problem, and how I managed to pinpoint the origin of the solution.

How it started

The owners of a WordPress website I was working on brought to my attention an issue with the styling of the links. All the links were supposed to have a specific type of underlined styling. This styling was displayed without a problem on Windows and Android devices, but for some mysterious reason, it was missing on the iOS ones.

If you happen to be reading this on Apple hardware, you will be able to spot the difference here below.

Getting to the solution

Google often does not have the answer

When trying to solve an issue like this one you might run the risk of not knowing what you don't know. That is at least what happened to me when trying to figure out why the same page would mysteriously be displayed differently on the same browsers but on different platforms.

If you find yourself in a situation like this, you are likely to spend countless hours working in different possible directions. In this case, I was wondering, is there any feature I'm missing about the WordPress theme? Is it a plugin that hasn't been configured properly? Is there a CSS rule being applied somewhere else that I am not aware of?

It's easy to start your hunt for a solution by using the wrong search terms on google. You start reading StackOverflow posts that talk about similar issues but don't quite point you to the answer you are looking for. You might also run into articles that feature a long generic list of causes. The reference to what is causing your blockage might be there, but it's hard to choose the particular area to dive into because you are not sure which one will reward all your research efforts.

Breakdown and isolate all possible sources of the error

So after giving up on google searches, I started a game of elimination of possible causes. I made sure that the CSS rule was being applied and was not being overridden by any other file of the WordPress theme.

 a {
    text-decoration: underline 2px #FF00FF;
}

I did this by adding new rules to the links and verifying that they were rendered in the iOS browsers. One of these rules gave quite a similar result. Instead of applying text-decoration to give a special underline to links, I could apply border-bottom and just get done with it.

a {
    border-bottom: 2px solid #FF00FF;
}

However, the result was not quite the same as I was looking for. Also, a part of me wanted to overcome the impulse to be pragmatic and instead get to the bottom of the issue.

I was feeling back to square one. I had verified that the rule was being applied, but for some mysterious reason, it was not displayed on any browser of any iOS device.

What was wrong with this simple rule with an amazingly perfect syntaxis?

The solution

I kept further drilling down and isolating the possible origin of the problem. Without being aware of a thing called shorthand properties in CSS, I went back to the documentation and realized that you could break down the text-decoration CSS property into all of its components line, thickness and color:

 a {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #FF00FF;
}

And eureka! I checked on the apple laptop of one of my colleagues and 'magically' the styling was there!!

By using all the basic CSS properties that set the style of underlined text instead of the shorthand property, I finally managed to display the style on all devices, including iOS/Apple.

Conclusions

Ok, so I achieved my desired result, but what had happened? How could I make sure that this didn't occur again or at least be ready to deal with this type of problem in the future?

Shorthand in CSS is a thing

The first thing I learned from all this, is that a shorthand property is a feature of CSS that allows you to set the values of several properties in just one line. This feature needs to be implemented the right way, and therefore it's always a good idea to check out the documentation to make sure we are setting it properly.

Shorthand and browser compatibility is also a thing

Another thing I learned was that CSS shorthand properties might be the source of browser compatibility issues. I found out the hard way that, in general, all CSS properties might not work as intended.

Also, it's important to note that pressing F12 and going to the developer tools to emulate a certain device won't be of much help in these cases, since at least the emulators I was using were not able to reproduce this type of browser compatibility issue.

The root cause of the issue

So, what was causing the issue, in this case, was the use of a CSS shorthand property that for some reason is not fully compatible with all browsers.

While doing the research for this article, I came across a very useful piece of information that I tend to overlook when checking documentation about how to use a certain CSS rule.

Meet the Browser compatibility table. Now I know that it's always worth it to take a quick look at this table whenever I am looking to implement a certain CSS property to the front end of a website.

Lesson learned

Checking for browser compatibility and being aware that the use of shorthand code might have implications have become now an additional resource in my toolbox as a developer.

If you have run into the exact same issue I had to deal with, I hope that this article has saved you some time and emotional energy. Most importantly, I hope I have helped you become aware of the implications of shorthand code and especially how important it is to always keep browser compatibility into account when working on a front-end.