DEV Community

Cover image for Verify Cross Browser Compatibility of HTML Date Property with LambdaTest Experiments
LambdaTest Team
LambdaTest Team

Posted on • Edited on • Originally published at lambdatest.com

Verify Cross Browser Compatibility of HTML Date Property with LambdaTest Experiments

There are 5 major browsers, most of them having more than 20 versions that are still actively used by people to access the internet. However each browser is a little different when it comes to running HTML CSS and JS code.

So, we have started LambdaTest Experiments and to explore this browser diversity. In this blog, we are exploring a simple HTML property called date.

If you look at the name itself then Date is one of the simplest and the most fundamental input types yet surprisingly it is outrightly not supported by many major browsers like Internet Explorer and Safari.

Right now you can open https://www.lambdatest.com/experiment/date-support.html in a Chrome Browser and you can see, in chrome browser the simple date field has so many functionalities. You get a calendar dropdown that you can use to pick dates, you have a roller feature that you can use to roll up or roll down dates, months, and years and there is even a reset functionality.

Just a simple tag and you get so many functionalities.

In other browsers however, it’s totally different.

For example in Internet Explorer, it would be totally different.

If you’re on windows and want to test on Mac or vice versa, you can use LambdaTest to test on other OS

So open up LambdaTest. Enter the URL. Select the other browser, like IE or Safari( the one you don’t have in your local machine).

If you think why I should care about a hated browser like Internet Explorer, then a quick fact check, it’s still actively used by 2-5% of internet users which amounts to around 20-30 millions users. So if you have a customer facing website, you should care about Internet explorer.

Once you fire up IE, let’s say.

You can see, all the functionalities that you saw in Chrome, like dropdown and roller etc, is plain just gone. It’s will be just a simple input text field here like any standard text input.
Similarly this has a little different experience in Firefox. So, switch the browser, let’s go with latest firefox, windows 8.1 this time. Launch.

With firefox the issue is that because it’s one of the most popular browser, people think that there is no need to test on it. It is popular and it should work perfectly as it working in Chrome. In most cases, it is true. However in some cases, it’s not always the same.

Again, you’ll find that in this example the date tag’s experience is quite same as chrome one, though the dropdown UI is little different. Also there will be no date roller feature. So if you were counting on same functionality here, then you are proved wrong my friend.

Same check on Safari too with LambdaTest.

Quickly switch your browser and select safari and launch.

Many times checking on older versions became is difficult because you have to downgrade to older versions and it is a huge pain in Mac machines.

You’ll see that in Safari 9 also, just like Internet Explorer, there is no drop down, no roller. Plain vanilla text input box. The tag is not at all compatible.

So as you might have seen for now, a simple tag has totally different experience in different browsers. And this is why we need cross browser testing.

Thanks for joining us in this experiment. We would be coming up with more browser experiments in the future so don’t forget to hit subscribe on our Youtube channel. Also check out our LambdaTest experiment page for more awesome experiments on browsers.

Now after this video if you have a sudden urge to test your website on different browsers, then you can signup with LambdaTest. It’s free to signup and use.

Till next time. Good bye!

Original Source: lambdatest.com

Related Posts:

  1. JavaScript Cross Browser Compatible Issues And How To Solve Them
  2. How To Make A Cross Browser Compatible Website?
  3. Fixing Javascript Cross Browser Compatibility Issues
  4. 9 Ways To Avoid Cross-Browser Compatibility Issues

Top comments (0)