A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
TIL from CSSBattle
.Til { @container widget (width > 18em) { grid-template: “image description” “image form” /1fr 3fr; } } @container widget(width>18em){.Til{grid-template:”image description”“image form”/1fr3fr}} ☠
.Til { @container widget (width > 18em) { grid-template: “image description” “image form” /repeat(1, 1fr) 3fr; } } ” tainer widget(width>18em){.Til{grid-template:”image description”“image form”/repeat(1,1fr)3fr}}
.Til { @container widget (width > 18em) { grid-template-areas: “image description” “image form”; grid-template-colums: repeat(1, 1fr) 3fr; } } Til{grid-template-areas:”image description”“image form”;grid-template-colums:repeat(1,1fr)3fr}}
.Til { @container widget (width > 18em) { grid-template-areas: “image description” “image form”; grid-template-colums: repeat(1, 1fr) 3fr; /* Reason for this syntax: In our build process, spaces get lost in container queries. The CSS parser can handle missing spaces after quotation marks and closing parenthesis. TODO: After updates, replace with grid-template: “image description” “image form” /1fr 3fr; */ } }
How the CSSBattle has helped me to find a hack against disappearing spaces in container queries when minimized
The following resources were mentioned during the presentation or are useful additional information.
Sollte man das tun? Oder besser lassen? Eine Diskussion der Vor- und Nachteile
Logical vs. physical properties, values and units in CSS; a presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
Follow-up presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
The following code examples from the presentation can be tried out live.
