CSS3 vs CSS - Cascading Style Sheets oder CSS ist ein Schlüsselelement des Webdesigns. Als Webentwickler oder -designer müssen Sie sich mit CSS auskennen, insbesondere mit dem Unterschied zwischen CSS3 und CSS.

Möglicherweise haben Sie den Begriff CSS3 gehört oder sind auf ihn gestoßen, wenn Sie sich über Webentwicklung oder Webdesign informiert haben. Wenn Sie jemals darüber nachgedacht haben, was der Unterschied zwischen CSS3 und CSS sein könnte, werden Sie hier alle Ihre Zweifel zerstreuen: Sie sind beide gleich.

Das ist richtig: CSS3 und CSS sind so unterschiedlich wie HTML und HTML5. CSS3 ist einfach die neueste Version von CSS. Leute, die im Moment über das Codieren von CSS sprechen, beziehen sich eigentlich nur auf CSS3.

Sowohl HTML5 als auch CSS3 sind in der Regel zu Schlagworten geworden, deren Bedeutung über die eigentlichen Technologien hinausgeht. Sie symbolisieren die Einhaltung bestimmter Kernstandards in der Webentwicklung, anstatt proprietäre Software zu verwenden. Der Hype um diese Schlagworte ist größtenteils bereits abgeklungen. Die meisten Unternehmen, auch diejenigen, die schwören, alles im eigenen Haus zu behalten, würden zustimmen, dass das Festhalten an diesen Kernstandards das Leben für alle viel einfacher macht.

Jetzt ist es schon eine Weile her, dass CSS3 von allen gestartet und akzeptiert wurde. Dies brachte der Branche viele großartige Dinge und bedeutete einen großen Fortschritt für die Webentwicklung im Allgemeinen. Die Vorgängerversion CSS2 wurde bereits 1998 veröffentlicht. Das ist fast 20 Jahre her. Die einzige Überarbeitung, die es nach dem Start erhielt, war 2011 mit dem Namen CSS2.1. Bereits mit der Überarbeitung hatten die meisten Experten festgestellt, dass CSS3 unvermeidlich ist. CSS3 enthielt eine Reihe von Funktionen und Fähigkeiten, die bis dahin unabdingbar waren.

Was Sie vielleicht nicht über CSS3 gewusst haben, ist, dass die Entwicklung nur ein Jahr nach dem Einreichen der vorherigen Version begann. Dies bedeutet, dass das W3C seit 1999 an der verbesserten Version arbeitete. Es dauerte mehr als 12 Jahre, bis die erste stabile Version von CSS3 veröffentlicht wurde.

Es gibt große Unterschiede zwischen CSS3 und CSS (auf die wir gleich eingehen werden). Tatsache ist jedoch, dass die Webbrowser zum Zeitpunkt der Veröffentlichung bereits für die Erweiterungen von CSS3 bereit waren. Infolgedessen passten sie sich ziemlich schnell an die neue Version an. Alle gängigen Webbrowser unterstützen jetzt CSS3, sogar Internet Explorer!

Natürlich entwickelt das W3C weiterhin CSS3 und HTML5, so dass eine endgültige Version unwahrscheinlich ist. Um fair zu sein, ist eine endgültige Version im Moment auch keine Notwendigkeit, da das Internet sehr schnell voranschreitet. Da die Webanforderungen und die Branche selbst so schnell wachsen und sich ändern, muss die Codierung ebenso schnell, wenn nicht sogar noch schneller voranschreiten.

CSS3 vs CSS Infografiken

CSS3 vs CSS-Unterschiede definiert

Nachdem Sie sich mit den Hintergründen von CSS3 vertraut gemacht haben, schauen wir uns an, was sich geändert hat. Der vielleicht größte Unterschied zwischen CSS3 und der vorherigen Version, die es ersetzt hat, ist die Trennung der Module. In CSS2 war alles eine einzige große Spezifikation, die verschiedene Funktionen definierte. CSS3 änderte dies jedoch, indem es mehrere Dokumente einführte, die als Module bezeichnet wurden. Jedes Modul hat seine eigenen neuen Funktionen, die sich nicht auf die Kompatibilität der vorherigen stabilen CSS-Version auswirken.

Medien-Anfragen

Es sind viele Module verfügbar, aber nur vier werden vom W3C als formelle Empfehlungen veröffentlicht. Diese vier großen Module lauten wie folgt:

  1. Farbe, veröffentlicht 2011
  2. Selectors Level 3, veröffentlicht 2011
  3. Namespaces, veröffentlicht 201
  4. Medienanfragen, veröffentlicht 2012

