Mein Post über die Einrückung von Code-Blöcken in Content Mangaement Systemen hat mich nun dazu verleitet, einen kleinen Artikel über das Setzen der <code>- und <pre>-tags üfr das Darstellen von Code zu schreiben.

Das code-TAg wird in HTML-Dokumenten oft mit dem pre-Tag kombiniert, da das pre-Tag es ermöglicht, dass Tabstopps in einem Textdokument 1:1 im HTML-Dokument übernommen werden. Somit ist es möglich, den angezeiten Code ohne irgendwelche CSS-Formatierungen einzurücken – man kann den Quellcode direkt vom Texteditor, in welchem der code geschrieben wurde, in das HTML dokument kopieren und der code wird mit den Original-einrückungen richtig angezeigt. In einem pre-Tag werden also alle Doppellerzeicehn, Tabs, Leerzeilen und andere whitespaces 1:1 dargestellt.

Das <code>-Tag wiederum kennzeichnet den Inhalt als Auflistung eines Quellcodes. Das ist wichtig für a) die Barrierefreiheit der Website, so dass die Screenreader den Besucher darauf hinweisen kann, dass jetzt die Auflistung eines quellcodes kommt, und andererseits ist das Tag wichtig für suchmaschinen, welche das setzen von Quellcode innerhalb eines code-Tags positiv bei der Suchmaschinenplatzierung belohnen.

HTML Pre und Code Tag – bester Nutzen weiterlesen →

In diesem Post ein kleiner Trick zum (Un)sichtbarmachen von Objekten in Verbindung mit der Höheneinstellung. Sie werden als Webdesigner desöfteren das Bedürfnis haben, bestimmte Elemente an einer vordefinierten Stelle im Bildschirm zu platzieren, diese jedoch nur nach bestimmten Benutzeraktionen anzuzeigen. Dazu brauchen sie css-Klassen, die mit der Sichtbarkeit und Unsichtbarkeit dieser Objekte umgehen, die Sie mit der entsprechenden Klasse auszeichnen.

Wenn ein Objekt unsichtbar sein soll, wollen Sie, dass das Objekt weg ist – unter allen Umständen. Die grundsätzliche unsichtbarkeit eines Objektes bekommen Sie hin über

    .hidden {
	visibility: hidden;
}

das CSS-Attribut visibility funktioniert ohne Probleme auch bei älteren Browsern.

Bei Ihrer visible-Klasse sieht es dann entsprechend umgekehrt aus

    .visible {
	visibility: visible;
}

Generell macht es Sinn, alle Objekte, die unsichtbar sein sollen, auf eine Höhe von 0 zu setzen. Denn entweder wollen Sie anstelle des unsichtbaren Objektes ein anderes Objekt anzeigen – oder das Objekt soll gar nicht vorhanden sein und daher keinen Platz in Anspruch nehmen. Um also zu verhindern, dass unsichtbare Elemente, die nicht absolut positioniert sind, einen Platz in Anspruch nehmen und dabei einen Einfluss auf das Seitenlayout nehmen, geben wir noch an

.hidden {
    visibility: hidden;
    height: 0;
}
 
.visible {
    visibility: visible;
    height: auto;
}

Beachten Sie, dass ich die Klasse visible in meiner .css unterhalb der klasse hidden geschrieben habe. Das führt dazu, dass die Klasse visible die Klasse hidden im Notfall überschreibt, wenn aus irgendeinem Grund einmal ein Element beide Klassen zugewiesen bekommt.  Eventuell wollen Sie, dass genau der umgekehrte Fall eintritt, wenn es einmal so weit kommt.

Das problem ist aber, dass wenn Sie jetzt neue Klassen für diese elemente definieren, welche Einfluss auf die Höhe nehmen, dass dann weiter unten stehende Definitionen das height-Attribut wieder überschreiben. Wenn Sie ein Element vom unsichtbaren in den sichtbaren Status überführen, überschreiben Sie mitunter mit der visible-Klasse die eigentliche Höheneigenschaft des Elements. Deswegen macht es grundsätzlich Sinn, diese Höhen-Eigenschaft in extra-klassen unterzubringen. Also:

.hidden {
    visibility: hidden;
}
 
.visible {
    visibility: visible;
}
 
.no-height {
    height: 0;
}
 
.restore-height {
    height: auto;
}

Nun bietet es sich in der Praxis an, die Höhen-Klassen immer mit den Sichtbarkeits-Klassen zu kombinieren. Wenn Sie die .css-Definitionen der klassen .no-height und .restore-height in Ihrem CSS weit oben deklarieren, überschreiben diese Klassen nie die expliziten Höheneinstellungen einer spezifischeren Definition.