i some question about compatibility and appearance
how far should i check for my website or code compatible with old browser ? (some element or property or even value need some twist to work for old one)
what is the market share for each version of the browser? (i found some website but i do not know if they are reliable source or not)
for this leason is it better to use the default os styling or use custom one and when it better to use the default or the custom (for example maybe the user comfortable with the os version)?
let us say i create a page and i need to check how it look likes in diferent os (i can use virtual machine but it’s illegal of macos and mac hardware is expensive) is there any free resource for that?
is there anytool that tell us that certain property or value or element not supported for certain browser and give us the workaround it for that browser
i know mdn show the support for each browser but i need extra help by giving us the workaround to make it work
if you have any info related to those question or any help about the same topic that would be much appreciated
Hi, I see a few things going on here. First you should focus on this regarding your question:
If you look at the reference page you’ll see a lot of different possible values listed for -webkit-appearance , however by far the most helpful value, and probably the only one you’ll use, is none . This stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using CSS.
Next, you want to get a browser extension to emulate different browsers and learn about user-agent-switchers. I use Device Emulator available in chrome dev tools for an emulator and User-Agent Switcher for Chrome. There are other tools as well. The last issue I see is that you need to judge browser support in terms of your site metrics. Google analytics can help with that. Good luck!
This is a really good question. To a certain degree, I would say — “don’t worry about this too much while you are learning the basics”. I’d say it is more important to get used to using CSS, JS, etc. to begin with, without having to worry about making everything work cross browser.
It is also perhaps a little bit out of date these days. In general, you should aim to make your sites work in:
Modern browsers (latest versions of Chrome, Firefox, Opera, Safari, etc.)
Older Microsoft browsers, e.g. IE 10/11, Edge 12/13. These have pretty low marketing share these days, but you’ll still find some users.
Mobile browsers, e.g. on iOS, Android. Here the problem often isn’t to do with standards support, but rather making sure CSS layouts work on different viewport sizes, etc.
Situations involving people using assistive technologies to access your content or services (e.g. screenreader users)
But your browser support matrix might vary from project to project, depending on what your custom’s requirements are.
You also need to consider what “support” means. Depending on who you are building the website for, it may be perfectly acceptible to provide “full” support in modern browsers, and a much more limited experience in older browsers (e.g. a “text only version”) that still allows people access to your information.
The experience does not necessarily need to be exactly the same on every browser, as long as people can use the site.
Now on to some of your questions:
In the advanced form styling lesson, it again depends on your target audience, and your web site - do the native OS styles look ok along with the rest of your design, or do they look bad, and do you need a custom look? How hard is it to get the form elements styled in your custom way? If you need to show progress bars and date pickers, it might well be better to use some kind of library to create those, rather than trying to use the native controls.
Tools like browser stack, lambdatest, and saucelabs provide free trials to allow you to test on browsers you don’t have installed natively. If you are going the virtual machine route, you can install Linux OSes to test browsers available on there. As for browsers like Safari and IE, which you need licensed OSes to run:
