Ef­fi­zi­en­ter Co­de

Im Web wer­den vie­le Kom­po­nen­ten noch mit jQu­e­ry oder an­de­ren Bi­b­lio­the­ken um­ge­setzt. In vie­len Fäl­len geht das mitt­ler­wei­le aber auch ro­bus­ter und per­for­man­ter: oh­ne jQu­e­ry – und manch­mal auch oh­ne Ja­vaS­cript.

PC Magazin - - Netzwerk & Smart Home - Ni­co­lai Schwarz

Ef­fi­zi­en­ter Co­de ist ein breit ge­fass­ter Be­griff. Je nach Kon­text kön­nen un­ter­schied­li­che An­sät­ze ef­fi­zi­ent sein. So lässt sich ge­ra­de zu Be­ginn mit Frame­works und Bi­b­lio­the­ken viel Zeit spa­ren, weil nicht al­les selbst ent­wi­ckelt wer­den muss. Es gibt vie­le sinn­vol­le Tipps und Kon­ven­tio­nen, wie et­wa Don’t re­peat yours­elf oder De­sign Pat­terns. We­ni­ger Zei­len Co­de sind grund­sätz­lich sinn­voll – so­lan­ge das nicht da­zu führt, dass der Co­de zu kom­pli­ziert und nicht mehr les­bar wird. Eben­so kann sich die Tech­no­lo­gie wei­ter­ent­wi­ckelt ha­ben, so dass sich be­stimm­te An­for­de­run­gen mitt­ler­wei­le ein­fa­cher um­set­zen las­sen. Oder ein Co­de lässt sich per­for­man­ter um­set­zen, so dass er auf dem Ser­ver oder im Cli­ent schnel­ler läuft. Bei lang­fris­ti­gen Pro­jek­ten soll­te der Co­de vor al­lem aber wart­bar sein. Die fol­gen­den Bei­spie­le sind im­mer noch auf vie­len Web­sites zu fin­den, sind aber oft nicht mehr zeit­ge­mäß bzw. las­sen sich bes­ser um­set­zen.

Ak­kor­de­on oh­ne Ja­vaS­cript

Ein Ak­kor­de­on wird ein­ge­setzt, um ein­zel­ne Be­rei­che ein- und aus­zu­klap­pen. Zum Bei­spiel bei ei­nem Glos­sar oder ei­nem FAQ. Heut­zu­ta­ge set­zen im­mer noch vie­le Ak­kor­de­ons auf Ja­vaS­cript, da­bei lässt sich der Ef­fekt auch mit CSS und seit ei­ni­ger Zeit auch al­lein mit HTML um­set­zen. Be­gin­nen wir mit der mo­der­nen Lö­sung. Die Spe­zi­fi­ka­ti­on von HTML5 wird stän­dig er­wei­tert. Seit HTML 5.1 sind die Ele­men­te <de­tails> und <sum­ma­ry> mit da­bei. <de­tails> <sum­ma­ry>Sicht­ba­res Ele­ment</sum­ma­ry> <p>Wei­te­re In­for­ma­tio­nen, die aus­ge­klappt wer­den.<p> </de­tails> Der In­halt der <sum­ma­ry> wird da­bei so­fort an­ge­zeigt. Al­le wei­te­ren In­hal­te der <de­tails> sind zu­nächst ver­bor­gen. Ein Klick auf <sum­ma­ry> sorgt da­für, dass auch der wei­te­re Text an­ge­zeigt wird. Das funk­tio­niert be­reits in al­len mo­der­nen Brow­sern – al­ler­dings nicht im In­ter­net Ex­plo­rer und in Edge. Bei Edge steht die Im­ple­men­tie­rung mit ei­ner ho­hen Prio­ri­tät auf der Road­map. Je nach Web­site ist es evtl. aber nicht schlimm, dass äl­te­re Brow­ser die Ele­men­te nicht un­ter­stüt­zen. Dort wür­den al­le

