Zdravo svima. Today we're going to talk
about browser capabilities and what you can do to make sure that your
sites have a consistent appearance, regardless of how people are accessing it. So even though HTML5 has really been
pushing the browser developers to all come to this consistent implementation,
they really differ in display and adherence to the new
tags that are coming out. And as browsers update and change and new
browsers come out, you're going to have to keep in mind that not everybody is looking
at your page the same way that you are. So, it's your responsibility to make sure
that your page works for a wide audience. And while we've been talking a lot about
accessibility, and different ways to access the web, it even comes down to
the most basic browser implementations. So first, let's talk about handling
these stylistic differences. The easiest way to eliminate
browser differences is for you to make something called
a default style sheet. And in that style sheet,
you would actually go in and wipe out any of the browser defaults for
the different elements that are styled. So when you go in and you make it you
would take, P, H1, H2, all the headings, all the different semantic tags and
you would go in and you would say, I want them to have padding of zero and
margin of zero. Even my list items shouldn't
have any decoration at all. So while this will ensure that
you have a very consistent look, I have to admit it's going to make
you page look absolutely horrible. But that's the price you'll pay so that when you start writing your own
styling rules, you can improve and inevitably improve and
your page is gonna look better and better. Otherwise, if you don't use what
we call this default style sheet, you're gonna design your page,
and it's gonna be really hard for you to remember if you've actually checked
off each element that you're using. One of the other things we want to
talk about is handling what we call unsupported properties. So first, we know that all browsers
don't support all the HTML5 tags. You've seen this already,
in some of the coding you've done with me. In the same way, not all the browsers
support all the CSS3 properties. There are some properties that look
really cool on some browsers, but they aren't handled by
default in other browsers. But there is a way around
that in many cases. And what this is, is that
the browsers are offering prefixes. So sometimes they call them browser
prefixes, sometimes vendor prefixes, but the important thing is that
it's a really quick fix for handling all the unsupported
options that you might come across. Now, when I first saw browser prefixes,
I was completely intimidated. I didn't know what was going on,
and it looked a little weird, and I was feeling lazy and
I didn't wanna deal with it. But I'm here to tell you, it's actually
very, very easy to use these prefixes. So, let's take a look at
what I'm talking about. You've been using different properties and
the browser's hopefully just been working. But now, for some of those properties,
you're going to want and add a prefix or a little bit in front of it,
such as webkit, moz, ms, or o for Opera. Each one of these prefixes say, hey,
if you're on this particular browser, this is what I need you to do to get
the look that the designer is going for. So what are some of these properties
that are often unsupported? They include column-count, which is a way to add multiple
columns into your paragraphs or divs. It's a really nice way to break
up your text that's responsive. So if somebody resizes the page,
the paragraphs actually resize. We have another thing called
border-radius, which people really love to use because it adds a little rounded
edge to the borders of your elements. A third option would be gradient. And gradient is a very cool kind of
background color that lets color go from one shade of blue to maybe gray or
red or anything like that. And it gives it a different appearance. Now there's no way for you to really know which properties
are supported and which ones aren't. So I have this link here to
a site called caniuse.com. And what caniuse.com does is it
lists the different properties and it tells you which browsers support
them and which ones need the prefixes. So it's a good idea to check that site
out as you start developing your page. But for now, let's go ahead and
look at an example. So in this example,
I have a file called prefixes.html. And I just wanna show you quickly what
it looks like on both Chrome over here, and also on Safari. They look pretty similar. But there are little spaces where
the font might not match exactly, or some of the spacing
might not match exactly. So if I wanted to get rid of that,
if I really wanted to make sure that the pages look exactly the same, what
I can do is add a default style sheet. So let's go down over here, and I'm gonna say hey I want to
use my default style sheet. And what that looks like is it's
a really crazy file where I've listed all the different elements. And then after that, put in things like, I don't want any padding,
I don't want any margin. If I've got lists,
get rid of the list style. Make this really as ugly as you can. So if I go back over here, you might not
see a huge difference because the browsers are already pretty plain, but
you can see things move over slightly. We get rid of a little bit of stuff. And in the same way,
when I refresh the Safari, they're going to look
a little bit more similar. So now, let's go ahead and look at that example where some of
the properties aren't supported. And I'm gonna go back over to my HTML
file, and I'm going to say, hey, I wanna use my style sheet to go ahead and style
some things that aren't always supported. And the things that I'm
talking about specifically is, we're going to start with
this idea of column-count. How column-count and
column-gap work is you tell the browser how many columns you want and how much
space you want between those columns. So now, when I refresh,
you can see it's gone from being all one long kinda block paragraph
to that everything's split up. And it's really cool because it's dynamic. If I re-size the browser,
everything kinda moves around. And this is a really
cool thing way to do it. One of the other things I'd like to add
just as something to look at, is this idea of instead of having a square, I want
to kinda round the edges a little bit. So you do that by adding in
what's called the border-radius. Now I'm gonna stop before I refresh the
page, cuz I wanna point something out to you in case you're as intimidated as I
was when I first started doing this. The border-radius is just a simple
property that's been around for a while. And you can see it right here,
and you give it a value. Same with column-count and column-gap. This whole idea of adding prefixes just
means, take your regular property and slap these prefixes on it. You don't need to learn anything new, you
just need to remember the prefix names. And so I want you to really
try to embrace this, and realize you're not doing
anything too spectacular. So now that I've done this,
I've made it 25. And I'm gonna go ahead and refresh it. And as you can see, I've kind of curved
the different edges around the side, which is pretty cool. The last thing I'm going to do
is add a gradient to the color. So right now I'm a consistent blue color. And it's important that no matter what
you give a kind of background color, that you would like to be used,
is the case the gradient isn't happening. But now for linear gradient, you're simply
giving two colors that you'd like to be seeing and kind of say how much you
want at the beginning and the end. So again, I have regular blue. And now when I refresh,
I go from a blue to a kind of light grey. This is cool and it's a lot of code and
it's a lot of fun to play with it. So I wanna remind you that when you're
developing, don't try to memorize things. Don't try to remember
how to do everything. I'm gonna right-click on here,
and do Inspect Element. Because if you decide later that's too
much of a curve, or you don't like that color, what you don't wanna do is type,
save, refresh, type, save, refresh. It gets really annoying. So instead, I'm gonna go right here
to my section and I'm gonna look, and you can see in Inspect Element that
it said I didn't use the moz prefix, and I didn't use the Opera prefix,
cuz I didn't need to. I'm Chrome. What I can do is come down here to
the border-radius and change it. Instead of 25 pixels, if I want less
of a curve, I can make it 5 pixels. You can see it happening in real time. If you wanna make it look crazy,
you can make it 50 pixels. You can also use percents if you like. So I'm go ahead and put in 15%. So it's kinda to play with all
these thing dynamically and then once you get a value that you really like,
copy it and put it into your CSS file. So browser prefixes is just something
to play with that can be fun. It can be frustrating. But the most important thing is that you
should realize it's very straightforward. One of the things that you might do as
you're adding prefixes is that realize, for right now, the easiest thing for
you to do is add those prefixes by hand. Put in the property that you wanna put in,
say border-radius. And then go in and add webkit, moz,
the different things like that. When you start using prefixes, what you're going to do is you're
going to add them by hand. If you know that you have border-radius,
you're gonna go ahead and do border-radius and then add that moz, the webkit,
different things like that by hand. As you become more experienced and
maybe you wanna try different things, there are ways to automate
the addition of those prefixes. If you're using an editor such as Sublime, you can actually put little packages on
there where you can control whether or not you want Sublime to add on those packages
whenever they see different properties. You can also use outside programs that
will dynamically change your code as people load it to only put
in the prefixes that they need. If you remember in my example,
even though I was using Chrome, my style sheet still had
all the different prefixes. This would automatically
only add the ones you need. Again, these are kind of cool, but
let's not worry about them right now. For now, let's focus on the basics. So to review, when you start coding, when you start making style sheets,
you're going to want to think about using a default style sheet
to remove those stylistic differences. And when you do that,
I need you to think about some things. So first, should that default style
sheet be internal or external? And hopefully you all said external. Because if it's internal, it's going to override all the other
things you've worked so hard to do. In that same way, when you put
a link to your default style sheet, make sure it's first. Because the way browsers work is it goes
style sheet, style sheet, style sheet. So if you put yours first and
then the default style sheet, it's gonna overwrite everything
cool that you've done so far. Finally, remember that browser prefixes can help remove some of those differences
caused by unsupported options. But you don't wanna overuse it. Don't slap a prefix on every single
property just because you're not sure. Instead, you wanna go to those sites
like can I use and test it out and really make an educated guess as to
whether or not you wanna use it. You're really getting far in
this whole web development idea. And hopefully you're styling
some really cool pages. And I want you to be able to use all the
different properties that are out there. So don't be intimidated by the idea that
you might have to use style sheets that you haven't written or
that you have to use browser prefixes. You've totally got this and I know that
you can code using these different tools. So good luck.