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

Aug 15, 2023

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

How do you write CSS that works in every browser? Step 1: Rely on the error handling model of CSS itself.

CSS and HTML are declarative programming languages, which makes them much more resilient to problems. Rely on this quality to write code that always work, no matter how old the browser is. Jen shows you how, with an example using border radius.

Content

0.03 -> so let's get into exactly how to write

2.25 -> CSS to make it work in every browser

4.43 -> here's an example we've got here a

7.71 -> simple box maybe some sort of a div or

10.62 -> something with a box clasp on it and

12.719 -> we've applied some CSS to this box

14.549 -> there's a background of gray a border

17.46 -> solid black 10 pixels and border radius

20.76 -> of 50 pixels now background and border

23.55 -> have been supported since CSS existed

26.01 -> it's there in every browser that can

28.05 -> support CSS at all so we're good to go

30.24 -> with those border-radius came along

32.369 -> later and it's not in every single

34.41 -> browser so let's go look that up we can

37.11 -> see here that it's not supported in

38.94 -> Opera Mini looking at can I use but

41.129 -> let's click on show all and look at all

44.01 -> the browser's not just these few and we

46.26 -> can see that yeah it's also not

47.879 -> supported in Internet Explorer 6 7 and 8

50.879 -> so what happens in those browsers that

53.579 -> don't support border rating yes this is

56.399 -> an important question we need to know

57.98 -> what's gonna happen I think sometimes

65.28 -> and in the industry we act like that's

67.56 -> what happens that the computer blows up

70.35 -> that our users are not gonna be able to

72.09 -> use our web sites that's not what

74.52 -> happens it just doesn't get used that

79.2 -> one line of code everything else in the

82.259 -> CSS file is parsed is applied there are

85.59 -> no errors that are thrown the website

88.38 -> works fine it's just that the border

90.78 -> radius doesn't get applied so I like to

93.54 -> think of it as well what it what happens

96.299 -> if I were to cross out that CSS or what

98.909 -> happens if I were to erase it what would

100.86 -> I get and I can sit there as a front-end

103.29 -> developer as I'm ready to code and I can

105.119 -> think about this I don't even need to

107.04 -> open other browsers to find out I can

108.899 -> just think it through in my head so in

110.82 -> this case what happens if border radius

113.22 -> gets crossed out it's still a gray box

115.829 -> it still has a border on it it just has

118.979 -> square corners that's what happens so

121.92 -> basically we can write this code and

124.02 -> we've got these two different

124.89 -> experiences going on in Firefox Safari

127.32 -> Chrome ie 9 and greater and edge and all

131.58 -> of those other browsers except for

133.8 -> certain for we're gonna have a gray box

136.35 -> with a black border with round corners

138.24 -> and then an upper mini ie8 ie7 and 96

141.3 -> we're gonna have a black box a gray a

143.52 -> gray box with black borders and a square

146.01 -> corners and that's okay it's okay that

150.54 -> websites don't look identical in every

152.4 -> browser in fact they actually never ever

155.55 -> do every browser renders font a little

158.64 -> bit differently from each other every

160.74 -> browser sizes things slightly off if you

163.56 -> took screenshots and a bunch of browsers

165.24 -> and laid them on top of each other in

166.92 -> some sort of a program that let you do

168.84 -> that you would notice the tiny tiny

171.3 -> differences right we don't know how big

173.28 -> our user screen size is we don't know

175.92 -> whether or not they're gonna get the

176.97 -> borders the border radius if they get

179.28 -> square around corners it's fine it's

181.77 -> just a detail visually so that's great

185.06 -> this quality is an important quality to

187.86 -> understand about CSS it's kind of a

191.04 -> magic thing where weird stuff gets

194.46 -> ignored if a browser sees something it

197.4 -> doesn't understand it simply ignores it

200.37 -> maybe you've misspelled a word ignored

202.92 -> maybe it's a new property that wasn't

205.08 -> didn't exist when that browser was

206.28 -> written ignored it doesn't matter the

208.98 -> browser will simply ignore it and move

210.42 -> along it's one of the things that's

213.06 -> pretty magical about HTML and about CSS

216.84 -> that's not true of JavaScript or of

219.54 -> other programming languages programming

221.58 -> languages like JavaScript and all the

223.709 -> different functional languages out there

