Hi, everyone.
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.