Anzeige
Anzeige
UX & Design

Webstandards im Griff: Filter – Simpel, aber hilfreich

Was ist das Schlimmste, was einem Webworker bei einem Content Management System passieren kann? Natürlich: die Kunden, die sich an neuen Texten versuchen. Ein paar Klicks später validiert die Webseite schon nicht mehr. So muss es natürlich nicht enden. Mit den richtigen Filtern kann man dafür sorgen, dass Webstandards deutlich besser unterstützt werden.

3 Min.
Artikel merken
Anzeige
Anzeige

Nun liegt es nicht nur an Kunden, wenn sie fehlerhaften Quellcode erzeugen. Sie möchten schließlich nur ihren Text auszeichnen, der Quellcode ist ihnen egal. Manchmal liefert der WYSIWYG-Editor schon Unsinn. So sorgt ein Klick auf „Fett“ in Nicedit für ein unglaubliches: <span style="font-weight: bold;">Beispiel</span>. In anderen Fällen hat der Editor mit einem Import aus Word Probleme. Oder der Webworker hat sich nicht die Mühe gemacht, den WYSIWYG-Editor zu konfigurieren und gestattet dem Kunden, Farben oder Schriftgrößen festzulegen.

Anzeige
Anzeige

So kann also eine Menge veralteter oder unsinniger Code auf Webseiten gelangen. In einem aktuellen Projekt musste ich etwa alte Texte übernehmen, die mit <font>-Angaben, Inline-Styles oder target="_blank" ausgezeichnet sind. Diese Angaben könnte ich nun beim Import bereinigen, dann müsste ich mir aber die Mühe machen, mir erst den alten Quellcode genauer anzusehen.

Viel einfacher wird es mit einem entsprechenden Ausgabefilter. So wird der Quellcode bereinigt, bevor er dem Besucher angezeigt wird. Je nach CMS und Filter lassen sich etwa unerwünschte HTML-Elemente oder Attribute ausfiltern. In einfachen Fällen wird auch fehlerhafter Code repariert. Die CMS-internen Filter kommen dabei recht schnell an ihre Grenzen. Für meine Projekte nutze ich deshalb den HTML Purifier [1]. Damit lässt sich der Quellcode der Kunden umfangreich für die Ausgabe aufbereiten.

Anzeige
Anzeige

Neben dem erwähnten Filtern von Elementen und Attributen lassen sich auch gleich leere Elemente löschen, es gibt eine Blacklist für Klassen und Attribute und die Ausgabe kann sowohl als HTML als auch als XHTML erfolgen. Dazu kommen viele weitere Möglichkeiten, um das Tool anzupassen.

Anzeige
Anzeige

Natürlich stößt auch der HTML Purifier irgendwann an seine Grenzen. Wer eine Zwischenüberschrift einfach nur fett macht, anstatt sie als h1 oder h2 auszuzeichnen, produziert zwar validen Code, aber eben keinen semantisch sinnvollen. Das kann der Purifier freilich nicht selbst erkennen. Trotzdem bietet das Tool sehr viel bessere Ergebnisse als CMS-eigene Filter.

Für den HTML Purifier stehen bereits Plugins für zum Beispiel WordPress, Drupal, Joomla, MODx und Symfony zur Verfügung. Neben dem Purifier gibt es noch andere Tools wie kses oder htmLawed [2].

Anzeige
Anzeige

Filter der Einfachheit halber

Während der Purifier dazu gedacht ist, den Content der Autoren kritisch zu prüfen und zu korrigieren, können andere Filter es dem Kunden auch einfacher machen. Mitunter sind Webstandards und qualitativ gut aufbereiteter Quellcode viel Arbeit. Filter können Autoren ein wenig die Arbeit abnehmen: So nutzen wir bei einem Projekt einen Filter, der bestimmte Wörter automatisch mit <acronym> oder <abbr> auszeichnet. So wird etwa „[ETDRS]“ durch „<acronym lang="en" title="Early Treatment of Diabetic Retinopathy Study">ETDRS</acronym>“ ersetzt. Das spart dem Kunden nicht nur Tipparbeit, sondern ist auch weniger fehleranfällig. In diesem Fall müssen sich die Autoren nicht selbst überlegen, ob ein „acronym“ oder ein „abbr“ vergeben werden soll, und auch das „lang="en"“ wird nicht vergessen. Eine solche Auszeichnung hilft allen Besuchern, die die Webseite mit einem Screenreader besuchen. Sollten wir mit der Webseite irgendwann auf HTML5 und dadurch bei allen Auszeichnungen von „acronym“ auf „abbr“ umsteigen, müssen wir nicht die gesamte Datenbank durchgehen, sondern nur ein paar Stellen im Filter ändern. Das ist extrem simpel, aber eben auch effektiv. Eine gute Sache für alle Webworker, die auf Webstandards Wert legen.

Neues zu HTML5

Apropos HTML5: Vor ein paar Wochen gab es noch Verwirrung um die Schreibweise. Heißt es nun „HTML 5“ oder doch „HTML5“? Nun sind sich die Experten einig: Es heißt HTML5 [3]. Ohne Bindestrich.

Zum Thema selbst haben die Webkrauts eine mehrteilige Serie [4] veröffentlicht, mit einigen recht umfangreichen Artikeln etwa über <section>, <nav>, <audio>, <video>, <canvas> oder Input-Felder. Bei den Webkrauts lautet der Tenor übrigens: Wer HTML5 ausprobieren möchte, kann es gerne bei eigenen Projekten verwenden. Für Kundenprojekte ist HTML5 jedoch noch nicht reif. Mehr zu HTML5 im Artikel von Peter Kröner ab Seite 87.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige