Browser Compatibility
There are some differences between browsers. New features might not be supported by all browsers. Features that are well supported by most modern browsers might not be supported by older browsers. There might even be differences between different versions of the same browser.
If you want to create a cutting-edge web experiences with a relatively new feature you should check if the feature is supported by the user's browser. This is called feature detection.
There are two design philosophies that allow you to approach development from different angles:
- Graceful degradation is the idea to provide the best possible experience for modern browsers (that support most features), but still try to provide a sufficiently solid experience as a fallback.
- Progressive enhancement is the opposite mindset. You provide a basic experience with the most essential content and functionality. The experience is further improved if more advanced features are supported by the user's browser.
Another noteworthy aspect is that the web is designed in a backwards compatible way. Some features might be replaced by newer and better versions, but websites that are built with the old way of doing things will still work for a long time (I guess in a timespan of roughly 10-20 years, maybe 30, or forever).
Don't Worry: Today's Browsers Are Very Good
If you use a website builder tool, you don't need to care at all about feature detection the tool should make the necessary checks.
Also, as newbie web developer feature detection is probable not that important. Pretty much all of the basic things you are going to learn first are supported by today's browsers. Nonetheless, I think it is a good idea that you get used to checking if a particular feature is supported. There are the common ways to check this:
- https://caniuse.com/ is a popular search tool where you can search for different HTML, CSS and JavaScript features. Caniuse even shows statistics how popular a particular browser version is.
- MDN Web Docs is a documentation that describes HTML, CSS and JavaScript features and their respective programming commands in a comprehensive way. This is the best reference for looking up details. At the bottom of every feature page is a table that lists the support of the feature in various browser and JavaScript runtime environments.
- Test the application yourself with different devices and browsers.
As an example for you to investigate browser compatibility information, here are three features that are very new (at the time of writing this in June 2023):
Trivia
The first public draft of HTML5 was released in 2008. It was released as a recommendation by the World Wide Web Consortium (W3C) on October 28, 2014. This deprecated HTML 4.01 tags like <center>
, '', or <frameset>
. Paul Graham's website still uses the deprecated <font>
tag and it is still working properly in Chrome 115 and Firefox 115 (I wrote this in July 2023). So, roughly 9-15 years later things are still working in the latest browsers.
Further Reading
https://en.m.wikipedia.org/wiki/Unobtrusive_JavaScript