Voiceover: So far we have developed a website
and used the Google Chrome browser to see how it looks.
In an ideal world we would be able to create
our site using everything we've learned so far.
And the website would look great in any browser.
Now, unfortunately each browser interprets
HTML and CSS in a slightly different way.
Which means that a website may appear
differently to visitors using different browsers.
So, once we've created our website we have to
review how it appears on multiple browsers.
This is very very important.
The most popular browsers right now
are Google Chrome, Internet Explorer, Firefox and Safari.
Here we have the world wide market share
of all browsers as of January 2015.
And here we see that Google Chrome
has almost 50% of the market share.
Now the first thing we have to do in
order to make CSS3 work the same way
in every browser is prefixing some CSS3 properties.
And CSS3 browser prefixes are a way
for browser makers to add support
for new CSS features in a kind of testing period.
Here are CSS browser prefixes for different browsers.
So it's webkit for Android, Chrome, IOS and Safari browsers
moz for Firefox, ms for Internet Explorer and o for Opera.
And here is an example for the border radius property
with different browser prefixes.
With this code the boarder radius property
will work even on older browsers of Chrome or Firefox.
Because the older versions of the modern
browsers always cause the biggest
problems to us web developers.
Now it seems a little bit boring
to add all these prefixes manually, right?
Good news is we don't have to.
Because there is another great bracket
extension that does the job for us.
So let's go back to brackets and install it.
So, the extension we're going to install
is called autoprefixer.
So again hit here to extensions button
and now right here we write autoprefixer.
So then you hit install here.
I already have it installed so I will not do it.
So I hope you have it installed by now.
And now it's very very easy.
We just select all the code hitting command a or control a.
And then we come to this edit menu
and down here we have autoprefix selection.
So we hit that button and now all
the relevant properties are prefixed.
So let's scroll down here and see what we have for instance.
So here, the transition property was prefixed for webkit.
And this extension is actually previously marked
because it only prefixes the properties
that need prefixing in each browser.
So in this case all webkit browsers.
Such as Chrome, IOS, Android and Safari.
So again we have the webkit transition
and we show what else we have.
Here we have to transform property
and this is for webkit and for the Internet Explorer.
So we see this is pretty smart.
Here again and it helps us do our job.
And we should do the same here in this CSS file.
So again, command a and then we hit autoprefix selection.
And to be absolutely sure we can
do the same here in our grid CSS file.
I actually don't know if this is
necessary but we'll do it just to make sure.
Now all our code is prefixed.
So we should now test our website
on the four major browsers as I told you before.
So Google Chrome here obviously not necessary because
we already know it works well with it
since we used it all the time to test our website.
So next up I have Safari.
So this is the Google Chrome browser.
Now I have Firefox.
So let me open my index page HTML file with it.
Alright, so this is Firefox.
And well we see that everything works
exactly the way as it works in Google Chrome right?
So no problems here everything's fine, great.
And now I will test it on Safari as well.
I have it opened here actually.
Doesn't work this way okay so I will
make open with Safari.
And here we go.
Again let's test it, let's see if everything works.
So all these animations work.
All our effects and
so things look a little different here.
For instance this box here looks different in Chrome.
But that's nothing we could change.
That's really something which has to do
with the browser and operating systems.
Now for PC users they can not test their website
on Safari because it only runs on a Mac.
But maybe you can use a Mac from a friend or so
and test if your webpage looks good with the Safari browser.
And then we have the Internet Explorer and this time
the Mac users have the problem because
we cannot install the Internet Explorer on a Mac.
So I will actually not be able to show
you how it looks like on the Internet Explorer.
So if you have a Mac and you want to test
if your website looks good on a Internet Explorer
you can for example ask a friend of yours
which has a Windows computer and see if your
website looks great on Internet Explorer as well.
So actually on the newer version of the Internet Explorer
like 11 or 10 everything we did should look fine.
The most problematic browsers are the older
versions like Internet Explorer 6, 7 and 8
because many of the CSS3 styles
don't work on these browsers.
They are still around but for us
web developers hopefully not forever.
And we will not concentrate so much on these
older versions because that would require
very specific techniques.
And actually there is a rather
complex way of using the Internet Explorer on a Mac.
And to find out more about that check
out the link in the ebook.
Now there are however some things that we can do
in order to make some of the parts
of our website work great in older web browsers.
So we will use three JavaScript scripts to enable some of
the new functionalities in older browsers.
The first one there is a little script called
respond.js which enables the browser to understand
and execute CSS media queries which we
need for responsive web design.
So let me close this.
There is this website JsDelivr where we can get
many scripts like that for free.
More on that later in the next section.
But for now let's just type respond.
Okay here we go and hit integration.
All we need to do is copy this code
and paste it at the bottom of our HTML file right here.
So really after the body we paste our script files.
So again we will learn more about
JavaScript in the next lecture.
But for now, let's just copy those scripts right here.
So the second script I'm going to
use here is called HTML5Shiv.
And this enables us to use and style
HTML5 elements in older browsers that were
available before HTML5 actually existed.
And this is pretty useful and we will include
it just as we included respond before.
So HTML5Shiv.
So click this and then the min version
and paste it down here.
And the last one we will use selectivizr
or something like that we'll just type it here.
That's right so we will use this one.
And this allows us to use CSS3 pseudo classes
like less child and first child.
Or Internet Explorer 6, 7, and 8.
So these are just some of the things that you can do.
There are many more but these are some simple solutions.
Now one very handy tool to see what exactly
works on which browser is caniuse.com
Which is this website.
And in here we can just write CSS properties
and I did this with transform.
And it shows us exactly where this works.
So we see that transform doesn't work
in Internet Explorer 8 it works on 9 with the prefix ms.
And for 10 and 11 it works just fine without any prefix.
So for Google Chrome for instance version 31
it needs the webkit but from then
we don't need that anymore.
Or for Safari for instance
it also needs the webkit prefix
or for the IOS Safari.
And our bracket extensions already took care of that.
So whenever we need to know if a CSS property
works or not on a certain browser
we can use this very handy website.
So for me, this part is the most boring
part of the web developer work.
Working with all the browsers and
looking what works and what doesn't.
But well we still have to do it
because it is super important that we
make a website work on as many browsers as possible.
So and with this lecture we close this section
where we built the static part of our
website project with HTML and CSS.
And it is already great.
Now if you were not able to follow
all the lectures or did not understand
everything, you can download all
the codes for the entire project
from the link in the description of this video.
And as always please feel free to
ask your questions in the course forms.
And then when you're read join me in the
next section about jQuery.