Why do different browsers render HTML/CSS code differently?

1.	Why do different browsers render HTML/CSS code differently?
Answer» The HTML and CSS standards are decided by W3C - World Wide Web Consortium. It is this non-government organisation which create rules, and the browser creators(google, mozilla, apple, Microsoft) have to follow them. Although they follow the W3C standard, they are not bound to follow completely. Besides, each of these browsers was created using a different layout and Javascript engines, so they behave differently. Firefox uses Gecko (now Quantum), IE uses Trident, Chrome and Safari use Webkit as layout engines. Similarly, Chrome uses V8, IE uses Chakra and FireFox uses Spidermonkey as their JavaScript engine. The HTML5 standard, which was recommended in 2014 still is now standardised across browsers. The HTML5 input tags behave differently, with some browsers not even supporting some of them. We will use the below code, to check the browser differences. <!DOCTYPE html&GT; <html> <head> <meta charset="utf-8" /> <title>Difference</title> <style> h1 { text-align: center; } form { display: grid; place-CONTENT: center; grid-gap: 10px; border: 1px solid black; } form > * { display: grid; grid-template-columns: 180px 1fr; place-content: center; } label { font-family: "Fira Sans", sans-serif; } #button_eg,#checkbox_eg,#radio_eg{ display: flex; justify-content: center; align-items: center; } input[type='image'] { width: 80px; } </style> </head> <body> <h1>Browser Differences</h1> <form> <div id="search_eg"> <label for="site-search">Search the site:</label> <input type="search" id="site-search" name="q" aria-label="Search through site content"> </div> <div id="time_eg"> <label for="appt">Choose a time:</label> <input type="time" id="appt" name="appt" min="9:00" max="18:00" REQUIRED> </div> <div id="url_eg"> <label for="url">Enter an URL:</label> <input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://." size="30" required> </div> <div id="phone_eg"> <label for="phone">Enter your phone:</label> <input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> </div> <div id="month_eg"> <label for="month">Enter a month:</label> <input type="month" id="month" name="month" min="2018-03" value="2019-05"> </div> <div id="email_eg"> <label for="email">Enter your email:</label> <input type="email" id="email" pattern=".+@gmail.com" size="30" required> </div> <div id="number_eg"> <label for="tentacles">Enter a number:</label> <input type="number" id="tentacles" name="tentacles" min="10" max="100"> </div> <div id="range_eg"> <label for="volume">Choose a Range:</label> <input type="range" id="start" name="volume" min="0" max="11"> </div> <div id="color_eg"> <label for="favorite">Choose a color:</label> <input type="color" id="favorite" name="favorite" value="#e66465"> </div> <div id="date_eg"> <label for="date">Select a date:</label> <input type="date" id="date" name="date-start" value="2019-04-22" min="2018-01-01" max="2025-12-31"> </div> <div id="datetime_eg"> <label for="appointment-time">Choose a time:</label> <input type="datetime-local" id="appointment-time" name="appointment-time" value="2019-04-12T19:30" min="2019-04-07T00:00" max="2025-06-14T00:00"> </div> <div id="option_eg"> <label for="profession-select">Choose Your Profession:</label> <select id="profession-select"> <option value="">--Please choose an option--</option> <option value="ENGINEER">Engineer</option> <option value="doctor">Doctor</option> <option value="developer">Developer</option> <option value="architect">Architect</option> <option value="chef">Chef</option> <option value="manager">Manager</option> </select> </div> <div id="text_eg"> <label for="name">Enter your Name:</label> <input type="text" id="name" name="name" required minlength="4" maxlength="12" size="20"> </div> <div id="password_eg"> <label for="pass">Enter Password:</label> <input type="password" id="pass" name="password" minlength="8" required> </div> <div id="img_eg"> <label for="avatar">Choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <div id="radio_eg"> <label>Gender:</label> <div> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">Male</label> </div> <div> <input type="radio" id="FEMALE" name="gender" value="female"> <label for="female">Female</label> </div> <div> <input type="radio" id="unknown" name="gender" value="unknown"> <label for="unknown">Not Specified</label> </div> </div> <div id="checkbox_eg"> <label>Choose your hobbies:</label> <div> <input type="checkbox" id="code" name="code" checked> <label for="code">Coding</label> </div> <div> <input type="checkbox" id="travel" name="travel"> <label for="travel">Travelling</label> </div> <div> <input type="checkbox" id="movies" name="movies"> <label for="movies">Movies</label> </div> </div> <div id="hidden_eg"> <input id="prodId" name="prodId" type="hidden" value="xm234jq"> </div> <div id="button_eg"> <input type="image" id="image" alt="Login" src="login-button.png"> <input type="button" value="Click Me"> <input type="reset" value="Reset"> <input class="styled" type="submit" value="Send Request"> </div> </form> </body> </html> In the case of Safari, the type of month, color, date, and datetime-local are all plain text box because they are not supported. In the case of Firefox, the type of month and datetime-local are all plain text box because they are not supported. The type of color, date are supported by Firefox. In case of chrome, everything is supported. In the case of Internet Explorer 11, the layout even is weird because of poor support for the current implementation of the grid and also missing support for input types month, color, date, and datetime-local. In the case of Edge*, the grid support is there but in a different way. But it supports all input types month, color, date and datetime-local, although the display is different.

