Beim stöbern im Netz bin ich auf eine Zusammenfassung der wichtigsten CSS-Grundregeln gestoßen, die ich gerne mit Euch teilen möchte. Konkret geht es um folgende acht Punkte, die ich mal als Gebote zusammenfasse:
Beim Weiterentwickeln einer Website kommt es immer wieder vor das CSS-Selektoren testweise durch andere ersetzt werden, die alte Variante im Code jedoch nicht gelöscht wird. Oder es werden HTML-Elemente entfernt, die Bezug nehmenden Selektoren werden jedoch vergessen. Im Laufe der Zeit häuft man so immer mehr unnötige Selektoren an, die den CSS-Code unnötig aufblähen. Abhilfe schafft die Firebug-Erweiterung Dust-Me Selectors, welche ungenutzte CSS-Selektoren aufspürt. Mehr lesen … »
Änderungen, die man mit Hilfe von Firebug am Code vorgenommen hat, werden von Haus aus leider nicht protokolliert. In der Praxis passiert häufig folgendes: Man probiert zahlreiche Varianten durch und kann sich am Ende nicht mehr genau erinnern welche Eingriffe man zu welchem Zeitpunkt durchgeführt hat. Man weiß nur noch, dass eine der letzten Varianten eigentlich die beste Lösung darstellte.
Der Universal-Selektor wird mit einem Sternchen gesetzt und wird automatisch auf alle HTML-Elemente einer Website angewendet:
1 2 3 | * { color: red; } |
Der Universalselektor wird sehr selten verwendet, da es meistens ja gerade nicht gewünscht ist, eine Stilregel gnadenlos auf alle HTML-Elemente anzuwenden. Gute Dienste leistet er allerdings bei Justierung einer Website, wie ich es im Buch ab Seite 58 verdeutlicht habe.
Artfremd verwenden lässt sich der Universal-Selektor auch um die einzelnen Boxen einer Website sichtbar zu machen:
1 2 3 | * { border: 1px solid red !important; } |
Zum testen den Quellcode einfach mit Hilfe von Firebug oder Web Developer temporär einfügen. Alle Boxen werden hierdurch mit einem roten Rand von einem Pixel versehen.
Wichtig im Zusammenhang mit der CSS Kaskade: Der Universalselektor wird bei der Berechnung der Spezifität grundsätzlich nicht berücksichtigt (außer man kombiniert den Universalselektor mit anderen Selektoren).
Im Buch habe ich eine sehr ausführliche Anleitung zu Firebug verfasst, weil es nach meiner Meinung das momentan wichtigste Hilfsmittel für Webentwickler darstellt. Insbesondere in Verbindung mit dem Zusatzprogramm CodeBurner bietet es wirklich alle notwenigen Tools aus einem Guss.
Nun gibt es für Firebug ein weiteres Zusatzprogramm namens Firefinder, mit welchem man CSS-Selektoren auf einer Website suchen und mithilfe eines farbigen Rahmens sichtbar machen kann. Zusätzlich werden die gefunden Einträge gezählt und aufgelistet.
