Interesting things I learnt about layout

(and general CSS…)

Chen Hui Jing / @hj_chen

Do you Box Model?
🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🦊 🥑 🧗 🏳️‍🌈
Chen Hui Jing
Jing
@hj_chen
Nexmo Developer Relations

🥑 Developer Advocate 🥑

Nexmo

http://bit.ly/convo-melb

🇸🇬 SingaporeCSS 🇸🇬

SingaporeCSS organisers on a pirate ship

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.

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

Block formatting context

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
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
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 🤓

QR code for Smashing article on margins

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

Grid gaps

May cause overflow if you're not careful

1
2
3
4

Overscroll and padding

padding at end side of overflow scroll container not applied

2 rabbits taking a nap
2 rabbits taking a nap
2 rabbits taking a nap
2 rabbits taking a nap

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.

sandwich ::= lower_slice [ mustard | mayonnaise ] lettuce? tomato? [ bologna | salami | ham ]{2,4} cheese+ top_slice

Analogy from How to Read W3C Specs.

Slides | Cheatsheet

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Header font is Biorhyme by Aoife Mooney
Body font is Cabin by Pablo Impallari