Zu Beginn der Arbeit mit xhtml und CSS kann man schon zufrieden sein, wenn sich eine Webseite wie gew\u00fcnscht, in den g\u00e4ngigen Browsern ohne Bugs auf dem Monitor zeigt und den Validatortest besteht.<\/p>\n
Nach und nach kommt man jedoch drauf, dass Webseiten nach Webstandards etwas mehr sind. Eine Seite valide zu machen erscheint nach einer gewissen Zeit noch die einfachste \u00dcbung. Der feine Unterschied ist jedoch das Markup und die geschickte Verwendung der CSS-Regeln um sowohl das html als auch das CSS semantisch m\u00f6glichst sinnvoll und kurz zu halten. Das gelingt jedoch nur, wenn man sich immer weiter in die Materie vertieft und auch Kleinigkeiten Beachtung schenkt. Und irgendwie finden sich doch immer noch etwas, was man verbessern kann – es nimmt kein Ende ;-)<\/p>\n
Ein Beispiel : In diesem Blog gibt es ein Linkelement a, welches Nachfahre von p im div content ist. Dieses Link-Element hat ein Hintergrundbild<\/a>, welches verdeutlichen soll, dass das Element anklickbar ist und dass man die aktuelle Seite verl\u00e4sst.<\/p>\n Manchmal wird nach dem a-Element jedoch statt eines Textes ein Bild (img-Element) eingef\u00fcgt. Da dies aber auch ein Link ist, wird ebenfalls das Hintergrundimage von a angezeigt, was erstens nicht so sch\u00f6n aussieht, zweitens verwirrend und drittens deswegen nicht erw\u00fcnscht ist.<\/p>\n Man kann nun hergehen und beim Einf\u00fcgen eines Bildes dem a Element eine Klasse zuschreiben, die besagt, dass in diesem Fall das Hintergrundbild weggelassen werden soll (background-image:none;). Das jedoch hat zur Folge, dass man beispielsweise die Bezeichnung a class=“ohnebild“ jedes Mal h\u00e4ndisch eintragen muss. OK – Mit dem Quicktags-Plugin f\u00fcr WordPress kann man sich das etwas erleichtern, aber wozu, wenn es anders noch viel einfacher geht?<\/p>\n Im CSS sind Attributselektoren bekannt und verwendbar. Man kann also bestimmen, dass alle a, die das Attribut „title“ tragen kein Hintergrundbild erhalten sollen.<\/p>\n #content a[title] Dadurch spart man sich erstens l\u00e4stige Tipparbeit und zweitens auch Code im Markup. (Ein bisschen zumindest ;-)<\/p>\n !!<\/strong> Nun ist aber so, dass man ja f\u00fcr Links ohne Bilder ebenfalls einen Title vergeben kann und dies auch tun sollte, wenn z.B. ein Linktext nicht aussagekr\u00e4ftig genug ist. Dann jedoch w\u00fcrde der Attributselektor a[title]<\/strong> auch bei Links ohne Bilder greifen und das in diesem Fall jedoch erw\u00fcnschte Hintergrundbild entfernen.<\/p>\n Damit gemau das nicht passiert, kann man den Attributselektor noch erweitern. F\u00fcr Linkelemente a, auf die im Markup ein img-Element folgt, kann man im Title ein f\u00fcr alle gleiches Wort vergeben, zum Beispiel: „Abbildung“. Im CSS notiert man dann<\/p>\n #content img[title~=“Abbildung“] Wird dann im title-Attribut eines Linkelementes a das Wort Abbildung gefunden, wird kein Hintergrundbild eingef\u00fcgt.<\/p>\n Auf diese Weise k\u00f6nnte man auch \u00fcber das „alt“ Attribut der Darstellung von Bildern bestimmte Eigenschaften zuordnen. Enth\u00e4lt das alt-Attribut z.B. das Wort „Rembrandt“ (weil’s beispielsweise ein Bild von Rembrandt ist) k\u00f6nnte es einen roten Rahmen bekommen, enth\u00e4lt es „Picasso“ einen gelben.<\/p>\n (Und jetzt m\u00fcsste ich „nur“ noch in diesem Blog mal meine eingef\u00fcgten Bilder \u00fcberarbeiten und damit den Klassensalat aus dem CSS entfernen … Wu\u00e4\u00e4\u00e4h ;-\/)<\/p>\n","protected":false},"excerpt":{"rendered":" Zu Beginn der Arbeit mit xhtml und CSS kann man schon zufrieden sein, wenn sich eine Webseite wie gew\u00fcnscht, in den g\u00e4ngigen Browsern ohne Bugs auf dem Monitor zeigt und den Validatortest besteht.
\n{background-image:none;}<\/strong><\/p>\n
\n<\/strong> {background-image:none;}<\/strong><\/p>\n
\nNach und nach kommt man jedoch drauf, dass Webseiten nach Webstandards etwas mehr sind. Eine Seite valide zu machen erscheint nach einer gewissen … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,143,177],"yst_prominent_words":[],"class_list":["post-3554","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-css-xhtml","tag-tipps-und-tricks"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3554"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3554\/revisions"}],"predecessor-version":[{"id":4055,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3554\/revisions\/4055"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3554"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}