Unter diesen ist das wichtigste Modul die Medienabfrage. Tatsächlich könnte dieses Modul die wohl wichtigste Ergänzung sein, die CSS3 generell zu CSS gebracht hat. Medienabfragen sind zum Teil recht einfach: Sie ermöglichen die Anwendung bestimmter Bedingungen auf verschiedene Stylesheets. Auf diese Weise können Websites auf unterschiedliche Bildschirmgrößen reagieren. Mit anderen Worten, Websites können ihre Abmessungen und Elemente an unterschiedliche Geräte anpassen. Responsive Webdesign ist heute wahrscheinlich das größte Schlagwort. Angesichts der Tatsache, dass der Großteil der Internetnutzung mittlerweile auf Mobilgeräten erfolgt, ist ein responsives Design von entscheidender Bedeutung, und Medienabfragen helfen dabei. Das Modul ermöglicht Entwicklern auch das Anpassen von Websites an verschiedene Auflösungen, ohne dass Inhalte geändert oder entfernt werden müssen.

Medienabfragen sind auch ziemlich einfach herauszufinden und hinzuzufügen. Sobald Sie sie ein paar Mal verwenden, können Sie den Rest so ziemlich herausfinden. Hier sind einige Beispielcodezeilen:

@media-Bildschirm und (max-width: 600px) (

Hintergrund: #FFF;

)

Scheint einfach genug, nicht wahr? Mit diesen paar Codezeilen können Sie das Styling für Bildschirme mit einer Breite von maximal 600 Pixel aktivieren. Dies bedeutet, dass alle Bildschirme mit einer maximalen Breite von 600 Pixel einen weißen Hintergrund zeigen. Die maximale Breite ist nur eine von mehreren Bedingungen, die Sie auf ein Stylesheet in CSS3 anwenden können. Eine andere ist die maximale Gerätebreite. Dies ist die Bildschirmauflösung und nicht der Anzeigebereich. Es kann auch ein Minimalwert anstelle eines Maximalwerts angegeben werden. benutze einfach 'min' anstelle von 'max'. Sie können die beiden auch wie folgt kombinieren:

@media Bildschirm und (min-width: 600px) und (max-width: 900px) (

Hintergrund: #FFF;

)

Hier gilt das Styling nur für Bildschirme mit einer Anzeigebreite von 600-900 Pixel. CSS3 enthält einige vordefinierte Stylesheets für gängige Mobilgeräte wie das Apple iPad und iPhone. Hier sind einige davon:

Es sollte mittlerweile ziemlich klar sein, wie wichtig Medienabfragen sind. Dieses Modul ist sehr praktisch für Entwickler, die reaktionsschnelles Webdesign mit möglichst wenig Code erstellen möchten.

Abgerundete Ränder

CSS3 bringt auch einige wirklich wichtige Überlegungen zum Webdesign mit. Beispielsweise können die Ränder ohne Hacks gerundet werden, wobei CSS3 gerundete Ränder einführt. Dies war ein großes Plus für Webentwickler und Designer, die zuvor mit CSS-Grenzen zu kämpfen hatten. Es überrascht nicht, dass einige dieser Funktionen in alten Versionen von Internet Explorer immer noch nicht funktionieren. Der einzige zusätzliche Code, den Sie der bestimmten Klasse im Stylesheet hinzufügen müssen, ist zum Beispiel:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

Rand: 2px durchgehend # 897048;

So erleichtert CSS3 dem Webentwickler und -designer das Leben erheblich. Die Veröffentlichung wurde auch mit Farbverläufen geliefert, was in früheren Veröffentlichungen überraschenderweise nicht verfügbar war.

Empfohlene Kurse

  • Online-Schulung zu Web Services in Java
  • Professionelle Spieleentwicklung in C ++ Training
  • Ethisches Hacking-Programm
  • Vegas Pro 13 Schulungspaket

Randbilder, Textschatten

Andere Elemente, die mit CSS3 hinzugefügt wurden, aber in früheren Versionen fehlten, waren Rahmenbilder und Rahmen- / Textschatten. CSS3 machte die Dinge viel einfacher und machte das Hinzufügen von Hacks für die oben genannten allgemeinen Gestaltungselemente überflüssig. Hier ist zum Beispiel die einzige Codezeile, die für Textschatten hinzugefügt werden soll:

Textschatten: 2px 2px 2px # ddccb5;

Säulen

CSS3 hat auch das Hinzufügen von Spalten zum Inhalt vereinfacht. Jetzt müssen Sie nur noch vier Codezeilen hinzufügen:

  1. Spaltenanzahl
  2. Spaltenbreite
  3. Spalte-Lücke
  4. Spaltenregel

Mehrere Hintergründe

In der neuesten CSS-Version wurde auch die Möglichkeit hinzugefügt, mehrere Hintergründe von CSS direkt zu erkennen, anstatt wie zuvor Roundabout-Hacks zu verwenden. Der Code ist unglaublich einfach zu merken und zu schreiben und ist auch für die Erstellung moderner Webdesign-Elemente von großer Bedeutung. Hier ist ein Beispiel:

.multiplebackgrounds (

Höhe: 100px;

Breite: 200px;

Polsterung: 20px;

Hintergrund: URL (top.gif) oben rechts ohne Wiederholung,

url (bottom.gif) oben links repeat-y,

url (middle.gif) bottom repeat-z;

)

Herstellerpräfixe

Herstellerpräfixe wurden häufig verwendet, als CSS3 gerade veröffentlicht wurde. Sie halfen Browsern, CSS-Code zu interpretieren. Sie werden bis heute verwendet, falls Ihr Webbrowser den Code nicht lesen kann. Hier sind die Herstellerpräfixe für die wichtigsten Browser:

  • -moz- : Firefox
  • -webkit- : Webkit-Browser wie Apple Safari und Google Chrome
  • -o- : Oper
  • -ms- : Internet Explorer

Das Präfix von Opera wurde ebenfalls überflüssig, da das Unternehmen seinen mobilen und Desktop-Browser von seiner Presto-Rendering-Engine auf die Webkit-Plattform umstellte. Obwohl das Herstellerpräfix zum Teil weiterhin verwendet wird, ist es zu diesem Zeitpunkt größtenteils verschwunden.

Pseudoklassen hinzugefügt

Mit dem Zusatz von CSS3 haben wir auch eine Menge zusätzlicher Pseudoklassen erhalten, einschließlich struktureller, um Elemente basierend auf ihrer Dokumentposition und ihrer Beziehung zu anderen verschiedenen Elementen anzuvisieren. Hier sind einige davon:

  • : root zielt auf das Wurzelelement des Dokuments ab
  • : not (s) zielt auf Elemente ab, die nicht mit den in (s) angegebenen Selektoren übereinstimmen.
  • : first-child zielt auf das erste untergeordnete Element in einem Container ab, unabhängig vom Elementtyp
  • : first-of-type zielt auf den ersten angegebenen Elementtyp innerhalb eines übergeordneten Elements ab
  • : nth-child (n) verwendet numerische Werte innerhalb von (n), um untergeordnete Elemente in Bezug auf ihre Position im übergeordneten Element auszuwählen. Sie können dies beispielsweise verwenden, um Blog-Kommentaren alternierende Hintergrundfarben hinzuzufügen
  • : leer zielt auf Elemente ab, die keinen Text oder untergeordnete Elemente haben, wie leere Elemente wie
  • : only-child zielt auf Elemente in einer Dokumentstruktur ab, die das einzige untergeordnete Element innerhalb des übergeordneten Elements sind

Neue CSS3-Selektoren

CSS3 bietet eine Reihe von Möglichkeiten, CSS-Regeln über die neuen Selektoren, eine neue Kombination und Pseudoelemente zu schreiben: Hier sind die drei neuen Attributselektoren:

  • Für genaue Übereinstimmungen Element (foo = ”bar”)
  • Zum Abgleichen eines Elements mit einem Attribut namens foo, das mit 'bar' beginnt, element (foo $ = ”bar”)
  • Um ein Element mit einem Attribut namens foo abzugleichen, das mit 'bar' endet, element (foo * = ”bar”)

CSS3 enthält mehrere neue Pseudoklassen, von denen einige oben beschrieben wurden. Hier sind noch ein paar mehr:

  • : n-last-child (n) stimmt mit den genauen untergeordneten Elementen des letzten überein
  • : n-of-type (n) stimmt mit gleichnamigen Geschwisterelementen im Dokumentbaum überein
  • : n-letztes vom Typ (n) stimmt von unten mit gleichnamigen Geschwisterelementen überein
  • : last-of-type zielt auf den zuletzt angegebenen Elementtyp innerhalb eines übergeordneten Elements ab
  • : only-of-type zielt auf das Element ab, dessen einziger Typ es ist
  • : target Zielelemente, auf die der verweisende URI abzielt
  • : enabled stimmt mit dem Element überein, wenn es aktiviert ist
  • : disabled entspricht dem Element, wenn es deaktiviert ist
  • : checked zielt auf das Element ab, wenn es über ein Kontrollkästchen oder ein Optionsfeld markiert ist