In­hal­te schlicht di­rekt an­ge­zeigt wer­den, oh­ne Aus­klapp-Op­ti­on. Es ge­hen al­so kei­ne In­hal­te ver­lo­ren. Bei ei­nem um­fang­rei­chen FAQ wünscht der Kun­de aber viel­leicht, dass die Ant­wor­ten auch in äl­te­ren Brow­sern aus­klap­pen. Wenn die rei­ne HTML-Lö­sung nicht aus­reicht, bie­ten sich zwei Um­set­zun­gen per CSS an. Ei­ne Op­ti­on baut auf der Pseu­do­klas­se :fo­cus auf. Das FAQ sei hier als Lis­te an­ge­legt. Et­was ver­kürzt: Per CSS wird das <div> mit der Ant­wort zu­nächst ver­steckt und erst ein­ge­schal­tet, wenn der vor­he­ri­ge Link den :fo­cus er­hält, al­so an­ge­klickt wur­de. Das Prin­zip funk­tio­niert in al­len Brow­sern, die das Zei­chen + als Se­lek­tor für an­gren­zen­de Ge­schwis­ter­s­e­lek­to­ren ken­nen, was ab In­ter­net Ex­plo­rer 7 der Fall ist. Da der Fo­kus nur auf ei­nem Ele­ment lie­gen kann, wer­den bei die­ser Tech­nik al­le an­de­ren Ele­men­te der Lis­te au­to­ma­tisch ein­ge­klappt. Eben­so wür­den al­le FAQ-Ele­men­te ein­ge­klappt, falls ein an­de­res Ele­ment auf der Web­sei­te den Fo­kus be­kommt. In man­chen Fäl­len bie­tet sich da­her als wei­te­re Va­ri­an­te der Check­box-Hack an, der mit ei­ner ver­steck­ten Check­box ar­bei­tet. Das HTML sieht wie folgt aus: Die Check­box ist über die id mit dem kor­re­spon­die­ren­den <la­bel> ver­knüpft. Da­durch ist es mög­lich, die Check­box auch durch ei­nen Klick auf das La­bel ab­zu­ha­ken. Per CSS ver­ste­cken Sie die Check­box samt Ant­wort. Den Sta­tus der Check­box kön­nen Sie mit dem Pseu­do­s­e­lek­tor :che­cked ab­fra­gen und da­durch die Ant­wort sicht­bar ma­chen. in­put { dis­play: no­ne; } in­put + div { dis­play: no­ne; } in­put:che­cked + div { dis­play: block; } Die­se Tech­nik funk­tio­niert ab In­ter­net Ex­plo­rer 9. In die­sem Fall las­sen sich meh­re­re Ele­men­te un­ab­hän­gig von­ein­an­der aus­und ein­klap­pen. Au­ßer­dem ist die­se Tech­nik un­ab­hän­gig vom Fo­kus. Und falls Sie doch nur ein Ele­ment aus­ge­klappt se­hen möch­ten, kön­nen Sie beim In­put-Ele­ment statt ty­pe="check­box" ein­fach ty­pe="ra­dio" nut­zen und die­se Ra­dio­but­tons über na­me="faq" grup­pie­ren. Bei grup­pier­ten Ra­dio­but­tons ist im­mer nur ei­ne ein­zel­ne Aus­wahl mög­lich. Da­durch klap­pen al­le nicht ge­wähl­ten FAQ-Ele­men­te au­to­ma­tisch ein. Die­se CSS-Tech­nik lässt sich auch ein­set­zen, um ver­schie­de­ne Un­ter­me­nüs in ei­nem Haupt­me­nü aus­zu­klap­pen.

Vi­deo in ei­ner Light­box

Auch für ein­fa­che Light­bo­xen be­nö­ti­gen Sie nicht un­be­dingt Ja­vaS­cript. Wenn Sie zum Bei­spiel nach ei­nem Klick auf ei­nen But­ton ein­fach nur ein Lay­er mit ei­nem YouTu­beVi­deo an­zei­gen möch­ten, reicht die Pseu­do­klas­se :tar­get voll­kom­men aus. Im HTML be­nö­ti­gen Sie da­für ei­nen Link, der auf ei­nen zwei­ten Link ver­weist, wel­cher wie­der­um den Lay­er fürs Vi­deo bil­det. Per CSS ge­stal­ten Sie nun den Lay­er und zei­gen ihn zu­nächst nicht an. Bei ei­nem Klick auf den ers­ten Link springt der Brow­ser zum Ele­ment mit der id #vi­deo­lay­er. Die URL än­dert sich ent­spre­chend und ent­hält nun die id. Mit Hil­fe der Pseu­do­klas­se :tar­get kön­nen Sie das Ele­ment an­spre­chen, das dem ak­tu­el­len Frag­ment in der URL ent­spricht, und so den Vi­deo-Lay­er sicht­bar ma­chen.

