It's going to be a lesson about Quirk's mode, so essentially what Quirk's mode is, this is our reference
to the technique used by Web browsers for the sake of maintaining backwards compatibility.
So for Web pages that are designed for old Web browsers and that allow them to comply with the new Web
browsers.
So how do Web browsers determine which mode to use for each HTML documents?
Browsers use DOCTYPE at the beginning of the document to decide whether to handle it in Quirk's mode
or standards mode.
So that's why we need to include the DOCTYPE html in the beginning of the document.
Otherwise you're going to go into Quirk's mode and if you do added in, then you can stay in standard
mode to ensure that your pages full standards mode.
Make sure that your page includes DOCTYPE like in the example above.
So that's why we need to include that DOCTYPE.
And sometimes you'll also find that there is a difference between the Quirk's mode and the standard
mode.
And sometimes when it comes to the styling and the page size.
So essentially the DOCTYPE.
HTML indicates that this is HTML5, so that the browser is renting out HTML five code and.
There's a full list of quirks within the quirks mode that you can check out Mozilla Developer Network,
so include the link in the next lesson.
So there's miscellaneous end style issues.
So you've got the orphan list items and tables and a whole bunch of weird things that could possibly
happen within the quirk's mode.
So we've got the block and inline code and one of them is that it doesn't handle the page size the same
way.
So we did have an example in one of our earlier examples when we were creating the game.
And we've got the game screen and if you're including the HTML docs, so what happens when you include
it?
You actually don't get the playable game area and if you remove out the duct tape HTML, so if you go
into Quirk's mode, it's actually going to load the game and then you can click the welcome message
and you can drive the car in the game.
So this is one of the lessons that we had in the earlier lessons and the was functioning and Quirk's
mode.
So there is a way to fix it and to get it back into standard mode so that it does work properly and
as expected.
And that's by adding in some styling values.
And as mentioned within the quirk's mode, when you are using some of the blocks and inline layout,
there are times that it's not going to get the right height calculations.
And this is actually one of those instances when it's not getting the right height.
So we need to set and it's expecting a full height.
So we're going to set the HTML, the body, and as well as the game element to have a height value and
the height value that we're going to apply is going to be one hundred vertical height.
So 100 vertical height.
And also we're going to set a minimum height for it so that it's always going to take up at least one
hundred vertical height.
So essentially what we're doing is to the main containers of the game that we're applying a minimum
height to, and it's going to take up the full screen height and that's going to force and allow us
to be able to show the content that's in sight.
So when we add that in and we refresh, everything works as expected and let's go ahead and add in and
even try to remove the DOCTYPE and we'll see what happens.
So again, going back into Quirk's mode.
So once we add that styling and it doesn't matter whether we're in Quirk's motor standard mode, the
clock, the code will all work the same way.
And if you want to find out more about the quirk's mode, you can check out at the Mozilla Developer
Network more information about how the DOCTYPE is handled within each HTML5 documents.