Elementfragment-​Pseudoelemente

Von in netzthetik

CSS Level 3 steckt zwar noch in der Ent­wick­lung, eini­ge Brow­ser unter­stüt­zen die neu­en Fea­tures jedoch bereits. Dabei kann es aber auch zu Hop­pa­las kom­men. Für den Fall der Elementfragment-​Pseudoelemente möch­te ich dies mit einem klei­nen Expe­ri­ment darstellen.

Mit dem Pseudoelement-​Selektor ::selec­tion ermög­licht CSS3 das Sty­len mar­kier­ten Tex­tes. Es gibt Stim­men, die die Sinn­haf­tig­keit die­ses Fea­tures in Fra­ge stel­len. Für Per­fek­tio­nis­ten, die in ihrem Lay­out selbst an die­se Klei­nig­keit den­ken, wird es eine Lücke schlie­ßen. Und es soll Designs mit Schrift­far­ben und Hin­ter­grün­den geben, die tat­säch­lich eine mar­kier­te Text­stel­le schwer erkenn­bar machen. Da ist es sicher von Vor­teil ein Werk­zeug zur Ver­fü­gung zu haben, mit des­sen Hil­fe man den Kon­trast anhe­ben kann.

Wor­um geht es dabei? Die Schrift­far­be und der Text­hin­ter­grund mar­kier­ten Tex­tes wer­den nicht vom Sei­ten­in­halt, son­dern vom ver­wen­de­ten Sys­tem bestimmt, wobei hier Pro­gramm und Betriebs­sys­tem glei­cher­ma­ßen Ein­fluss neh­men kön­nen. So war es bis­her nicht üblich oder mög­lich, vom bereit­ge­stell­ten Web­in­halt her farb­lich ein­zu­grei­fen. Im zukünf­ti­gen Level 3 der Cas­ca­ding Style She­ets wird man jedoch über die soge­nann­ten Elementfragment-​Pseudoelemente Zugriff auf die Dar­stel­lung selek­tier­ter Text­stel­len bekom­men. Ich möch­te dies im fol­gen­den Absatz demons­trie­ren. Selek­tie­ren Sie zunächst irgend­ei­nen Text auf die­ser Sei­te, und danach eine Text­stel­le in fol­gen­dem Absatz: 

Dies ist ein Bei­spiel­text. Mar­kier­ter Text wird mit­tels CSS3 farb­lich beeinflusst.

Sie sehen kei­nen Unter­schied? Dann haben Sie die­se Sei­te wahr­schein­lich mit dem Inter­net Explo­rer von Micro­soft geöff­net, der Zugriff auf die­ses Pseu­do­ele­ment noch nicht unterstützt.

Wenn man nun den zu mar­kie­ren­den Text in exakt (!) glei­cher Far­be wie den mar­kier­ten Text dar­stellt, kommt es zu einem inter­es­san­ten Phä­no­men. Ver­su­chen Sie fol­gen­den Text zu markieren:

Dies ist ein Bei­spiel­text. Mar­kier­ter Text erscheint mit der (ver­meint­lich) glei­chen Schrift- und Hin­ter­grund­far­be wie der Text selber.

Nun kommt es wie­der dar­auf an, in wel­chem Brow­ser Sie gera­de die­se Sei­te betrach­ten. Im Fire­fox und im Ope­ra ist nun tat­säch­lich kein Unter­schied mehr zwi­schen nicht­mar­kier­tem und mar­kier­tem Text fest­stell­bar (beacht­lich ist auch, wie stark man dadurch die Bedien­bar­keit (“Usa­bi­li­ty”) ver­min­dert). Führt man das Expe­ri­ment jedoch in Goo­g­les Chro­me und in App­les Safa­ri durch, erkennt man, dass ein und die­sel­be Far­be unter­schied­lich dar­ge­stellt wird. Der selek­tier­te Text ist, wenn auch schwer, sehr­wohl zu erken­nen. In mei­nem Bei­spiel ver­wen­de ich die Far­be “#CF6”, weil dies eine “wirk­lich!” web­si­che­re Far­be ist. Bei einer nicht-​websicheren Far­be lie­ße sich ver­mu­ten, dass die Far­be für den mar­kier­ten Teil irgend­wie durch Dithe­ring oder Ähn­li­ches ver­än­dert wür­de. Die­ser Ver­dacht wird durch Ver­wen­dung von z.B. #CF6 ent­kräf­tet. Tat­säch­lich gibt es jedoch Far­ben, bei denen die­ses Phä­no­men nicht auf­tritt, Rot zum Bei­spiel. Absicht fällt als Ursa­che für das Ren­dern in unter­schied­li­chem Farb­ton also auch aus.

Fällt dies letzt­end­lich unter die Kate­go­rie “Ups”? Jeden­falls ist es ein net­tes Hop­pa­la, das sich wohl in abseh­ba­rer Zeit “von sel­ber” erle­di­gen wird.

Share on LinkedInShare on Redditshare on TumblrShare on StumbleUponDigg thisShare on FacebookGoogle+Tweet about this on TwitterEmail to someone