CSS2 und CSS3

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache zur Gestaltung von Webseiten. CSS3 ist der Nachfolger von CSS2 und bringt viele neue Funktionen, Selektoren und Effekte mit sich.

Modularisierung

• CSS2 war ein einziger Standard mit festen Regeln.
• CSS3 ist in Module unterteilt (z. B. Selectors Level 3, Flexbox, Animations), die unabhängig voneinander weiterentwickelt werden.

Beispiel:

• In CSS2 gab es nur einfache Selektoren wie div, .class oder #id.
• CSS3 führte erweiterte Selektoren ein, z. B. [attr^=“value“] (Attributselektor).

Neue Selektoren in CSS3

CSS3 bietet viel präzisere Möglichkeiten, Elemente auszuwählen:

Beispiel:

/* CSS2: Nur einfache Klassen- oder ID-Selektoren */
.header { color: blue; }

/* CSS3: Erweiterte Selektoren */
ul li:nth-child(odd) { background: gray; } /* Jedes ungerade Listenelement */
a:not(.external) { color: green; } /* Alle Links, die nicht .external sind */

/* CSS2: Nur einfache Klassen- oder ID-Selektoren */
.header { color: blue; }

/* CSS3: Erweiterte Selektoren */
ul li:nth-child(odd) { background: gray; } /* Jedes ungerade Listenelement */
a:not(.external) { color: green; } /* Alle Links, die nicht .external sind */

Neue Design-Möglichkeiten (Rahmen, Farben, Verläufe)

Abgerundete Ecken (border-radius)

• In CSS2 musste man Bilder oder komplizierte Tricks verwenden.
• CSS3 ermöglicht einfache abgerundete Ecken:

.box { border-radius: 10px; } /* CSS3 */

.box { border-radius: 10px; } /* CSS3 */

Schatten (box-shadow, text-shadow)

• CSS2: Keine native Möglichkeit für Schatten.
• CSS3:

.card { box-shadow: 5px 5px 10px rgba(0,0,0,0.3); }  
h1 { text-shadow: 2px 2px 4px #999; }

.card { box-shadow: 5px 5px 10px rgba(0,0,0,0.3); }  
h1 { text-shadow: 2px 2px 4px #999; }

Farbverläufe (gradient)

• CSS2: Nur feste Farben oder Hintergrundbilder.
• CSS3:

.gradient-bg {
  background: linear-gradient(to right, red, yellow);
}

.gradient-bg {
  background: linear-gradient(to right, red, yellow);
}

Animationen & Transformationen

Transformationen (transform)

• CSS2: Keine Möglichkeit, Elemente zu drehen oder zu skalieren.
• CSS3:

.box { transform: rotate(45deg) scale(1.2); }

.box { transform: rotate(45deg) scale(1.2); }

Animationen (@keyframes)

• CSS2: Nur JavaScript-basierte Animationen.
• CSS3:

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.element { animation: slide 2s infinite; }

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.element { animation: slide 2s infinite; }

Responsive Designs mit Media Queries

• CSS2: Kaum Unterstützung für unterschiedliche Bildschirmgrößen.
• CSS3: Media Queries ermöglichen responsive Designs:

/* Nur für Bildschirme unter 600px */
@media (max-width: 600px) {
  .menu { display: none; }
}

/* Nur für Bildschirme unter 600px */
@media (max-width: 600px) {
  .menu { display: none; }
}

Flexbox & Grid (CSS3-Layoutsysteme)

• CSS2: Layouts basierten auf float und position, was fehleranfällig war.
CSS3: …. Flexbox (eindimensionales Layout)

.container { display: flex; justify-content: center; }

.container { display: flex; justify-content: center; }

Grid (zweidimensionales Layout)

.container { display: grid; grid-template-columns: 1fr 1fr; }

.container { display: grid; grid-template-columns: 1fr 1fr; }

Webfonts (@font-face verbessert)

• CSS2: Schlechte Browserunterstützung für benutzerdefinierte Schriftarten.
• CSS3: Bessere Integration von Google Fonts & Co.

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}
body { font-family: 'MyFont'; }

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}
body { font-family: 'MyFont'; }

Warum ist CSS3 besser?

CSS3 bietet mehr Gestaltungsmöglichkeiten, bessere Performance und modernere Layouts. Heute wird fast nur noch CSS3 verwendet, während CSS2 veraltet ist.