EinklappenAufklappen Inhaltsverzeichnis CSS-3-Module Modul: Animations Modul: Backgrounds and Borders Modul: Basic User Interface Modul: Basic Box Model Modul: Behavioral Extensions to CSS Modul: Cascading and Inheritance Modul: Color Modul: Flexible Box Layout Modul: Fonts Modul: Generated Content for Paged Media Modul: Generated and Replaced Content Modul: Grid Positioning Modul: Hyperlink Presentation Modul: Image Values and Replaced Content Modul: Line Box Modul: Lists and Counters Modul: Marquee Modul: Multi-column Layout Modul: Namespaces Modul: Paged Media Modul: Presentation Levels Modul: Ruby Modul: Speech Modul: Syntax Modul: Text Modul: Template Layout Module: 2D Transforms, 3D Transforms Modul: Transitions Modul: Values and Units Modul: Writing Modes CSS-3-Profile Mobile-Profil Print-Profil TV-Profil

CSS-3-Module

Die Module von CSS 3 sind die eigentliche Weiterentwicklung des Sprachumfangs von CSS. Die Module übernehmen den CSS-2.1-Standard und erweitern diesen. Die Aufteilung in Module hat den Vorteil, dass jedes dieser Module eine eigene W3-Spezifikation ist. Jedes dieser Module hat folglich auch eine eigene Dynamik bei der Entwicklung und beim Review-Prozess.

Modul: Animations

Dieses Modul enthält eine neue Regel namens @keyframes sowie ein paar neue CSS-Eigenschaften wie z.B. animation-duration, animation-iteration-count, animation-play-state usw., mit deren Hilfe sich beliebige andere CSS-Eigenschaften von Elementen dynamisch auf einer Zeitachse verändern lassen. Auf diese Weise werden einfache Animationen ohne JavaScript möglich. Dennoch definiert das Modul auch eine DOM-Schnittstelle, um erweitertes Event-Handling zu ermöglichen. Das Animation-Modul ermöglicht zeitgesteuerte Zustände. Verfeinern lassen sich solche Animationen mit den Möglichkeiten des weiter unten beschriebenen Transition-Moduls.

Modul: Backgrounds and Borders

Dieses Modul erweitert das Set der CSS-Eigenschaften, die mit background- und border- beginnen, ist also zuständig für Hintergrundfarben und Rahmen. Hervorzuheben sind folgende Neuerungen gegenüber CSS 2.1:

• Die Eigenschaft background-size zum Skalieren eines Hintergrundbildes im Erstreckungsraum eines Elements,
• Die Eigenschaft border-radius zum Definieren abgerundeter Ecken
• Das neue Set von Eigenschaften, beginnend mit border-image-, das die Definition grafischer Schmuckrahmen ermöglicht.

Modul: Basic User Interface

In diesem Modul werden Style-Bestandteile behandelt, die im Zusammenhang mit interaktiven Elementen wie Formularelementen, Hyperlinks oder anderweitig interaktiv verwendeten Elementen von Bedeutung sind. Auch die Gestaltung des Cursors (die bereits bekannte Eigenschaft cursor) gehört in dieses Modul. An Neuigkeiten hervorzuheben ist ein neues Set an wichtigen Eigenschaften, die mit outline- beginnen. Es handelt sich dabei um Rahmen um Elemente, die jedoch im Gegensatz zu Rahmen mit border-Eigenschaften keinen zusätzlichen Raum einnehmen, sondern nur zur interaktiven Hervorhebung des Elements in bestimmten Zusammenhängen dienen. Weiterhin enthält das Modul eine ganze Reihe neuer Pseudo-Klassen, etwa :valid und :invalid zur optischen Unterscheidung gültiger und ungültiger Inhalte (etwa eines Formularelements), oder :in-range und :out-of-range, um Werte im gültigen Bereich und Werte außerhalb des gültigen Bereichs optisch zu kennzeichnen.
Für einigen Wirbel in der Szene hat auch eine unscheinbare neue Eigenschaft namens box-sizing gesorgt, die in diesem Modul beheimatet ist. Diese Eigenschaft hebelt kurzerhand das bisher gültige Boxmodell des W3-Konsortiums aus und ersetzt es durch das früherer Internet-Explorer-Versionen, das aus Sicht von Layoutgestaltern durchaus seine Vorteile hat.

