CSS: Grundlagen und Best Practices
()
About this ebook
Der shortcut 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.
Read more from Regine Heidorn
shortcut CSS: Best Practices und Wartbarkeit Rating: 0 out of 5 stars0 ratings
Related to CSS
Titles in the series (16)
Cloud Computing Grundlagen: Technisch / rechtlich / wirtschaftlich und architekturell Rating: 0 out of 5 stars0 ratingsiOS Essentials: Frameworks, Tools und Twitter API Rating: 0 out of 5 stars0 ratingsBig Data - Apache Hadoop Rating: 0 out of 5 stars0 ratingsCloud Computing Anbietervergleich: Amazon / Microsoft / Google & Co Rating: 0 out of 5 stars0 ratingsMagento Entwicklung: Themes, Widgets und Eigene Entitäten Rating: 0 out of 5 stars0 ratingsHTML 5 meets GWT Rating: 0 out of 5 stars0 ratingsDatenbanken: Grundlagen und Entwurf Rating: 0 out of 5 stars0 ratingsCSS: Grundlagen und Best Practices Rating: 0 out of 5 stars0 ratingsEnterprise Java Web Services Rating: 0 out of 5 stars0 ratingsNoSQL Einführung: CouchDB, MongoDB und Regis Rating: 0 out of 5 stars0 ratingsJava 7: Project Coin, Generics und NIO2 Rating: 0 out of 5 stars0 ratingsJava ME: Pragmatische Plattform für Mobile und Embedded Rating: 0 out of 5 stars0 ratingsOnlinerecht: Grundlegende juristische Spielregeln im eCommerce Rating: 0 out of 5 stars0 ratingsPHP for Office: Automatisierte Dokumentenerstellung mit PHPExcel, PHPWord und PHPPowerPoint Rating: 1 out of 5 stars1/5Usability von UML Editoren: Ein Vergleich Rating: 0 out of 5 stars0 ratingsProgressive Web-Apps: Offlinefähige Web-Anwendungen mit nativen Qualitäten Rating: 0 out of 5 stars0 ratings
Related ebooks
CSS3: Die neuen Features für fortgeschrittene Webdesigner Rating: 0 out of 5 stars0 ratingsWebseiten-Layout mit CSS: Der perfekte Einstieg in Cascading Style Sheets Rating: 0 out of 5 stars0 ratingsAutomatisiertes Testen: Testautomatisierung mit Geb und ScalaTest Rating: 0 out of 5 stars0 ratingsSharePoint Kompendium - Bd. 16 Rating: 0 out of 5 stars0 ratingsAgile Architektur mit .NET - Grundlagen und Best Practices Rating: 0 out of 5 stars0 ratingsModerne Datenzugriffslösungen mit Entity Framework 6 Rating: 0 out of 5 stars0 ratingsCSS3: Die Referenz für Webentwickler Rating: 0 out of 5 stars0 ratingsHTML5 kurz & gut Rating: 0 out of 5 stars0 ratingsAngular 2: Moderne Frontends für alle Plattformen entwickeln Rating: 0 out of 5 stars0 ratingsLogging: Schnelleinstieg Rating: 0 out of 5 stars0 ratingsZukunftssichere Architektur: So bauen Sie monolithische Anwendungen zu komponentenorientierten um Rating: 0 out of 5 stars0 ratingsProgrammierung in Visual Basic (VB): von der promanalyse zum programm Rating: 0 out of 5 stars0 ratingsSharePoint Kompendium - Bd. 13 Rating: 0 out of 5 stars0 ratingsSoftware entwickeln mit C#, WPF und dem MVVM-Konzept Rating: 0 out of 5 stars0 ratingsC# 6.0 – kurz & gut Rating: 5 out of 5 stars5/5Einstieg in HTML und Javascript: Mit vielen Beispielen und einfachen Browsergames Rating: 0 out of 5 stars0 ratingsVue.js für alle: Wissenswertes für Einsteiger und Experten Rating: 0 out of 5 stars0 ratingsDynamische Webseiten: Einstieg in HTML, PHP und MySQL Rating: 0 out of 5 stars0 ratingsBigData mit JavaScript visualisieren: D3.js für die Darstellung großer Datenmengen einsetzen Rating: 0 out of 5 stars0 ratingsGeldanlage mit strukturierten Produkten: Basiswissen für Einsteiger Rating: 0 out of 5 stars0 ratingsDas Aktiendepot als Einkommensquelle: Mit Value Investing zu finanzieller Sicherheit. Eine Anleitung. Rating: 0 out of 5 stars0 ratingsEffekte-Praxis im Tonstudio: Einsteiger-Kurs mit theoretischen und praktischen Erläuterungen zur Effekt-Anwendung Rating: 0 out of 5 stars0 ratingsder selfpublisher 15, 3-2019, Heft 15, September 2019: Deutschlands 1. Selfpublishing-Magazin Rating: 0 out of 5 stars0 ratingsEinführung in die Programmierung von 2-D-Spielen Rating: 0 out of 5 stars0 ratingsDreamweaver CS5: Webseiten entwerfen und umsetzen Rating: 0 out of 5 stars0 ratingsSQL-Abfragen optimieren: Was Entwickler über Performance wissen müssen Rating: 0 out of 5 stars0 ratingsC++17: Praxiswissen zum neuen Standard. Von C++11 bis 17 Rating: 0 out of 5 stars0 ratingsFinanzwirtschaftliches Risikomanagement: Eine kritische Betrachtung der gängigen Risikomess- & Steuerungsinstrumente Rating: 0 out of 5 stars0 ratingsJava 8 - Die Neuerungen: Lambdas, Streams, Date and Time API und JavaFX 8 im Überblick Rating: 0 out of 5 stars0 ratings
Computers For You
60+ Webtools - Für den Unterricht und mehr: Unterricht Digital gestalten und spielerisch Online Unterrichten Rating: 0 out of 5 stars0 ratingsRunning Lean: Das How-to für erfolgreiche Innovationen Rating: 4 out of 5 stars4/5Lexikon der Symbole und Archetypen für die Traumdeutung Rating: 5 out of 5 stars5/5Anglizismen und andere "Fremdwords" deutsch erklärt: Über 1000 aktuelle Begriffe Rating: 0 out of 5 stars0 ratingsDie Geschichte des Computers: Wie es bis zur Form des heutigen 'PC' kam. Rating: 0 out of 5 stars0 ratingsAufstieg der Roboter: Wie unsere Arbeitswelt gerade auf den Kopf gestellt wird - und wie wir darauf reagieren müssen Rating: 0 out of 5 stars0 ratings...Als die Noten laufen lernten...Band 2: Kabarett-Operette-Revue-Film-Exil. Unterhaltungsmusik bis 1945 Rating: 0 out of 5 stars0 ratingsMachine Learning – kurz & gut: Eine Einführung mit Python, Pandas und Scikit-Learn Rating: 5 out of 5 stars5/5Einstieg in ChatGPT: Künstliche Intelligenz verstehen und nutzen: Ein praktischer Ratgeber für Einsteiger Rating: 0 out of 5 stars0 ratingsBig Data: Die neue Intelligenz des Menschen (GEO eBook) Rating: 0 out of 5 stars0 ratingsShopware 6 Handbuch Rating: 0 out of 5 stars0 ratingsBusiness-Intelligence-Lösungen für Unternehmen Rating: 0 out of 5 stars0 ratingsLaws of UX: 10 praktische Grundprinzipien für intuitives, menschenzentriertes UX-Design Rating: 0 out of 5 stars0 ratingsEinführung ins Darknet: Darknet ABC Rating: 0 out of 5 stars0 ratingsScribus Desktop Publishing: Das Einsteigerseminar Rating: 0 out of 5 stars0 ratingsUnterirdisches Slowenien: Ein Exkursionsführer zu den Höhlen des Klassischen Karstes Rating: 0 out of 5 stars0 ratingsNeuronale Netze selbst programmieren: Ein verständlicher Einstieg mit Python Rating: 0 out of 5 stars0 ratingsDas Minecraft-Server-Buch Rating: 0 out of 5 stars0 ratingsNiklas Luhmann: "... stattdessen ...": Eine biografische Einführung Rating: 0 out of 5 stars0 ratingsDie KI sei mit euch: Macht, Illusion und Kontrolle algorithmischer Vorhersage Rating: 0 out of 5 stars0 ratingsBig Data - Apache Hadoop Rating: 0 out of 5 stars0 ratingsIndustrie 4.0 und Digitalisierung – Innovative Geschäftsmodelle wagen! Rating: 0 out of 5 stars0 ratingsRaspberry Pi Kinderleicht: Pi 4 mit 8 GB Rating: 0 out of 5 stars0 ratingsLinux-Musikserver - Die Anleitung: 1hourbook Rating: 0 out of 5 stars0 ratingsDatenbanken: Grundlagen und Entwurf Rating: 0 out of 5 stars0 ratingsErste Schritte mit dem Raspberry Pi: Installation, Konfiguration, Tuning und Praxis für alle aktuellen Raspberry-Pi-Modelle Rating: 0 out of 5 stars0 ratingsKünstliche Intelligenz Rating: 0 out of 5 stars0 ratingsDie KI Bibel, mit künstlicher Intelligenz Geld verdienen: Echte Fallbeispiele und Anleitungen zum Umsetzen Rating: 1 out of 5 stars1/5Taschen-Guide zur Professional Scrum Master-Zertifizierung (PSM 1) Rating: 0 out of 5 stars0 ratingsDigitalisierung verstehen: Was wir über Arbeit, Bildung und die Gesellschaft der Zukunft wissen müssen Rating: 0 out of 5 stars0 ratings
Reviews for CSS
0 ratings0 reviews
Book preview
CSS - Regine Heidorn
Regine Heidorn
CSS –
Grundlagen und Best Practices
ISBN: 978-3-86802-404-3
© 2012 entwickler.press
Ein Imprint der Software & Support Media GmbH
1 Wie wird CSS vom Browser verarbeitet?
Bevor in diesem Shortcut auf die Details eingegangen wird, sollen zur Einführung die wichtigsten Begriffe definiert und die Bearbeitung geladener HTML-/CSS-Dokumente durch den Browser (User Agent) erklärt werden.
Durch die Nutzung der Vorgänge, die im Browser ohnehin stattfinden, wird es möglich, gut wartbare CSS zu erstellen oder vorhandene CSS effizienter zu bearbeiten. Gleiches gilt für die Fehlersuche und Browser-Bugs: Wenn wir verstehen, wie der Browser arbeitet, können wir entscheiden, welche Anweisung ihm hilft, das gewünschte Ergebnis zu liefern. Interessant wird es da, wo das Verhalten von Browsern von den Standards abweicht oder die Empfehlungen des W3C zu ungenau formuliert sind. Das gilt auch für ungeliebte Stiefkinder wie den Internet-Explorer.
CSS-Anweisung
Abbildung 1.1: Bestandteile einer CSS-Anweisung
Eine CSS-Anweisung besteht aus Selektor und Deklaration. Selektoren bezeichnen die HTML-Elemente mit eventuellen ID- und Klassennamen. In der Deklaration wird festgelegt, wie das ausgewählte Element vom Browser dargestellt werden soll. Die Deklaration enthält den Namen einer Eigenschaft und den ihr zugewiesenen Wert.
Schnell kann es passieren, dass einem Element mehrere Eigenschaftswerte zugewiesen werden. Ein Beispiel sich überschreibender Anweisungen sind die im Browser hinterlegten CSS, die durch die im HTML-Dokument mitgelieferten CSS überschrieben werden. Das betrifft unter anderem eine der frühesten Usability-Regeln des Netzes: den unterstrichenen Link in blauer Schriftfarbe (wie er in der Abbildung im Browser-CSS von Opera 10.51 formatiert ist). Sind die Eigenschaftswerte widersprüchlich (im Screendesign sind beispielsweise keine blauen Links vorgesehen), muss der Browser entscheiden, welche Zuweisung letztlich gewinnt.
Browserbearbeitung geladener HTML-/CSS-Dokumente
Gemäß der Spezifikation für CSS2.1 des W3C¹ analysiert der Browser zuerst das HTML-Dokument und konstruiert daraus den Dokumentenbaum.² Danach werden jedem Element Eigenschaftswerte für seine Darstellung zugewiesen.
Abbildung 1.2: Verarbeitung von CSS-Eigenschaftswerten im Browser. In diesem Fall entspricht der errechnete Wert dem angewandten und dem tatsächlichen Wert.
Diese Zuweisung wird in vier Schritten³ ermittelt:
Festgelegter Wert (Specified Value): Wert, der durch Kaskade, Vererbung oder Initialwert (ursprünglicher Wert laut Spezifikation, zum Beispiel background-color: transparent) zugewiesen wird, und zwar in dieser Reihenfolge. Wird also weder durch Kaskade, noch durch Vererbung ein Wert zugewiesen, wird der Initialwert festgelegt.
Errechneter Wert (Computed Value): Festgelegte Werte werden zu errechneten Werten aufgelöst, beispielsweise werden relative Angaben wie Größen in em⁴ zu absoluten Zahlenwerten verrechnet. Dabei muss der Browser das Dokument nicht rendern. Prinzipiell kann jedes Element alle Eigenschaften haben.⁵ Auch wenn manche Eigenschaften nicht gerendert werden, also die Darstellung des Elements nicht verändern, sind sie im errechneten Wert enthalten.
Profitipp: Eigenschaften, die die Darstellung eines Elements ohnehin nicht beeinflussen, sollten gar nicht erst in den CSS notiert werden. Sie können zu Verwirrung im Debugging führen, da ihre Werte möglicherweise unsichtbar an andere Elemente weitergegeben werden oder das Verhalten umgebender Elemente beeinflussen könnten. Außerdem blasen sie den Code unnötig auf. Das betrifft sowohl die Wartbarkeit als auch die Dateigröße.
Angewandter Wert (Used Value): Der angewandte Wert wird für die Elemente errechnet, für die aufgrund von Abhängigkeiten zu übergeordneten Elementen noch kein errechneter Wert feststeht, beispielsweise wenn die Breite eines Elements in Prozent angegeben ist; der absolute Wert in Pixel kann erst errechnet werden, nachdem der absolute Wert des übergeordneten Elements feststeht. Der angewandte Wert ist quasi ein Zwischenschritt für noch nicht errechnete Werte.
Tatsächlicher Wert (Actual Value): Es ist im Wesentlichen der angewandte Wert, der schließlich zum Rendern verwendet werden soll. Allerdings können nicht alle angewandten Werte von allen User Agents gleich interpretiert werden. Zum Beispiel können manche Browser nur mit ganzzahligen Pixelwerten umgehen.
Profitipp: Das Yahoo-Entwicklerteam hat das Problem des unterschiedlichen Schrift-Renderings in verschiedenen Browsern mit ihrem YUI-2-Framework gelöst. Es definiert Prozentzahlen für Schriftgrößen, die in allen Browsern gleich gerendert werden: http://developer.yahoo.com/yui/fonts/.
Im ersten Schritt wird also über