Ist der Vi­deo-Lay­er ak­ti­viert (und groß ge­nug), gibt es um das Vi­deo her­um ei­ne Link­flä­che. Bei ei­nem Klick dar­auf än­dert sich das URL-Frag­ment auf #, das Ele­ment #vi­deo­lay­er ent­spricht nicht mehr dem :tar­get, und der Vi­deo-Lay­er ver­schwin­det.

Sti­cky He­a­der bzw. Sti­cky Ele­men­te

Ein an­de­rer Ef­fekt, für den tra­di­tio­nell Ja­vaS­cript ein­ge­setzt wur­de, sind He­a­derBe­rei­che, die am obe­ren Rand der Sei­te kle­ben blei­ben. Im ein­fachs­ten Fall bleibt der He­a­der-Be­reich im­mer gleich und lässt sich ein­fach per CSS fi­xie­ren. Manch­mal gibt es aber Ele­men­te über dem ei­gent­li­chen Haupt­me­nü. Scrollt ein Be­nut­zer her­un­ter, scrollt zu­nächst al­les mit; ab ir­gend­ei­ner Stel­le wird das Haupt­me­nü dann aber per Ja­vaS­cript fi­xiert – et­wa auf mo­ma.org. Da die­ser Ef­fekt auf vie­len Web­sites er­wünscht ist, gibt es mitt­ler­wei­le ei­ne CSSEi­gen­schaft da­für – po­si­ti­on: sti­cky. Das ent­spricht qua­si ei­ner Mi­schung aus den Wer­ten re­la­ti­ve und fi­xed. So­lan­ge sich das ent­spre­chen­de Ele­ment noch frei im View­port be­we­gen kann, be­wegt es sich auch mit. In dem Mo­ment, in dem das Ele­ment aber aus dem sicht­ba­ren Be­reich her­aus­scrol­len wür­de, än­dert sich das Ver­hal­ten, und das Ele­ment wird fi­xiert. Lei­der funk­tio­niert die­se Ei­gen­schaft noch nicht zu­ver­läs­sig über al­le mo­der­nen Brow­ser hin­weg. Ne­ben dem He­a­der ist es et­wa für Ta­bel­len­köp­fe sinn­voll; aber bei Chro­me wird die Ei­gen­schaft zwar für <th> un­ter­stützt, nicht aber für <thead> oder <tr>. Der In­ter­net Ex­plo­rer un­ter­stützt die Ei­gen­schaft gar nicht. Das mag aber je nach Pro­jekt auch kein Pro­blem sein, denn dort scrollt der Be­reich eben ein­fach mit. Wenn Sie äl­te­re Brow­ser den­noch nicht aus­schlie­ßen wol­len, kön­nen Sie die Ei­gen­schaft zu­sam­men mit ei­nem Po­ly­fill ein­set­zen ( bit.ly/ po­ly­fill-sti­cky).

Tü­cken von HTML und CSS

Nun ha­ben rei­nes HTML und CSS ih­re ei­ge­nen Pro­ble­me. Ins­be­son­de­re bei gro­ßen Pro­jek­ten, bei de­nen meh­re­re Hun­dert Zei­len Sty­le­an­ga­ben nö­tig sind. Die Pro­ble­me häu­fen sich, wenn vie­le Leu­te an ver­schie- de­nen Stel­len ar­bei­ten, die De­ad­line drängt und not­wen­di­ge Ab­spra­chen auf der Stre­cke blei­ben. So kann es pas­sie­ren, dass De­si­gner ver­schie­de­ne Lay­outs lie­fern, und im Zu­ge der Um­set­zung un­nö­tig vie­le Farb­tö­ne im Pro­jekt lan­den. So gab es in ei­nem Pro­jekt 19 ver­schie­de­ne Grau­tö­ne, die sich teil­wei­se nur mi­ni­mal von­ein­an­der un­ter­schie­den. Bei ge­eig­ne­ter Ge­le­gen­heit wur­de der Um­fang auf 4 Grau­tö­ne be­schränkt. Wer mit SASS oder LESS ar­bei­tet, kann hier et­was ein­fa­cher den Über­blick be­hal­ten, in­dem et­wa al­le Far­ben an ei­ner zen­tra­len Stel­le de­fi­niert wer­den. So­lan­ge CSS Va­ria­blen nicht in al­len Brow­sern ge­nutzt wer­den kön­nen, bie­ten SASS und LESS hier deut­li­che Vor­tei­le. Auf der an­de­ren Sei­te la­den die Prä­pro­zes­so­ren aber auch da­zu ein, Din­ge zu ver­kom­pli­zie­ren, zum Bei­spiel durch tie­fe Ver­schach­te­lun­gen – im Fol­gen­den mit ei­nem SASS-Bei­spiel nur an­ge­deu­tet: Das kann sehr lang wer­den und da­zu füh­ren, dass Ent­wick­ler nur noch hoch- und run­ter­scrol­len, um nach­zu­voll­zie­hen, wel­cher Se­lek­tor nun am En­de ge­meint ist. We­nig hilf­reich für die War­tung sind auch zu lan­ge Se­lek­to­ren wie

