Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,691 --> 00:00:04,137
So far we have developed a website
2
2
00:00:04,137 --> 00:00:08,608
and used the Google Chrome browser to see how it looks.
3
3
00:00:08,608 --> 00:00:11,745
In an ideal world we would be able to create
4
4
00:00:11,745 --> 00:00:14,764
our site using everything we've learned so far.
5
5
00:00:14,764 --> 00:00:18,318
And the website would look great in any browser.
6
6
00:00:18,318 --> 00:00:21,034
Now, unfortunately each browser interprets
7
7
00:00:21,034 --> 00:00:24,451
HTML and CSS in a slightly different way.
8
8
00:00:25,400 --> 00:00:27,072
Which means that a website may appear
9
9
00:00:27,072 --> 00:00:31,112
differently to visitors using different browsers.
10
10
00:00:31,112 --> 00:00:34,061
So, once we've created our website we have to
11
11
00:00:34,061 --> 00:00:37,382
review how it appears on multiple browsers.
12
12
00:00:37,382 --> 00:00:40,145
This is very very important.
13
13
00:00:40,145 --> 00:00:42,281
The most popular browsers right now
14
14
00:00:42,281 --> 00:00:46,448
are Google Chrome, Internet Explorer, Firefox and Safari.
15
15
00:00:47,621 --> 00:00:49,456
Here we have the world wide market share
16
16
00:00:49,456 --> 00:00:53,171
of all browsers as of January 2015.
17
17
00:00:53,171 --> 00:00:55,145
And here we see that Google Chrome
18
18
00:00:55,145 --> 00:00:58,478
has almost 50% of the market share.
19
19
00:01:00,049 --> 00:01:02,740
Now the first thing we have to do in
20
20
00:01:02,740 --> 00:01:05,771
order to make CSS3 work the same way
21
21
00:01:05,771 --> 00:01:09,938
in every browser is prefixing some CSS3 properties.
22
22
00:01:11,646 --> 00:01:14,177
And CSS3 browser prefixes are a way
23
23
00:01:14,177 --> 00:01:16,867
for browser makers to add support
24
24
00:01:16,867 --> 00:01:20,950
for new CSS features in a kind of testing period.
25
25
00:01:22,974 --> 00:01:27,848
Here are CSS browser prefixes for different browsers.
26
26
00:01:27,848 --> 00:01:32,353
So it's webkit for Android, Chrome, IOS and Safari browsers
27
27
00:01:32,353 --> 00:01:36,520
moz for Firefox, ms for Internet Explorer and o for Opera.
28
28
00:01:40,558 --> 00:01:43,413
And here is an example for the border radius property
29
29
00:01:43,413 --> 00:01:46,386
with different browser prefixes.
30
30
00:01:46,386 --> 00:01:49,341
With this code the boarder radius property
31
31
00:01:49,341 --> 00:01:53,380
will work even on older browsers of Chrome or Firefox.
32
32
00:01:53,380 --> 00:01:55,075
Because the older versions of the modern
33
33
00:01:55,075 --> 00:01:57,118
browsers always cause the biggest
34
34
00:01:57,118 --> 00:01:59,618
problems to us web developers.
35
35
00:02:01,159 --> 00:02:02,320
Now it seems a little bit boring
36
36
00:02:02,320 --> 00:02:06,360
to add all these prefixes manually, right?
37
37
00:02:06,360 --> 00:02:08,543
Good news is we don't have to.
38
38
00:02:08,543 --> 00:02:10,354
Because there is another great bracket
39
39
00:02:10,354 --> 00:02:13,558
extension that does the job for us.
40
40
00:02:13,558 --> 00:02:17,225
So let's go back to brackets and install it.
41
41
00:02:18,429 --> 00:02:20,774
So, the extension we're going to install
42
42
00:02:20,774 --> 00:02:23,480
is called autoprefixer.
43
43
00:02:23,480 --> 00:02:27,503
So again hit here to extensions button
44
44
00:02:27,503 --> 00:02:30,920
and now right here we write autoprefixer.
45
45
00:02:34,697 --> 00:02:36,392
So then you hit install here.
46
46
00:02:36,392 --> 00:02:41,175
I already have it installed so I will not do it.
47
47
00:02:41,175 --> 00:02:44,171
So I hope you have it installed by now.
48
48
00:02:44,171 --> 00:02:45,842
And now it's very very easy.
49
49
00:02:45,842 --> 00:02:50,009
We just select all the code hitting command a or control a.
50
50
00:02:51,253 --> 00:02:53,760
And then we come to this edit menu
51
51
00:02:53,760 --> 00:02:57,731
and down here we have autoprefix selection.
52
52
00:02:57,731 --> 00:03:00,424
So we hit that button and now all
53
53
00:03:00,424 --> 00:03:03,373
the relevant properties are prefixed.
54
54
00:03:03,373 --> 00:03:07,274
So let's scroll down here and see what we have for instance.
55
55
00:03:07,274 --> 00:03:11,441
So here, the transition property was prefixed for webkit.
56
56
00:03:14,357 --> 00:03:17,027
And this extension is actually previously marked
57
57
00:03:17,027 --> 00:03:20,533
because it only prefixes the properties
58
58
00:03:20,533 --> 00:03:23,435
that need prefixing in each browser.
59
59
00:03:23,435 --> 00:03:25,711
So in this case all webkit browsers.
60
60
00:03:25,711 --> 00:03:29,044
Such as Chrome, IOS, Android and Safari.
61
61
00:03:30,007 --> 00:03:33,174
So again we have the webkit transition
62
62
00:03:34,281 --> 00:03:36,072
and we show what else we have.
63
63
00:03:36,072 --> 00:03:37,567
Here we have to transform property
64
64
00:03:37,567 --> 00:03:41,734
and this is for webkit and for the Internet Explorer.
65
65
00:03:43,363 --> 00:03:45,831
So we see this is pretty smart.
66
66
00:03:45,831 --> 00:03:48,998
Here again and it helps us do our job.
67
67
00:03:50,957 --> 00:03:54,534
And we should do the same here in this CSS file.
68
68
00:03:54,534 --> 00:03:58,701
So again, command a and then we hit autoprefix selection.
69
69
00:04:02,358 --> 00:04:04,289
And to be absolutely sure we can
70
70
00:04:04,289 --> 00:04:08,141
do the same here in our grid CSS file.
71
71
00:04:08,141 --> 00:04:09,273
I actually don't know if this is
72
72
00:04:09,273 --> 00:04:12,940
necessary but we'll do it just to make sure.
73
73
00:04:18,076 --> 00:04:21,083
Now all our code is prefixed.
74
74
00:04:21,083 --> 00:04:22,894
So we should now test our website
75
75
00:04:22,894 --> 00:04:26,894
on the four major browsers as I told you before.
76
76
00:04:27,794 --> 00:04:30,301
So Google Chrome here obviously not necessary because
77
77
00:04:30,301 --> 00:04:33,258
we already know it works well with it
78
78
00:04:33,258 --> 00:04:37,778
since we used it all the time to test our website.
79
79
00:04:37,778 --> 00:04:39,861
So next up I have Safari.
80
80
00:04:41,911 --> 00:04:45,093
So this is the Google Chrome browser.
81
81
00:04:45,093 --> 00:04:46,676
Now I have Firefox.
82
82
00:04:48,138 --> 00:04:52,055
So let me open my index page HTML file with it.
83
83
00:04:59,533 --> 00:05:01,950
Alright, so this is Firefox.
84
84
00:05:04,038 --> 00:05:06,894
And well we see that everything works
85
85
00:05:06,894 --> 00:05:11,061
exactly the way as it works in Google Chrome right?
86
86
00:05:13,256 --> 00:05:17,006
So no problems here everything's fine, great.
87
87
00:05:19,943 --> 00:05:23,360
And now I will test it on Safari as well.
88
88
00:05:25,261 --> 00:05:27,844
I have it opened here actually.
89
89
00:05:37,483 --> 00:05:39,036
Doesn't work this way okay so I will
90
90
00:05:39,036 --> 00:05:40,869
make open with Safari.
91
91
00:05:45,785 --> 00:05:47,035
And here we go.
92
92
00:05:48,101 --> 00:05:51,654
Again let's test it, let's see if everything works.
93
93
00:05:51,654 --> 00:05:54,071
So all these animations work.
94
94
00:05:55,369 --> 00:05:56,952
All our effects and
95
95
00:05:59,464 --> 00:06:03,295
so things look a little different here.
96
96
00:06:03,295 --> 00:06:05,989
For instance this box here looks different in Chrome.
97
97
00:06:05,989 --> 00:06:07,419
But that's nothing we could change.
98
98
00:06:07,419 --> 00:06:09,958
That's really something which has to do
99
99
00:06:09,958 --> 00:06:13,208
with the browser and operating systems.
100
100
00:06:14,902 --> 00:06:17,990
Now for PC users they can not test their website
101
101
00:06:17,990 --> 00:06:21,682
on Safari because it only runs on a Mac.
102
102
00:06:21,682 --> 00:06:25,096
But maybe you can use a Mac from a friend or so
103
103
00:06:25,096 --> 00:06:29,263
and test if your webpage looks good with the Safari browser.
104
104
00:06:30,831 --> 00:06:33,734
And then we have the Internet Explorer and this time
105
105
00:06:33,734 --> 00:06:36,125
the Mac users have the problem because
106
106
00:06:36,125 --> 00:06:40,119
we cannot install the Internet Explorer on a Mac.
107
107
00:06:40,119 --> 00:06:42,371
So I will actually not be able to show
108
108
00:06:42,371 --> 00:06:46,388
you how it looks like on the Internet Explorer.
109
109
00:06:46,388 --> 00:06:48,478
So if you have a Mac and you want to test
110
110
00:06:48,478 --> 00:06:51,079
if your website looks good on a Internet Explorer
111
111
00:06:51,079 --> 00:06:53,354
you can for example ask a friend of yours
112
112
00:06:53,354 --> 00:06:56,326
which has a Windows computer and see if your
113
113
00:06:56,326 --> 00:07:00,409
website looks great on Internet Explorer as well.
114
114
00:07:01,830 --> 00:07:04,671
So actually on the newer version of the Internet Explorer
115
115
00:07:04,671 --> 00:07:08,754
like 11 or 10 everything we did should look fine.
116
116
00:07:11,141 --> 00:07:13,231
The most problematic browsers are the older
117
117
00:07:13,231 --> 00:07:16,814
versions like Internet Explorer 6, 7 and 8
118
118
00:07:18,736 --> 00:07:21,524
because many of the CSS3 styles
119
119
00:07:21,524 --> 00:07:23,683
don't work on these browsers.
120
120
00:07:23,683 --> 00:07:25,866
They are still around but for us
121
121
00:07:25,866 --> 00:07:29,720
web developers hopefully not forever.
122
122
00:07:29,720 --> 00:07:32,298
And we will not concentrate so much on these
123
123
00:07:32,298 --> 00:07:34,527
older versions because that would require
124
124
00:07:34,527 --> 00:07:36,610
very specific techniques.
125
125
00:07:37,662 --> 00:07:39,357
And actually there is a rather
126
126
00:07:39,357 --> 00:07:42,933
complex way of using the Internet Explorer on a Mac.
127
127
00:07:42,933 --> 00:07:45,115
And to find out more about that check
128
128
00:07:45,115 --> 00:07:47,282
out the link in the ebook.
129
129
00:07:48,296 --> 00:07:51,385
Now there are however some things that we can do
130
130
00:07:51,385 --> 00:07:54,032
in order to make some of the parts
131
131
00:07:54,032 --> 00:07:58,032
of our website work great in older web browsers.
132
132
00:07:59,435 --> 00:08:03,459
So we will use three JavaScript scripts to enable some of
133
133
00:08:03,459 --> 00:08:07,338
the new functionalities in older browsers.
134
134
00:08:07,338 --> 00:08:09,868
The first one there is a little script called
135
135
00:08:09,868 --> 00:08:13,700
respond.js which enables the browser to understand
136
136
00:08:13,700 --> 00:08:16,974
and execute CSS media queries which we
137
137
00:08:16,974 --> 00:08:19,557
need for responsive web design.
138
138
00:08:21,474 --> 00:08:23,224
So let me close this.
139
139
00:08:25,121 --> 00:08:29,069
There is this website JsDelivr where we can get
140
140
00:08:29,069 --> 00:08:31,736
many scripts like that for free.
141
141
00:08:33,573 --> 00:08:37,312
More on that later in the next section.
142
142
00:08:37,312 --> 00:08:40,312
But for now let's just type respond.
143
143
00:08:42,862 --> 00:08:45,862
Okay here we go and hit integration.
144
144
00:08:47,273 --> 00:08:50,190
All we need to do is copy this code
145
145
00:08:52,962 --> 00:08:57,129
and paste it at the bottom of our HTML file right here.
146
146
00:08:59,046 --> 00:09:03,213
So really after the body we paste our script files.
147
147
00:09:04,851 --> 00:09:06,615
So again we will learn more about
148
148
00:09:06,615 --> 00:09:09,820
JavaScript in the next lecture.
149
149
00:09:09,820 --> 00:09:13,987
But for now, let's just copy those scripts right here.
150
150
00:09:15,160 --> 00:09:16,716
So the second script I'm going to
151
151
00:09:16,716 --> 00:09:19,618
use here is called HTML5Shiv.
152
152
00:09:19,618 --> 00:09:23,334
And this enables us to use and style
153
153
00:09:23,334 --> 00:09:26,399
HTML5 elements in older browsers that were
154
154
00:09:26,399 --> 00:09:29,732
available before HTML5 actually existed.
155
155
00:09:31,507 --> 00:09:33,295
And this is pretty useful and we will include
156
156
00:09:33,295 --> 00:09:36,462
it just as we included respond before.
157
157
00:09:39,075 --> 00:09:40,158
So HTML5Shiv.
158
158
00:09:44,188 --> 00:09:47,438
So click this and then the min version
159
159
00:09:49,973 --> 00:09:51,890
and paste it down here.
160
160
00:09:53,606 --> 00:09:56,939
And the last one we will use selectivizr
161
161
00:09:58,504 --> 00:10:02,421
or something like that we'll just type it here.
162
162
00:10:06,269 --> 00:10:08,702
That's right so we will use this one.
163
163
00:10:08,702 --> 00:10:13,137
And this allows us to use CSS3 pseudo classes
164
164
00:10:13,137 --> 00:10:15,575
like less child and first child.
165
165
00:10:15,575 --> 00:10:18,325
Or Internet Explorer 6, 7, and 8.
166
166
00:10:20,553 --> 00:10:24,720
So these are just some of the things that you can do.
167
167
00:10:25,801 --> 00:10:29,968
There are many more but these are some simple solutions.
168
168
00:10:34,578 --> 00:10:37,410
Now one very handy tool to see what exactly
169
169
00:10:37,410 --> 00:10:40,493
works on which browser is caniuse.com
170
170
00:10:42,008 --> 00:10:43,726
Which is this website.
171
171
00:10:43,726 --> 00:10:47,511
And in here we can just write CSS properties
172
172
00:10:47,511 --> 00:10:49,694
and I did this with transform.
173
173
00:10:49,694 --> 00:10:53,901
And it shows us exactly where this works.
174
174
00:10:53,901 --> 00:10:56,408
So we see that transform doesn't work
175
175
00:10:56,408 --> 00:11:00,575
in Internet Explorer 8 it works on 9 with the prefix ms.
176
176
00:11:02,526 --> 00:11:06,693
And for 10 and 11 it works just fine without any prefix.
177
177
00:11:10,224 --> 00:11:13,776
So for Google Chrome for instance version 31
178
178
00:11:13,776 --> 00:11:16,104
it needs the webkit but from then
179
179
00:11:16,104 --> 00:11:18,053
we don't need that anymore.
180
180
00:11:18,053 --> 00:11:20,303
Or for Safari for instance
181
181
00:11:21,319 --> 00:11:24,344
it also needs the webkit prefix
182
182
00:11:24,344 --> 00:11:26,811
or for the IOS Safari.
183
183
00:11:26,811 --> 00:11:31,185
And our bracket extensions already took care of that.
184
184
00:11:31,185 --> 00:11:34,918
So whenever we need to know if a CSS property
185
185
00:11:34,918 --> 00:11:37,667
works or not on a certain browser
186
186
00:11:37,667 --> 00:11:40,584
we can use this very handy website.
187
187
00:11:41,933 --> 00:11:45,165
So for me, this part is the most boring
188
188
00:11:45,165 --> 00:11:47,510
part of the web developer work.
189
189
00:11:47,510 --> 00:11:48,877
Working with all the browsers and
190
190
00:11:48,877 --> 00:11:51,352
looking what works and what doesn't.
191
191
00:11:51,352 --> 00:11:53,990
But well we still have to do it
192
192
00:11:53,990 --> 00:11:56,126
because it is super important that we
193
193
00:11:56,126 --> 00:12:00,293
make a website work on as many browsers as possible.
194
194
00:12:01,731 --> 00:12:04,757
So and with this lecture we close this section
195
195
00:12:04,757 --> 00:12:06,855
where we built the static part of our
196
196
00:12:06,855 --> 00:12:09,688
website project with HTML and CSS.
197
197
00:12:11,149 --> 00:12:13,149
And it is already great.
198
198
00:12:14,005 --> 00:12:15,955
Now if you were not able to follow
199
199
00:12:15,955 --> 00:12:18,161
all the lectures or did not understand
200
200
00:12:18,161 --> 00:12:20,158
everything, you can download all
201
201
00:12:20,158 --> 00:12:22,495
the codes for the entire project
202
202
00:12:22,495 --> 00:12:25,824
from the link in the description of this video.
203
203
00:12:25,824 --> 00:12:27,983
And as always please feel free to
204
204
00:12:27,983 --> 00:12:31,373
ask your questions in the course forms.
205
205
00:12:31,373 --> 00:12:33,509
And then when you're read join me in the
206
206
00:12:33,509 --> 00:12:35,676
next section about jQuery.
18025
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.