1 00:00:08,753 --> 00:00:09,800 Hallo Leute. 2 00:00:09,800 --> 00:00:12,990 Today we're going to talk about browser capabilities and 3 00:00:12,990 --> 00:00:16,960 what you can do to make sure that your sites have a consistent appearance, 4 00:00:16,960 --> 00:00:19,666 regardless of how people are accessing it. 5 00:00:19,666 --> 00:00:24,990 So even though HTML5 has really been pushing the browser developers to all 6 00:00:24,990 --> 00:00:29,120 come to this consistent implementation, they really differ in display and 7 00:00:29,120 --> 00:00:31,908 adherence to the new tags that are coming out. 8 00:00:31,908 --> 00:00:35,850 And as browsers update and change and new browsers come out, you're going to have to 9 00:00:35,850 --> 00:00:40,510 keep in mind that not everybody is looking at your page the same way that you are. 10 00:00:40,510 --> 00:00:44,730 So, it's your responsibility to make sure that your page works for a wide audience. 11 00:00:44,730 --> 00:00:47,980 And while we've been talking a lot about accessibility, and different ways to 12 00:00:47,980 --> 00:00:53,380 access the web, it even comes down to the most basic browser implementations. 13 00:00:53,380 --> 00:00:57,370 So first, let's talk about handling these stylistic differences. 14 00:00:57,370 --> 00:01:00,620 The easiest way to eliminate browser differences is for 15 00:01:00,620 --> 00:01:03,440 you to make something called a default style sheet. 16 00:01:03,440 --> 00:01:06,720 And in that style sheet, you would actually go in and 17 00:01:06,720 --> 00:01:11,500 wipe out any of the browser defaults for the different elements that are styled. 18 00:01:11,500 --> 00:01:15,800 So when you go in and you make it you would take, P, H1, H2, all the headings, 19 00:01:15,800 --> 00:01:19,370 all the different semantic tags and you would go in and you would say, 20 00:01:19,370 --> 00:01:22,230 I want them to have padding of zero and margin of zero. 21 00:01:22,230 --> 00:01:25,480 Even my list items shouldn't have any decoration at all. 22 00:01:25,480 --> 00:01:29,190 So while this will ensure that you have a very consistent look, 23 00:01:29,190 --> 00:01:33,620 I have to admit it's going to make you page look absolutely horrible. 24 00:01:33,620 --> 00:01:35,520 But that's the price you'll pay so 25 00:01:35,520 --> 00:01:39,020 that when you start writing your own styling rules, you can improve and 26 00:01:39,020 --> 00:01:42,650 inevitably improve and your page is gonna look better and better. 27 00:01:42,650 --> 00:01:46,310 Otherwise, if you don't use what we call this default style sheet, 28 00:01:46,310 --> 00:01:48,960 you're gonna design your page, and it's gonna be really hard for 29 00:01:48,960 --> 00:01:54,250 you to remember if you've actually checked off each element that you're using. 30 00:01:54,250 --> 00:01:57,100 One of the other things we want to talk about is handling what we call 31 00:01:57,100 --> 00:01:58,520 unsupported properties. 32 00:01:58,520 --> 00:02:02,810 So first, we know that all browsers don't support all the HTML5 tags. 33 00:02:02,810 --> 00:02:06,140 You've seen this already, in some of the coding you've done with me. 34 00:02:06,140 --> 00:02:10,780 In the same way, not all the browsers support all the CSS3 properties. 35 00:02:10,780 --> 00:02:13,770 There are some properties that look really cool on some browsers, but 36 00:02:13,770 --> 00:02:16,720 they aren't handled by default in other browsers. 37 00:02:16,720 --> 00:02:18,560 But there is a way around that in many cases. 38 00:02:18,560 --> 00:02:22,100 And what this is, is that the browsers are offering prefixes. 39 00:02:22,100 --> 00:02:26,610 So sometimes they call them browser prefixes, sometimes vendor prefixes, but 40 00:02:26,610 --> 00:02:29,310 the important thing is that it's a really quick fix for 41 00:02:29,310 --> 00:02:32,900 handling all the unsupported options that you might come across. 42 00:02:32,900 --> 00:02:37,260 Now, when I first saw browser prefixes, I was completely intimidated. 43 00:02:37,260 --> 00:02:39,860 I didn't know what was going on, and it looked a little weird, 44 00:02:39,860 --> 00:02:42,360 and I was feeling lazy and I didn't wanna deal with it. 45 00:02:42,360 --> 00:02:46,840 But I'm here to tell you, it's actually very, very easy to use these prefixes. 46 00:02:46,840 --> 00:02:49,340 So, let's take a look at what I'm talking about. 47 00:02:49,340 --> 00:02:53,546 You've been using different properties and the browser's hopefully just been working. 48 00:02:53,546 --> 00:02:58,888 But now, for some of those properties, you're going to want and add a prefix or 49 00:02:58,888 --> 00:03:04,350 a little bit in front of it, such as webkit, moz, ms, or o for Opera. 50 00:03:04,350 --> 00:03:08,980 Each one of these prefixes say, hey, if you're on this particular browser, 51 00:03:08,980 --> 00:03:13,635 this is what I need you to do to get the look that the designer is going for. 52 00:03:13,635 --> 00:03:16,535 So what are some of these properties that are often unsupported? 53 00:03:16,535 --> 00:03:17,915 They include column-count, 54 00:03:17,915 --> 00:03:21,535 which is a way to add multiple columns into your paragraphs or divs. 55 00:03:21,535 --> 00:03:24,515 It's a really nice way to break up your text that's responsive. 56 00:03:24,515 --> 00:03:28,855 So if somebody resizes the page, the paragraphs actually resize. 57 00:03:28,855 --> 00:03:31,825 We have another thing called border-radius, which people really love to 58 00:03:31,825 --> 00:03:35,119 use because it adds a little rounded edge to the borders of your elements. 59 00:03:36,170 --> 00:03:38,060 A third option would be gradient. 60 00:03:38,060 --> 00:03:41,980 And gradient is a very cool kind of background color that lets color go 61 00:03:41,980 --> 00:03:45,220 from one shade of blue to maybe gray or red or anything like that. 62 00:03:45,220 --> 00:03:47,440 And it gives it a different appearance. 63 00:03:47,440 --> 00:03:48,860 Now there's no way for 64 00:03:48,860 --> 00:03:54,430 you to really know which properties are supported and which ones aren't. 65 00:03:54,430 --> 00:03:57,094 So I have this link here to a site called caniuse.com. 66 00:03:57,094 --> 00:04:01,030 And what caniuse.com does is it lists the different properties and 67 00:04:01,030 --> 00:04:04,820 it tells you which browsers support them and which ones need the prefixes. 68 00:04:04,820 --> 00:04:08,940 So it's a good idea to check that site out as you start developing your page. 69 00:04:08,940 --> 00:04:12,546 But for now, let's go ahead and look at an example. 70 00:04:12,546 --> 00:04:15,580 So in this example, I have a file called prefixes.html. 71 00:04:15,580 --> 00:04:21,450 And I just wanna show you quickly what it looks like on both Chrome over here, 72 00:04:21,450 --> 00:04:24,010 and also on Safari. 73 00:04:24,010 --> 00:04:25,400 Sie sehen sehr ähnlich aus. 74 00:04:25,400 --> 00:04:29,830 But there are little spaces where the font might not match exactly, or 75 00:04:29,830 --> 00:04:32,040 some of the spacing might not match exactly. 76 00:04:32,040 --> 00:04:34,650 So if I wanted to get rid of that, if I really wanted to make sure that 77 00:04:34,650 --> 00:04:39,050 the pages look exactly the same, what I can do is add a default style sheet. 78 00:04:39,050 --> 00:04:41,052 So let's go down over here, and 79 00:04:41,052 --> 00:04:46,890 I'm gonna say hey I want to use my default style sheet. 80 00:04:48,000 --> 00:04:51,690 And what that looks like is it's a really crazy file where I've listed 81 00:04:51,690 --> 00:04:52,970 all the different elements. 82 00:04:52,970 --> 00:04:54,510 And then after that, put in things like, 83 00:04:54,510 --> 00:04:56,970 I don't want any padding, I don't want any margin. 84 00:04:56,970 --> 00:04:59,050 If I've got lists, get rid of the list style. 85 00:04:59,050 --> 00:05:01,430 Make this really as ugly as you can. 86 00:05:01,430 --> 00:05:05,377 So if I go back over here, you might not see a huge difference because the browsers 87 00:05:05,377 --> 00:05:10,280 are already pretty plain, but you can see things move over slightly. 88 00:05:10,280 --> 00:05:12,040 We get rid of a little bit of stuff. 89 00:05:12,040 --> 00:05:14,990 And in the same way, when I refresh the Safari, 90 00:05:14,990 --> 00:05:17,760 they're going to look a little bit more similar. 91 00:05:17,760 --> 00:05:19,450 So now, let's go ahead and 92 00:05:19,450 --> 00:05:22,658 look at that example where some of the properties aren't supported. 93 00:05:22,658 --> 00:05:26,800 And I'm gonna go back over to my HTML file, and I'm going to say, hey, I wanna 94 00:05:26,800 --> 00:05:30,980 use my style sheet to go ahead and style some things that aren't always supported. 95 00:05:30,980 --> 00:05:33,590 And the things that I'm talking about specifically is, 96 00:05:33,590 --> 00:05:36,586 we're going to start with this idea of column-count. 97 00:05:36,586 --> 00:05:40,530 How column-count and column-gap work is you tell the browser 98 00:05:40,530 --> 00:05:44,710 how many columns you want and how much space you want between those columns. 99 00:05:44,710 --> 00:05:49,780 So now, when I refresh, you can see it's gone from being 100 00:05:49,780 --> 00:05:55,080 all one long kinda block paragraph to that everything's split up. 101 00:05:55,080 --> 00:05:56,920 And it's really cool because it's dynamic. 102 00:05:56,920 --> 00:06:00,270 If I re-size the browser, everything kinda moves around. 103 00:06:00,270 --> 00:06:03,020 And this is a really cool thing way to do it. 104 00:06:03,020 --> 00:06:06,960 One of the other things I'd like to add just as something to look at, is this idea 105 00:06:06,960 --> 00:06:12,240 of instead of having a square, I want to kinda round the edges a little bit. 106 00:06:12,240 --> 00:06:17,640 So you do that by adding in what's called the border-radius. 107 00:06:17,640 --> 00:06:20,830 Now I'm gonna stop before I refresh the page, cuz I wanna point something out to 108 00:06:20,830 --> 00:06:24,560 you in case you're as intimidated as I was when I first started doing this. 109 00:06:24,560 --> 00:06:29,440 The border-radius is just a simple property that's been around for a while. 110 00:06:29,440 --> 00:06:32,120 And you can see it right here, and you give it a value. 111 00:06:32,120 --> 00:06:35,290 Same with column-count and column-gap. 112 00:06:35,290 --> 00:06:40,080 This whole idea of adding prefixes just means, take your regular property and 113 00:06:40,080 --> 00:06:41,630 slap these prefixes on it. 114 00:06:41,630 --> 00:06:46,030 You don't need to learn anything new, you just need to remember the prefix names. 115 00:06:46,030 --> 00:06:48,290 And so I want you to really try to embrace this, and 116 00:06:48,290 --> 00:06:51,190 realize you're not doing anything too spectacular. 117 00:06:51,190 --> 00:06:54,090 So now that I've done this, I've made it 25. 118 00:06:54,090 --> 00:06:55,200 And I'm gonna go ahead and refresh it. 119 00:06:55,200 --> 00:06:58,810 And as you can see, I've kind of curved the different edges around the side, 120 00:06:58,810 --> 00:07:00,570 which is pretty cool. 121 00:07:00,570 --> 00:07:04,040 The last thing I'm going to do is add a gradient to the color. 122 00:07:04,040 --> 00:07:06,470 So right now I'm a consistent blue color. 123 00:07:06,470 --> 00:07:10,230 And it's important that no matter what you give a kind of background color, 124 00:07:10,230 --> 00:07:14,650 that you would like to be used, is the case the gradient isn't happening. 125 00:07:14,650 --> 00:07:18,540 But now for linear gradient, you're simply giving two colors that you'd like to be 126 00:07:18,540 --> 00:07:22,180 seeing and kind of say how much you want at the beginning and the end. 127 00:07:22,180 --> 00:07:24,230 So again, I have regular blue. 128 00:07:24,230 --> 00:07:28,760 And now when I refresh, I go from a blue to a kind of light grey. 129 00:07:28,760 --> 00:07:32,520 This is cool and it's a lot of code and it's a lot of fun to play with it. 130 00:07:32,520 --> 00:07:36,710 So I wanna remind you that when you're developing, don't try to memorize things. 131 00:07:36,710 --> 00:07:38,320 Don't try to remember how to do everything. 132 00:07:38,320 --> 00:07:41,590 I'm gonna right-click on here, and do Inspect Element. 133 00:07:41,590 --> 00:07:45,050 Because if you decide later that's too much of a curve, or you don't like that 134 00:07:45,050 --> 00:07:48,920 color, what you don't wanna do is type, save, refresh, type, save, refresh. 135 00:07:48,920 --> 00:07:50,070 It gets really annoying. 136 00:07:50,070 --> 00:07:53,730 So instead, I'm gonna go right here to my section and I'm gonna look, 137 00:07:53,730 --> 00:07:58,440 and you can see in Inspect Element that it said I didn't use the moz prefix, and 138 00:07:58,440 --> 00:08:00,980 I didn't use the Opera prefix, cuz I didn't need to. 139 00:08:00,980 --> 00:08:02,120 I'm Chrome. 140 00:08:02,120 --> 00:08:05,421 What I can do is come down here to the border-radius and change it. 141 00:08:05,421 --> 00:08:10,350 Instead of 25 pixels, if I want less of a curve, I can make it 5 pixels. 142 00:08:10,350 --> 00:08:12,210 You can see it happening in real time. 143 00:08:12,210 --> 00:08:16,760 If you wanna make it look crazy, you can make it 50 pixels. 144 00:08:16,760 --> 00:08:18,587 You can also use percents if you like. 145 00:08:18,587 --> 00:08:20,498 So I'm go ahead and put in 15%. 146 00:08:20,498 --> 00:08:24,110 So it's kinda to play with all these thing dynamically and then 147 00:08:24,110 --> 00:08:29,660 once you get a value that you really like, copy it and put it into your CSS file. 148 00:08:29,660 --> 00:08:33,120 So browser prefixes is just something to play with that can be fun. 149 00:08:33,120 --> 00:08:34,310 It can be frustrating. 150 00:08:34,310 --> 00:08:38,250 But the most important thing is that you should realize it's very straightforward. 151 00:08:38,250 --> 00:08:41,690 One of the things that you might do as you're adding prefixes is that realize, 152 00:08:41,690 --> 00:08:45,930 for right now, the easiest thing for you to do is add those prefixes by hand. 153 00:08:45,930 --> 00:08:48,770 Put in the property that you wanna put in, say border-radius. 154 00:08:48,770 --> 00:08:52,190 And then go in and add webkit, moz, the different things like that. 155 00:08:53,250 --> 00:08:55,110 When you start using prefixes, 156 00:08:55,110 --> 00:08:57,410 what you're going to do is you're going to add them by hand. 157 00:08:57,410 --> 00:09:01,090 If you know that you have border-radius, you're gonna go ahead and do border-radius 158 00:09:01,090 --> 00:09:05,540 and then add that moz, the webkit, different things like that by hand. 159 00:09:05,540 --> 00:09:08,350 As you become more experienced and maybe you wanna try different things, 160 00:09:08,350 --> 00:09:12,260 there are ways to automate the addition of those prefixes. 161 00:09:12,260 --> 00:09:14,540 If you're using an editor such as Sublime, 162 00:09:14,540 --> 00:09:18,180 you can actually put little packages on there where you can control whether or not 163 00:09:18,180 --> 00:09:22,730 you want Sublime to add on those packages whenever they see different properties. 164 00:09:22,730 --> 00:09:27,070 You can also use outside programs that will dynamically change your code 165 00:09:27,070 --> 00:09:31,270 as people load it to only put in the prefixes that they need. 166 00:09:31,270 --> 00:09:34,290 If you remember in my example, even though I was using Chrome, 167 00:09:34,290 --> 00:09:37,790 my style sheet still had all the different prefixes. 168 00:09:37,790 --> 00:09:40,520 This would automatically only add the ones you need. 169 00:09:40,520 --> 00:09:44,050 Again, these are kind of cool, but let's not worry about them right now. 170 00:09:44,050 --> 00:09:46,700 For now, let's focus on the basics. 171 00:09:46,700 --> 00:09:48,020 So to review, when you start coding, 172 00:09:48,020 --> 00:09:52,510 when you start making style sheets, you're going to want to 173 00:09:52,510 --> 00:09:57,050 think about using a default style sheet to remove those stylistic differences. 174 00:09:57,050 --> 00:10:00,140 And when you do that, I need you to think about some things. 175 00:10:00,140 --> 00:10:05,150 So first, should that default style sheet be internal or external? 176 00:10:05,150 --> 00:10:07,300 And hopefully you all said external. 177 00:10:07,300 --> 00:10:09,120 Because if it's internal, 178 00:10:09,120 --> 00:10:12,820 it's going to override all the other things you've worked so hard to do. 179 00:10:12,820 --> 00:10:16,690 In that same way, when you put a link to your default style sheet, 180 00:10:16,690 --> 00:10:18,190 make sure it's first. 181 00:10:18,190 --> 00:10:22,190 Because the way browsers work is it goes style sheet, style sheet, style sheet. 182 00:10:22,190 --> 00:10:25,030 So if you put yours first and then the default style sheet, 183 00:10:25,030 --> 00:10:27,520 it's gonna overwrite everything cool that you've done so far. 184 00:10:28,840 --> 00:10:31,410 Finally, remember that browser prefixes 185 00:10:31,410 --> 00:10:35,330 can help remove some of those differences caused by unsupported options. 186 00:10:35,330 --> 00:10:37,510 But you don't wanna overuse it. 187 00:10:37,510 --> 00:10:41,820 Don't slap a prefix on every single property just because you're not sure. 188 00:10:41,820 --> 00:10:46,610 Instead, you wanna go to those sites like can I use and test it out and 189 00:10:46,610 --> 00:10:49,870 really make an educated guess as to whether or not you wanna use it. 190 00:10:49,870 --> 00:10:52,590 You're really getting far in this whole web development idea. 191 00:10:52,590 --> 00:10:55,450 And hopefully you're styling some really cool pages. 192 00:10:55,450 --> 00:10:58,870 And I want you to be able to use all the different properties that are out there. 193 00:10:58,870 --> 00:11:02,410 So don't be intimidated by the idea that you might have to use style sheets that 194 00:11:02,410 --> 00:11:05,370 you haven't written or that you have to use browser prefixes. 195 00:11:05,370 --> 00:11:09,230 You've totally got this and I know that you can code using these different tools. 196 00:11:09,230 --> 00:11:09,770 So good luck.