Original subtitles

1 1

So far we have developed a website 2

2

and used the Google Chrome browser to see how it looks. 3

3

In an ideal world we would be able to create 4

4

our site using everything we've learned so far. 5

5

And the website would look great in any browser. 6

6

Now, unfortunately each browser interprets 7

7

HTML and CSS in a slightly different way. 8

8

Which means that a website may appear 9

9

differently to visitors using different browsers. 10

10

So, once we've created our website we have to 11

11

review how it appears on multiple browsers. 12

12

This is very very important. 13

13

The most popular browsers right now 14

14

are Google Chrome, Internet Explorer, Firefox and Safari. 15

15

Here we have the world wide market share 16

16

of all browsers as of January 2015. 17

17

And here we see that Google Chrome 18

18

has almost 50% of the market share. 19

19

Now the first thing we have to do in 20

20

order to make CSS3 work the same way 21

21

in every browser is prefixing some CSS3 properties. 22

22

And CSS3 browser prefixes are a way 23

23

for browser makers to add support 24

24

for new CSS features in a kind of testing period. 25

25

Here are CSS browser prefixes for different browsers. 26

26

So it's webkit for Android, Chrome, IOS and Safari browsers 27

27

moz for Firefox, ms for Internet Explorer and o for Opera. 28

28

And here is an example for the border radius property 29

29

with different browser prefixes. 30

30

With this code the boarder radius property 31

31

will work even on older browsers of Chrome or Firefox. 32

32

Because the older versions of the modern 33

33

browsers always cause the biggest 34

34

problems to us web developers. 35

35

Now it seems a little bit boring 36

36

to add all these prefixes manually, right? 37

37

Good news is we don't have to. 38

38

Because there is another great bracket 39

39

extension that does the job for us. 40

40

So let's go back to brackets and install it. 41

41

So, the extension we're going to install 42

42

is called autoprefixer. 43

43

So again hit here to extensions button 44

44

and now right here we write autoprefixer. 45

45

So then you hit install here. 46

46

I already have it installed so I will not do it. 47

47

So I hope you have it installed by now. 48

48

And now it's very very easy. 49

49

We just select all the code hitting command a or control a. 50

50

And then we come to this edit menu 51

51

and down here we have autoprefix selection. 52

52

So we hit that button and now all 53

53

the relevant properties are prefixed. 54

54

So let's scroll down here and see what we have for instance. 55

55

So here, the transition property was prefixed for webkit. 56

56

And this extension is actually previously marked 57

57

because it only prefixes the properties 58

58

that need prefixing in each browser. 59

59

So in this case all webkit browsers. 60

60

Such as Chrome, IOS, Android and Safari. 61

61

So again we have the webkit transition 62

62

and we show what else we have. 63

63

Here we have to transform property 64

64

and this is for webkit and for the Internet Explorer. 65

65

So we see this is pretty smart. 66

66

Here again and it helps us do our job. 67

67

And we should do the same here in this CSS file. 68

68

So again, command a and then we hit autoprefix selection. 69

69

And to be absolutely sure we can 70

70

do the same here in our grid CSS file. 71

71

I actually don't know if this is 72

72

necessary but we'll do it just to make sure. 73

73

Now all our code is prefixed. 74

74

So we should now test our website 75

75

on the four major browsers as I told you before. 76

76

So Google Chrome here obviously not necessary because 77

77

we already know it works well with it 78

78

since we used it all the time to test our website. 79

79

So next up I have Safari. 80

80

So this is the Google Chrome browser. 81

81

Now I have Firefox. 82

82

So let me open my index page HTML file with it. 83

83

Alright, so this is Firefox. 84

84

And well we see that everything works 85

85

exactly the way as it works in Google Chrome right? 86

86

So no problems here everything's fine, great. 87

87

And now I will test it on Safari as well. 88

88

I have it opened here actually. 89

89

Doesn't work this way okay so I will 90

90

make open with Safari. 91

91

And here we go. 92

92

Again let's test it, let's see if everything works. 93

93

So all these animations work. 94

94

All our effects and 95

95

so things look a little different here. 96

96

For instance this box here looks different in Chrome. 97

97

But that's nothing we could change. 98

98

That's really something which has to do 99

99

with the browser and operating systems. 100

100

Now for PC users they can not test their website 101

101

on Safari because it only runs on a Mac. 102

102

