TIL about -starting -blocks

Logical vs. physical properties, values and units in CSS; encore: Trajan
Links to resources and codepens at https://noti.st/gunnarbittersmann/DQUUos/til-about-starting-blocks

Transcript

1. TIL about - starting - blocks photo by Braden Collum on Unsplash
2. justify-content: left justify-content: right justify-content: end justify-content: start physical values logical values
3. padding-block-start padding-block-end padding 
 -inline 
 -start padding 
 -inline 
 -end ➡︎ inline direction ➡︎ block direction citius, altius, fortius padding-block-start padding-block-end padding 
 -inline 
 -end padding 
 -inline 
 -start direction: rtl ىوقأ ,ىلعأ ,عرسأ direction: ltr
4. padding-inline-start padding-inline-end padding-block-end padding-block-start Α Γ ଎ ͘ Α Γ ߴ ͘ Α Γ ڧ ͘ padding-block-start padding-block-end padding-inline-start padding-inline-end ʮΑΓ଎͘ɺΑΓߴ ͘ɺΑΓڧ͘ʯ writing-mode: horizontal-tb writing-mode: vertical-rl ➡︎ inline direction ➡︎ block direction
5. writing-mode: vertical-lr
6. padding-left padding-right padding-top padding-bottom padding margin-… border-… padding-inline-start padding-inline-end padding-block-start padding-block-end padding-inline padding-block margin-… border-… physical properties logical properties
7. left right top bottom inset width height inset-inline-start inset-inline-end inset-block-start inset-block-end inset-inline inset-block inline-size block-size physical properties logical properties
8. vw, vh lvw, lvh svw, svh dvw, dvh cqw, cqh vi, vb lvi, lvb svi, svb dvi, dvb cqi, cqb physical units logical units
9. taken from The Large, Small, and Dynamic Viewports by Bramus
10. photo by Adi Goldstein on Unsplash The - end
11. citius, altius, fortius
20. photo by Adi Goldstein on Unsplash the end