A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
blocks starting TIL about
physical values logical values justify-content: left justify-content: start justify-content: right justify-content: end
➡︎ ➡︎ 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
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
writing-mode: vertical-lr
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-…
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
physical units logical units vw, vi, vh vb lvw, lvh lvi, lvb svw, svh svi, svb dvw, dvh dvi, dvb cqw, cqh cqi, cqb
taken from The Large, Small, and Dynamic Viewports by Bramus
end The
citius, altius, fortius
the end photo by Adi Goldstein on Unsplash
Logical vs. physical properties, values and units in CSS; encore: Trajan
The following resources were mentioned during the presentation or are useful additional information.
Jen Simmons at CSS Day 2017 + Browser API Special
several extra viewport sizes and accompanying viewport-relative units defined by the CSSWG
Why Hollywood kept using Trajan
Yves Peters at beyond tellerrand Düsseldorf 2011
The following code examples from the presentation can be tried out live.
