CTEC2712 Web application development

Browser rendering engines

Converting HTTP responses into pixels

Dr Graeme Stuart

Contents

  1. The first web browser
  2. The line mode browser
  3. The Mosaic browser
  4. Battle of the browsers (1997)
  5. The browser wars
  6. Web standards
  7. Convergence
  8. Cascading Style Sheets
  9. The cascade
  10. Plumbing
  11. Syntax and nomenclature
  12. Some examples
  13. Some more examples
  14. Class (and id) selectors
  15. Combinators
  16. Typesetting exercise
  17. CSS box model exercise
  18. Browser internals
  19. From code to pixels
  20. The Document Object Model
  21. Calculating styles
  22. Specificity and building the CSSOM
  23. Layout
  24. Outer display
  25. Flow layout exercise
  26. documentation
  27. Why CSS was invented
  28. CSS is for presentation

The first web browser

Nexus, originally named WorldWideWeb, was created by Tim Berners-Lee.

Tim BL

The nexus browser

The browser provided both authoring and editing functionality. See this demo.

1

The line mode browser

The Line mode browser was created by Nicola Pellow, a Leicester Polytechnic student.

Line mode browser Nicola Pellow

Pictured here with Tim Berners-Lee and Robert Cailliau, Nicola is mentioned in the first website!

2

The Mosaic browser

In 1994, the Mosaic browser was released, enabling images to be included in web pages.

The Mosaic browser Marc Andreesen on the cover of time magazine Mozilla

It was eventually renamed to Netscape Navigator - codename: Mozilla.

3

Battle of the browsers (1997)

4

The browser wars

Microsoft creates Internet Explorer and makes it available for free in 1995.

internet explorer A chart showing browser market share from 1996 to 2009, Internet Explorer squeezes Netscape out but is subsequently replaced by Firefox

Defeated, the Mozilla foundation created the open-source phoenix browser which became firefox.

5

Web standards

The World Wide Web Consortium (W3C) was founded in 1994 by Tim Berners-Lee.

The World Wide Web Consortium The Web Hypertext Application Technology Working Group

The Web Hypertext Application Technology Working Group (WHATWG) was founded by Apple, Mozilla and Opera in 2004,

6

Convergence

Google release Chrome with faster JavaScript and an open-source version Chromium.

Another chart, showing the decline of internet explorer from 2009. Both Chrome and mobile browsers dominate to 2016 chrome logo

Browsers are marketed based on standards compliance and open source implementations.

7

Cascading Style Sheets

CSS was proposed in 1994 by Håkon Wium Lie. The CSS1 specification was completed in 1996.

Håkon Wium Lie CSS3 CSS Zen Garden

First implemented in March 2000 by IE5 on Mac. CSS zen garden was launched in May 2003.

8

The cascade

Essentially there are three types of stylesheets.

  • Browser stylesheets (user-agent stylesheets) provide a base set of default styles.
  • User stylesheets (no longer common) are custom styles set by the browser user.
  • Author stylesheets (the ones we write as developers) are embedded or linked in the HTML document.

Conflicting styles are applied by an algorithm known as the cascade (as in Cascading Style Sheets). The algorithm is fairly complex but for our purposes we can simplify it.

9

Plumbing

Ideally, we don’t want to include style information within the HTML document itself. So we put all our style information in separate CSS files and use <link> elements to link these files into our documents.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My page</title>
        <!-- All styling information is in the linked file -->
        <!-- So swapping out a stylesheet is easy -->
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <!-- content goes here -->
        <!-- keep style information out of the content -->
    </body>
</html>

This is very flexible. A common stylesheet can be used across multiple documents. We can also have multiple stylesheets attached to a single document if we want.

10

Syntax and nomenclature

A CSS ruleset consists of a [group of] selector[s] and a declaration block (between curly brackets) containing one or more declarations. Where Each declaration consists of a property name, a colon and a value, followed by a semi-colon.

1
2
3
4

selector {
    property: value1;
    another-property: value2;
}

Typically, each declaration is given it’s own line. One-line formatting is also common but should only be used when there is only one declaration.

1
2
3


selector { property: value1; another-property: value2; }

Spaces and newline characters are ignored. However, consistent formatting is expected.

11

Some examples

CSS declarations are a way to set CSS properties of elements to given values. The selector determines which elements are targetted by the ruleset.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

body {
    margin: 0;
}

p {
    color: green;
}

a {
    text-decoration: underline;
    color: blue;
}

li {
    padding-block: 1em;
    background-color: yellow;
}

In the above examples the selectors are body, p and a respectively.

12

Some more examples

CSS declarations can have multiple values, typically separated by spaces or commas.

1
2
3

body {
    font-family: Tahoma, Helvetica, sans-serif;
}

Some properties are shorthand properties provided for convenience.

1
2
3
4
5
6
7
8
9

p {
    border: 3px solid blue;
}

p {
    border-width: 3px;
    border-style: solid;
    border-color: blue;
}

