It's just a curiosity I'm having right now. In Eclipse this is the <head>
section that came defined on a New Facelet Template for instance, but for the most template is the same thing :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
..
</head>
I would like to user a more clear code on it, so I change to :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
..
</head>
It works fine in development, but I was wondering if this kind of approach would give any problem in the future, through the many browsers or device (mobile).
That's the HTML5 doctype and it should work just fine in all browsers, including IE6.
JSF is officially specified to produce XHTML 1.0 compliant markup (with here and there only a few violations in the implementations which is fixed in JSF 2.2 and/or are manageable by context params). JSF can by design not produce non-XML sytnax (e.g. <br>
instead of <br/>
) and therefore the old HTML4 doctype is in no way compatible with JSF-produced HTML output (that is, when you respect the standards and/or fear the W3 validator; however, most if not all browsers are very forgiving on it). In contrary to the old HTML4 doctype, the HTML5 doctype allows XML syntax and is therefore compatible with XHTML doctypes. JSF pages can therefore be authored with HTML5 doctype.
The doctype is only of importance for how the webbrowser interprets and presents the HTML markup (as produced by JSF in your specific case, but the HTML does not necessarily need to be produced by JSF and thus browser's presentation is technically completely unrelated to JSF). Escpecially Microsoft IE has a major problem with certain doctypes or a complete lack of doctype. At the bottom of this page you can find a concise overview of browser behaviour in combination with certain doctypes. There are three standard behaviours:
width
and height
then incorrectly covers the padding
and border
.In your particular case, with the change from XHTML 1.0 transitional doctype to HTML5 doctype, Firefox, Chrome, Safari and IE>=8 will go from "A" to "S". So, you should definitely review the browser's presentation of your website as to padding of images in table cells if you intend a pixel-perfect design.
As to the importance of the doctype in IE, here's a piece of HTML which demonstrates the box model bug triggered by "Q" in IE6-9 (note that this does not manifest in IE10 anymore):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove DOCTYPE to trigger quirksmode</title>
<style>
#box {
background: yellow;
width: 100px;
padding: 20px;
border: 20px solid black;
margin: 20px;
}
</style>
</head>
<body>
<div id="box">box</div>
</body>
</html>
Copy'n'paste'n'run it. With <!DOCTYPE html>
present, you'll see a rectangle. Without the doctype line you'll see a genuine square (in IE10 you need in the webdeveloper toolset (press F12) to change the "Browser mode" to e.g. IE9 in order to see it).
The best solution would be to use the detailed declaration only once in the index template and include the header & body templates there. If that's not possible, you can leave this declaration away. It's "standard", but not really necessary!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With