CSS Best Practices und Wartbarkeit
:
Regine Heidorn
:
CSS Best Practices und Wartbarkeit
:
entwickler.press
:
9783868022605
:
1
:
CHF 7.10
:
:
Internet
:
German
:
110
:
kein Kopierschutz/DRM
:
PC/MAC/eReader/Tablet
:
PDF
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.
Browser-reset
(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.
Inhaltsverzeichnis
5
1 Wie wird CSS vom Browser verarbeitet?
11
1.1 CSS-Anweisung
12
1.2 Browserbearbeitung geladener HTML-/ CSS-Dokumente
13
1.3 Der Browser: im Herzen arabisch?
17
2 Effiziente CSS-Selektoren
19
2.1 Richtlinien für effiziente CSS-Selektoren
20
3 Kaskade
25
3.1 Funktionsprinzipien der Kaskade
26
3.2 Wartbarkeit
32
3.3 Debugging
39
4 Vererbung
45
4.1 Wie funktioniert Vererbung?
45
4.2 Wartbarkeit
49
4.3 Debugging
51
5 Boxmodell und kollabierende Abstände
53
5.1 Boxmodell-Berechnungen
54
5.2 Kollabierende Außenabstände
58
5.3 Aufschwimmende Blöcke
60
5.4 Kleiner Blick auf CSS3-Layouts
68
6 Browser-Reset
71
6.1 Reset Style Sheets – Best Practice?
74
6.2 DRY, Browserperformance und Browser-Reset
80
7 Frameworks und Grids
83
7.1 YAML: Yet another Multicolumn Layout
84
7.2 OO CSS: objektorientierte CSS
86
7.3 Compass/SASS
89
7.4 Gravity
93
7.5 960gs
94
7.6 Blueprint
96
7.7 Inuit.css
97
7.8 HTML5 Boilerplate
98
Anhang
101
A.1 CSS-Kurzschreibweisen
101
A.2 Applies to
108
Stichwortverzeichnis
111