The border property is shorthand for setting border-width, border-style and border-color simultaneously.

13

Class (and id) selectors

In HTML, class attributes (class="student") can be used to identify similar elements. Class selectors (the dot, e.g. .student) can be used for selecting elements with a specific class attribute. Similarly, id attributes (id="students") can be selected with a hash (e.g. #students).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<section id="students">
    <figure class="student">
        <img src="images/P12345678.png">
        <figcaption>P12345678</figcaption>
    </figure>

    <figure class="student">
        <img src="images/P12345679.png">
        <figcaption>P12345679</figcaption>
    </figure>
</section>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

#students {
    background-color: #222;
    display: flex;
    justify-content: center;
}

.student {
    margin: 0.5em 0.25em;
    border: 2px solid #fff;
    background-color: #333;
    color: #eee;
}
14

Combinators

Selectors allow us to specify which elements will be affected by a ruleset. There are several patterns (known as combinators) we can use for selectors which allow us to target specific elements.

Separating elements with spaces (e.g. p a) is the descendent combinator.

1
2
3

p a {
    color: darkgrey;
}

Using a greater than symbol (e.g. p > a) is the child combinator

1
2
3

nav > a {
    text-decoration: none;
}

Using a plus symbol (e.g. h1 + p) is the next sibling combinator

1
2
3

h1 + p {
    color: darkgrey;
}

Read more about selectors and combinators.

15

Typesetting exercise

Choosing fonts and playing with typesetting can transform the way your site looks.

The CSS fonts exercise provides a basic introduction to how text works in CSS.

16

CSS box model exercise

The CSS box model is a core concept in CSS, controlling the element size (width and height) as well as the empty space around and within an element.

The CSS box model exercise will walk you through these basics

17

Browser internals

Web browsers are one of the most complex software applications you will use.

Diagram of browser internals

Much of the complexity is in the rendering engine.

18

From code to pixels

The browser rendering engine converts code into pixels through a series of steps. HTML and CSS code is parsed and converted into a nested structure. Styles are determined for each element and applied within the viewport. Positions and dimensions are calculated for each visible element. Pixel colours are calculated for each layer and merged to generate the final result.

A diagram showing the steps from HTML and CSS

Work done in each step can be reused if nothing changes. Although JavaScript and CSS can require steps to be recalculated every frame.

19

The Document Object Model

The HTML response body is loaded sequentially as a stream of bytes.

Diagram of html parser

The Document Object Model

Tokens are combined to form a hierarchy of Nested elements.

20

Calculating styles

Style information are parsed into the CSSOM in a similar way

The DOM and CSSOM are merged into the renter tree

The DOM and CSSOM are merged into the render tree. Computed styles for all visible elements.

21

Specificity and building the CSSOM

Style information are parsed into the CSSOM in a similar way. The order of styles is important, but styles are not simply applied in order. Styles with higher specificity take precedence over those with lower specificity.

1

<p class="a-note" id="this-note">This is a note</p>

The paragraph has a class and an id. The style declarations below all try to set the color property. So, there are three potential values, but only one can be applied. Which one is chosen?

1
2
3

p { color: blue; }          /* all paragraphs start blue            - (0, 0, 1) */
.a-note { color: green; }   /* elements with the class become green - (0, 1, 0) */
#this-note { color: red; }  /* the element with the id become red   - (1, 0, 0) */

The specificity algorithm counts selector components in each weight category (ID, CLASS, TYPE). If competing declarations have the same value, the order in the file will decide.

Note that styles added as inline style attributes will always be applied.

22

Layout

Layout is the process of applying the render tree to the available viewport.

Browser developer tools show calculated dimensions for header lement

The location, width and height of each element is calculated.

23

Outer display

Setting the display property of an element to inline or block will change the way the element participates in the flow layout. The default value is inline.

A <span> element has no default styles. The user-agent stylesheet sets some elements (e.g. <div>, <p>) to display: block by default.

24

Flow layout exercise

By default, content is arranged in a page according to the flow layout. Different elements have different default behaviour. See the default flow layout exercise for more details.

1
2
3
4
5
6
7

body {
    font-size: 1.2em;
    * {
        outline: 2px solid hsla(0, 50%, 50%, 0.1);
        background: hsla(0, 50%, 50%, 0.15);
    }
}

Block elements take up the full width of their container. Inline elements flow like text. Everything flows, wraps and adjusts according to the size of the viewport.

25

documentation

Documentation is usually excellent via MDN (add “MDN” to your search).

MDN logo

e.g. see the documentation for the CSS border property

26

Why CSS was invented

27

CSS is for presentation

CSS allows developers to control the style and layout of a document in the browser.

A wireframe page layout design CSS zen garden screenshot showing multiple designs for the same HTML document

Spend some time in the CSS Zen Garden for inspiration.

28

Browser rendering engines

If you have any questions, now is a good time to ask.

Thanks for listening
Dr Graeme Stuart