Web technologies can also be used to make apps that can be installed on a phone!
[Progressive Web Apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) is a set of technologies enabling this,
and at the bare minimum, it requires a [manifest file](https://developer.mozilla.org/en-US/docs/Web/Manifest) (just a JSON file with metadata about the app)
and a `<link rel="manifest" href="manifest.json" />` in the page’s `<head>`.
Document flow & the box model
Block elements
display: block;
- Laid out top to bottom*
- Line break before and after
- Box as wide as available space (extrinsic)
- Box as tall as all contents (wrapped)
- Text wrapping inside box
Lorem Ipsum dolor sit amet
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Inline elements
display: inline;
- Laid out left to right*
- Inline with surrounding text
- Box as wide as all contents (intrinsic)
- Box as tall as one line
- Text wrapping by box fragmentation
velit esse cillum dolore
consectetur adipiscing elit
sed do eiusmod tempor incididunt
Excepteur sint occaecat cupidatat non proident
\* In Western languages.
Which elements that we have seen already are block and which inline?
Which of the elements we have seen so far are block and which inline?
div
span
p
em
ol
ul
strong
article
abbr
details
Block Inline
Note that many of the elements we have seen are missing from this list.
That’s because block and inline are not the whole story.
The display property
How does the browser know which elements are block and which are inline? It’s not magic, that is also just CSS that is being applied to elements by default, called the *User Agent Stylesheet*. Open this in a new tab and inspect the paragraphs, `<em>` and `<strong>` elements, or even the `<body>`, `<head>` and `<html>` elements. We can set the `display` property ourselves as well, to override the defaults. Let's make the paragraphs inline and the `<em>` and `<strong>` elements block!Each property has an initial value
display: initial; → display: inline;font-weight: initial; → font-weight: normal;
- We can set a property to its initial value by setting it to the keyword [`initial`](https://developer.mozilla.org/en-US/docs/Web/CSS/initial),
which is valid for every property (it is a *global keyword*)
- How do we find out what a property’s initial value actually is? By looking up its definition. E.g. here’s [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#formal_definition)
- Usually the initial value is the value that produces no effect, e.g. [`font-weight: normal`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#formal_definition)
Browsers apply default CSS through their User Agent Stylesheet
html {
display: block;
}
body {
display: block;
margin: 8px;
}
article,
aside,
details,
div,
dt,
figcaption,
footer,
form,
header,
hgroup,
html,
main,
nav,
section,
summary {
display: block;
}
head, link, meta,
script, style, title {
display: none;
}
That is just a CSS file that is applied to every website.
Curious what that looks like? Here are the UA stylesheets of some popular browsers:
- [Chrome](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/resources/html.css;bpv=0)
- [Firefox](https://github.com/mozilla/gecko-dev/blob/master/layout/style/res/html.css)
- [Safari](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
The combination of initial values and UA stylesheet values are the defaults we start with
Any CSS we write has priority over these defaults. We will discuss the exact mechanism in the next lecture.
The Box Model
There are a few properties that are crucial to how these boxes are sized:
paddingcontrols the spacing from the element’s content to its edge.marginspecifies the spacing from the element’s edge to the elements around it, and can be negative to bring the element closer to other elements instead of farther.borderallows you to specify a visible border. It’s placed outside the padding.- Padding & border widths are added to width and height, not subtracted from it.
- Outlines, shadows etc do not affect the box in any way.
- Always use sufficient padding, otherwise the text is uncomfortable to read. As you may remember from the Graphic Design lecture, you usually need more padding horizontally than vertically.
Switching box model
textarea {
padding: 1em;
width: 100%;
}
textarea {
padding: 1em;
width: 100%;
box-sizing: border-box;
}
Switching box models
Sometimes the default box model is a problem. Let's look at an example. We want this textarea to have a width of 100%. However, if we set `width: 100%` it doesn’t work the way we expect. What is happening? How can we fix it? We *can* fix it with `calc(100% - 1em)` but that way we are repeating the padding and border twice. How can we improve our code? Let’s apply `box-sizing` to make our code more maintainable.Alternate Box Model
- What happens when we specify a width of
100%? Does it match our intent? - We can change that with
box-sizing: border-box, but that has its issues too - Each element has a content box, a padding box, a border box and a margin box that are delimited by the corresponding areas.
- You can use the browser developer tools to inspect the box model, via the "Computed" tab in the Elements panel.
Box properties on inline element
The properties we saw behave entirely differently on inline elements! - `width` and `height` have no effect - `padding` and borders are applied to each fragment individually, and does not move it in any way. - Horizontal `margin` applies spacing before and after the element, vertical margin does nothing.Block or inline?
<input>: Block or inline?
- It was on the same line → inline.
- It had a width → block
WUT?! 🤔🤔🤯
Block elements
- Laid out top to bottom*
- Line break before and after
- Box as wide as all available space
- Box as tall as all contents (wrapped)
- Text wrapping inside box
- We can set
width,height,margin
Lorem Ipsum dolor sit amet
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Inline elements
- Laid out left to right*
- Inline with surrounding text
- Box as wide as all contents
- Box as tall as one line
- Text wrapping by box fragmentation
width,height,marginhave no effect.
velit esse cillum dolore
consectetur adipiscing elit
sed do eiusmod tempor incididunt
Excepteur sint occaecat cupidatat non proident
Inline-block elements
- Laid out top to bottom*
- Line break before and after
- Box as wide as all available space
- Box as tall as all contents (wrapped)
- Text wrapping inside box
- We can set
width,height,margin-top,margin-bottom
- Laid out left to right*
- Inline with surrounding text
- Box as wide as all contents
- Box as tall as one line
- Text wrapping by box fragmentation
width,height,margin-top,margin-bottomhave no effect.
velit esse cillum dolore
Lorem Ipsum dolor sit amet
consectetur adipiscing elit
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
sed do eiusmod tempor incididunt
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non proident
Block, inline, or inline block?
- Is image a block or inline element? Or maybe inline-block?
- We can set
width,height,margin, although they are not entirely independent - If we inspect, it's inline (?!?) What's going on?
-
Tip:
object-fitandobject-positionhelp us adjust how the object contained within the replaced element should be positioned.
Replaced elements
- Theory:
An element whose representation is outside the scope of CSS
- Practice: flows around surrounding content like an inline-block, contents are not affected by the current document's styles
- Only replaced elements can have intrinsic dimensions or an intrinsic aspect ratio (but not all do).
Examples
Block elements
div
h1
h2
h3
h4
h5
h6
p
body
html
Inline elements
a
span
strong
em
mark
code
cite
abbr
Inline-block elements
button
input
textarea
select
Replaced elements
img
video
audio
iframe
canvas
option
object
embed
- Even elements like
headorstyleare boxes too! - They just have
display: nonefrom the User Agent stylesheet, which hides the element and removes it from normal flow. - Same with elements with the
hiddenattribute - This is a design principle of the web platform: as much as possible, its behavior must be explainable through its own primitives, not special "magic"
- You can also apply
display: noneto elements you want to hide.
Other useful layout modes
Block, inline, and inline block were the first layout modes,
and were designed to support **document layout**.
Though block and inline do play a huge role in today's layouts,
these days we also have other layout modes that support creating UIs much better.
We will explore them in more detail in the Layout lecture.
