Finding Cross Browser Compatibility Issues in HTML and CSS
Cross Browser Testing •
12468 Views | 5 Min Read
Cross browser compatibility bugs are inevitable for any web project irrespective of whatever platform they are using for development. And most importantly, they keep creeping in at every iteration.
So, this may be one of the main reason you need to handle them delicately. But, before you handle them you need to find out the errors first.
Finding and Fixing General Problems
The major problems that usually went unnoticed by us are the most simpler ones. And these problems are so simple that they may pass through our eyes a hundred times and still we fail to figure them.
It’s just like the semicolon(;). Syntax errors are the highest cause of high pressure among web developers.
So, for CSS and HTML you don’t always need to go finding out the semicolon if you just use a validator for the same.
A validator may help you figure out some mistakes that seem so simple. For HTML, it validates the tags are closed and nested, a DOCTYPE is used, and tags are used correctly while for CSS it checks that the property names and values are spelled correctly, no curly braces are missed, and other CSS properties.
These validators will help you figuring out the problems but if you also want to go ahead and know the bad practices that you’re using you may need to use a Linter. A linter not only points out the errors but it also flag up the warnings for your bad coding practices.
There are many linters available online for CSS, HTML, JS and other languages as well. The best of which are: Dirty Markup (for CSS, JS, HTML), CSS Lint( specially for CSS), JS Lint(for JS only).
Hunting Common Errors
Using validators and linters, you can beautify your code and figure out common problems but if you are on a hunt for finding the errors you can use one inbuilt feature in your browser, ‘developer tools’.
This works well for CSS errors as HTML errors normally don’t tend to show up in dev tools as they try to cover them up by correcting badly formed markup automatically.
You can find out errors as mentioned:
Invalid property type.
These sort of errors may point out to be some of many reasons which causes cross browser incompatibility as some browsers do not support some specific CSS and HTML elements and you can go ahead for finding these elements.
Unsupported CSS Elements in Browsers
Older versions of Internet Explorer, one of still the most used browsers doesn’t support many CSS elements some of which are:
- CSS3 selectors
- CSS Counters
- CSS3 Box-sizing
- CSS font-stretch
- CSS namespaces
- CSS3 Colors
See full list of unsupported CSS elements in all internet explorer browsers.
Similarly, some older Google Chrome versions doesn’t support the following CSS elements:
- CSS overscroll-behavior
- CSS display: contents
- CSS Paint API
- CSSOM Scroll-behavior
- CSS Scroll snap points
- CSS Conical Gradients
- CSS font-size-adjust
Similarly, you can check for any of the CSS elements that you are using in your website that what are the browsers that don’t support those elements. Unsupported CSS elements cause cross browser compatibility issues.
HTML Issues in Browsers
If you are willing to figure out the HTML issues, then the first and foremost thing to do is to check for the DOCTYPE. Have you used it?
And once you verify this, you need to make sure that you’re not using any of the third party code. Many times when you use a third-party code, you might find that the HTML generated by the third party app may be using class ID or Name that you’re using for a different purpose in your code. Hence that might a big problem and becomes hard to debug as it will not show any error however you’ll find the difference in the rendering of HTML causing cross-browser issues.
Many older versions of Internet explorer browser do not support HTML elements like:
- Video element
- Audio element
- Search input type
- Form validation
- Multiple file selection
- Offline web applications
See full list of unsupported HTML elements in all internet explorer browsers.
Go ahead, test your website across various browser combinations and figure out what went wrong, which unsupported CSS and HTML elements are you using in your website and now it’s turn to rectify them. Because it’s better late than never.
Written by Deeksha Agarwal
Deeksha Agarwal is in Product Growth at LambdaTest and is also a passionate tech blogger and product evangelist.
125255 Views | 12 Min Min Read
53632 Views | 9 Min Min Read
119621 Views | 18 Min Min Read
167342 Views | 16 Min Min Read