Es gibt ei­ne Men­ge ver­schie­de­ner Kon­zep­te für sinn­voll or­ga­ni­sier­tes CSS – et­wa OOCSS (Ob­jekt­ori­en­tier­tes CSS), ACSS (Ato­mic CSS), BEM (Block Ele­ment Mo­di­fier) oder SMACSS (Scalable and Mo­du­lar Ar­chi­tec­tu­re for CSS). Al­le ha­ben ih­re Vor­und Nach­tei­le. Bei SMACSS wer­den zum Bei­spiel fünf Ka­te­go­ri­en für CSS ge­nutzt: Ba­se, Lay­out, Mo­du­le, Sta­te und The­me. Bei BEM wer­den Be­rei­che in Blö­cke, Ele­men­te und Mo­di­fier un­ter­teilt. Hilf­reich ist es, sich im Team auf ein Sys­tem zu ei­ni­gen. In man­chen Fäl­len lädt ein CMS be­reits da­zu ein, ein be­stimm­tes Sys­tem zu be­vor­zu­gen. Mit ge­eig­ne­ten Klas­sen (und ggf. IDs) las­sen sich die be­nö­tig­ten An­wei­sun­gen meis­tens mit ei­nem über­sicht­li­che­ren Se­lek­tor schrei­ben. Ge­ne­rell ist ei­ne ge­rin­ge Tie­fe der Se­lek­to­ren (die An­zahl der an­ein­an­der­ge­reih­ten ein­zel­nen Ele­men­te) deut­lich les­ba­rer. Aus dem Bei­spiel oben mag so et­wa fol­gen­de, kür­ze­re Ver­si­on wer­den:

Va­nil­la Ja­vaS­cript statt jQu­e­ry

Die Ja­vaS­cript Bi­b­lio­thek jQu­e­ry wur­de ent­wi­ckelt, um ein­heit­lich in ver­schie­de­nen Brow­sern Ele­men­te im DOM ein­fa­cher an­zu­spre­chen, Ani­ma­tio­nen ab­zu­wi­ckeln, auf Events zu re­agie­ren und Ajax zu nut­zen. Die Bi­b­lio­thek war jah­re­lang äu­ßerst nütz­lich und wur­de da­her auch viel­fach ein­ge­setzt. In den letz­ten Jah­ren ha­ben sich aber so­wohl Ja­vaS­cript als auch Brow­ser deut­lich wei­ter­ent­wi­ckelt. Vie­le Ef­fek­te wie Light­bo­xen oder Sli­der, die frü­her mit jQu­e­ry ab­ge­wi­ckelt wur­den, las­sen sich heu­te viel ein­fa­cher mit rei­nem Ja­vaS­cript (Va­nil­la Ja­vaS­cript) um­set­zen. Da­durch spa­ren sich die Ent­wick­ler nicht nur ein paar Ki­lo­byte an Co­de – jQu­e­ry 3.x kommt ge­zippt auf et­wa 30 KBy­te –, auch die Per­for­mance der Ef­fek­te wird bes­ser, weil die Funk­tio­nen nicht erst durch jQu­e­ry über­setzt wer­den müs­sen. So lässt sich ein Ele­ment mit ei­ner be­stimm­ten id per jQu­e­ry über $('#vi­deo­but­ton') an­spre­chen. In rei­nem Ja­vaS­cript reicht die Zei­le var elem = do­cu­ment. ge­tE­le­men­tById('vi­deo-but­ton'). Um bei ei­nem aus­ge­wähl­ten Ele­ment elem ei­ne Klas­se zu er­gän­zen, zu lö­schen oder um­zu­schal­ten, nut­zen Sie die Funk­tio­nen Um ei­nen Klick auf ei­nen Link mit der id #click­me ab­zu­fan­gen, nut­zen Sie Das funk­tio­niert in al­len mo­der­nen Brow­sern ab In­ter­net Ex­plo­rer 9. Zum Ver­gleich: Auch jQu­e­ry un­ter­stützt seit Ver­si­on 3.0 nur ak­tu­el­le Brow­ser­ver­sio­nen –1 (al­so die ak­tu­el­le Ver­si­on und die vor­he­ri­ge Ver­si­on) so­wie den In­ter­net Ex­plo­rer 9 und neu­er. In be­stimm­ten Fäl­len kann es al­ler­dings noch sinn­voll sein, äl­te­re jQu­e­ry-Ver­sio­nen zu nut­zen. Wenn Sie näm­lich bei be­stimm­ten Pro­jek­ten noch ur­al­te Brow­ser wie die In­ter­net Ex­plo­rer 6 bis 8, Ope­ra 12.1x oder Sa­fa­ri 5.1+ un­ter­stüt­zen müs­sen, kann jQu­e­ry 1.12 hilf­reich sein. Bei Pro­jek­ten für mo­der­ne Brow­ser las­sen sich mit den zur Ver­fü­gung ste­hen­den Funk­tio­nen in Ja­vaS­cript aber schnell ei­ge­ne Light­bo­xen und Sli­der bas­teln, die deut­lich klei­ner sind und per­for­man­ter ar­bei­ten als jQu­e­ry plus die ent­spre­chen­de Plug­ins ein­zu­set­zen. Au­ßer­dem las­sen sich ei­ge­ne Lö­sun­gen ein­fa­cher er­wei­tern, wenn et­wa be­son­de­re Lö­sun­gen für die Bar­rie­re­frei­heit ge­fragt sind.

