Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    CSS: Grundlagen und Best Practices
    CSS: Grundlagen und Best Practices
    CSS: Grundlagen und Best Practices
    Ebook75 pages47 minutes

    CSS: Grundlagen und Best Practices

    By Regine Heidorn

    ()

    Read preview

    About this ebook

    Unstrukturiert kann die Arbeit mit CSS schnell in Chaos ausarten: hier ein kleiner Bugfix, dort eine Browseranpassung, 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.
    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.
    LanguageDeutsch
    Publisherentwickler.press
    Release dateMar 16, 2012
    ISBN9783868024043
    CSS: Grundlagen und Best Practices

    Read more from Regine Heidorn

    Related to CSS

    Titles in the series (16)

    View More
    View More

    Related ebooks

    Computers For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Schreibwerkstatt

      Sep 22, 2022

      Schreibwerkstatt
      9 min read

    • Article

      Angetestet

      Aug 4, 2021

      Angetestet
      4 min read

    • Article

      Frischzellenkur

      Oct 20, 2021

      Frischzellenkur
      8 min read

    • Article

      Get Tracks Done

      Jan 5, 2022

      Get Tracks Done
      3 min read

    • Article

      NAS Für Die Massen

      Oct 20, 2021

      NAS Für Die Massen
      6 min read

    • Article

      Electro vs. Klassik

      May 5, 2021

      Electro vs. Klassik
      13 min read

    • Article

      Feature: Desktop Symphony Orchestersound für jedes Budget

      Nov 4, 2020

      Das Waffenarsenal für orchestrale Kompositionen umfasst in erster Linie eine hochwertige Grundausstattung an Orches-ter-Samples. Bibliotheken wie die Synchron-Serie und die Vienna-Instruments-Serie von VSL verfolgen das Ziel, Einzelinstrumente äußers

      6 min read

    • Article

      Ein besonderes Jahr

      Aug 4, 2021

      Sehr geehrte Leserinnen und Leser, der stockende Warenfluss aus und nach Asien trifft Industrie und Verbraucher in allen Bereichen. Viele Fahrradteile: Mangelware. Baustoffe wie Dämmmaterialien oder Abwasserrohre: Mangelware. Selbst Winzer klagen übe

      2 min read

    • Article

      Drei Top-Vollversionen!

      Nov 3, 2021

      Drei Top-Vollversionen!
      3 min read

    • Article

      Windows 11 im Check

      Nov 3, 2021

      Windows 11 im Check
      6 min read

    • Article

      HiFi-Sound Aus Dem Netzwerk

      Sep 7, 2023

      HiFi-Sound Aus Dem Netzwerk
      4 min read

    • Article

      Zugangsbeschränkung

      Mar 3, 2022

      Zugangsbeschränkung
      10 min read

    • Article

      Mit Podcasts Geld verdienen

      Aug 5, 2021

      Mit Podcasts Geld verdienen
      6 min read

    • Article

      Statisch Gebaut

      Mar 17, 2021

      Statisch Gebaut
      5 min read

    • Article

      Fleißiges Helferlein

      Dec 22, 2022

      Fleißiges Helferlein
      10 min read

    • Article

      Briefautomat

      Apr 21, 2022

      Briefautomat
      10 min read

    • Article

      Scharfer Wachhund

      Aug 4, 2021

      Scharfer Wachhund
      10 min read

    • Article

      Saubere Arbeit

      Aug 4, 2022

      Saubere Arbeit
      7 min read

    • Article

      Gehäusedeckel Aufschrauben

      Apr 7, 2022

      Gehäusedeckel Aufschrauben
      10 min read

    • Article

      Eine Quelle, viele Apps

      Feb 3, 2022

      Eine Quelle, viele Apps
      9 min read

    • Article

      Komfort-Downloads

      Apr 21, 2022

      Komfort-Downloads
      9 min read

    • Article

      Im Eigenbau

      May 19, 2021

      Im Eigenbau
      7 min read

    • Article

      Online À La Carte

      Nov 3, 2023

      Online À La Carte
      3 min read

    Related categories

    Reviews for CSS

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      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

      Enjoying the preview?
      Page 1 of 1