Home Articles Tags
☰

Last Updated: 22.October.2022

Tags: #browser, #web, #html, #comparison

Browser Compatibility Comparison

I always try my best to fit my blog into the HTML5 specification. But what if the browsers do not support the spec? I suddenly got worried about it and I decided to do the test by myself.

Browsers

I must include 3 major browsers: firefox, chrome and safari. I only tested on PC, not mobile. Since each browser uses the same engine for both platforms, the compatibility issue between the two must be minor. I didn't include the Edge browser because it uses the Chrome's engine. I excluded Samsung Internet, Brave and many other browsers for the same reason.

I also tested on minor or outdated browsers: IE, Ladybird, Servo and NetSurf. They all use their own engine, all built from scratch.

Result

Checkpoint
Firefox
Chrome
Safari
IE
Ladybird
NetSurf
Servo
Smooth Scroll
O
O
X
X
X
X
X
CSS Variables
O
O
O
X
O
X
O
MathML (without help of JS)
O
X
O
X
X
X
X
copy_button of fenced code blocks [0]It uses JS' clipboard API.
O
O
O
X
X
X
X
CSS: transparent background color
O
O
O
X
O
X
O
Changing theme [1]It uses JS' DOM API to control CSS variables. CSS color has a transition effect.
O
O
O
X
X[2]I can't open the settings menu.
X[3]I failed to change the theme because I can't open the settings menu with it.
X[4]I can't open the settings menu.
Tasklist: Checked marker [5]It only uses CSS to draw the marker.
O
O
O
O[6]It renders the shape correctly, but I can't see it due to issues with colors.
X[7]It does render a marker, but the shape is not correct.
X[8]I can't see the markers because the browser doesn't support CSS variables. I changed the colors with dev-tools on IE, but this browser doesn't have dev-tools.
O
Tasklist: Triangle marker [9]It only uses CSS to draw the marker.
O
O
O
O[10]It renders the shape correctly, but I can't see it due to issues with colors.
O
X[11]I can't see the markers because the browser doesn't support CSS variables. I changed the colors with dev-tools on IE, but this browser doesn't have dev-tools.
O
Background blur when viewing an image [12]It uses CSS: backdrop-filter: blur(5px);.
O
O
X
X
X
X[13]I can't check it because it doesn't open the image viewer. I guess it doesn't support JS at all.
X
Alignment of the Settings menu [14]It uses CSS justify-content and align-items.
O
O
O
O
X[15]I can't open the settings menu.
X[16]I can't open the settings menu.
X[17]I can't open the settings menu.
Collapsible tables with animations [18]It uses basic JS DOM API and CSS transitions.
O
O
O
O
X[19]Tables are collapsible but the animation is not working.
X
O
Special Characters [20]All the characters in this this page.
O
O
O
O
X
▲[21]≅ is too small to read.
O
CSS Media Query: Screen Orientation
O
O
O
O
O
X
X
CSS Media Query: Print [22]The nav bar disappears when printing.
O
X[23]It crashes when I attempt to print the page.
O
O
X[24]There's no print function.
X[25]Print button doesn't work.
X[26]There's no print function.
Rendering Korean alphabets (한글)
O
O
O
O
X
O
O
Score
15/15
13/15
13/15
8/15
4/15
1.5/15
7/15

Currently, firefox is the only browser that passes all the tests. It's surprising that even the major browsers are not rendering valid html5 pages properly.

I'll be back 6 months later. I hope the browsers pass more tests then.

[0] It uses JS' clipboard API.
[1] It uses JS' DOM API to control CSS variables. CSS color has a transition effect.
[2] [15] I can't open the settings menu.
[3] I failed to change the theme because I can't open the settings menu with it.
[4] [17] I can't open the settings menu.
[5] [9] It only uses CSS to draw the marker.
[6] [10] It renders the shape correctly, but I can't see it due to issues with colors.
[7] It does render a marker, but the shape is not correct.
[8] [11] I can't see the markers because the browser doesn't support CSS variables. I changed the colors with dev-tools on IE, but this browser doesn't have dev-tools.
[12] It uses CSS: backdrop-filter: blur(5px);.
[13] I can't check it because it doesn't open the image viewer. I guess it doesn't support JS at all.
[14] It uses CSS justify-content and align-items.
[16] I can't open the settings menu.
[18] It uses basic JS DOM API and CSS transitions.
[19] Tables are collapsible but the animation is not working.
[20] All the characters in this this page.
[21] ≅ is too small to read.
[22] The nav bar disappears when printing.
[23] It crashes when I attempt to print the page.
[24] There's no print function.
[25] Print button doesn't work.
[26] There's no print function.