Ab­hän­gig­kei­ten von The­mes und Mo­du­len

Ähn­li­che Über­le­gun­gen wie bei jQu­e­ry gel­ten auch für The­mes und Mo­du­le. In man­chen CMS gibt es um­fang­rei­che Ba­sis-The­mes, die Ih­nen die Ar­beit er­leich­tern. Sie kön­nen da­bei die Funk­tio­nen nut­zen, die das Ba­sis-The­me zur Ver­fü­gung stellt und Ihr ei­ge­nes De­sign in ein Subthe­me ver­la­gern. Das kann sinn­voll sein. Aber wenn Sie vom Ba­sis-The­me zum Bei­spiel nur das Gridsys­tem nut­zen, kön­nen Sie die­ses genau­so gut selbst ent­wi­ckeln und sich ei­ne Ab­hän­gig­keit spa­ren. Je nach­dem, wie gut Sie sich mit ei­nem CMS und Pro­gram­mie­rung aus­ken­nen, gilt das auch für klei­ne­re Mo­du­le. In man­chen Fäl­len kann es ef­fi­zi­en­ter sein, ei­ne Klei­nig­keit selbst zu im­ple­men­tie­ren, als da­für gleich ein (ggf. um­fang­rei­che­res) Mo­dul zu in­stal­lie­ren.

Mit den recht neu­en Ele­men­ten &lt;de­tails&gt; und &lt;sum­ma­ry&gt; kön­nen Sie in mo­der­nen Brow­sern ein Ak­kor­de­on in rei­nem HTML bau­en.

Die Ele­men­te &lt;de­tails&gt; und &lt;sum­ma­ry&gt; funk­tio­nie­ren zwar nicht im In­ter­net Ex­plo­rer oder Edge, dort er­schei­nen die In­hal­te aber schlicht aus­ge­klappt.

Ein üb­li­cher Auf­bau auf mo­ma.org. Ei­ni­ge Ele­men­te, wie das Lo­go, be­fin­den sich über dem Haupt­me­nü.

Beim Scrol­len ver­schwin­det das Lo­go, aber das Haupt­me­nü bleibt ste­hen. Das Ver­hal­ten wird hier mit Ja­vaS­cript er­mög­licht; mitt­ler­wei­le geht so et­was aber auch mit po­si­ti­on: sti­cky.

Ei­nes der be­kann­tes­ten Sys­te­me zur Or­ga­ni­sa­ti­on von CSS ist BEM ( get­bem.com).

Auch ein­fa­che Sli­der las­sen sich al­lein mit CSS um­set­zen ( bit.ly/gal­le­ry-css).

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.