Interesting things I learnt about layout

(and general CSS…)

Chen Hui Jing / @hj_chen

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🦊 🥑 🧗 🏳️‍🌈

@hj_chen

🥑 Developer Advocate 🥑

http://bit.ly/convo-melb

🇸🇬 SingaporeCSS 🇸🇬

https://singaporecss.github.io

@SingaporeCSS | @hj_chen | @wgao19

Initial value of `display` for all elements is `inline`

Then how come <div>s, paragraphs, lists and the like are <display: block>?

Because browser default stylesheets.

Firefox stylesheet: resource://gre-resources/html.css
Link to Chromium stylesheet

Inline-level element behaviour

inline, inline-table, inline-block, inline-flex, inline-grid
width and height property does not apply
height of content is based on font size
vertical-align property only applies to inline-level and table-cell elements
Only margins, borders and paddings along the inline axis have any visible effect on an inline box

If an element generates zero boxes, was it really there at all?

If an element generates zero boxes, was it really there at all?

Block formatting contexts

The context that block-level boxes participate in

Boxes are laid out one after another, in the block flow direction, from the start of the containing block

Margins along the block flow direction between adjacent block-level boxes in the same block formatting context collapse

What establishes new block formatting contexts?

Floats
Absolutely positioned elements
Block containers that are not block boxes
Block boxes with overflow other than visible
Boxes with display set to flow-root

We need a new BFC because...?

1. Prevent collapsing margins

This is a line of text in a p tag.

  I'm a box with margins.
  I'm another box with margins.

This is a line of text in a p tag.

I'm a box with margins.

I'm another box with margins.

2. Stop text from flowing around the float


  I'm a floated box!
  This is just a bunch of text that is going on and on so it's long enough to wrap around the float, line boxes yo!

I'm a floated box!

This is just a bunch of text that is going on and on so it's long enough to wrap around the float, line boxes yo!

3. Contains floats


  Floaty! ^_^
  Floaty too! :)

Floaty! ^_^

Floaty too! :)

Let's talk about margin collapsing

1. Between adjacent siblings

Brother

Sister

2. Between empty boxes

Got stuff

Not empty

3. Parent and first / last child element

This is the parent element

This is a child element

We prevent margin collapse by…?

1. Adding something in between the elements

Got stuff

Not empty

2. Add border to the parent element

This is the parent element

This is a child element

3. Create a new BFC

Refer to section on block formatting contexts ☝️

🤓 Everything You Need To Know About CSS Margins 🤓

https://www.smashingmagazine.com/2019/07/margins-in-css/

Grid gaps

May cause overflow if you're not careful

Overscroll and padding

padding at end side of overflow scroll container not applied

Use the flex shorthand

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

Flex keywords

`flex: initial`	`flex: 0 1 auto`, cannot grow but can shrink when there isn't enough space
`flex: auto`	`flex: 1 1 auto`, can grow and shrink to fit available space
`flex: none`	`flex: 0 0 auto`, cannot grow or shrink, AKA inflexible
`flex: <positive-number>`	`flex: <positive-number> 1 0`, can grow and shrink, extent of growth depends on flex factor

About shorthands…

The border shorthand

Sets the same width, colour and style for all four borders of a box
Unlike margin and padding shorthands, it cannot set different values on the four borders
Also resets border-image to initial value

It is therefore recommended that authors use the border shorthand, rather than other shorthands or the individual properties, to override any border settings earlier in the cascade.

The background shorthand

<bg-layer>#, <final-bg-layer>

where

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

at least 1 value must occur, the rest is pretty much up to you
for <position>, can optionally include <bg-size>
entire set for <bg-layer> can occur multiple times, comma-separated
only <final-bg-layer> can have <'background-color'>

Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of background-image, background-position, background-size, background-repeat, background-origin, background-clip and background-attachment to that property’s initial value, then assigns any explicit values specified for this layer in the declaration. Finally background-color is set to the specified color, if any, else set to its initial value.

🤓 CSS Shorthand Syntax Considered an Anti-Pattern 🤓

QR code for Harry's article on CSS shorthands

https://csswizardry.com/2016/12/css-shorthand-syntax-considered-an-anti-pattern/

The animation shorthand

<single-animation>#

where

<single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

The order of values within each animation definition is important: the first value that can be parsed as a <time> is assigned to the animation-duration, and the second one is assigned to animation-delay.

Understanding the cascade

Magic

Also, reading CSS specifications

CSS property syntax

Loosely based on the Backus-Naur Form (BNF) notation

Introduced by John Backus and Peter Naur
A context-free notation method to describe the syntax of a language.
The CSS property value syntax is loosely based on BNF notation.

<symbol> ::= __expression__

The stuff on the left can be replaced by the stuff on the right.

A BNF Sandwich 🍔

A sandwich consists of a lower slice of bread, mustard or mayonnaise; optional lettuce, an optional slice of tomato; two to four slices of either bologna, salami, or ham (in any combination); one or more slices of cheese, and a top slice of bread.