TIL about -starting -blocks

A presentation at Tech Talk @ Tagesspiegel in January 2023 in by Gunnar Bittersmann

Slide 1

Slide 1

photo by Braden Collum on Unsplash

blocks starting TIL about

Slide 2

Slide 2

physical values logical values justify-content: left justify-content: start justify-content: right justify-content: end

Slide 3

Slide 3

➡︎ ➡︎ citius, altius, fortius padding-block-end padding -inline -end direction: ltr padding -inline -start padding-block-start inline direction block direction ‫ أقوى‬,‫ أعلى‬,‫أسرع‬ padding-block-end padding -inline -start direction: rtl padding -inline -end padding-block-start

Slide 4

Slide 4

padding-block-end padding-inline-end padding-inline-start 「より速く、より高 く、より強く」 padding-inline-start く よ り よ 速 り く 強 く よ り 高 padding-block-start ➡︎ padding-block-start writing-mode: vertical-rl padding-block-end ➡︎ writing-mode: horizontal-tb padding-inline-end inline direction block direction

Slide 5

Slide 5

writing-mode: vertical-lr

Slide 6

Slide 6

physical properties logical properties padding-left padding-right padding-top padding-bottom padding-inline-start padding-inline-end padding-block-start padding-block-end padding padding-inline padding-block margin-… margin-… border-… border-…

Slide 7

Slide 7

physical properties logical properties left right top bottom inset-inline-start inset-inline-end inset-block-start inset-block-end inset inset-inline inset-block width height inline-size block-size

Slide 8

Slide 8

physical units logical units vw, vi, vh vb lvw, lvh lvi, lvb svw, svh svi, svb dvw, dvh dvi, dvb cqw, cqh cqi, cqb

Slide 9

Slide 9

taken from The Large, Small, and Dynamic Viewports by Bramus

Slide 10

Slide 10

photo by Adi Goldstein on Unsplash

end The

Slide 11

Slide 11

citius, altius, fortius

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

the end photo by Adi Goldstein on Unsplash