CSS

Best Practices und Wartbarkeit
 
 
Entwickler Press
  • 1. Auflage
  • |
  • erschienen am 12. Oktober 2011
  • |
  • 110 Seiten
 
E-Book | PDF ohne DRM | Systemvoraussetzungen
978-3-86802-260-5 (ISBN)
 
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.
  • Deutsch
  • Frankfurt am Main
  • |
  • Deutschland
  • 2,07 MB
978-3-86802-260-5 (9783868022605)
3868022600 (3868022600)
weitere Ausgaben werden ermittelt
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.
1 - Inhaltsverzeichnis [Seite 5]
2 - 1 Wie wird CSS vom Browser verarbeitet? [Seite 11]
2.1 - 1.1 CSS-Anweisung [Seite 12]
2.2 - 1.2 Browserbearbeitung geladener HTML-/ CSS-Dokumente [Seite 13]
2.3 - 1.3 Der Browser: im Herzen arabisch? [Seite 17]
3 - 2 Effiziente CSS-Selektoren [Seite 19]
3.1 - 2.1 Richtlinien für effiziente CSS-Selektoren [Seite 20]
4 - 3 Kaskade [Seite 25]
4.1 - 3.1 Funktionsprinzipien der Kaskade [Seite 26]
4.2 - 3.2 Wartbarkeit [Seite 32]
4.3 - 3.3 Debugging [Seite 39]
5 - 4 Vererbung [Seite 45]
5.1 - 4.1 Wie funktioniert Vererbung? [Seite 45]
5.2 - 4.2 Wartbarkeit [Seite 49]
5.3 - 4.3 Debugging [Seite 51]
6 - 5 Boxmodell und kollabierende Abstände [Seite 53]
6.1 - 5.1 Boxmodell-Berechnungen [Seite 54]
6.2 - 5.2 Kollabierende Außenabstände [Seite 58]
6.3 - 5.3 Aufschwimmende Blöcke [Seite 60]
6.4 - 5.4 Kleiner Blick auf CSS3-Layouts [Seite 68]
7 - 6 Browser-Reset [Seite 71]
7.1 - 6.1 Reset Style Sheets - Best Practice? [Seite 74]
7.2 - 6.2 DRY, Browserperformance und Browser-Reset [Seite 80]
8 - 7 Frameworks und Grids [Seite 83]
8.1 - 7.1 YAML: Yet another Multicolumn Layout [Seite 84]
8.2 - 7.2 OO CSS: objektorientierte CSS [Seite 86]
8.3 - 7.3 Compass/SASS [Seite 89]
8.4 - 7.4 Gravity [Seite 93]
8.5 - 7.5 960gs [Seite 94]
8.6 - 7.6 Blueprint [Seite 96]
8.7 - 7.7 Inuit.css [Seite 97]
8.8 - 7.8 HTML5 Boilerplate [Seite 98]
9 - Anhang [Seite 101]
9.1 - A.1 CSS-Kurzschreibweisen [Seite 101]
9.2 - A.2 Applies to [Seite 108]
10 - Stichwortverzeichnis [Seite 111]
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.

Dateiformat: PDF
Kopierschutz: ohne DRM (Digital Rights Management)

Systemvoraussetzungen:

Computer (Windows; MacOS X; Linux): Verwenden Sie zum Lesen die kostenlose Software Adobe Reader, Adobe Digital Editions oder einen anderen PDF-Viewer Ihrer Wahl (siehe E-Book Hilfe).

Tablet/Smartphone (Android; iOS): Installieren Sie die kostenlose App Adobe Digital Editions oder eine andere Lese-App für E-Books (siehe E-Book Hilfe).

E-Book-Reader: Bookeen, Kobo, Pocketbook, Sony, Tolino u.v.a.m. (nur bedingt: Kindle)

Das Dateiformat PDF zeigt auf jeder Hardware eine Buchseite stets identisch an. Daher ist eine PDF auch für ein komplexes Layout geeignet, wie es bei Lehr- und Fachbüchern verwendet wird (Bilder, Tabellen, Spalten, Fußnoten). Bei kleinen Displays von E-Readern oder Smartphones sind PDF leider eher nervig, weil zu viel Scrollen notwendig ist. Ein Kopierschutz bzw. Digital Rights Management wird bei diesem E-Book nicht eingesetzt.

Weitere Informationen finden Sie in unserer E-Book Hilfe.

Inhalt (PDF)

Download (sofort verfügbar)

8,00 €
inkl. 19% MwSt.
Download / Einzel-Lizenz
PDF ohne DRM
siehe Systemvoraussetzungen
E-Book bestellen

Unsere Web-Seiten verwenden Cookies. Mit der Nutzung dieser Web-Seiten erklären Sie sich damit einverstanden. Mehr Informationen finden Sie in unserem Datenschutzhinweis. Ok