Answer»

The HTML and CSS standards are decided by W3C - World Wide Web Consortium. It is this non-government organisation which create rules, and the browser creators(google, mozilla, apple, Microsoft) have to follow them.

Although they follow the W3C standard, they are not bound to follow completely. Besides, each of these browsers was created using a different layout and Javascript engines, so they behave differently.

Firefox uses Gecko (now Quantum), IE uses Trident, Chrome and Safari use Webkit as layout engines.
Similarly, Chrome uses V8, IE uses Chakra and FireFox uses Spidermonkey as their JavaScript engine.

The HTML5 standard, which was recommended in 2014 still is now standardised across browsers. The HTML5 input tags behave differently, with some browsers not even supporting some of them.

We will use the below code, to check the browser differences.

<!DOCTYPE html&GT; <html> <head> <meta charset="utf-8" /> <title>Difference</title> <style> h1 { text-align: center; } form { display: grid; place-CONTENT: center; grid-gap: 10px; border: 1px solid black; } form > * { display: grid; grid-template-columns: 180px 1fr; place-content: center; } label { font-family: "Fira Sans", sans-serif; } #button_eg,#checkbox_eg,#radio_eg{ display: flex; justify-content: center; align-items: center; } input[type='image'] { width: 80px; } </style> </head> <body> <h1>Browser Differences</h1> <form> <div id="search_eg"> <label for="site-search">Search the site:</label> <input type="search" id="site-search" name="q" aria-label="Search through site content"> </div> <div id="time_eg"> <label for="appt">Choose a time:</label> <input type="time" id="appt" name="appt" min="9:00" max="18:00" REQUIRED> </div> <div id="url_eg"> <label for="url">Enter an URL:</label> <input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" required> </div> <div id="phone_eg"> <label for="phone">Enter your phone:</label> <input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required> </div> <div id="month_eg"> <label for="month">Enter a month:</label> <input type="month" id="month" name="month" min="2018-03" value="2019-05"> </div> <div id="email_eg"> <label for="email">Enter your email:</label> <input type="email" id="email" pattern=".+@gmail.com" size="30" required> </div> <div id="number_eg"> <label for="tentacles">Enter a number:</label> <input type="number" id="tentacles" name="tentacles" min="10" max="100"> </div> <div id="range_eg"> <label for="volume">Choose a Range:</label> <input type="range" id="start" name="volume" min="0" max="11"> </div> <div id="color_eg"> <label for="favorite">Choose a color:</label> <input type="color" id="favorite" name="favorite" value="#e66465"> </div> <div id="date_eg"> <label for="date">Select a date:</label> <input type="date" id="date" name="date-start" value="2019-04-22" min="2018-01-01" max="2025-12-31"> </div> <div id="datetime_eg"> <label for="appointment-time">Choose a time:</label> <input type="datetime-local" id="appointment-time" name="appointment-time" value="2019-04-12T19:30" min="2019-04-07T00:00" max="2025-06-14T00:00"> </div> <div id="option_eg"> <label for="profession-select">Choose Your Profession:</label> <select id="profession-select"> <option value="">--Please choose an option--</option> <option value="ENGINEER">Engineer</option> <option value="doctor">Doctor</option> <option value="developer">Developer</option> <option value="architect">Architect</option> <option value="chef">Chef</option> <option value="manager">Manager</option> </select> </div> <div id="text_eg"> <label for="name">Enter your Name:</label> <input type="text" id="name" name="name" required minlength="4" maxlength="12" size="20"> </div> <div id="password_eg"> <label for="pass">Enter Password:</label> <input type="password" id="pass" name="password" minlength="8" required> </div> <div id="img_eg"> <label for="avatar">Choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <div id="radio_eg"> <label>Gender:</label> <div> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">Male</label> </div> <div> <input type="radio" id="FEMALE" name="gender" value="female"> <label for="female">Female</label> </div> <div> <input type="radio" id="unknown" name="gender" value="unknown"> <label for="unknown">Not Specified</label> </div> </div> <div id="checkbox_eg"> <label>Choose your hobbies:</label> <div> <input type="checkbox" id="code" name="code" checked> <label for="code">Coding</label> </div> <div> <input type="checkbox" id="travel" name="travel"> <label for="travel">Travelling</label> </div> <div> <input type="checkbox" id="movies" name="movies"> <label for="movies">Movies</label> </div> </div> <div id="hidden_eg"> <input id="prodId" name="prodId" type="hidden" value="xm234jq"> </div> <div id="button_eg"> <input type="image" id="image" alt="Login" src="login-button.png"> <input type="button" value="Click Me"> <input type="reset" value="Reset"> <input class="styled" type="submit" value="Send Request"> </div> </form> </body> </html>

In the case of Safari, the type of month, color, date, and datetime-local are all plain text box because they are not supported.

In the case of Firefox, the type of month and datetime-local are all plain text box because they are not supported. The type of color, date are supported by Firefox.
In case of chrome, everything is supported.

In the case of Internet Explorer 11, the layout even is weird because of poor support for the current implementation of the grid and also missing support for input types month, color, date, and datetime-local.

In the case of Edge, the grid support is there but in a different way. But it supports all input types month, color, date and datetime-local, although the display is different.

Why do different browsers render HTML/CSS code differently?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment