ZWEI-DIMENSIONAL

SCREENGUIDE - - Css | Webentwicklung - Twit­ter: @Flo­cke Kom­men­tie­ren: screen­gui.de/37/css-grids

Sie stel­len sich mög­li­cher­wei­se die Fra­ge, ob nicht der Ein­satz von Flex­box voll­kom­men aus­rei­chend ist. Der Kom­ple­xi­täts­grad von CSS-Grid wirkt schon in­ner­halb die­ses Ar­ti­kels recht groß, ist aber in Wahr­heit noch viel grö­ßer. Der gro­ße Un­ter­schied von CSS-Grids zu Floats und Flex­box ist, dass CSS-Grids zwei­di­men­sio­nal agie­ren kön­nen. Floats funk­tio­nie­ren nur ho­ri­zon­tal, Flex­box nur ho­ri­zon­tal oder ver­ti­kal. Bei den CSS-Grids kön­nen die Grid-Items ho­ri­zon­tal und ver­ti­kal ver­teilt wer­den:

Im obi­gen Bei­spiel wird ein Grid-Item ho­ri­zon­tal als „hea­der” und ein an­de­res ver­ti­kal als „si­de­bar” aus­ge­rich­tet. Die­se Fle­xi­bi­li­tät in­ner­halb ei­ner Re­gel bie­tet kei­ne an­de­re Tech­nik.

Bei der Ar­beit mit Flex­box müs­sen Sie sich im­mer für ei­ne Haupt­rich­tung ent­schei­den. In­ner­halb die­ser wer­den Ih­re Flex-Items aus­ge­rich­tet. Im fol­gen­den Bei­spiel wer­den die di­rek­ten Kind­ele­men­te des Ele­ments mit der Klas­se .flex-con­tai­ner ho­ri­zon­tal aus­ge­rich­tet, es ist die Stan­dard­rich­tung:

Sie kön­nen da­für sor­gen, dass Flex-Items, die nicht mehr in ei­ne vi­su­el­le Zei­le pas­sen, in ei­ne neue rut­schen. Sie kön­nen aber nicht da­für sor­gen, dass die­se neue Zei­le ei­ne ab­wei­chen­de Hö­he hat. Sie ha­ben kei­ne Kon­trol­le über die im­pli­zit ent­ste­hen­den neu­en Zei­len. Bei CSS-Grids ha­ben Sie die­se Kon­trol­le.

Durch die Er­gän­zung der Ei­gen­schaft „flex-di­rec­tion: co­lumn;” wür­den die Flex-Items des obi­gen Bei­spiels nicht mehr ho­ri­zon­tal, son­dern ver­ti­kal lau­fen. Sie müs­sen zwi­schen bei­den Op­tio­nen wäh­len. Bei CSS-Grids müs­sen Sie dies nicht. Sie kön­nen die ei­nen Ele­men­te ho­ri­zon­tal, die an­de­ren ver­ti­kal aus­rich­ten. Und da­für be­nö­ti­gen Sie zu­dem we­ni­ger HTML. Denn da Flex­box nur in ei­ne Rich­tung funk­tio­niert, be­nö­ti­gen Sie zur Kom­bi­na­ti­on bei­der Rich­tun­gen ei­nen ex­tra Wrap­per, wie Sie an ei­nem ein­fach ge­hal­te­nen Lay­out­bei­spiel se­hen kön­nen [cd­pn.io/e/GQgMdo].

In der CSS-Grid-Va­ri­an­te wird der Wrap­per nicht be­nö­tigt [cd­pn. io/e/jZEaQJ]. Die gro­be Struk­tur bei­der Va­ri­an­ten sieht fol­gen­der­ma­ßen aus:

Der Brow­ser be­rech­net bei Flex­box pri­mär in ei­ne Rich­tung – ho­ri­zon­tal oder ver­ti­kal. Bei CSS-Grids hin­ge­gen rech­net er in zwei Rich­tun­gen – ho­ri­zon­tal und ver­ti­kal. Des­halb sind mit CSS-Grids kom­ple­xe­re Lay­outs ein­fa­cher mög­lich. Flex­box spielt sei­ne Stär­ken in ein­zel­nen Mo­du­len aus, al­so qua­si für Mi­kro-Lay­out, wo­hin­ge­gen CSS-Grids für Sei­ten­lay­outs ge­schaf­fen wur­den.

Sie soll­ten ei­ne Na­vi­ga­ti­on mit Flex­box rea­li­sie­ren, nicht mit CSS-Grids. Und ver­ges­sen Sie bit­te nicht die al­ten, tra­di­tio­nel­len Tech­ni­ken, die trotz die­ser bei­den neu­en Tech­ni­ken noch im­mer ih­re Be­rech­ti­gung ha­ben. Wenn Ih­re Na­vi­ga­ti­on mit „dis­play: in­li­ne-block” oder Floats wun­der­bar und oh­ne Nach­tei­le funk­tio­niert, gibt es kei­nen ver­nünf­ti­gen Grund, auf ei­ne an­de­re Tech­nik um­zu­stei­gen. Die­se lohnt nur, wenn Sie ei­nen Vor­teil be­kom­men. Sie soll­ten dann Flex­box und CSS-Grids als Pro­gres­si­ve En­han­ce­ment nut­zen. Da­durch lie­fern Sie im­mer ein an­ge­neh­mes Lay­out aus, das sich al­ler­dings im De­tail un­ter­schei­den kann.

Es ist zu­dem ein Irr­tum, dass CSS-Grids al­le an­de­ren Tech­ni­ken er­set­zen. Je­de Tech­nik hat ih­re Be­rech­ti­gung, ih­re Vor- und Nach­tei­le. CSS-Grids fül­len ei­ne Lü­cke, die vor­her nur mit Mü­he und Not mit­hil­fe von da­zu nicht pri­mär ge­dach­ten Tech­ni­ken ge­stopft wur­de. Grids kön­nen in sehr vie­len Si­tua­tio­nen ih­re Stär­ken aus­spie­len. Aber sie sind nicht all­mäch­tig. Die be­lieb­ten Ma­son­ry-Lay­outs, die In­hal­te – meist Bil­der – ver­ti­kal an­ord­nen und au­to­ma­tisch in ei­ne neue Spal­te ver­schie­ben, sind nicht mit CSS-Grids rea­li­sier­bar [goo.gl/ezVNXT] – die in­ne­ren Mecha­nis­men der Grids ste­hen da­ge­gen.

nach. Ei­ne äl­te­re Ver­si­on der Grids exis­tiert auch im In­ter­net Ex­plo­rer ab Ver­si­on 10 und in Edge bis ein­schließ­lich Ver­si­on 15, so­dass auch al­le halb­wegs mo­der­nen Brow­ser mit CSS-Grids um­ge­hen kön­nen. Al­ler­dings un­ter­stüt­zen die In­ter­net Ex­plo­rer nicht al­le ak­tu­el­len Ei­gen­schaf­ten. Grid-Are­as zum Bei­spiel gibt es im IE10 und IE11 lei­der nicht. Al­le an­de­ren Ei­gen­schaf­ten ha­ben ein „-ms-”-Pre­fix. Man­che wer­den auch kom­plett an­ders ge­schrie­ben. Den Um­gang mit al­len Un­ter­schie­den müs­sen Sie nicht ma­nu­ell pfle­gen. Das be­lieb­te Tool „Au­to­pre­fi­xer” hilft Ih­nen da­bei [goo.gl/TLpWr8]. Sie müs­sen die CSS-Grids al­ler­dings in der Kon­fi­gu­ra­ti­on ak­ti­vie­ren:

Doch mit Au­to­pre­fi­xer al­lein ist uns beim Um­gang mit dem IE nicht ge­hol­fen. Ra­chel And­rew führt in ei­ner Ta­bel­le al­le Gri­dEi­gen­schaf­ten und ih­re mög­li­chen IE-spe­zi­fi­schen Pen­dants auf [goo.gl/RGDTLj]. Da­bei fällt auf, dass vie­le ak­tu­el­le Ei­gen­schaf­ten kei­ne Ent­spre­chung in der al­ten Ver­si­on ha­ben und an­de­re wie­der­um so ge­löst wer­den, dass Au­to­pre­fi­xer lei­der kei­ne Hil­fe ist. Wenn Sie ein ein­fa­ches Grid-Lay­out er­stel­len, ist die Chan­ce hoch, dass Sie es auch für den IE zum Lau­fen be­kom­men. Im Ex­trem­fall er­stel­len Sie ein Float-Lay­out für Nicht-Grid-Brow­ser, ein ein­fa­ches Grid für den IE und ein aus­ge­feil­tes Grid für al­le mo­der­nen Brow­ser. Es hört sich schlim­mer an, als es am En­de sein wird.

Ab­seits des gu­ten al­ten IE: Der UC Brow­ser – ein mo­bi­ler Brow­ser, der vor al­lem auf schwa­chen End­ge­rä­ten in In­di­en oder Afri­ka zum Ein­satz kommt – un­ter­stützt Grids auch in der ak­tu­el­len Ver­si­on nicht. Es liegt al­so an Ih­ren Pro­jek­ten, ob Sie oh­ne Ge­wis­sens­bis­se mit der neu­en Tech­nik ar­bei­ten kön­nen. Ein Blick in die ei­ge­ne Sta­tis­tik lohnt im­mer.

PRO­GRES­SI­VE EN­HAN­CE­MENT

Es gibt kei­nen Po­ly­fill für CSS-Grids und wird wohl auch nie ei­nen ge­ben. Es kann al­so kein Ziel sein, op­tisch das glei­che Er­geb­nis für al­te Brow­ser zu ser­vie­ren. Im Geis­te von Pro­gres­si­ve En­han­ce­ment oder Grace­ful De­gre­da­ti­on kön­nen Sie ent­we­der auf ei­ne be­ste­hen­de Lay­out­lö­sung die neue Tech­nik drauf­set­zen, um für mo­der­ne Brow­ser ei­ne leicht an­de­re User Ex­pe­ri­ence zu schaf­fen. Oder Sie ge­ben al­len Nicht-Kön­nern ein li­nea­ri­sier­tes Lay­out. Das

Gu­te an CSS ist ja, dass Brow­ser ih­nen un­be­kann­te Ei­gen­schaf­ten ein­fach igno­rie­ren, an­statt die Ver­ar­bei­tung wie bei Ja­vaS­cript mit ei­nem Feh­ler ab­zu­bre­chen.

Nut­zen Sie neue Tech­ni­ken wie CSS-Grid oder auch Flex­box, so igno­rie­ren die mo­der­nen Brow­ser mög­li­che al­te Lö­sun­gen wie Floats, „dis­play: ta­ble-cell” oder „dis­play: in­li­ne-block” ein­fach. Sie kön­nen al­so schlicht ein be­ste­hen­des Lay­out mit CSS-Grids er­wei­tern [cd­pn.io/e/JMRwBO]. Sie wer­den se­hen, dass we­der ei­ne Än­de­rung in der Co­de­rei­hen­fol­ge (die Kas­ka­de) noch ei­ne Er­hö­hung der Spe­zi­fi­tät et­was dar­an än­dern kann, dass der CSS­Grid-fä­hi­ge Brow­ser die Floats igno­riert.

FEA­TU­RE QUE­RIES

In ei­ni­gen Ar­ti­keln wird die Ver­wen­dung von Fea­tu­re Que­ries zur Un­ter­stüt­zung von CSS-Grid dis­ku­tiert. Wäh­rend Me­dia Que­ries Um­ge­bungs­va­ria­blen des Brow­sers wie die Brei­te oder Hö­he des View­ports oder die Farb­tie­fe des Mo­ni­tors ab­fra­gen, klä­ren Fea­tu­re Que­ries die Un­ter­stüt­zung von Ei­gen­schaf­ten durch ei­nen Brow­ser ab. Sie kön­nen al­so fol­gen­der­ma­ßen vor­ge­hen:

Durch die Fea­tu­re Qu­e­ry wä­ren die In­ter­net Ex­plo­rer aus­ge­grenzt, denn zum ei­nen be­nö­ti­gen die­se „dis­play: -ms-grid” als Ei­gen­schaft. Und zum an­de­ren ver­ste­hen sie die Tech­nik der Fea­tu­re Que­ries nicht. Ei­ne Nut­zung von @sup­ports ist al­so nur dann sinn­voll, wenn ne­ben der rei­nen De­fi­ni­ti­on der Grids noch zu­sätz­li­che Ei­gen­schaf­ten mo­di­fi­ziert wer­den müss­ten, die Nich­tG­rid-Brow­ser auch in­ter­pre­tie­ren wür­den.

Neh­men wir an, der Grid-Con­tai­ner be­kommt ei­nen ho­hen In­nen­ab­stand von 40 px, wäh­rend ei­ne al­ter­na­ti­ve Float-Um­ge­bung

kei­nen In­nen­ab­stand hät­te. Da die Ei­gen­schaft „pad­ding” von je­dem Brow­ser in­ter­pre­tiert wird, wä­re dies ein sinn­vol­ler An­wen­dungs­fall für ei­ne Fea­tu­re Qu­e­ry.

