Tipps & Tricks

CSS, Bar­rie­re­frei­heit, Brow­ser, Tools

PC Magazin - - Inhalt -

CSS, Bar­rie­re­frei­heit, Brow­ser

1. CSS Fle­xi­ble Far­ben

Als Web­de­si­gner ge­hen Sie da­von aus, dass ei­ne de­fi­nier­te Far­be wie et­wa #98b3c7 auch so an­ge­zeigt wird – mit ei­ner ge­wis­sen Va­ri­anz durch En­dge­rät oder Ein­stel­lun­gen. Im ak­tu­el­len Edi­tor’s Draft des CSS Co­lor Mo­du­le Le­vel 4 wird die CSS-Ei­gen­schaft co­lor-ad­just ein­ge­führt, die Far­ben fle­xi­bler hand­habt. Die Ei­gen­schaft kann zwei Wer­te an­neh­men. Mit co­lor-ad­just: ex­act; soll der Brow­ser die Far­ben best­mög­lich so dar­stel­len, wie sie im CSS vor­ge­se­hen sind. Bei co­lor-ad­just: eco­no­my; hin­ge­gen ge­ben Sie dem Brow­ser die Er­laub­nis, die Far­ben nach ei­ge­nen Vor­stel­lun­gen an­zu­pas­sen. Das kann da­zu füh­ren, dass ein Brow­ser ei­ne Web­sei­te in Weiß auf Schwarz beim Aus­druck selbst­stän­dig zu Schwarz auf Weiß än­dert. Oder aber Farb­wer­te an­passt, wenn das Aus­ga­be­ge­rät nur mo­no­chrom ar­bei­tet. Als Gra­fi­ker möch­ten Sie zwar un­gern die Kon­trol­le über Ihr De­sign ab­ge­ben. An­de­rer­seits ist es heut­zu­ta­ge schwer mög­lich, al­le Aus­ga­be­ge­rä­te wie Fern­se­her, Smart Wat­ches, Au­tos, Kühl­schrän­ke oder Spie­gel zu be­rück­sich­ti­gen. Die CSS-Ei­gen­schaft wird be­reits in Fi­re­fox, Chro­me und Sa­fa­ri un­ter­stützt, für die letz­ten bei­den be­nö­ti­gen Sie aber das Ven­dor Pre­fix -web­kit-. Eric Bai­ley schlägt auf css-tricks.com vor, die Ei­gen­schaft gleich für den ge­sam­ten bo­dy an­zu­set­zen [bit.ly/co­lo­r­ad­just]: bo­dy { co­lor-ad­just: eco­no­my; } Das ist beim ak­tu­el­len Stand ein gu­ter Aus­gangs­punkt. Wie gut das in der Pra­xis funk­tio­niert, wird sich zei­gen, wenn mehr Brow­ser und End­ge­rä­te die Ei­gen­schaft un­ter­stüt­zen.

2. Bar­rie­re­frei­heit Fo­kus­sier­te Ele­men­te

Wenn Nut­zer auf ei­ner Web­sei­te mit der Maus über ei­nen Link ho­vern, gibt es meis­tens ein vi­su­el­les Feed­back. Bei ei­nem Me­nü­punkt än­dert sich vi­el­leicht die Hin­ter­grund­far­be, bei ei­nem un­ter­stri­che­nen Link im Fließ­text ver­schwin­det die Li­nie un­ter dem Link. Das wird per CSS über die Pseu­do­klas­se :ho­ver er­le­digt. Da­ne­ben gibt es auch die Pseu­do­klas­se :fo­cus. Die­se Pseu­do­klas­se kann für ein Ele­ment ge­nutzt wer­den, das den Fo­kus er­hält. Das pas­siert zum Bei­spiel, wenn Sie in ein Text­feld ei­nes For­mu­lars kli­cken. Der Fo­kus ist aber auch re­le­vant, wenn ein Nut­zer ei­ne Web­site al­lein mit der Tas­ta­tur be­dient. Mit der Tab-Tas­te kann der Nut­zer von ei­nem fo­kus­sier­ba­ren Ele­ment (Link, But­ton, For­mu­lar­fel­der) zum nächs­ten sprin­gen. Per Brow­ser-De­fault wird ein fo­kus­sier­ter Link mit ei­ner recht dün­nen Out­li­ne an­ge­zeigt. In vie­len ­The­mes wird oft ver­ges­sen, den Fo­kus et­was deut­li­cher zu kenn­zeich­nen. Oder aber die Out­li­ne wird ab­sicht­lich ent­fernt, was da­zu führt, dass Tab-Nut­zer gar nicht se­hen kön­nen, wo sie sich ge­ra­de be­fin­den. Wenn Sie die Out­li­ne nicht nut­zen wol­len, gilt es, ein fo­kus­sier­tes Ele­ment an­ders her­vor­zu­he­ben. Bei der ein­fachs­ten Lö­sung über­neh­men Sie zu­min­dest die An­wei­sun­gen von :ho­ver, um dem Nut­zer ein Feed­back zu ge­ben.

a { text-de­co­ra­ti­on: un­der­li­ne; ] a:ho­ver, a:fo­cus { text-de­co­ra­ti­on: no­ne; }

Al­ler­dings be­wegt ein Maus-Nut­zer die Maus selbst­stän­dig an die Stel­le, auf die er kli­cken will. Das Feed­back kann hier et­was de­zen­ter aus­fal­len. Ein Tas­ta­tur-Nut­zer weiß aber eben nicht, wo er sich ge­ra­de be­fin­det. Da­her darf das Feed­back hier ru­hig et­was

deut­li­cher aus­fal­len. Das MO­MA kenn­zeich­net den Fo­kus im Haupt­me­nü sei­ner Web­site zum Bei­spiel mit ei­ner sehr deut­li­chen Um­ran­dung.

a.men­u­link:fo­cus { box-shadow: 0 0 0 .2rem #000; bor­der-ra­di­us: .4rem; pad­ding: .8rem; }

3. Bar­rie­re­frei­heit fo­cus-wi­t­hin

Ein wei­te­res Pro­blem für Tas­ta­tur-Nut­zer sind Haupt­me­nüs, bei de­nen ein Un­ter­me­nü zwar aus­klappt, wenn der Be­nut­zer mit der Maus dar­über­ho­vert – das aber nicht aus­klappt, wenn der Be­nut­zer durch das Me­nü tabbt. Je nach Um­set­zung be­kommt der Tas­ta­tur-Nut­zer nicht im­mer mit, dass es über­haupt Un­ter­me­nü­punk­te gibt. Das HTML könn­te wie folgt aus­se­hen:

<nav> <ul> <li><a href="#">Haupt­me­nü Item A</a></li> <li><a href="#"> Haupt­me­nü Item B</a> <ul class="drop­down"> <li><a href="#">Sub­me­nü Item 1</a></li> <li><a href="#">Sub­me­nü Item 2</a></li> <li><a href="#">Sub­me­nü Item 3</a></li> </ul> </li> <li><a href="#"> Haupt­me­nü Item C</a></li> </ul> </nav>

Das Me­nü .drop­down soll zu­nächst ver­steckt wer­den:

.drop­down { dis­play: no­ne; }

Sie zei­gen es an, wenn sich die Maus über dem Me­nü­link B oder dem Un­ter­me­nü be­fin­det:

ul a:ho­ver + .drop­down, ul li .drop­down:ho­ver {

dis­play: block; }

Um auch die Tab-Nut­zer ein­zu­be­zie­hen, kommt die Pseu­do­klas­se :fo­cus-wi­t­hin ins Spiel. Die Klas­se wird be­rück­sich­tigt, wenn ein Kind des an­ge­spro­che­nen Ele­men­tes den Fo­kus er­hält [code­pen.io/text­for­mer/pen/ xyxGqG]. Die­se Tech­nik funk­tio­niert in mo­de­ren Brow­sern, für äl­te­re Brow­ser gibt es ein Po­ly­fill.

ul li:fo­cus-wi­t­hin .drop­down { dis­play: block; }

4. Bar­rie­re­frei­heit Di­rekt zum In­halt sprin­gen

Es gibt ei­ne wei­te­re, klei­ne Er­gän­zung, die Tas­ta­turNut­zern das Le­ben ein­fa­cher macht: Sprung­mar­ken – ver­steck­te Links, mit de­nen Sie di­rekt zu den wich­ti­gen Be­rei­chen ei­ner Web­sei­te sprin­gen kön­nen. Das sind in ers­ter Li­nie Links zum In­halt, manch­mal aber auch zur Sei­ten­leis­te oder Fuß­zei­le. Die­se Sprung­mar­ken sind meis­tens die ers­ten, un­sicht­ba­ren Ele­men­te im bo­dy und er­schei­nen nur, wenn ein Tas­ta­tur-Nut­zer durch die Web­site tabbt. So kön­nen et­wa blin­de Tas­ta­tur-Nut­zer den Kopf ei­ner Web­site mit sei­nen vie­len Me­nü­punk­ten schnell über­sprin­gen. Auch die­se Tech­nik ist schon seit Jah­ren be­kannt, wird aber auf er­staun­lich vie­len Web­sites nicht ein­ge­setzt [bit.ly/sprung­link].

5. Usa­bi­li­ty Pseu­do­klas­se :ac­tive

Ne­ben :fo­cus und :fo­cus-wi­t­hin ist auch :ac­tive ei­ne Pseu­do­klas­se, die viel zu sel­ten ein­ge­setzt wird. Die Pseu­do­klas­se gilt für Ele­men­te, die vom Be­nut­zer ­ak­ti­viert wur­den. Sie wird et­wa für Links und But­tons ein­ge­setzt und kann ein Feed­back ge­ben, wenn der Be­nut­zer auf solch ein Ele­ment klickt. So könn­ten Sie et­wa ei­nen But­ton bei ei­nem Klick leicht nach un­ten ver­schie­ben, um ei­nen drei­di­men­sio­na­len Ef­fekt zu er­zie­len.

6. De­tails Icons für die Web­site

Je­de pro­fes­sio­nel­le Web­site wird mit ei­nem Fa­vi­con aus­ge­stat­tet. Mitt­ler­wei­le gibt es aber ei­ne gan­ze Rei­he wei­te­rer Icons für ver­schie­de­ne Sys­te­me, die Sie bei Web­sites be­rück­sich­ti­gen könn­ten. Das Fa­vi­con wird üb­li­cher­wei­se im Rei­ter ei­nes Brow­sers vor dem Ti­tel der Web­sei­te an­ge­zeigt oder bei den Le­se­zei­chen. Als Grö­ße war lan­ge Zeit 16x16 Pi­xel der Stan­dard, es funk­tio­nie­ren aber auch 32x32 oder 64x64 Pi­xel. Das üb­li­che Da­tei­for­mat ist das png. Brow­ser ver­ste­hen eben­so gif oder ico. Man­che Brow­ser stel­len auch ani­mier­te gifs oder svg dar. In den letz­ten Jah­ren sind zahl­rei­che Va­ri­an­ten für ver­schie­de­ne Zwe­cke und End­ge­rä­te hin­zu­ge­kom­men. Sie wer­den zum Bei­spiel ge­nutzt, wenn sich Nut­zer ein Le­se­zei­chen für ei­ne Web­sei­te auf die Ober­flä­che Ih­rer Smart­pho­nes set­zen. Es ist recht ver­wir­rend, hier den Über­blick für die ver­schie­de­nen Icon-Grö­ßen un­ter iOS, An­dro­id und Win­dows zu be­hal­ten. Da­zu kom­men zu schnell neue Ge­rä­te her­aus, und die Do­ku­men­ta­tio­nen der Her­stel­ler sind auch nicht im­mer auf dem neu­es­ten Stand. Wenn Sie Ser­vices wie fa­vi­co­ma­tic.com nut­zen, wer­den Ih­nen ei­ne gan­ze Men­ge Icons ge­ne­riert: <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="57x57" href="app­le-57x57.png" /> <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="114x114" href="app­le-114x114.png" /> <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="72x72" href="app­le-72x72.png" /> <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="144x144" href="app­le-144x144.png" /> <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="60x60" href="app­le-60x60.png" /> <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="120x120" href="app­le-120x120.png" /> <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="76x76" href="app­le-76x76.png" /> <link rel="app­le-touch-icon-pre­com­po­sed"

si­zes="152x152" href="app­le-152x152.png" /> <link rel="icon" ty­pe="image/png"

href="fa­vi­con-196x196.png" si­zes="196x196" /> <link rel="icon" ty­pe="image/png"

href="fa­vi­con-96x96.png" si­zes="96x96" /> <link rel="icon" ty­pe="image/png"

href="fa­vi­con-32x32.png" si­zes="32x32" /> <link rel="icon" ty­pe="image/png"

href="fa­vi­con-16x16.png" si­zes="16x16" /> <link rel="icon" ty­pe="image/png"

href="fa­vi­con-128.png" si­zes="128x128" /> <me­ta na­me="ap­p­li­ca­ti­on-na­me"

con­tent="&nbsp;"/> <me­ta na­me="ms­ap­p­li­ca­ti­on-Ti­leCo­lor"

con­tent="#FFFFFF" /> <me­ta na­me="ms­ap­p­li­ca­ti­on-Ti­leI­mage"

con­tent="msti­le-144x144.png" /> <me­ta na­me="ms­ap­p­li­ca­ti­on-squa­re70x70lo­go"

con­tent="msti­le-70x70.png" /> <me­ta na­me="ms­ap­p­li­ca­ti­on-squa­re150x150lo­go"

con­tent="msti­le-150x150.png" /> <me­ta na­me="ms­ap­p­li­ca­ti­on-wi­de310x150lo­go"

con­tent="msti­le-310x150.png" /> <me­ta na­me="ms­ap­p­li­ca­ti­on-squa­re310x310lo­go"

con­tent="msti­le-310x310.png" /> Ist es un­be­dingt nö­tig, all die­se Icons an­zu­bie­ten? Si­cher nicht. Die we­nigs­ten Nut­zer wer­den ih­re Web­sei­te als Le­se­zei­chen auf der Smart­pho­ne-Ober­flä­che ab­le­gen. Auf der an­de­ren Sei­te neh­men Ih­nen sol­che Ge­ne­ra­to­ren den Groß­teil der Ar­beit ab. Sie kön­nen die ge­ne­rier­ten Icons schnell ein­bin­den – wenn Sie nicht ge­ra­de ein Lo­go für je­de er­denk­li­che Grö­ße fi­n­e­tu­nen möch­ten.

7. Tools Schnel­le Über­set­zun­gen

Wenn Sie bis­her Goog­le Trans­la­te oder auch den ­Mi­cro­soft Trans­la­tor für Über­set­zun­gen ge­nutzt ha­ben, schau­en Sie sich als Al­ter­na­ti­ve ein­mal Dee­pL an. Hin­ter dem Ser­vice steckt ein Un­ter­neh­men aus Köln. Nach ei­ge­ner Aus­sa­ge be­vor­zu­gen pro­fes­sio­nel­le Über­set­zer die Er­geb­nis­se von Dee­pL ge­gen­über an­de­ren An­bie­tern im Ver­hält­nis 3:1. Der­zeit kön­nen Sie Tex­te ins Eng­li­sche, Fran­zö­si­sche, Spa­ni­sche, Ita-

lie­ni­sche, Nie­der­län­di­sche und Pol­ni­sche über­set­zen las­sen, bzw. um­ge­kehrt ei­ne die­ser Spra­chen ins Deut­sche über­set­zen. Die grund­sätz­li­che Nut­zung ist kos­ten­frei.

8. Chro­me Na­ti­ves La­zy Loa­ding Im Web be­deu­tet La­zy Loa­ding, dass Ele­men­te wie Bil­der oder Vi­de­os erst dann ge­la­den wer­den, wenn sie tat­säch­lich be­nö­tigt wer­den.

Beim ers­ten Auf­ru­fen ei­ner Web­sei­te lädt der Brow­ser so erst ein­mal al­le Bil­der, die der Be­nut­zer im View­port se­hen kann. Bil­der, die wei­ter un­ten (be­low-the­fold) lie­gen, wer­den nach­ge­la­den, so­bald der Be­nut­zer scrollt und sich nur noch ein paar Pi­xel weit vom Bild ent­fernt be­fin­det. Der Vor­teil liegt dar­in, dass der Be­nut­zer nicht un­nö­ti­ge Da­ten la­den muss. Die Um­set­zung er­folgt mit Ja­vaS­cript. Goog­le hat sei­nem Brow­ser Chro­me ein neu­es Fea­tu­re spen­diert, das La­zy Loa­ding für Bil­der und iframes we­sent­lich ein­fa­cher um­setzt. Das neue Atri­but ­la­zy­load er­laubt es ei­nem Webent­wick­ler, fest­zu­le­gen, wel­che Ele­men­te ggf. spä­ter ge­la­den wer­den sol­len. Der vor­ge­schla­ge­ne Co­de ist denk­bar ein­fach: <iframe src="ads.html" la­zy­load="on"></iframe> Da­bei gibt es drei mög­li­che Wer­te: On: Sagt aus, dass das Ele­ment erst ge­la­den wer­den soll, wenn es in den View­port rückt. Off: Die­se Res­sour­ce soll so schnell wie mög­lich ge­la­den wer­den, un­ab­hän­gig da­von, ob sie sich im View­port be­fin­det oder nicht. Au­to: Über­lässt die Ent­schei­dung dem Brow­ser. Da das der Stan­dard ist, kön­nen Sie das At­tri­but in die­sem Fall genau­so gut gleich weg­las­sen. Noch ist die Tech­nik le­dig­lich ein Pro­po­sal von ­Goog­le. In Chro­me Ca­na­ry, dem Night­ly Build des Brow­sers für Webent­wick­ler, müs­sen Sie die Funk­ti­on noch über chro­me://flags ex­pli­zit ein­schal­ten. Dort gibt es die bei­den Flags #enable-la­zy-image-loa­ding und #enable-la­zy-frame-loa­ding, die Sie für ei­ge­ne Tests ak­ti­vie­ren kön­nen. Ni­co­lai Schwarz

Auch wenn die Ei­gen­schaftco­lor-ad­just ak­tu­ell nur in ei­nem Edi­tor’s Draft des CSS Co­lor Mo­du­le Le­vel 4 steht, kön­nen Sie sie be­reits in Fi­re­fox, Chro­me und Sa­fa­ri tes­ten.

Auf mo­ma.org wer­den die fo­kus­sier­ten Punk­te im Haupt­me­nü mit ei­nem di­cken Rah­men deut­lich her­vor­ge­ho­ben.

Ein Un­ter­me­nü wie hier auf taz.de muss auch dann aus­klap­pen, wenn ein Tas­ta­tur-Nut­zer durch die Web­sei­te tabbt.

Ei­ne üb­li­che Sprung­mar­ke Zum In­halt sprin­gen für Tas­ta­turNut­zer, oben links auf zeit.de.

Web­sites wie fa­vi­co­ma­tic.com hel­fen Ih­nen da­bei, schnell Icons in ver­schie­de­nen Grö­ßen für ver­schie­de­ne Sys­te­me und End­ge­rä­te zu ge­ne­rie­ren.

Dee­pL bie­tet ei­ne kos­ten­lo­se Al­ter­na­ti­ve zu Tools wie Goog­le Trans­la­te oder Mi­cro­soft Trans­la­tor.

Das Pro­po­sal für Blink La­zy­Load fin­den Sie öf­fent­lich auf Goog­le Docs [bit.ly/2N5X3KG].

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.