Was haben Eulen mit CSS zu tun?

Owl Selector
Kommentare

CSS bietet Web-Designern unzählige Möglichkeiten, Web-Content zu gestalten und zu präsentieren, sei es mit der „herkömmlichen“ Methode, bei der Klassen-Selektoren herangezogen werden, oder mithilfe

CSS bietet Web-Designern unzählige Möglichkeiten, Web-Content zu gestalten und zu präsentieren, sei es mit der „herkömmlichen“ Methode, bei der Klassen-Selektoren herangezogen werden, oder mithilfe von Selektoren wie dem von Heydon Pickering vorgestellten „Lobotomized Owl Selector“. Mit dem Eulengesicht * + * kann das Layout von Flow-Content vereinfacht werden – ein nützliches Feature, das die Arbeit für Webdesigner an vielen Stellen erleichtern kann.

Owl-Selector reduziert Dateimenge und verbessert Performance

Pickerings Owl-Selector macht sich den Universal-Selektor * zu Nutze, was ihm die Kontrolle über mehrere Elemente gibt, sodass nicht für jedes Element ein eigener Wert spezifiziert werden muss.

Es kann mit dem Owl-Selector beispielsweise leicht ein Margin festgelegt werden, der für alle Elemente im Verlauf des Dokuments gilt, die dem ersten Element auf das er angewandt wird, folgen. Für Webdesigner bietet das zahlreiche Vorteile. So ist es wenig wahrscheinlich, dass ein Element, das mit einem Margin versehen werden soll, vergessen wird; zudem gibt es keine überflüssigen Margins im Design. Dadurch werden auch die Angaben im CSS minimiert, was für eine geringere Dateigröße und eine bessere Performance der Website sorgen kann.

Auch, dass der Owl-Selector eine geringe Spezifität hat, vereinfacht die Arbeit bei der Gestaltung, denn es lassen sich leicht Ausnahmen erstellen und so auch das Design von Absätzen, Widgets oder Überschriften mit dem Selektor bearbeiten.

Mit dem Owl-Selector lassen sich Elemente also je nach Kontext und Umstand stylen. Dementsprechend können so Designs erstellt werden, bei dem der Inhalt das Aussehen des Interfaces bestimmt, anstatt dessen Aussehen im Ganzen vorzuschreiben. Heydon Pickering erklärt die Vorteile und Nutzungsweise seines Owl-Selectors sehr viel ausführlicher und mit Beispielen, ein Blick in seinen Artikel Axiomatic CSS and Lobotomized Owls lohnt sich also.

Aufmacherbild: Piercing owl Eyes von Shutterstock / Urheberrecht: Miles Away Photography

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -