Neue Css-spe­zi­fi­ka­tio­nen auf ei­nen Blick

PAGE - - Werkzeug - Ei­nen Über­blick über al­le ak­tu­el­len Css-spe­zi­fi­ka­tio­nen fin­den Sie un­ter https://css­re­fe­rence.io.

CSS Flex­box ist ei­ne ein­fa­che Mög­lich­keit, re­s­pon­sive und fle­xi­ble Lay­outs zu er­stel­len, oh­ne fes­te Grö­ßen­an­ga­ben und wei­te­re Css-ein­stel­lun­gen wie po­si­ti­on, float oder cle­ar nut­zen zu müs­sen. Flex­box ar­bei­tet mit ei­nem Con­tai­ner-ele­ment (Flex-con­tai­ner) und den dar­in ent­hal­te­nen Kind-ele­men­ten (FlexI­tems). In­ner­halb ei­nes Flex­box-con­tai­ners lässt sich auch ein wei­te­rer Flex­box-con­tai­ner ver­schach­teln. Da­bei kann man nicht nur die Grö­ßen­dar­stel­lung, son­dern auch die Rei­hen­fol­ge der Ele­men­te un­ab­hän­gig vom HTML-CO­DE durch CSS fest­le­gen. In­zwi­schen un­ter­stüt­zen al­le Brow­ser Flex­box, selbst In­ter­net Ex­plo­rer ist seit Ver­si­on 11 mit da­bei.

CSS Grid eig­net sich für das Lay­out von Ele­men­ten in zwei Di­men­sio­nen. In fle­xi­blen Spal­ten und Rei­hen ( grid-row und grid-co­lumn) las­sen sich Web­sei­ten-ele­men­te wie He­a­der, Foo­ter, Si­de­bar oder In­halts­blö­cke kom­plett frei plat­zie­ren – ge­ra­de so, wie das Web­de­sign es be­nö­tigt. Auch wenn CSS Grid im Ge­gen­satz zu CSS Flex­box noch ver­gleichs­wei­se neu ist, be­ste­hen auch bei der Brow­ser­kom­pa­ti­bi­li­tät mitt­ler­wei­le kei­ne gro­ßen Hür­den mehr. Al­le gän­gi­gen Brow­ser un­ter­stüt­zen das Mo­dell – ein­schließ­lich In­ter­net Ex­plo­rer 11.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.