Modul: Basic Box Model

In diesem Modul werden zahlreiche aus CSS 2.1 bekannte Eigenschaften versammelt, wie display, float und clear, width, height, overflow, margin- und padding-Eigenschaften. Wichtige Neuerungen sind hier die rotation-Eigenschaften, mit deren Hilfe das Kippen bzw. Schräg- oder Senkrechtstellen von Text möglich ist.

Modul: Behavioral Extensions to CSS

Dieses Modul definiert eine CSS-Schnittstelle für Style-Bezüge von HTML-Elementen, die nichts mit CSS zu tun haben. So gibt es etwa die vom Mozilla-Projekt entwickelte XML-Sprache XBL (XML Binding Language), mit deren Hilfe sich das Aussehen und Verhalten von HTML-Elementen beschreiben lässt. Das CSS-Modul definiert eine CSS-Eigenschaft namens binding, über die der Bezug zu URLs mit solchen Beschreibungen hergestellt werden kann.

Modul: Cascading and Inheritance

Dieses Modul beschreibt die Prinzipien von Kaskadierung und Vererbung von CSS-Eigenschaften an Kindelemente. Das Modul enthält keine wesentlichen Neuerungen gegenüber CSS 2.0/2.1.

Modul: Color

Dieses Modul beschreibt die bekannte color-Eigenschaft, weiterhin jedoch auch die neue, wichtige Eigenschaft opacity für halbtransparente Elemente (unterhalb positionierte Elemente scheinen je nach Deckungsgrad mehr oder weniger stark durch — Effekte also, die aus Computerspielen, aber auch aus neueren Bestriebssystem-Oberflächen wie MacOS oder dem Aero-Theme von Windows bekannt sind und beim Webdesign stark nachgefragt werden. Dazu kommen neue Möglichkeiten, Farben zu definieren. So wird der bekannten rgb()-Methode eine hsl()-Methode zur Seite gestellt, die Farben auf der Basis von HSL (H = hue = Farbton, S = saturation = Sättigung, L = lightness = Leuchtkraft) mittels Prozentwerten beschreibt. Weiterhin lassen sich RGBA-Farben definieren. Das A steht für den Alphakanal und beschreibt die Transparenz bzw. Deckkraft einer Farbe.

Modul: Flexible Box Layout

Dieses Modul bietet neue Möglichkeiten an, Elemente anzuordnen. In CSS 2.0/2.1 lassen sich manche Anordnungen, etwa zwei nebeneinander angeordnete Buttons in einem Bereich, wobei der eine links- und der andere rechtsbündig ausgerichtet sein soll, nur mit Tricksereien erreichen. Manche Designer greifen auch gleich zur althergebrachten blinden Tabelle, um solche Aufgaben zu lösen. Das Flexbox-Modul von CSS 3 schafft mit box-orientation, box-direction, box-align und anderen, mit box- beginnenden Eigenschaften neue Möglichkeiten der Anordnung.

Modul: Fonts

In diesem Modul werden die aus früheren CSS-Versionen bereits bekannten Eigenschaften versammelt, die mit font- beginnen.

Modul: Generated Content for Paged Media

Dieses Modul erweitert die mit CSS 2.0 eingeführten Möglichkeiten, CSS für Printlayouts bzw. seitenorientierte Ausgaben zu nutzen. In CSS 3 werden die Möglichkeiten stark erweitert, etwa um laufende Kopf- und Fußzeilen mit automatisiertem Überschriftenbezug, um Seiten- und Kapitelnummerierung, Fußnotenautomatik usw.

Modul: Generated and Replaced Content

In dieses Modul gehören bereits aus CSS 2.0 bekannte Pseudo-Klassen wie :before und :after sowie die Möglichkeit, automatische Nummerierung von Elementen mit CSS zu realisieren. In CSS 3 gesellen sich weitere Möglichkeiten hinzu, etwa die move-to-Eigenschaft, um Elemente innerhalb des HTML-Dokuments zu verschieben, oder die quotes-Eigenschaft, die es beispielsweise erlaubt, sprachabhängige Anführungszeichen zu definieren.

Modul: Grid Positioning

Grid bedeutet so viel wie Raster. Das Grid-Modul bringt neue Eigenschaften und sogar eine neue Maßeinheit namens gr (1 grid) ins Spiel, um Webdesign-Konzepte zu unterstützen, die in Tabellen denken. Mehrere Spalten (grid-columns-Eigenschaft), merere Zeilen (grid-rows-Eigenschaft), erkennbare gedachte Linien sowohl senkrecht als auch waagerecht, was bei inhaltlich vollgepropften Seiten für mehr Übersichtlichkeit und Ruhe sorgen soll. In manchen Kreisen der Webdesign-Szene wird grid-basiertes Layout favorisiert, weshalb dieses Modul bereits viel Beachtung erhalten hat. Seine Entwicklung schreitet aber nur schleppend voran.

Modul: Hyperlink Presentation

Dieses Modul verlagert das target-Attribut von HTML in CSS und erweitert es um ein Set neuer Eigenschaften wie target-name, target-new, target-position und target-property. Das ist durchaus sinnvoll, denn so lassen sich beispielsweise klassenabhängig Links in neuen Fenstern/Tabs öffnen, also etwa nur Links zu externen Zielen.

Modul: Image Values and Replaced Content

Dieses Modul beschreibt ein neues Format namens image(). Anders als url() besteht dabei die Möglichkeit, optionale Angaben zu notieren. Das können Bildauflösungsangaben sein, alternative Farben, falls das Bild nicht angezeigt werden kann, oder — und das ist besonders interessant — Angaben, um nur einen bestimmten Bildausschnitt anzuzeigen. Letztere Möglichkeit ist die Basis der sogenannten CSS Sprites. Dabei werden kleinere Grafikressourcen einer Website alle in einer Grafik angeordnet. So müssen nicht Dutzende von Grafikdateien via HTTP übertragen werden, sondern nur eine. Und es wird jeweils nur ein bestimmter Bildausschnitt angezeigt, der eine jeweils benötigte Grafik zeigt.

Modul: Line Box

In CSS 2.0/2.1 erschöpfen sich die Möglichkeit der Kontrolle von Elementen innerhalb einer Zeile im wesentlichen auf die Eigenschaften line-height und vertical-align. Diese Eigenschaften finden sich auch im Line-Grid-Modul wieder, gehen dort aber fast unter in einer Fülle weiterer, neuer Eigenschaften. Etwa die line-stack-Eigenschaften, die das Ausfüllen von Blockelementen mit Inhalten regeln, oder die alignment-Eigenschaften, die vor allem diverse Arten von typografischen Basislinien berücksichtigen. Einige dieser Eigenschaften sind vorwiegend für fernöstliche Silbensprachen von Bedeutung.

Modul: Lists and Counters

Dieses Modul greift im wesentlichen die Listeneigenschaften von CSS 2.0/2.1 auf (list-style usw.). Neu ist das Pseudo-Element ::marker, das es erlaubt, Aufzählungszeichen oder Nummerierungszahlen genau zu formatieren.

Modul: Marquee

Dieses Modul lässt das microsoft-proprietäre HTML-Element marquee wieder auferstehen. Mit Hilfe eines Sets von Eigenschaften namens overflow-style, marquee-style, marquee-play-count, marquee-direction und marquee-speed lässt sich jedes HTML-Element in einen animierten Lauftext verwandeln.

Modul: Multi-column Layout

Mit diesem Modul wird ein alter HTML-Ansatz von Netscape wieder aufgegriffen, nämlich mehrspaltiger Textfluss mit automatischem Spaltenumbruch. Ein Set neuer Eigenschaften, nämlich column-width, column-count, columns, column-gap, column-rule-color, column-rule-style, column-rule-width, column-rule und column-span ermöglicht das Definieren von Spalten, Spaltenbreiten, Abständen, Verhaltensweisen usw.

Modul: Namespaces

Dieses Modul ist vor allem im Zusammenhang mit der XML-Verarbeitung von XHTML oder anderen XML-basierten Sprachen von Bedeutung. Es erlaubt mit Hilfe einer neuen Regel namens @namespace das Definieren von Namensräumen analog zu XML. Dadurch lassen sich namensraumabhängige Elemente über Selektoren gezielt adressieren.

Modul: Paged Media

Dieses Modul setzt auf den bereits in CSS 2.0 eingeführten CSS-Konzepten für Print-Layouts bzw. seitenorientierten Ausgaben auf. So lässt sich etwa die Seitengröße definieren, linke und rechte Seiten lassen sich unterscheiden, Seitenränder bestimmen, und Angaben zur Seitenumbruchkontrolle können notiert werden. Neu sind die Bezeichnungen zur genauen, layoutabhängigen Adressierung bestimmter Kopf-, Fuß- und Randbereiche, sowie Angaben zur Darstellung von Bildern, die größer als die Seite sind.

Modul: Presentation Levels

Dieses Modul bietet eine Möglichkeit an, die Elemente eines HTML-Dokuments intern mit Nummern für Hierarchie-Ebenen oder mit Laufnummern zu versehen. Damit erhalten die Elemente DOM-Informationen, die von Scripts genutzt werden können, um den Inhalt eines solchen HTML-Elements in besonderer Form darzustellen, z.B. als Outlining (Gliederungsansicht) oder als Slideshow (Diashow).

Modul: Ruby

HTML5 bietet bereits auf logischer Auszeichnungsebene die Möglichkeit an, Ruby-Text zu notieren — eine in fernöstlichen Sprachen vorkommende Art und Weise, Schriftzeichen mit zusätzlichen Informationen auszustatten, um die im Kontext gemeinte Bedeutung der Schriftzeichen zu präzisieren. Das CSS-Ruby-Modul ergänzt diesen Ansatz um eine Reihe neuer CSS-Eigenschaften, nämlich ruby-position, ruby-align, ruby-overhang und ruby-span, mit deren Hilfe sich Ruby-Annotationen exakter positionieren lassen.

Modul: Speech

In diesem Modul werden die auralen Stylesheet-Eigenschaften weiterentwickelt, die bereits mit CSS 2.0 eingeführt wurden, im 2.1-Standard jedoch wegen mangelner Praxisrelevanz erst einmal wieder entfernt wurden. Es handelt sich um Eigenschaften zur Steuerung von Sprachsynthesizern.

Modul: Syntax

Dieses Modul beschreibt innerhalb von CSS 3 die allgemeine Syntax, die Grammatik und das Fachvokabular von CSS.

Modul: Text

In diesem Modul werden Eigenschaften rund um die Textkontrolle versammelt. Darunter sind aus früheren CSS-Versionen bekannte Eigenschaften wie text-align, white-space, word-spacing oder letter-spacing. Es kommen jedoch auch neue Eigenschaften hinzu, etwa text-wrap für die Textumbruchkontrolle, sowie die beiden bereits sehr beliebten neuen Eigenschaften text-shadow und text-outline für grafische Schrifteffekte.

Modul: Template Layout

Dieses Modul spezifiziert eine neuartige Möglichkeit, komplexe Webseitenlayouts zu definieren. Dazu wird der Anzeigebereich in Regionen unterteilt, die sich mit Hilfe entsprechender Angaben anordnen lassen. Das Ganze erinnert an die alte, obsolete HTML-Technik der Framesets und stellt wohl auch den Versuch dar, Framesets auf CSS-Basis zu realisieren.

Module: 2D Transforms, 3D Transforms

Diese Module stellen neue Eigenschaften bereit, um HTML-Text zweidimensional bzw. dreidimensional zu drehen oder zu dehnen.

Modul: Transitions

Dieses Modul führt ein Set neuer Eigenschaften ein: transition, transition-delay, transition-duration, transition-property und transition-timing-function. Mit Hilfe dieser Eigenschaften lassen sich sanfte Übergänge zwischen verschiedenen Werten zu einer visuellen CSS-Eigenschaft definieren.

Modul: Values and Units

Das Modul beschreibt die in CSS 3 verwendeten Wertetypen für Eigenschaften und die verwendeten Maßeinheiten. Es kommen diverse neue Maßeinheiten hinzu, nämlich:

• gd für die Spalten- oder Reihenzahl in einem Grid-Layout,
• rem für die Schriftgröße des Wurzelelements,
• vw für die Breite des Viewports, also des für die Webseite verfügbaren Bereichs im Anzeigefenster des Browsers,
• vh für die Höhe des Viewports,
• vm für die kleinere Seite des Viewports (Breite oder Höhe, je nachdem, wie der Viewport beschaffen ist oder wie herum das zugehörige Gerät aktuell gehalten wird).
• ch für die Breite des Glyphens 0 in der aktuell verwendeten Schriftart
• deg für Grad (1/360 eines Kreises)
• grad für Gon (geodätisches Winkelmaß)
• rad für Radiant
• turn für Turn (400 Gon)
• ms für Millisekunden
• s für Sekunden
• Hz für Hertz
• kHz für Kilohertz

Modul: Writing Modes

Dieses Modul befindet sich noch im Frühstadium. Es überträgt die HTML-Konzepte für bidirektionalen Text (bdo-Element) in CSS und stellt Eigenschaften zur Kontrolle von Textrichtungswechseln innerhalb eines Dokuments bereit.

CSS-3-Profile

CSS wird künftig nicht nur aus Versionen bestehen, sondern auch auch sogenannten Profilen. CSS-Profile sind CSS-Subsets für bestimmte Ausgabemedien. Zum Redaktionszeitpunkt existieren die ersten drei dieser Profile: das Mobile-Profil für Mobiltelefone und PDAs, das Print-Profile für Druckmedien, und das TV-Profil für Fernsehgeräte.

Mobile-Profil

Das Mobile-Profil beschreibt ein Subset von CSS-Regeln, -Selektoren und -Eigenschaften für höherwertige Mobilfunkgeräte und Handhelds. Das Eigenschaften-Set besteht aus den meisten visuellen Eigenschaften von CSS 2.1, ergänzt um die Marquee-Eigenschaften von CSS 3, wohl in der Annahme, dass Lauftext für kleine Displays eine Design-Alternative sein könnte.

Print-Profil

Dieses Profil legt fest, welche Regeln, Selektoren und Eigenschaften Drucker von CSS interpretieren und umsetzen können sollten, wenn kein spezieller Druckertreiber installiert werden kann oder soll. Dazu gehören natürlich vor allem die Regeln und Eigenschaften für Paged Media, darunter auch die neueren Regeln zum Ansprechen bestimmter Seitenrandbereiche.

TV-Profil

In diesem Profil wird beschrieben, über welche CSS-Fähigkeiten ein in TV-Geräte integrierter Web-Browser verfügen sollte. Im wesentlichen entspricht das dem Sprachumfang von CSS 2.1, ergänzt um einige wichtige neuere CSS3-Eigenschaften.

 

---

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.