INFORMATIONSQUELLEN

CSS-Grids sind ei­ne um­fang­rei­che und teil­wei­se kom­pli­ziert zu er­fas­sen­de Tech­nik. Ver­tie­fen­de und er­wei­tern­de In­for­ma­tio­nen be­kom­men Sie so­wohl als ein­zel­ne Ar­ti­kel, kom­plet­te In­fo­sei­ten und als Vi­deo­tu­to­ri­als un­ter­schied­li­cher Kom­ple­xi­tät.

Die Web­site „Grid by Ex­amp­le” von Ra­chel And­rew soll­te Ih­re ers­te An­lauf­sta­ti­on sein [grid­by­ex­amp­le.com]. In kur­zen Ar­ti­keln mit ein­ge­bet­te­ten Co­de­pen-Bei­spie­len und Links zur W3C-Spe­zi­fi­ka­ti­on führt sie ins The­ma ein. Wer mag, kann sich die ein­zel­nen The­men auch in klei­nen Vi­deo­tu­to­ri­als an­schau­en. Zu­sätz­lich gibt es ei­ne Viel­zahl fer­ti­ger Bei­spie­le, an­hand de­rer Sie selbst mit der neu­en Tech­nik ex­pe­ri­men­tie­ren kön­nen.

Ra­chel And­rew ist auch mit ver­ant­wort­lich für die um­fang­rei­che Ab­hand­lung im Mo­zil­la De­ve­l­oper Net­work [goo.gl/FRFW8s], die teil­wei­se in deut­scher Über­set­zung vor­liegt. Sehr emp­feh­lens­wert ist auch der Ab­schnitt über CSS-Grids in der CSS-Re­fe­renz von Co­drops [goo.gl/wc­zTww].

Ler­nen Sie ger­ne mit Vi­deo­tu­to­ri­als? Dann sind die 25 Lek­tio­nen von Wes Bos si­cher ei­ne gu­te Emp­feh­lung. Der Ka­na­di­er hat – von

Mo­zil­la fi­nan­ziert – sei­nen kos­ten­lo­sen und um­fang­rei­chen Kurs erst An­fang 2018 ver­öf­fent­licht [css­grid.io]. Kon­kre­te prak­ti­sche Fra­gen geht Jen Sim­mons in ih­rer Vi­deo­cast-Se­rie „Lay­out­land” auf Youtube an [goo.gl/Bw5DAq].

FA­ZIT

End­lich gibt es ei­ne aus­ge­feil­te Tech­nik für Sei­ten­lay­outs. Und das Bes­te ist, dass die Brow­s­er­her­stel­ler die­se Tech­nik in ih­re ak­tu­el­len Ver­sio­nen in­te­griert ha­ben. Im Ge­gen­satz zu frü­her ha­ben wir kei­ne un­ter­schied­li­chen Ver­sio­nen mit Ven­dor-Pre­fi­xes wie -web­kit- und -moz-. Glück­li­cher­wei­se ist die neue Tech­nik so in die Brow­ser in­te­griert, dass sie al­te Lay­out­lö­sun­gen ein­fach über­schreibt. Sie kön­nen al­so in ih­ren ak­tu­el­len Pro­jek­ten schon an­fan­gen, für mo­der­ne Brow­ser mit der neu­en Tech­nik zu ex­pe­ri­men­tie­ren. Die äl­te­ren oder fea­tu­re-ar­men Brow­ser müs­sen dar­un­ter nicht lei­den. De­ren Nut­zer wer­den nicht wis­sen, was sie ver­pas­sen. Viel Spaß bei der Gestal­tung der Zu­kunft!

Jens Grocht­dreis ist frei­er Webent­wick­ler und Be­ra­ter und ar­bei­tet seit 1999 im und fürs Netz [grocht­dreis.de]. Er ist da­bei auf mo­der­ne Front­end­ent­wick­lung und Re­s­pon­sive Web­de­sign spe­zia­li­siert. Vor Kur­zem hat er ein E-Book über Mo­du­la­re Webentwicklung ver­öf­fent­licht [mo­du­la­re-webentwicklung.de].

Abb. 9: Can I Use gibt hoff­nungs­vol­le Si­gna­le: In mo­der­nen Brow­sern funk­tio­nie­ren CSS-Grids, an­de­ren Brow­sern könn­ten Sie ein al­ter­na­ti­ves Lay­out mit­ge­ben.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.