CSSOM for Styling

[00:00:00]
>> So CSS, let's make sure we describe this. CSS, which I'm sure most of you have heard about or used, allows us to determine on these elements that we've structured on the page a little bit more about how they look. And actually it's a beautifully sophisticated language, it's actually really powerful.

[00:00:19]
To a point of fault, we're gonna realize that if we write applications, UI applications, the biggest challenge is gonna turn out to be maintaining consistency between the underlying data and what the user sees. So you probably make sure you only have one place that you can store underlying data that describes what the user sees.

[00:00:36]
Not four, and certainly not the one that's also used for styles. And yet actually, it's almost like the CSS team goes, the rest is not always perfect. So let's try and do it here as well. It's like that famous ICCD where they add new standards. You have a unifying standard, and now you have another standard on top of the existing ones.

[00:00:55]
Yeah, CSS is gonna be what allows us to make this button blue or determine the exact pixels or location of these elements, not the overall order and structure, that's HTML, but the exact pixels. But also can actually store data, are you displaying or are you not displaying this element.

[00:01:15]
That's state, that's state, that's gonna turn out to be quite tricky. For our purposes here, let's just add it in. You wanna see another legacy feature of the web browser? How do we add it in? I'm sure we load it in directly, right? No, we link to it from our HTML file.

[00:01:28]
We add that as a element here linking to a style sheet, which is a file, and we have to use that name there, which is a file that gives us a list of styles. And I say we're not dwelling particularly here on CSS, but it's a chance for us to at least see.

[00:01:52]
So there it is, that's gonna add on our DOM, add a list of elements in C++. That's gonna add a link to a style sheet which is gonna turn on and switch on our CSS engine. And there's the linked element, there it is. There's the link element and that's gonna link to our CSS.

[00:02:21]
And that is going to switch on our CSS parser that's gonna read that CSS code and create in C++ as well an object just like this, we'll think of it as a list, that has two parts to it. The first part has a list of all the possible rules, like for whenever you see a button apply a background of slateblue, and then a second part that actually fully mirrors the model of the page, all the elements.

[00:02:56]
And so we'd have text, and the one we're interested in is button that would be set with background to slateblue, and that would make our button here blue. And we're not here to dwell per se on CSS, but just to see we have another model of our web page, this one describing the styles, and this is known as the CSS object model.

[00:03:24]
Object, it's a technical structure of this but we can use a list model representing the information to be displayed on the page. Our layout and render engine will then analyze both of these and determine what to actually display on our pixels. Goal one, display content complete. It really is that minimal.

[00:03:49]
It really is that basic. As I say, interesting, archaic maybe design feature to have our styles loaded in a different language, maybe not. Well, and then we load it in by adding it to our list of elements on the page. But this is not one that's displayed. It's just there on the list of elements.

[00:04:10]
Definitely not. If you think about other places where user interfaces are built from scratch, like Swift, other development environments for building user interfaces from scratch. You ain't doing it through this kinda ad hoc joining up of pieces that were not designed for that. In fact, to be honest, that's probably why Apple said we're building a brand new programming runtime or programming development environment Swift to build out user interfaces.

[00:04:33]
Because we probably were joining up pieces from legacy application designd for the Mac, that then got transferred to be using on iOS. So they said, let's start from scratch and let's build out this entire development environment from scratch. But even then they can do it, they own the entire stack, it's Apple.

[00:04:53]
They own the entire stack of development, not in web browser engineering, where each feature is owned by a different regulatory body. And over the last 30 years, each of those has changed hands, and there's been multiple different browser teams all trying to do it. So we are joining up pieces here from the start.

[00:05:08]
All right, so just two simple goals. One, display content. And two, let users change it, but we're done with goal one. We're actually done. Yeah, exactly, woo, well done, everybody.
>> [APPLAUSE]
>> We displayed content data from inside our computer, and we used HTML and CSS to do it.