Heidorn CSS

Best Practices und Wartbarkeit
1. Auflage 2011
ISBN: 978-3-86802-260-5
Verlag: entwickler.press
Format: PDF
Kopierschutz: 0 - No protection

E-Book, Deutsch, 110 Seiten

Unstrukturiert kann die Arbeit mit CSS schnell in Chaos ausarten: hier ein kleiner Bugfix, dort eine Browser-Anpassung, da ein Sonderwunsch vom Kunden. Schnell kennen sich CSS-Entwickler im eigenen Code nicht mehr aus. Mit fundierten Kenntnissen der Funktionsweise von CSS fällt es leichter, gut strukturierten Code zu verfassen und ein Verständnis für die Entstehung von Bugs zu entwickeln. Das Buch hilft übersichtliches CSS zu erstellen und effektive Routinen beim Debugging zu entwickeln - unersetzlich für Freelancer oder für Frontend-Entwickler in Agenturen. Und für alle anderen, die schon immer wissen wollten, wie der MouseOver ohne JavaScript funktioniert.

Regine Heidorn ist seit 2006 selbständig mit der Bit-Boutique. Nach philologischen, ethnologischen und kulturwissenschaftlichen Studien in Hessen und Norddeutschland, Radkurierfahrerei in Bremen und einer Ausbildung im Multimedia-Bereich in Berlin erfolgte ganz gegen den Flash-Trend eine frühe Spezialisierung auf CSS bzw. Frontend-Entwicklung und Templating. Neben der reinen Webentwicklung machte Regine Heidorn an der Philipps-Universität Marburg Ethnologen mit dem Web 2.0 vertraut. Für das Projekt eVideo an der HTW Berlin konzipiert sie mobile Exkursionen rund um die Themen Identität, Design und Business 2.0 und schreibt für das dortige Projekt-Blog die Kolumne Mobile Bit-Boutique. Weitere Veröffentlichungen erschienen bei den Netzpiloten, dem Feed-Magazin oder slow-media.net. Für das Exzellenzcluster Topoi beschäftigte sie sich mit der Informations-Architektur der virtuellen Forschungsumgebung.

Autoren/Hrsg.

Heidorn, Regine

Inhaltsverzeichnis

1;Inhaltsverzeichnis;5
2;1 Wie wird CSS vom Browser verarbeitet?;11
2.1;1.1 CSS-Anweisung;12
2.2;1.2 Browserbearbeitung geladener HTML-/ CSS-Dokumente;13
2.3;1.3 Der Browser: im Herzen arabisch?;17
3;2 Effiziente CSS-Selektoren;19
3.1;2.1 Richtlinien für effiziente CSS-Selektoren;20
4;3 Kaskade;25
4.1;3.1 Funktionsprinzipien der Kaskade;26
4.2;3.2 Wartbarkeit;32
4.3;3.3 Debugging;39
5;4 Vererbung;45
5.1;4.1 Wie funktioniert Vererbung?;45
5.2;4.2 Wartbarkeit;49
5.3;4.3 Debugging;51
6;5 Boxmodell und kollabierende Abstände;53
6.1;5.1 Boxmodell-Berechnungen;54
6.2;5.2 Kollabierende Außenabstände;58
6.3;5.3 Aufschwimmende Blöcke;60
6.4;5.4 Kleiner Blick auf CSS3-Layouts;68
7;6 Browser-Reset;71
7.1;6.1 Reset Style Sheets – Best Practice?;74
7.2;6.2 DRY, Browserperformance und Browser-Reset;80
8;7 Frameworks und Grids;83
8.1;7.1 YAML: Yet another Multicolumn Layout;84
8.2;7.2 OO CSS: objektorientierte CSS;86
8.3;7.3 Compass/SASS;89
8.4;7.4 Gravity;93
8.5;7.5 960gs;94
8.6;7.6 Blueprint;96
8.7;7.7 Inuit.css;97
8.8;7.8 HTML5 Boilerplate;98
9;Anhang;101
9.1;A.1 CSS-Kurzschreibweisen;101
9.2;A.2 Applies to;108
10;Stichwortverzeichnis;111

Leseproben

(S. 71-72)

Ein HTML-Dokument ohne CSS sieht ziemlich … langweilig aus und sehr nach Internet aus den Anfangszeiten des Internet. Einer der frühesten und bekanntesten Usability-Standards lässt sich auch heute noch beobachten, wenn eine Webseite ohne CSS dargestellt wird: der unterstrichene blaue Link, der nach einem Klick als bereits besuchter Link lila wird und auch heutzutage noch in der Suchergebnisliste von Google genauso funktioniert.

Als CSS-Autoren wissen wir, warum das so ist: Ein Ankerelement in HTML wird mit a in den CSS angesprochen, dazu gibt es die Pseudoklassen :link, :visited, :focus, :hover und :active. Ergo: Selbst ohne von CSS-Autoren eingebundene Style Sheets erfolgt ein Layout von HTML-Elementen aus dem Browser. Andernfalls würden sämtliche Inhalte eines HTML-Dokuments als unformatierter Text in einer Reihe dargestellt, es würde sich noch nicht einmal der Mauszeiger ändern beim Überfahren eines Links. Auch dieses Verhalten wird durch eine Deklaration a { cursor: pointer; } im Browser vorgegeben.

Auch ohne unser Zutun als CSS-Autoren oder eingebundene CSS des Nutzers sind also CSS aktiv. In den meisten Fällen ähneln sich die CSS, die Browserhersteller in den Browsern implementieren. Es kann allerdings Abweichungen geben, die in der Anpassung einer Webseite für grösstmögliche Browserkompatibilität zum Problem werden können. Mit Browser-Reset ist in diesem Zusammenhang nicht gemeint, den Browser mit geleertem Cache neu zu starten.

Ziel ist es vielmehr, die vom Browser mitgelieferten Style Sheets durch eigene CSS so zu ersetzen, dass eine einheitliche Darstellung aller Elemente erreicht wird, und zwar, bevor die eigentlichen Layoutarbeiten beginnen. So haben wir als CSS-Autoren größtmögliche Kontrolle darüber, dass unsere CSS nicht von denen des Browsers durchkreuzt werden. Die Anweisungen des Browsers greifen immer, wenn keine CSS anderer Herkunft (vom Nutzer oder von CSS-Autoren) vorhanden sind.

Sobald wir also alle Eigenschaften der Elemente, die in den Browser-CSS gestylt werden, einmal selbst notieren, ist gewährleistet, dass keine Anweisungen mehr vom Browser übernommen werden. Wie bereits im Kapitel über die Kaskade beschrieben, tritt diese in Kraft, wenn ein Element von mehreren Zuweisungen derselben Eigenschaft betroffen ist und sortiert in einem ersten Schritt die Zuweisungen nach Herkunft aus.