CSS-Kniffliges zum Wochenende
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> So, jetzt auch in Safari. Browser, die `text-align-last: justify` nicht unterstützen, bekommen ein `header::after`-Pseudoelement, damit die Zeile mit Überschrift und Button nicht die letzte ist.
Braucht man gar nicht …
> Die Liste dann nicht `display: flex`, sondern `inline-flex`.
… wenn die Liste `inline-flex` bleibt, also zum Ausblenden nicht auf `none` gesetzt wird.
`display: none` bekommen die List-Items verpasst. Die Liste wird per `visibility: hidden` ausgeblended – oder auch gar nicht, dann aber `border: none`.
`header { padding-bottom: 0 }`; den Abstand bekommt die Liste – [fertig!](https://codepen.io/gunnarbittersmann/pen/NvKBjp)
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
CSS-Kniffliges zum Wochenende
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> So, jetzt auch in Safari. Browser, die `text-align-last: justify` nicht unterstützen, bekommen ein `header::after`-Pseudoelement, damit die Zeile mit Überschrift und Button nicht die letzte ist.
Braucht man gar nicht …
Die Liste dann nicht `display: flex`, sondern `inline-flex`.
… wenn die Liste `inline-flex` bleibt, also zum Ausblenden nicht auf `none` gesetzt wird.
`display: none` bekommen die List-Items verpasst. Die Liste wird per `visibility: hidden` ausgeblended – oder auch gar nicht, dann aber `border: none`.
`header { padding-bottom: 0 }`; den Abstand bekommt die Liste – [fertig!](https://codepen.io/gunnarbittersmann/pen/NvKBjp)
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)