Der Unterschied zwischen CSS2 und CSS3

Der größte Unterschied zwischen CSS2 und CSS3 ist, dass CSS3 in verschiedene Abschnitte unterteilt wurde, genannt Module. Jedes dieser Module durchläuft das 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 CSS2 vergleichen, wo alles als ein einziges Dokument mit allen eingereicht wurde Cascading Style Sheets Informationen darin, beginnen Sie die Vorteile zu erkennen, die Empfehlung in kleinere, einzelne Teile aufzuteilen. Da jedes Modul einzeln bearbeitet wird, genießen Entwickler eine viel größere Bandbreite an Browserunterstützung für CSS3-Module.

Neue CSS3-Selektoren

CSS3 bietet mehrere neue Möglichkeiten zum Schreiben von CSS-Regeln mit neuen CSS-Selektoren sowie einem neuen Kombinator und einigen neuen Pseudo-Elementen.

Es gibt drei neue Attributselektoren:

• Attributanfang stimmt genau überein:

  element[foo^="bar"]

  Das Element hat ein Attribut namens foo, das mit "bar" beginnt, z.B.
instagram viewer
• Attributende stimmt genau überein:

  element[foo$="bar"]

  Das Element hat ein Attribut namens foo, das mit "bar" endet, z.B.
• Attribut enthält die Übereinstimmung:

  element[foo*="bar"]

  Das Element hat ein Attribut namens foo die die Zeichenfolge "bar" enthält.

16 neue Pseudoklassen wurden eingeführt:

• :Wurzel
  • Das Stammelement des Dokuments.
• :n.-Kind (n)
  • Verwenden Sie dies, um genaue untergeordnete Elemente abzugleichen, oder verwenden Sie Variablen, um abwechselnde Übereinstimmungen zu erhalten.
• :n-letztes-Kind (n)
  • Übereinstimmung mit genauen untergeordneten Elementen, wobei vom letzten aufwärts gezählt wird.
• :n-vom-Typ (n)
  • Gleicht Geschwisterelemente mit dem gleichen Namen im Dokumentbaum davor ab.
• :n-letzter-Typ (n)
  • Gleiche Geschwisterelemente mit dem gleichen Namen von unten nach oben ab.
• :letztes Kind
  • Match den letzten untergeordnetes Element des Elternteils.
• :erster Typ
  • Entspricht dem ersten gleichgeordneten Element dieses Typs.
• :letzter Typ
  • Entspricht dem letzten gleichgeordneten Element dieses Typs.
• :Einzelkind
  • Entspricht dem Element, das das einzige Kind seines Elternteils ist.
• :nur vom Typ
  • Entspricht dem Element, das das einzige seiner Art ist.
• :leer
  • Entspricht dem Element, das keine untergeordneten Elemente hat (einschließlich Textknoten).
• :Ziel
  • Entspricht einem Element, 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 aktiviert ist (Optionsfeld oder Kontrollkästchen).
• :nicht (s)
  • Abgleichen, wenn das Element nicht mit dem einfachen übereinstimmt Selektoren.

Es gibt einen neuen Kombinator:

• ElementA ~ ElementB
  • Übereinstimmung, wenn ElementB irgendwo nach ElementA folgt, nicht unbedingt sofort.

Neue Eigenschaften

CSS3 führte auch mehrere neue CSS-Eigenschaften ein. Viele dieser Eigenschaften erzeugen visuelle Stile, die wahrscheinlich eher mit einem Grafikprogramm wie Photoshop. Einige davon, wie border-radius oder box-shadow, gibt es seit der Einführung von CSS3. Andere, wie Flexbox oder sogar CSS Grid sind neuere Stile, die immer noch oft als CSS3-Ergänzungen angesehen werden.

In CSS3 hat sich das Boxmodell nicht geändert. Es gibt jedoch eine Reihe neuer Stileigenschaften, mit denen Sie die Hintergründe und Ränder Ihrer Boxen gestalten können.

Mehrere Hintergrundbilder

Mit den Stilen „Hintergrundbild“, „Hintergrundposition“ und „Hintergrundwiederholung“ können Sie mehrere Hintergrundbilder angeben, die im Rahmen übereinander gelegt werden sollen. Das erste Bild ist die dem Benutzer am nächsten liegende Ebene, während die folgenden dahinter gemalt sind. Wenn eine Hintergrundfarbe vorhanden ist, wird sie unter alle Bildebenen gemalt.

Neue Eigenschaften für Hintergrundstile

Es gibt auch einige neue Hintergrundeigenschaften in CSS3:

• Hintergrund-Clip
• Diese Eigenschaft definiert, wie das Hintergrundbild abgeschnitten werden soll. Die Vorgabe ist die Rahmenbox, kann aber in die Füllbox oder die Inhaltsbox geändert werden.
• Hintergrund-Herkunft
• Diese Eigenschaft bestimmt, ob der Hintergrund in der Füllbox, der Rahmenbox oder der Inhaltsbox platziert werden soll.
• Hintergrundgröße
• Diese Eigenschaft zeigt die Größe des Hintergrundbildes. Es ermöglicht Ihnen, strecken Sie kleinere Bilder, um sie an die Seite anzupassen.

Änderungen an vorhandenen Hintergrundstileigenschaften

Es gibt auch einige Änderungen an bestehenden Hintergrundstileigenschaften:

• Hintergrund Wiederholung
  • Es gibt zwei neue Werte für diese Eigenschaft — Platz und runden. Leerzeichen verteilt das gekachelte Bild gleichmäßig innerhalb des Rahmens, ohne abgeschnitten zu werden. Round skaliert das Hintergrundbild neu, sodass es eine ganze Reihe von Malen in der Box angezeigt wird.
• Hintergrund-Anhang
  • Ein neuer Wert "local" wird hinzugefügt, damit der Hintergrund mit dem Inhalt des Elements scrollt, wenn dieses Element eine Bildlaufleiste hat.
• Hintergrund
  • Die Hintergrundkürzeleigenschaft fügt die Größen- und Ursprungseigenschaften hinzu.

CSS3-Rahmeneigenschaften

In CSS3 können Rahmen die gewohnten Stile (durchgezogen, doppelt, gestrichelt usw.) oder ein Bild sein. Außerdem unterstützt CSS3 abgerundete Ecken. Rahmenbilder sind interessant, weil Sie ein Bild aller vier Rahmen erstellen und dann dem CSS mitteilen, wie dieses Bild auf Ihre Rahmen angewendet werden soll.

Neue Rahmenstileigenschaften

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 Ihren Rändern erstellen.
• Rahmen-Bild-Quelle
• Gibt die Bildquelldatei an, die anstelle der bereits definierten Rahmenstile verwendet werden soll.
• Rahmen-Bild-Scheibe
• Stellt die nach innen gerichteten Versätze von den Randbildkanten dar.
• Rahmen-Bild-Breite
• Definiert den Wert der Breite für Ihr Rahmenbild.
• Border-Image-Anfang
• Gibt den Betrag an, um den sich der Randbildbereich über das Randfeld hinaus erstreckt.
• Rahmen-Bild-Stretch
• Definiert, wie die Seiten- und Mittelteile des Rahmenbildes gekachelt oder skaliert werden sollen.
• Grenzbild
• Die Kurzformeigenschaft für alle Rahmenbildeigenschaften.

Zusätzliche CSS3-Eigenschaften in Bezug auf Rahmen und Hintergründe

Wenn ein Rahmen bei einem Seitenumbruch, Spaltenumbruch oder Zeilenumbruch (für Inline-Elemente) umgebrochen wird, wird die Box-Dekoration-Pause -Eigenschaft definiert, wie die neuen Boxen mit Rahmen und Padding umschlossen werden. Mit dieser Eigenschaft teilen sich Hintergründe auf mehrere kaputte Kästchen auf.

Eine neue Box Schatten -Eigenschaft fügt den Box-Elementen Schatten hinzu.

Mit CSS3 können Sie jetzt ganz einfach eine Webseite mit mehreren Spalten ohne Tabellen oder kompliziert einrichten div Tag-Strukturen. Sie teilen dem Browser einfach mit, wie viele Spalten das body-Element haben 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 fließt automatisch durch alle Spalten.

Definieren Sie die Anzahl und Breite der Spalten

Es gibt drei neue Eigenschaften mit denen Sie die Anzahl und Breite Ihrer Spalten festlegen können:

• Spaltenbreite
  • Definiert die Breite Ihrer Spalten. Der Browser lässt dann den Text fließen, um den Raum mit Spalten dieser Breite zu füllen.
• Spaltenanzahl
  • Definiert die Anzahl der Spalten auf der Seite. Der Browser erstellt dann Spalten, die breit genug sind, um in den Raum zu passen, jedoch nur die von Ihnen angegebene Zahl.
• Säulen
  • Shorthand-Eigenschaft, in der Sie entweder die Breite oder die Zahl (oder beides, aber das macht selten Sinn) definieren können.

CSS3-Spaltenlücken und -Regeln

Lücken und Regeln werden zwischen den Spalten im gleichen Mehrspalten-Szenario platziert. Lücken schieben die Spalten auseinander, aber Regeln nehmen keinen Platz ein. Wenn eine Spaltenregel breiter als ihre Lücke ist, überlappt sie benachbarte Spalten. Es gibt fünf neue Eigenschaften für Spaltenregeln und Lücken:

• Spaltenlücke
  • Definiert die Breite der Lücken zwischen den Spalten.
• Spalten-Regel-Farbe
  • Definiert die Farbe der Regel.
• Spaltenregel-Stil
  • Definiert den Stil der Regel (durchgezogen, gepunktet, doppelt usw.).
• Spaltenregelbreite
  • Definiert die Breite der Regel.
• Spaltenregel
  • Eine Kurzformeigenschaft, die alle drei Spaltenregeleigenschaften gleichzeitig definiert.

CSS3-Spaltenumbrüche, Spalten überspannen und Spalten füllen

Säule breaks verwenden dieselben CSS2-Optionen, die zum Definieren von Umbrüchen in Seiteninhalten verwendet werden, jedoch mit drei neuen Eigenschaften: Pause vor, Pause nach, und einbrechen.

Wie bei Tabellen können Sie mit der Eigenschaft column-span Elemente so einstellen, dass sie sich über Spalten erstrecken. Auf diese Weise können Sie Schlagzeilen erstellen, die sich eher wie eine Zeitung über mehrere Spalten erstrecken.

Das Füllen von Spalten bestimmt, wie viel Inhalt in jeder Spalte enthalten ist. Ausgeglichene Spalten versuchen, die gleiche Menge an Inhalt in jede Spalte einzufügen, während automatisch den Inhalt einfließen lässt, bis die Spalte voll ist und dann zur nächsten geht.

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-Vorlagen-Layout-Modul und CSS3-Modul zur Rasterpositionierung: Erstellen von Rastern mit CSS.
• CSS3-Textmodul: Text umreißen und sogar Schlagschatten mit CSS erstellen.
• CSS3-Farbmodul: Jetzt mit Deckkraft.
• Änderungen am Boxmodell: Einschließlich eines Festzelt -Eigenschaft, die sich wie das IE-Tag verhält.
• CSS3-Benutzeroberflächenmodul: Sie erhalten neue Cursor, Antworten auf Aktionen, erforderliche Felder und sogar die Größenänderung von Elementen.
• Medien-Anfragen: Medien-Anfragen ermöglichen Ihnen mehr Flexibilität bei der Definition, wie ein Stylesheet verwendet werden soll. Sie können beispielsweise ein Stylesheet definieren, das nur für Handheld-Geräte mit einem Ansichtsfenster größer als 20 em bestimmt ist.
• CSS3-Ruby-Modul: Bietet Unterstützung für Sprachen, die Textruby verwenden, um Dokumente mit Anmerkungen zu versehen.
• CSS3-Modul für ausgelagerte Medien: Für noch mehr Unterstützung für seitenweise Medien (Papier, Transparentfolien usw.).
• Generierte Inhalte: Ausführen von Kopf- und Fußzeilen, Fußnoten und anderen programmgesteuert generierten Inhalten, insbesondere für ausgelagerte Medien.
• CSS3-Sprachmodul: Änderungen am akustischen CSS.