←back to thread

Web Browser Engineering (2021)

(browser.engineering)
679 points MrVandemar | 1 comments | | HN request time: 0s | source
Show context
mannyv ◴[] No.41848587[source]
One great thing about this book is the 'stuff I didn't do' part.

Layout is really hard. Just tables by themselves are hard, even without any css around them. CSS makes layout impossibly difficult. I challenge anyone to keep the whole CSS spec and its associated behaviors in their head.

At this point css + html + javascript have become a dynamic PDL, and probably is one of the most complex pieces of software today.

As an aside, video decoding is offloaded onto hardware, so it's not as battery intensive as it used to be.

replies(11): >>41848643 #>>41848664 #>>41848729 #>>41848784 #>>41848785 #>>41849444 #>>41849487 #>>41849657 #>>41851786 #>>41852399 #>>41854447 #
btown ◴[] No.41848785[source]
For the absolutely massive amount of code one needs to implement for production-grade CSS layout, the Servo source code is illustrative and IMO quite cool to see. For instance, this file just implements block and inline contexts; there's a bit of Rust boilerplate here, but the vast majority of lines are "business logic" around various parts of the specification. And there's a whole folder of these. https://github.com/servo/servo/blob/main/components/layout/f...

But implementing a layout engine is doable. CSS is not magic; there's a spec that can be (meticulously) transformed into code. I've occasionally showed code like this to people frustrated that CSS seems arbitrary, just to show them that there is a logic to the execution environment. Granted, you're not going to regularly click into it the way you'd click into the implementation of a library, but it's no different from something like React in that regard. I think it helps!

replies(1): >>41849667 #
tannhaeuser ◴[] No.41849667[source]
FWIW, Pavel, one of the authors, has devoted considerable time into what is one of the very, very few attempts at a formal specification for CSS (the static/float layout fragment cf [1]). It's a Racket program generating Z3 SMT solver code for verifying an instance layout (which also looks like Scheme) so it's not for the faint-hearted ;) but maybe just what an FP fan on HN is looking for as a challenge.

[1]: https://pavpanchekha.com/blog/css-floats.html

replies(1): >>41849762 #
pavpanchekha ◴[] No.41849762[source]
Wow, thanks, you always suspect no one has actually read the papers :) That was a crazy project... I eventually got it passing almost all of the WPT css2 fragment.

I'm still working on CSS layout, with hopefully another paper coming soon.

replies(2): >>41850151 #>>41850212 #
1. bloopernova ◴[] No.41850212[source]
For what it's worth, I'm just a devops person and I found that article on How CSS Floats Work to be very understandable :) Thank you for writing all this great stuff!