Mir­ko Lem­me Front­end-Ent­wick­ler bei der agen­tur­fu­er­kran­ke­me­di­en @mi­leon­net

SCREENGUIDE - - Events -

Pro­zen­tua­le An­ga­ben ei­nes Blo­ck­ele­ments für bei­spiels­wei­se Hö­he, Brei­te, Pad­ding oder Mar­gin be­zie­hen sich in der Re­gel auf die Brei­te des um­schlie­ßen­den Ele­ments. Das ist auch lo­gisch, da Blo­ck­ele­men­te im CSS-Box-Mo­dell in ih­rer Brei­te durch ih­re El­tern de­fi­niert sind, ih­re Hö­he sich aber oh­ne ge­gen­tei­li­ge An­ga­ben auf die Grö­ße des In­halts ein­passt. Das kann manch­mal sehr kon­train­tui­tiv sein. Zum Bei­spiel wenn ei­ne Box ein pad­ding-top ab­hän­gig von der Hö­he – und nicht von der Brei­te – des El­tern­ele­ments be­kom­men soll. Wie wä­re es mit ei­ner No­ta­ti­on, die mit­hil­fe von Se­lek­to­ren in­ner­halb der Wer­te ein­deu­tig Be­zug auf die Ele­men­te nimmt?

CSS

.foo { pad­ding-top: height(.bar) }

Da­bei näh­me pad­ding-top nun ge­nau den kal­ku­lier­ten Hö­henWert von .bar an. Ver­gleich­bar mit ei­nem sol­chen JS-Ablauf:

CSS

var foo = do­cu­ment.que­rySelec­tor('.foo'); var bar = do­cu­ment.que­rySelec­tor('.bar'); foo.style.pad­din­gTop = bar.off­setHeight + 'px';

(Die­ses Bei­spiel macht es sich ein­fach und be­rück­sich­tigt nur das je­weils ers­te Auf­tau­chen der Ele­men­te.) Na­tür­lich müss­te die­se Syn­tax ent­spre­chen­de Fäl­le kol­la­bie­ren las­sen, in de­nen sich die An­ga­ben im Kreis dre­hen oder wi­der­spre­chen, zum Bei­spiel: CSS

.foo { height: width(.bar) } .bar {

width: height(.foo) }

Mit die­sen Qua­si-Va­ria­blen wä­ren die Be­zü­ge der Di­men­sio­nen leich­ter nach­voll­zieh­bar. Web­wor­ker könn­ten so recht prag­ma­tisch klas­si­sche Pro­blem­fäl­le lö­sen – wie zum Bei­spiel gleich ho­he Spal­ten, Sti­cky Foo­ter oder kon­sis­ten­te Sei­ten­ver­hält­nis­se für Con­tai­ner.

Mit­hil­fe der be­reits breit un­ter­stütz­ten calc-Funk­ti­on lie­ßen sich die Wer­te be­lie­big kom­bi­nie­ren:

CSS

main { min-height: calc(height(bo­dy) - height(he­a­der) - height(foo­ter)) }

Si­cher­lich bräch­te so ei­ne Syn­tax ei­ni­ge neue Stol­per­fal­len mit sich. Doch dann wie­der­um gibt es kaum ei­ne CSS-Lo­gik, die oh­ne tie­fe­res Ver­ständ­nis der Ei­gen­schaf­ten out of the box ein­fach funk­tio­niert. Da Front­end-Ent­wick­ler die No­ta­ti­on von Se­lek­to­ren schon lan­ge ver­in­ner­licht ha­ben, ist zu­min­dest die Nach­voll­zieh­bar­keit sol­cher At­tri­bu­te kei­ne ech­te Hür­de. Be­son­ders nicht ver­gli­chen mit kom­ple­xe­ren, neue­ren Tech­ni­ken wie Flex­box oder CSS-Grids.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.