Ein neuer Kombinator

CSS3 enthält außerdem einen brandneuen Kombinator: elementA ~ elementB

Dieser neue Kombinator stimmt überein, wenn ElementA irgendwann danach von ElementB gefolgt wird, jedoch nicht unmittelbar danach.

Neue Boxstileigenschaften

CSS3 bietet dasselbe Boxmodell wie die vorherige Version, jedoch einige neue Stileigenschaften, mit denen Sie Rahmen und Hintergründe Ihrer Boxen gestalten können. Die neuen Hintergrundeigenschaften in CSS3 sind:

  • Hintergrund-Clip

Mit dieser Eigenschaft wird definiert, wie ein Hintergrundbild abgeschnitten wird. Die Standardgröße für das Ausschneiden ist das Rahmenfeld. Sie können es jedoch in das Inhaltsfeld oder das Füllfeld ändern.

  • Hintergrund-Herkunft

Diese spezielle Eigenschaft wird verwendet, um festzulegen, ob der Hintergrund in den Rahmen, das Inhaltsfeld oder das Füllfeld eingefügt werden soll.

  • Hintergrundgröße

Mit dieser Eigenschaft kann der Entwickler die Größe des Hintergrundbilds angeben und kleinere Bilder strecken, um sie an die Seite anzupassen.

CSS3 hat auch einige der vorhandenen Hintergrundstileigenschaften geändert. Hier ist ein Blick auf die Änderungen:

  • Hintergrund Wiederholung

Diese Eigenschaft enthält jetzt zwei neue Werte: round und space. Round skaliert das Bild neu, um es mehrmals in einer Box anzuordnen. Mit Space wird das gekachelte Bild gleichmäßig innerhalb des Felds platziert, ohne dass es abgeschnitten wird.

  • Hintergrund-Anhang

Die Eigenschaft no enthält einen lokalen Wert, sodass der Hintergrund mit dem Elementinhalt verschoben wird, falls das Element über eine Bildlaufleiste verfügt.

Neue Rahmeneigenschaften

Mit CSS3 können Rahmen doppelt, durchgehend, gestrichelt oder sogar als Bild gestaltet werden. Randbilder sind eine interessante Ergänzung: Mit ihnen können Sie ein Bild aller vier Ränder erstellen und dann CSS anweisen, das Bild auf die Ränder anzuwenden. Hier sind einige der neuen Rahmeneigenschaften, die mit CSS3 geliefert werden:

  • Mit Rahmenradius, Rahmen-unten-rechts-Radius, Rahmen-oben-rechts-Radius, Rahmen-oben-links-Radius, Rahmen-unten-links-Radius können Sie abgerundete Rahmen erstellen
  • Mit border-image-source können Sie eine Bildquelldatei angeben, anstatt vordefinierte Rahmenstile zu verwenden
  • border-image-slice repräsentiert innere Offsets von den Rändern der Randbilder
  • border-image-width definiert den Breitenwert für Ihr Randbild
  • border-image-outset gibt den Betrag an, der über den Rahmen hinausgeht, auf den sich das Bild erstreckt
  • Border-Image-Stretch definiert das Kacheln oder Skalieren des mittleren und des seitlichen Teils des Border-Image

Fazit - CSS3 vs CSS

Sie werden viel mehr über CSS3 lernen, wenn Sie mehr programmieren. Aber es gibt eine Einschränkung: Sie können CSS3 nur beherrschen, wenn Sie CSS kennen. Zum Erlernen von CSS3 müssen Sie Ihr Verständnis und Ihre Erfahrung mit CSS erweitern. Wenn Sie CSS nicht kennen, müssen Sie es zusammen mit CSS3 von oben lernen. Das Gute ist, wenn Sie nicht mit CSS vertraut sind, sollte es einfacher sein, sowohl CSS3 als auch CSS-Lernen miteinander zu verbinden, um es einfacher und schneller zu machen.

Empfohlene Artikel

In den folgenden Artikeln erfahren Sie mehr über CSS3 und CSS. Gehen Sie also einfach den Link durch.

  1. CSS vs HTML
  2. Aufregend, die CSS Flexbox Essentials für Anfänger zu kennen
  3. HTML5 vs JavaScript Das Beste zum Lernen
  4. CSS vs CSS3: Unterschiede

Kategorie:

Software-Entwicklung