Intro to Rust (Building a Browser Engine: The Style Tree and Style Engine)
Thus far in our Rust Browser Engine we have implemented two parser modules and two tree structures. Now it is time to take those trees and combine them into another tree; our style tree. When a website is rendered from HTML, CSS and JavaScript, it typically is forced through multiple pipelines. For instance, the Gecko engine in Mozilla combines the DOM tree and Stylesheet to build a frame tree which then is converted into a view tree. With the Google Chrome Webkit engine, the DOM and Stylesheet are converted into a render tree and then smaller trees are added in the form of a layer tree and a widget tree. These tree structures are fairly useful for quickly rendering web pages dynamically.
Our Style tree uses a One to One Dom node to style selector implementation. This is part of the reason why our browser does not implement cascading. It also makes selector matching simpler for the various modules. We traverse the DOM tree and for each element in the tree, we scan through our stylesheet for a matching rule. If two rules select the same element, then we use the highest specificity selector from each match because our CSS parser stores the selectors based on specificity. Once we find our matching rules, we can also find the specified values for each of the Node Elements which allows us to store each of these rules in a hash map structure called a Property Map.
Normal browsers include default style sheets or User Agent style sheets. These sheets define what the elements in an HTML document will look like without any user styling. For instance, a Head element in an HTML document has natural default styling which hides the comments and other elements inside of it. Other HTML elements also feature their own set of default styling rules as well. Our browser engine does not use User Agent style sheets so we must specify these rules in our user created stylesheet if we want this kind of default behavior.
Full Github Source Code is here
If you enjoy the video, feel free to follow me on Steemit or on YouTube to get updates on the channel as well as more content.
Posted on Utopian.io - Rewarding Open Source Contributors
well done tensor, once again!
Thank you as always. Yeah, this series is much longer then I anticipated but I guess thats a good thing.
Nothing wrong with that, especially because rust is such a unique language. Not as much info out there as there is other languages.
Thats true, though most of the languages that I cover are like that. Elixir, Elm and even Go, when I first started doing the tutorials, didn't have much content as well. Kotlin, which is my most likely next target is also suffering from a shortage of good content which is strange considering it will probably be named as one of the languages of the year this year.
oh nice! can't wait for that.
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thank you for taking the time to read and watch my content.
Hey @tensor I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
@originalworks
The @OriginalWorks bot has determined this post by @tensor to be original material and upvoted it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by Tensor from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP. Be sure to leave at least 50SP undelegated on your account.
Good post
Thank you, enjoy.
Your contribution cannot be approved because it does not follow the Utopian Rules.
You can contact us on Discord.
[utopian-moderator]
I have removed all of the questionable material from the posts that I can still edit. Please restore visibility. Thank you.