Need Help About Cross Browser Compatibility
https://angora.me/style.css
Dear All
I need some help about cross browser compatibility for my website -> https://angora.me/blog/
And here is my CSS code ->
https://angora.me/style.css
On modern browser, my website looks fine like this ->
https://thepracticaldev.s3.amazonaws.com/i/8fdhnzqkvmljncqan763.png
But on some old browser, my website looks ugly like this ->
https://thepracticaldev.s3.amazonaws.com/i/3blwd0fk90823dvj63ap.png
Even failed connection like this ->
https://thepracticaldev.s3.amazonaws.com/i/elf7wyssh92z9wpzelib.png
I use Hugo with Netlify and Let's Encrypt SSL. I don't know if this compatibility issue is from my code side, SSL side, server side, browser side, etc? Any idea how to fix this issue?
Regards
I'm not sure how important or is to support older browsers depending on what you're referring to as old. For the certificate issue up have there's likely not away around that especially with let's encrypt. Most certificate authorities (CA) use TLS 1.1 or 1.2 which older browsers won't support as they only likely support TLS 1.0 at most and a lot of newer browsers won't support the older TLS version any more or if they do prob won't much longer.
For styling issues it depends on what the problem is. If your using CSS3 some really old browsers won't support that and not sure if there is a work around. Internet explorer is not supported so much anymore as Microsoft is pushing people to dump internet explorer on place of edge.
For example where I work (not solo project) were building something but found it's using some newer stuff which ie won't support and there no pollyfill available for it so we've decided not to support ie. Even GitHub shows a banner saying they don't support ie if you access GitHub using ie
Netlify stopped supporting TLS 1.0 last year, so that may be the problem. All browsers since 2014 have supported 1.1, so a user would have to be on something like IE9 to have that problem. It's possible the actual cypher list on the server is too restrictive; that is, it may be that there's no overlap in the cyphers the browser can use and the ones the server will accept, though I think this is less likely than a TLS version mismatch.
Specifically with the CSS, I believe the styling issues are all down to the use of variables ("custom properties"). IE11 and Opera Mini can't handle them. There really isn't a workaround as far as I know, only fallbacks: provide the literal value you want on the line before the one with the variable...in which case you don't gain much from using variables. On the other hand, your CSS file is very short so it's not a big undertaking. But if you don't expect many of your users to visit using those browsers, you should be okay leaving it as-is.
On IE, the bad news is that a lot of institutions still require it, mostly because they wrote their intranets to use it. The good news is that Microsoft is building what they promise is a seamless "IE 11" mode into the new (Chromium) Edge, so businesses can still operate sites that will only run on IE 11 but without limiting people to seeing the web through IE glasses.
Interesting, do you have a source for that "ie 11 mode"? First I've heard of it.
Here you go. https://docs.microsoft.com/en-us/deployedge/edge-ie-mode Still only available on the beta version at this point.
awesome, thanks for sharing!
Previously I use Cloudflare SSL along with DNSSEC. Then now I migrate to Let's Encrypt SSL along with Netlify that not support DNSSEC yet. At first I'm worry about DNSSEC issue, but then I think it's not about it. Thank you so much for your comment, Boardy and Shawn. It helps me a lot.