1 00:00:00,000 --> 00:00:03,990 One of the most frequent questions I get from my students is, why does my design 2 00:00:04,000 --> 00:00:07,990 look this way in browser X while looking another way in browser Y? 3 00:00:08,000 --> 00:00:12,990 I mean if the pages are structured the same and they are both using the same 4 00:00:13,000 --> 00:00:15,990 CSS, shouldn't they look the same? 5 00:00:16,000 --> 00:00:17,990 Well, in a perfect world they would. 6 00:00:18,000 --> 00:00:21,990 Unfortunately, the world of web browsers is far from perfect. 7 00:00:22,000 --> 00:00:26,990 The reason that browsers render pages differently has everything to do with 8 00:00:27,000 --> 00:00:28,990 something we call a rendering engine. 9 00:00:29,000 --> 00:00:33,990 Every browser has its own rendering engine that it uses to parse your code and 10 00:00:34,000 --> 00:00:36,990 determine how it's supposed to display. 11 00:00:37,000 --> 00:00:40,990 Since most browsers developed independently of each other, there are multiple 12 00:00:41,000 --> 00:00:44,990 rendering engines. Each one has slightly different parsers, preferences, and 13 00:00:45,000 --> 00:00:48,990 policies that determine how your content is rendered. 14 00:00:49,000 --> 00:00:53,990 As a designer, it's important to understand which rendering engines are used for 15 00:00:54,000 --> 00:00:57,990 various browsers and how they differ when laying out pages and content. 16 00:00:58,000 --> 00:01:03,990 The four most common rendering engines are Trident, Presto, Gecko, and WebKit. 17 00:01:04,000 --> 00:01:08,990 Microsoft developed the Trident rendering engine and as such, it's a proprietary 18 00:01:09,000 --> 00:01:11,990 engine that's used in a multitude of browsers and web clients. 19 00:01:12,000 --> 00:01:15,990 Internet Explorer and most AOL browsers use Trident. 20 00:01:16,000 --> 00:01:20,990 Presto is another proprietary engine, developed by Opera software for their 21 00:01:21,000 --> 00:01:23,990 browsers and licensed to other devices. 22 00:01:24,000 --> 00:01:27,990 Gecko is an open-source rendering engine, originally developed by Netscape, but 23 00:01:28,000 --> 00:01:32,990 released to the Open Source Mozilla project, which then continued development. 24 00:01:33,000 --> 00:01:35,990 It powers popular browsers like Firefox and Camino. 25 00:01:36,000 --> 00:01:40,990 WebKit is another open-source rendering engine developed by Apple, 26 00:01:41,000 --> 00:01:42,990 Google, Nokia, and others. 27 00:01:43,000 --> 00:01:47,990 It drives browsers such as Apple's Safari browser and Google's Chrome. 28 00:01:48,000 --> 00:01:51,990 It's worth noting that these rendering engines are still being developed, 29 00:01:52,000 --> 00:01:55,990 and older versions of the browsers will have older versions of these rendering engines. 30 00:01:56,000 --> 00:02:00,990 That's why designers should test their pages in not just multiple browsers, but 31 00:02:01,000 --> 00:02:03,990 multiple versions of the same browser as well. 32 00:02:04,000 --> 00:02:07,990 Now thankfully, there aren't as many differences now as there have been in the past. 33 00:02:08,000 --> 00:02:12,990 This convergence in browser behavior has been driven in large part by something 34 00:02:13,000 --> 00:02:14,990 called web standards. 35 00:02:15,000 --> 00:02:18,990 The movement towards web standards started in the late '90s with organizations 36 00:02:19,000 --> 00:02:23,990 such as the Web Standards Project, which began as a group of designers and 37 00:02:24,000 --> 00:02:27,990 developers frustrated with the current state of browser development. 38 00:02:28,000 --> 00:02:31,990 They, and other organizations and corporations, began pressuring browser 39 00:02:32,000 --> 00:02:36,990 developers to adopt the recommendations of the World Wide Web Consortium. 40 00:02:37,000 --> 00:02:42,990 The World Wide Web Consortium, or W3C, began in 1994 and attended the 41 00:02:43,000 --> 00:02:46,990 standardize web protocols and technologies by issuing a series of 42 00:02:47,000 --> 00:02:48,990 recommendations for everyone to follow. 43 00:02:49,000 --> 00:02:52,990 In the end, the outcry from the design and development community, along with the 44 00:02:53,000 --> 00:02:57,990 rise of open-source browsers such as Firefox, helped other manufacturers 45 00:02:58,000 --> 00:03:01,990 realize the advantages of supporting web standards. 46 00:03:02,000 --> 00:03:05,990 So what makes understanding web standards so important to designers in general, 47 00:03:06,000 --> 00:03:07,990 and in CSS in particular? 48 00:03:08,000 --> 00:03:12,990 Well, if most modern browsers support web standards--to a degree, they all do-- 49 00:03:13,000 --> 00:03:15,990 that means that by learning these standards and staying current with their 50 00:03:16,000 --> 00:03:20,990 development, you ensure that your sites will have a consistent design and user 51 00:03:21,000 --> 00:03:23,990 experience across multiple browsers. 52 00:03:24,000 --> 00:03:26,990 To a degree, that's kind of where we find ourselves now. 53 00:03:27,000 --> 00:03:31,990 As of this recording, the current versions of Firefox, Safari, Chrome, Opera, 54 00:03:32,000 --> 00:03:36,990 and Internet Explorer have far more in common with how they display pages than 55 00:03:37,000 --> 00:03:37,990 they have differences. 56 00:03:38,000 --> 00:03:40,990 Now, that doesn't mean that you won't eventually have to deal some minor 57 00:03:41,000 --> 00:03:45,990 browser inconsistencies, or that you still don't need to account for older browser versions. 58 00:03:46,000 --> 00:03:49,990 I mean, you do, but I may be worried about how a page looks in Netscape 59 00:03:50,000 --> 00:03:53,990 Navigator 4 or Internet Explorer 5.5 for many years. 60 00:03:54,000 --> 00:03:57,990 Soon enough dealing with a majority of browser inconsistencies will be a thing of the past. 61 00:03:58,000 --> 00:04:03,990 Of course, that just leaves us to the brave new world of mobile development that 62 00:04:04,000 --> 00:04:04,990 we now need to worry about. 63 00:04:05,000 --> 00:04:08,990 The current state of mobile browsers is very similar to what we experienced in 64 00:04:09,000 --> 00:04:10,990 the mid-'90s with desktop browsers. 65 00:04:11,000 --> 00:04:15,990 I have no doubt that mobile devices will experience a similar maturation as they 66 00:04:16,000 --> 00:04:18,990 begin to adopt web standards in a consistent way. 67 00:04:19,000 --> 00:04:22,990 Until then, the best thing that you can do is become familiar with the 68 00:04:23,000 --> 00:04:26,990 differences in CSS rendering from one browser and one device to another. 69 00:04:27,000 --> 00:04:30,990 Later on in this title, I'll pass along some valuable online resources that can 70 00:04:31,000 --> 00:04:41,000 help you keep track of those differences and how to deal with them.