A while back I set myself a slightly unhinged goal: build a web browser from scratch in Node.js and Electron no external HTML/CSS/layout libraries,...
For further actions, you may consider blocking this person and/or reporting abuse
The
colorbug you found is going to bite you again the moment you hit a real page, because "check node then parent" is a shortcut for what CSS actually does:coloris an inherited property, and inheritance walks the whole ancestor chain, not one level. On cern.ch it looks fixed because the<a>sets its own color explicitly — but the first time you have, say, a<div style="color:red"><p><span>text</span></p></div>, the span has no color, its parent<p>has no color, and yournodeStyles.color || parentStyles.colorfalls straight through to#333333instead of inheriting the red two levels up.The clean fix is to resolve inheritance during the computed-styles pass, not at paint time: when a node has no value for an inherited property, copy the parent's computed value down so every node's
computedStyles.coloris already correct by the time the renderer reads it. That also gives you the right seam forinherit,initial, and eventuallycurrentColor. And worth deciding early which properties inherit —color,font-*,line-height,text-aligndo;background,border,margindon't — because hardcoding the wrong set is the kind of thing that's invisible on simple pages and maddening to unwind on GitHub.thank ! u for the early warning and a code fix suggestion , i will apply this and post a update once its fixed
Building a browser from scratch is one of those projects that teaches respect for boring details very fast. Rendering a simple page like Chrome is not simple at all once parsing, layout, defaults, and edge behavior enter the room. The world's first website is a nice benchmark because it looks tiny but still forces the core contract to be real.
yeah! this cost me approx 3 months
Three months sounds very believable. The hard part of that project is not the first pixels on screen, it is all the boring compatibility work after the demo works. That is why I like the tiny benchmark: if the simplest historical page behaves correctly, you know the engine is respecting the old contracts too.
Love seeing people do things from scratch. Ngl, I'm probably gunna have to do the same soon... I released a 12 part series the other day that turned into a standalone bare-metal OS, written in it's own language (NDA), with a LLM integrated at the core. Though it does need a browser, so while I'm dreading it, I know I'll have to build 1 soon.
Wow! That's amazing
Impressive!
Thanks!
Nice
thanks!