How Browsers Handle Errors in CSS – 3/7 Resilient CSS

– So let’s get into
exactly how to write CSS to make it work in every browser. Here’s an example, we’ve
got here a simple box, maybe some sort of a div or something with a box class on it and we’ve applied some CSS to this box, there’s a background of grey, a border, solid black, 10 pixels and border-radius of 50 pixels, now background and border
have been supported since CSS existed,
they’re in every browser, that can support CSS at all,
so we’re good to go with those, border-radius came along later and it’s not in every single browser, so let’s go look that up. We can see here, that it’s
not supported in Opera Mini, looking at CanIUse, but
let’s click on Show All and look at all the
browsers, not just these few and we can see that, yeah,
it’s also not supported in Internet Explorer six, seven and eight, so what happens in those browsers, that don’t support border-radius? This is an important
question we need to know, what’s gonna happen? (explosive booming) (laughs) I think sometimes as an industry, we act like that’s what happens,
that the computer blows up, that our users are not gonna
be able to use our websites, that’s not what happens, (laughs) it just doesn’t get used,
that one line of code, everything else in the CSS
file is parsed, is applied, there are no errors that are
thrown, the website works fine, it’s just that the border-radius
doesn’t get applied, so I like to think of it as well, what happens if I
were to cross out that CSS, or what happens if I were to
erase it, what would I get? And I can sit there as
a front end developer as I’m writing code and
I can think about this, I don’t even need to open
other browsers to find out, I can just think it through in my head. So in this case, what happens if border-radius
gets crossed out? It’s still a grey box, it
still has a border on it, it just has square corners,
that’s what happens. So basically we can write this code and we’ve got these two
different experiences going on, in Firefox, Safari,
Chrome, IE9 and greater and Edge and all those other browsers, except for these certain four,
we’re gonna have a grey box with a black border with round corners and then in Opera Mini, IE8, IE7 and IE6, we’re gonna have a grey box with black borders and square corners and that’s okay, it’s okay that websites don’t look
identical in every browser, in fact, they actually never ever do, every browser renders fonts a little bit differently from each other, every browser sizes things slightly off, if you took screenshots
in a bunch of browsers and laid them on top of each other in some sort of a programme
that let you do that, you would notice the tiny,
tiny differences, right, we don’t know how big our
user’s screen size is, we don’t know whether or not they’re gonna get the border-radius, if they get square or round corners, it’s fine, it’s just a detail visually. So that’s great, this quality
is an important quality to understand about CSS,
it’s kind of a magic thing, where weird stuff gets ignored, if a browser sees something
it doesn’t understand, it simply ignores it, maybe
you misspelt a word, ignored, maybe it’s a new properrty
that didn’t exist, when that browser was written, ignored, it doesn’t matter, the
browser will simply ignore it and move along. It’s one of the things
that’s pretty magical about HTML and about CSS, that’s not true of Javascript or of other programming languages, programming languages like Javascript and all the different
functional languages out there, whether it’s C plus plus or
Java, those are languages, where the code is run in a logical order, where the computer has to
actually do the commands and make some decisions
and jumps around in code, goes in order and it needs to
understand every single line, if it gets to a place,
where it hits a line it doesn’t understand,
it freaks out, it’s like, “I’m not gonna guess what
this is supposed to be, “I’m gonna throw an error, “I need the programmer to fix the code, “I can’t just run around
guessing what to do.” HTML and CSS are declarative languages, they are programming languages, but they don’t go in that
kind of logical order, they go in order, but they just parse what’s in front of them,
they just do those things, HTML simply understands
the semantics of the HTML, CSS simply applies the
CSS that’s being declared, there’s not a more
complicated thing going on, which is what makes those
two languages very robust, very resilient to problems or errors or misspellings or new
things coming along, CSS is capable of simply going ahead, rendering a bunch of stuff, seeing something it doesn’t understand, skipping it and rendering
a whole bunch more stuff, that’s the advantage of
a declarative language and that’s the reason we wanna use CSS for anything we can possibly use CSS for, we wanna use HTML for anything
we can possibly use HTML for, because those two languages
are super resilient and use Javascript, use it
like crazy, it’s amazing, but if you have a choice
between HTML or Javascript, use HTML, because it’s
gonna be much more robust, use Javascript knowing
that there’s a chance it’s gonna be a little bit fragile. We’re gonna do all the styling in our CSS, it’s the beauty of CSS error handling, that it just skips right
over, keeps going, it’s like, “Oh, we’re fine, right,” so let’s look at some examples. Here I’ve got a website, where I’m using a CSS shapes
property to flow the text around the circle in a circle,
rather than in a square, the shape-outside property
is pretty amazing, it’s not supported in every browser, in fact, you look here, it’s
got a lot of red on the page, or you look here, there’s
a lot of browsers, that don’t support it, about
20% of the global market does not have support for CSS shapes. So let’s look at the code,
here we can see this image, I have a width on it and a margin, I’ve floated it to the left and I’ve said shape-outside circle, all the browsers that support
shapes, that’s gonna work, although I do need to have a
prefix, a WebKit prefix on it, because it’s a little bit older and the WebKit prefix
was still being used. Let’s see what happens when we’re in a browser
where it doesn’t work, just in our minds you cross
it out, shape-outside circle, well, the width gets applied,
the margin gets applied, the float gets applied
and what we get instead is the text going around
in a square, it’s great, it looks fine, users
won’t necessarily know that it’s different than
what the other browsers see. Same thing here, basically
the same example, but looks a little bit
different, shape-outside polygon, here we can see it in Safari,
this kind of beautiful shape or here, this is how it looks in Firefox, not as beautiful, but
completely functional, totally readable, people
can come to the website to do what it is that they need to do. We can have two different experiences, CSS can work and not work at
the same time in both browsers, we’re using CSS shapes and
we’re not using CSS shapes both at the same time. CSS error handling, take advantage of it, it’s a big part of how to write CSS, that will work in every browser.