So far, layout has been a linear process that handles open tags and close tags independently. But web pages are trees, and look like them: borders and backgrounds visually nest inside one another. To support that, this chapter switches to tree-based layout, where the tree of elements is transformed into a tree of layout objects before drawing. In the process, we’ll make web pages more colorful with backgrounds.
Constructing an HTML Tree | Web Browser Engineering
So far, our browser sees web pages as a stream of open tags, close tags, and text. But HTML is actually a tree, and though the tree structure hasn’t been important yet, it will be central to later features like CSS, JavaScript, and visual effects. So this chapter adds a proper HTML parser and converts the layout engine to use it.
In Defense of Readers
As web designers, we concern ourselves with how users move from page to page, but forget the needs of those whose purpose is to be still. Learn the design techniques that create a mental space for …
Supporting Embedded Content | Web Browser Engineering
While our browser can render complex styles, visual effects, and animations, all of those apply basically just to text. Yet web pages contain a variety of non-text embedded content, from images to other web pages. Support for embedded content has powerful implications for browser architecture, performance, security, and open information access, and has played a key role throughout the web’s history.
Object-Oriented UX
We know big, monolithic webpages won’t meet the needs of responsive sites and endless screens. But we’re often still quilting together design patterns and content modules, rather than truly thinkin…
Relearn CSS layout
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves.
Chiaroscuro, or Expressive Trees in Web Components
This space intentionally left blank.
Reusing Previous Computations | Web Browser Engineering
Compositing (see Chapter 13) makes animations smoother, but it doesn’t help with interactions that affect layout, like text editing or DOM modifications. Luckily, we can avoid redundant layout work by treating the layout tree as a kind of cache, and only recomputing the parts that change. This invalidation technique is traditionally complex and bug-prone, but we’ll use a principled approach and simple abstractions to make it manageable.
About HTML semantics and front-end architecture – Notes by Nicolas Gallagher
A critical look the term 'semantic HTML' and the limitations it has created for web engineers
swup — Versatile and extensible page transition library for server-rendered websites
Versatile and extensible page transition library for server-rendered websites
Issue 345 of CSS Layout News | Rachel Andrew | Offprint
Rachel Andrew shares tutorials, video, and browser news with a focus on CSS layout.
Applying Author Styles | Web Browser Engineering
In the previous chapter we gave each pre element a gray background. It looks OK, and it is good to have defaults, but sites want a say in how they look. Websites do that with Cascading Style Sheets (CSS), which allow web authors (and, as we’ll see, browser developers) to define how a web page ought to look.
The Layout Maestro by Ahmad Shadeed
Build any web layout with confidence. Learn practical CSS layout through visual lessons, interactive demos, and a proven layout mindset.
Evolving the infinite canvas
In the digital world, especially on the web, we’re used to things being stacked vertically. Scrolling, scrolling, through boxes of content,
Automation and customization of rendered web pages
The names of commands and objects are vital to the usability of a programming system. We are developing a web automation system in which users need to identify web page elements, such as hyperlinks and form fields, in pages written by other designers. ...
Close to the metal: web design and the browser
Websites have evolved over the years, but in the name of evolution, there seems to be mistaken thinking that the process of building a website needs to get more complex, using Javascript frameworks and modern backend systems; when at the end of the day, browsers still only need static HTML content to interpret.