But maybe you can use a Mac from a friend or so 103

103

and test if your webpage looks good with the Safari browser. 104

104

And then we have the Internet Explorer and this time 105

105

the Mac users have the problem because 106

106

we cannot install the Internet Explorer on a Mac. 107

107

So I will actually not be able to show 108

108

you how it looks like on the Internet Explorer. 109

109

So if you have a Mac and you want to test 110

110

if your website looks good on a Internet Explorer 111

111

you can for example ask a friend of yours 112

112

which has a Windows computer and see if your 113

113

website looks great on Internet Explorer as well. 114

114

So actually on the newer version of the Internet Explorer 115

115

like 11 or 10 everything we did should look fine. 116

116

The most problematic browsers are the older 117

117

versions like Internet Explorer 6, 7 and 8 118

118

because many of the CSS3 styles 119

119

don't work on these browsers. 120

120

They are still around but for us 121

121

web developers hopefully not forever. 122

122

And we will not concentrate so much on these 123

123

older versions because that would require 124

124

very specific techniques. 125

125

And actually there is a rather 126

126

complex way of using the Internet Explorer on a Mac. 127

127

And to find out more about that check 128

128

out the link in the ebook. 129

129

Now there are however some things that we can do 130

130

in order to make some of the parts 131

131

of our website work great in older web browsers. 132

132

So we will use three JavaScript scripts to enable some of 133

133

the new functionalities in older browsers. 134

134

The first one there is a little script called 135

135

respond.js which enables the browser to understand 136

136

and execute CSS media queries which we 137

137

need for responsive web design. 138

138

So let me close this. 139

139

There is this website JsDelivr where we can get 140

140

many scripts like that for free. 141

141

More on that later in the next section. 142

142

But for now let's just type respond. 143

143

Okay here we go and hit integration. 144

144

All we need to do is copy this code 145

145

and paste it at the bottom of our HTML file right here. 146

146

So really after the body we paste our script files. 147

147

So again we will learn more about 148

148

JavaScript in the next lecture. 149

149

But for now, let's just copy those scripts right here. 150

150

So the second script I'm going to 151

151

use here is called HTML5Shiv. 152

152

And this enables us to use and style 153

153

HTML5 elements in older browsers that were 154

154

available before HTML5 actually existed. 155

155

And this is pretty useful and we will include 156

156

it just as we included respond before. 157

157

So HTML5Shiv. 158

158

So click this and then the min version 159

159

and paste it down here. 160

160

And the last one we will use selectivizr 161

161

or something like that we'll just type it here. 162

162

That's right so we will use this one. 163

163

And this allows us to use CSS3 pseudo classes 164

164

like less child and first child. 165

165

Or Internet Explorer 6, 7, and 8. 166

166

So these are just some of the things that you can do. 167

167

There are many more but these are some simple solutions. 168

168

Now one very handy tool to see what exactly 169

169

works on which browser is caniuse.com 170

170

Which is this website. 171

171

And in here we can just write CSS properties 172

172

and I did this with transform. 173

173

And it shows us exactly where this works. 174

174

So we see that transform doesn't work 175

175

in Internet Explorer 8 it works on 9 with the prefix ms. 176

176

And for 10 and 11 it works just fine without any prefix. 177

177

So for Google Chrome for instance version 31 178

178

it needs the webkit but from then 179

179

we don't need that anymore. 180

180

Or for Safari for instance 181

181

it also needs the webkit prefix 182

182

or for the IOS Safari. 183

183

And our bracket extensions already took care of that. 184

184

So whenever we need to know if a CSS property 185

185

works or not on a certain browser 186

186

we can use this very handy website. 187

187

So for me, this part is the most boring 188

188

part of the web developer work. 189

189

Working with all the browsers and 190

190

looking what works and what doesn't. 191

191

But well we still have to do it 192

192

because it is super important that we 193

193

make a website work on as many browsers as possible. 194

194

So and with this lecture we close this section 195

195

where we built the static part of our 196

196

website project with HTML and CSS. 197

197

And it is already great. 198

198

Now if you were not able to follow 199

199

all the lectures or did not understand 200

200

everything, you can download all 201

201

the codes for the entire project 202

202

from the link in the description of this video. 203

203

And as always please feel free to 204

204

ask your questions in the course forms. 205

205

And then when you're read join me in the 206

206

next section about jQuery.