225.36 -> whether it's C++ or Java those are

228.78 -> languages where the code is run in a

231.54 -> logical order where the computer has to

233.64 -> actually do the commands and make some

236.28 -> decisions and jumps around in code goes

238.98 -> in order and it needs to understand

241.41 -> every single line if it gets to a place

243.45 -> where it hits a line it doesn't

244.68 -> understand it freaks out it's like I'm

247.709 -> not gonna guess what this is supposed to

250.53 -> be I'm gonna throw an error

252.72 -> I need the programmer to fix the code I

255.3 -> can't just run around guessing what to

257.07 -> do HTML and CSS are declarative

260.82 -> languages they are programming languages

263.07 -> but they don't go in that kind of

265.08 -> logical order they go in order but

267.18 -> they just parse what's in front of them

270.03 -> they just do those things

271.62 -> HTML simply understands the semantics of

274.38 -> the HTML CSS simply applies the CSS

277.77 -> that's being declared there's not a more

280.56 -> complicated thing going on which is what

282.72 -> makes those two language is very robust

285.3 -> very resilient to problems or errors or

288.36 -> misspellings or new things coming along

291.259 -> CSS is capable of simply going ahead

295.789 -> rendering a bunch of stuff seeing

298.02 -> something it doesn't understand skipping

299.699 -> it and rendering a whole bunch more

301.71 -> stuff that's the advantage of a

303.36 -> declarative language and that's the

304.83 -> reason we want to use CSS for anything

306.69 -> we can possibly use CSS for we want to

308.789 -> use HTML for anything we can possibly

310.289 -> use HTML for because those two languages

312.87 -> are super resilient and use JavaScript

315.21 -> use it like crazy it's amazing but if

317.49 -> you have a choice between HTML or

319.41 -> JavaScript use HTML because it's going

321.27 -> to be much more robust use javascript

323.25 -> knowing that there's a chance it's gonna

324.419 -> be a little bit fragile we're gonna use

326.46 -> do all the styling in our CSS it's the

329.37 -> beauty of CSS error handling that it

331.5 -> just skips right over it keeps going

333.36 -> it's like we're fine right so let's look

335.849 -> at some examples here I've got a website

338.37 -> where I'm using CSS shapes property to

341.4 -> flow the text around the circle in a

345.03 -> circle rather than in a square the shape

347.46 -> outside property is pretty amazing it's

350.159 -> not supported in every browser in fact

352.26 -> you look here there's a lot of red on

354.09 -> the page or you look here there's a lot

355.56 -> of browsers that don't support it it's

356.849 -> about 20 percent of the global market

358.62 -> does not have support for CSS shapes so

361.38 -> let's look at the code here we can see

362.97 -> this image I have a width on it in a

364.83 -> margin I've floated it to the left and

366.75 -> I've said shape outside circle all the

370.02 -> browsers that support shapes that's

371.28 -> gonna work although I do need to have a

372.69 -> prefix of WebKit prefix on it because

374.58 -> it's a little bit older and the WebKit

376.349 -> prefix was still being used let's see

378.78 -> what happens when we're in a browser

380.46 -> where it doesn't work just in our minds

383.46 -> you cross it out shape outside circle

385.53 -> well the width gets applied the margin

387.96 -> gets apply the float gets applied and

389.58 -> what we get instead is the text going

392.4 -> around in a square it's great it looks

395.219 -> fine

396.33 -> users won't necessarily know that it's

398.07 -> different than

399.09 -> the other what the other browser see

401.07 -> same thing here basically the same

403.26 -> example it looks a little bit different

404.61 -> shape outside polygon here we can see it

407.49 -> in Safari this kind of beautiful shape

410.33 -> or here this is how it looks in Firefox

413.22 -> not as beautiful but completely

415.47 -> functional totally readable people can

418.53 -> come to the web site to do what it is

419.91 -> that they need to do we can have two

422.37 -> different experiences CSS can work and

424.65 -> not work at the same time in both

426.84 -> browsers we're using CSS shapes and

428.79 -> we're not using CSS shapes both at the

431.19 -> same time CSS error handling

433.26 -> take advantage of it it's a big part of

436.68 -> how to write CSS that will work in every

438.69 -> browser

447 -> you

Source: https://www.youtube.com/watch?v=NJjlzxud4_M