Der größte Unterschied zwischen CSS2 und CSS3 besteht darin, dass CSS3 in verschiedene Abschnitte unterteilt wurde, die als Module bezeichnet werden. Jedes dieser Module durchläuft den W3C in verschiedenen Phasen des Empfehlungsprozesses. Dieser Prozess hat es viel einfacher gemacht, dass verschiedene Teile von CSS3 von verschiedenen Herstellern akzeptiert und im Browser implementiert werden.
Wenn Sie diesen Prozess mit dem vergleichen, was mit CSS2 geschehen ist, wo alles als einzelnes Dokument mit allen Cascading Style Sheets-Informationen übermittelt wurde, werden Sie die Vorteile der Aufspaltung der Empfehlung in kleinere, einzelne Teile erkennen. Da jedes Modul einzeln bearbeitet wird, bieten wir eine wesentlich breitere Palette an Browser-Unterstützung für CSS3-Module.
Testen Sie Ihre CSS3-Seiten genau wie alle neuen und sich ändernden Spezifikationen in so vielen Browsern und Betriebssystemen wie möglich. Denken Sie daran, dass das Ziel nicht darin besteht, Webseiten zu erstellen, die in jedem Browser genau gleich aussehen, sondern sicherzustellen, dass alle von Ihnen verwendeten Stile, einschließlich CSS3-Stile, in den Browsern gut aussehen, die sie unterstützen, und dass sie für ältere Browser, die dies unterstützen, gnädig sind unterlassen Sie.
Neue CSS3-Selektoren
CSS3 bietet eine Reihe neuer Möglichkeiten zum Erstellen von CSS-Regeln mit neuen CSS-Selektoren sowie einem neuen Kombinator und einigen neuen Pseudoelementen.
Drei neue Attributselektoren:
- Attributanfang stimmt genau überein
Element foo ^ = "bar" Das Element hat ein Attribut namens foo, das mit "bar" beginnt, z.
- Attributende stimmt genau überein
element foo $ = "bar" Das Element hat ein Attribut namens foo, das mit "bar" endet, z.
- Attribut enthält die Übereinstimmung
element foo * = "bar" Das Element hat ein Attribut namens foo, das die Zeichenfolge "bar" enthält, z.
16 neue Pseudoklassen:
- :Wurzel
- Das Wurzelelement des Dokuments. In HTML ist das immer so.
- : n-te Kind (n)
- Verwenden Sie diese Option, um exakte untergeordnete Elemente abzugleichen, oder verwenden Sie Variablen, um abwechselnd passende Treffer zu erhalten.
- n-letztes Kind (n)
- Passen Sie die genauen untergeordneten Elemente an, die auf den letzten zählen.
- nth-of-type (n)
- Ordnen Sie gleichgeordnete Elemente im Dokumentbaum davor denselben Namen an.
- : n-te-last-of-type (n)
- Gleiche Namen von Geschwisterelementen werden von unten nach oben gezählt.
- :letztes Kind
- Passen Sie das letzte untergeordnete Element des übergeordneten Elements an.
- : Ersttyp
- Passen Sie das erste Geschwisterelement dieses Typs an.
- : Letzte vom Typ
- Stimmen Sie das letzte Geschwisterelement dieses Typs ab.
- :Einzelkind
- Passen Sie das Element an, das das einzige untergeordnete Element des übergeordneten Elements ist.
- : nur vom Typ
- Passen Sie das Element an, das das einzige seines Typs ist.
- :leeren
- Passen Sie das Element an, das keine untergeordneten Elemente enthält (einschließlich Textknoten).
- :Ziel
- Passen Sie ein Element an, das das Ziel des verweisenden URI ist.
- :aktiviert
- Passen Sie das Element an, wenn es aktiviert ist.
- :deaktiviert
- Passen Sie das Element an, wenn es deaktiviert ist.
- : geprüft
- Passen Sie das Element an, wenn es markiert ist (Optionsfeld oder Kontrollkästchen).
- : nicht
- Übereinstimmung, wenn das Element nicht mit dem einfachen Selektor s übereinstimmt.
Ein neuer Kombinator:
- elementA ~ elementB
- Übereinstimmung, wenn elementB irgendwo nach elementA folgt, nicht unbedingt sofort.
Neue Eigenschaften
CSS3 führte auch eine Reihe neuer CSS-Eigenschaften ein. Bei vielen dieser Eigenschaften wurden visuelle Stile erstellt, die wahrscheinlich mehr mit einem Grafikprogramm wie Photoshop in Verbindung gebracht würden. Einige davon, wie der Grenzradius oder der Box-Schatten, gibt es seit der Einführung von CSS3. Andere, wie Flexbox oder sogar CSS-Grid, sind neuere Stile, die häufig noch als CSS3-Additionen betrachtet werden.
In CSS3 hat sich das Boxmodell nicht geändert. Es gibt jedoch eine Reihe neuer Stileigenschaften, mit denen Sie die Hintergründe und Rahmen Ihrer Boxen anpassen können.
Mehrere Hintergrundmagazine
Mit den Stilen Hintergrundbild, Hintergrundposition und Hintergrundwiederholung können Sie mehrere Hintergrundbilder angeben, die im Feld übereinander angeordnet werden sollen. Das erste Bild ist die Ebene, die dem Benutzer am nächsten liegt, und die folgenden werden hinterher gezeichnet. Wenn eine Hintergrundfarbe vorhanden ist, wird sie unter allen Bildebenen gezeichnet.
Neue Hintergrundstileigenschaften
Es gibt auch einige neue Hintergrundeigenschaften in CSS3.
- Hintergrund-Clip
- Diese Eigenschaft definiert, wie das Hintergrundbild beschnitten werden soll. Die Standardeinstellung ist das Rahmenfeld, es kann jedoch in das Füllfeld oder das Inhaltsfeld geändert werden.
- Hintergrundursprung
- Diese Eigenschaft legt fest, ob der Hintergrund in dem Füllfeld, dem Rahmenfeld oder dem Inhaltsfeld platziert werden soll.
- Hintergrundgröße
- Mit dieser Eigenschaft können Sie die Größe des Hintergrundbilds angeben. Sie können kleinere Bilder an die Seite anpassen.
Änderungen an vorhandenen Hintergrundstileigenschaften
Es gibt auch einige Änderungen an vorhandenen Hintergrundstileigenschaften:
- Hintergrund Wiederholung
- Für diese Eigenschaft gibt es zwei neue Werte: space und round. Leerzeichen Platziert das gekachelte Bild gleichmäßig in der Box, ohne abgeschnitten zu werden. Round skaliert das Hintergrundbild neu, so dass es eine ganze Reihe von Kacheln in der Box wird.
- Hintergrundanhang
- Ein neuer Wert "local" wird hinzugefügt, so dass der Hintergrund mit dem Inhalt des Elements gescrollt wird, wenn das Element über eine Bildlaufleiste verfügt.
- Hintergrund
- Die Hintergrund-Abkürzungseigenschaft fügt die Größen- und Ursprungseigenschaften hinzu.
CSS3-Randeigenschaften
In CSS3 können Ränder die Stile sein, die wir gewohnt sind (durchgezogen, doppelt, gestrichelt usw.), oder sie können ein Bild sein. Außerdem bietet CSS3 die Möglichkeit, abgerundete Ecken zu erstellen.Rahmenbilder sind interessant, weil Sie ein Bild mit allen vier Rändern erstellen und dem CSS dann mitteilen, wie Sie dieses Bild auf Ihre Ränder anwenden.
Neue Eigenschaften für den Rahmenstil
Es gibt einige neue Rahmeneigenschaften in CSS3:
- Grenzradius
- Rand oben rechts Radius, Rand unten rechts Radius, Rand unten links Radius, Rand oben links Radius
- Mit diesen Eigenschaften können Sie abgerundete Ecken an den Rändern erstellen.
- Rahmenbildquelle
- Gibt die Bildquelldatei an, die anstelle der bereits definierten Randstile verwendet werden soll.
- Border-Image-Slice
- Repräsentiert die Einwärtsversätze von den Bildrandkanten
- Randbildbreite
- Definiert den Wert der Breite für das Rahmenbild.
- Border-Image-Beginn
- Gibt den Betrag an, um den sich der Randbildbereich über das Rahmenfeld hinaus erstreckt.
- Border-Image-Stretch
- Definiert, wie die Seiten- und Mittelteile des Randbildes gekachelt oder skaliert werden sollen.
- Rahmenbild
- Die Abkürzungseigenschaft für alle Eigenschaften des Rahmenbildes.
Zusätzliche CSS3-Eigenschaften im Zusammenhang mit Rahmen und Hintergründen
Wenn ein Feld bei einem Seitenumbruch beschädigt wird, definiert der Zeilenumbruch für Zeilenumbrüche (für Inline-Elemente) die Eigenschaft box-decoration-break, wie die neuen Rahmen mit Rahmen und Auffüllung umbrochen werden. Hintergründe können mit dieser Eigenschaft in mehrere defekte Boxen aufgeteilt werden.
Es gibt auch eine Box-Shadow-Eigenschaft, mit der Schatten zu Boxelementen hinzugefügt werden können.
Mit CSS3 können Sie jetzt problemlos eine Webseite mit mehreren Spalten ohne Tabellen oder komplizierte div-Tag-Strukturen einrichten. Sie teilen dem Browser einfach mit, wie viele Spalten das Body-Element enthalten soll und wie breit sie sein sollen. Außerdem können Sie Rahmen (Regeln) und Hintergrundfarben hinzufügen, die sich über die Höhe der Spalte erstrecken, und Ihr Text wird automatisch durch alle Spalten fließen.
CSS3-Spalten - Definieren Sie die Anzahl und Breite der Spalten
Es gibt drei neue Eigenschaften, mit denen Sie die Anzahl und Breite Ihrer Spalten definieren können:
- Spaltenbreite
- Legt die Breite Ihrer Spalten fest. Der Browser wird dann den Text fließen lassen, um die Leerstelle mit so breiten Spalten zu füllen.
- Spaltenanzahl
- Legt die Anzahl der Spalten auf der Seite fest. Der Browser erstellt dann Spalten, die groß genug sind, um in den Bereich zu passen, jedoch nur die von Ihnen angegebene Anzahl.
- Säulen
- Abkürzungseigenschaft, in der Sie entweder die Breite oder die Anzahl definieren können (oder beides, was aber selten sinnvoll ist).
CSS3 Spaltenlücken und Regeln
Lücken und Regeln werden in demselben mehrspaltigen Szenario zwischen den Spalten platziert. Lücken schieben die Spalten auseinander, aber Regeln nehmen keinen Platz ein. Wenn eine Spaltenregel breiter als die Lücke ist, werden angrenzende Spalten überlappt. Es gibt fünf neue Eigenschaften für Spaltenregeln und Lücken:
- Spaltenlücke
- Definiert die Breite der Lücken zwischen den Spalten.
- Spaltenregelfarbe
- Definiert die Farbe der Regel.
- Spaltenregelstil
- Definiert den Stil der Regel (durchgezogen, gepunktet, doppelt usw.).
- Spaltenregelbreite
- Legt die Breite der Regel fest.
- Spaltenregel
- Eine Abkürzungseigenschaft, die alle drei Spaltenregeleigenschaften gleichzeitig definiert.
CSS3-Spaltenumbrüche, Spalten überspannen und Spalten füllen
Spaltenumbrüche verwenden dieselben CSS2-Optionen, die zum Definieren von Umbrüchen im Seiteninhalt verwendet werden, jedoch mit drei neuen Eigenschaften: Durchbruch, Pause nach, und innen einbrechen.
Wie bei Tabellen können Sie Elemente mit der Eigenschaft column-span auf Spalten verteilen. Auf diese Weise können Sie Schlagzeilen erstellen, die sich wie eine Zeitung über mehrere Spalten erstrecken.
Durch das Ausfüllen von Spalten wird festgelegt, wie viel Inhalt in jeder Spalte enthalten ist. Ausgeglichene Spalten versuchen, in jede Spalte die gleiche Menge an Inhalt einzufügen, während der Inhalt automatisch so lange fließt, bis die Spalte voll ist und dann zur nächsten übergeht.
Weitere Funktionen in CSS3, die nicht in CSS2 enthalten sind
Es gibt viele zusätzliche Funktionen in CSS3, die in CSS2 nicht vorhanden waren, darunter:
- CSS-Vorlagenlayoutmodul und CSS3-Rasterpositionierungsmodul: Erstellen von Rastern mit CSS.
- CSS3 Textmodul: Umreißen Sie Text und erstellen Sie sogar mit CSS Schatten.
- CSS3 Farbmodul: Jetzt mit Deckkraft.
- Änderungen am Boxmodell: Einschließlich einer Marquee-Eigenschaft, die sich wie das IE-Tag verhält.
- CSS3-Benutzeroberflächenmodul: Sie erhalten neue Cursor, Antworten auf Aktionen, erforderliche Felder und sogar Größenänderungselemente.
- Medien-Anfragen: Medienabfragen ermöglichen Ihnen mehr Flexibilität bei der Definition der Verwendung eines Stylesheets. Sie können beispielsweise ein Stylesheet definieren, das nur für Handheld-Geräte gilt, deren Viewport größer als 20em ist.
- CSS3-Ruby-Modul: Bietet Unterstützung für Sprachen, in denen Dokumente mit Ruby Ruby kommentiert werden.
- CSS3 Paged Media-Modul: Für noch mehr Unterstützung für ausgelagerte Medien (Papier, Folien usw.).
- Generierter Inhalt: L Kopf- und Fußzeilen, Fußnoten und andere Inhalte, die programmgesteuert generiert werden, insbesondere für seitenweise Medien.
- CSS3 Sprachmodul: Änderungen an akustischem CSS.
