Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL about -starting -blocks

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

Gunnar Bittersmann

January 06, 2023
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

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

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. photo by Adi Goldstein on Unsplash the end