Toy Browser on Browser

ブラウザーの仕組みを学ぶために実装した、ブラウザー上で動作するブラウザーエンジン + すごく荒削りなDOMエディターのおまけ付き。

Try!

https://toy-browser-on-browser.igreque.info/

スクリーンショット

参考

• ちいさな Web ブラウザを作ってみよう シリーズ
• The "Let's build a browser engine!" series:
  • Let's build a browser engine! Part 4: Style
  • Let's build a browser engine! Part 5: Boxes
  • Let's build a browser engine! Part 6: Block layout
  • Let's build a browser engine! Part 7: Painting 101
• askerry/toy-browser: A toy browser engine

主に参考にした "Let's build a browser engine!" との違い

• CSSの値における単位は、何を指定していようと暗黙にpxとして解釈される
• textなど、「TODO」としていたレイアウト処理の実装
• border-style: solidに対応（border-styleを指定しなかった場合の挙動が仕様により近い）
• border-top-colorなどに対応

その他、学習のために盛り込んだ各種要素技術（と主な参考ページ）

• OffscreenCanvas
  • オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA
• React
  • https://ja.react.dev/
• jotai-optics
  • Optics — Jotai, primitive and flexible state management for React
• Canvas
  • キャンバスのチュートリアル - Web API | MDN