1 00:00:01,090 --> 00:00:07,540 It's going to be a lesson about Quirk's mode, so essentially what Quirk's mode is, this is our reference 2 00:00:07,540 --> 00:00:13,180 to the technique used by Web browsers for the sake of maintaining backwards compatibility. 3 00:00:13,600 --> 00:00:21,340 So for Web pages that are designed for old Web browsers and that allow them to comply with the new Web 4 00:00:21,340 --> 00:00:21,900 browsers. 5 00:00:22,120 --> 00:00:26,170 So how do Web browsers determine which mode to use for each HTML documents? 6 00:00:26,170 --> 00:00:31,720 Browsers use DOCTYPE at the beginning of the document to decide whether to handle it in Quirk's mode 7 00:00:31,720 --> 00:00:32,870 or standards mode. 8 00:00:33,100 --> 00:00:38,260 So that's why we need to include the DOCTYPE html in the beginning of the document. 9 00:00:38,260 --> 00:00:43,270 Otherwise you're going to go into Quirk's mode and if you do added in, then you can stay in standard 10 00:00:43,270 --> 00:00:46,840 mode to ensure that your pages full standards mode. 11 00:00:46,840 --> 00:00:51,970 Make sure that your page includes DOCTYPE like in the example above. 12 00:00:52,180 --> 00:00:55,000 So that's why we need to include that DOCTYPE. 13 00:00:55,420 --> 00:01:01,390 And sometimes you'll also find that there is a difference between the Quirk's mode and the standard 14 00:01:01,390 --> 00:01:01,900 mode. 15 00:01:02,170 --> 00:01:05,760 And sometimes when it comes to the styling and the page size. 16 00:01:06,070 --> 00:01:07,930 So essentially the DOCTYPE. 17 00:01:08,910 --> 00:01:17,250 HTML indicates that this is HTML5, so that the browser is renting out HTML five code and. 18 00:01:24,570 --> 00:01:31,260 There's a full list of quirks within the quirks mode that you can check out Mozilla Developer Network, 19 00:01:31,590 --> 00:01:33,960 so include the link in the next lesson. 20 00:01:34,290 --> 00:01:37,320 So there's miscellaneous end style issues. 21 00:01:37,650 --> 00:01:44,130 So you've got the orphan list items and tables and a whole bunch of weird things that could possibly 22 00:01:44,130 --> 00:01:46,150 happen within the quirk's mode. 23 00:01:46,530 --> 00:01:54,240 So we've got the block and inline code and one of them is that it doesn't handle the page size the same 24 00:01:54,240 --> 00:01:54,500 way. 25 00:01:55,200 --> 00:02:00,720 So we did have an example in one of our earlier examples when we were creating the game. 26 00:02:00,930 --> 00:02:09,270 And we've got the game screen and if you're including the HTML docs, so what happens when you include 27 00:02:09,270 --> 00:02:09,480 it? 28 00:02:09,690 --> 00:02:17,040 You actually don't get the playable game area and if you remove out the duct tape HTML, so if you go 29 00:02:17,040 --> 00:02:21,720 into Quirk's mode, it's actually going to load the game and then you can click the welcome message 30 00:02:21,720 --> 00:02:23,500 and you can drive the car in the game. 31 00:02:23,850 --> 00:02:30,000 So this is one of the lessons that we had in the earlier lessons and the was functioning and Quirk's 32 00:02:30,000 --> 00:02:30,290 mode. 33 00:02:30,510 --> 00:02:37,230 So there is a way to fix it and to get it back into standard mode so that it does work properly and 34 00:02:37,230 --> 00:02:38,340 as expected. 35 00:02:38,580 --> 00:02:41,670 And that's by adding in some styling values. 36 00:02:41,910 --> 00:02:48,870 And as mentioned within the quirk's mode, when you are using some of the blocks and inline layout, 37 00:02:49,440 --> 00:02:54,060 there are times that it's not going to get the right height calculations. 38 00:02:54,270 --> 00:02:58,880 And this is actually one of those instances when it's not getting the right height. 39 00:02:59,160 --> 00:03:02,130 So we need to set and it's expecting a full height. 40 00:03:02,460 --> 00:03:11,340 So we're going to set the HTML, the body, and as well as the game element to have a height value and 41 00:03:11,340 --> 00:03:14,700 the height value that we're going to apply is going to be one hundred vertical height. 42 00:03:15,150 --> 00:03:16,920 So 100 vertical height. 43 00:03:17,730 --> 00:03:23,070 And also we're going to set a minimum height for it so that it's always going to take up at least one 44 00:03:23,070 --> 00:03:24,170 hundred vertical height. 45 00:03:24,630 --> 00:03:31,560 So essentially what we're doing is to the main containers of the game that we're applying a minimum 46 00:03:31,560 --> 00:03:37,170 height to, and it's going to take up the full screen height and that's going to force and allow us 47 00:03:37,170 --> 00:03:39,170 to be able to show the content that's in sight. 48 00:03:39,450 --> 00:03:46,440 So when we add that in and we refresh, everything works as expected and let's go ahead and add in and 49 00:03:46,650 --> 00:03:49,960 even try to remove the DOCTYPE and we'll see what happens. 50 00:03:50,220 --> 00:03:52,480 So again, going back into Quirk's mode. 51 00:03:52,710 --> 00:03:57,930 So once we add that styling and it doesn't matter whether we're in Quirk's motor standard mode, the 52 00:03:57,930 --> 00:04:00,570 clock, the code will all work the same way. 53 00:04:02,490 --> 00:04:08,190 And if you want to find out more about the quirk's mode, you can check out at the Mozilla Developer 54 00:04:08,190 --> 00:04:14,790 Network more information about how the DOCTYPE is handled within each HTML5 documents.