webmatze.de

Framework Vergleich: React vs. Svelte vs. Astro

React, Svelte oder Astro? Ein Leitfaden für Einsteiger

Wer heute mit der Webentwicklung beginnt, steht vor einer schier endlosen Auswahl an JavaScript-Frameworks. React dominiert mit einem Marktanteil von über 80%, aber immer mehr Entwickler entdecken Alternativen wie Svelte und Astro. Welches Framework ist das richtige für dich als Einsteiger?

In diesem Artikel vergleiche ich die drei wichtigsten JavaScript-Frameworks des Jahres 2025: React, Svelte und Astro. Du bekommst praktische "Hello World"-Beispiele für jedes Framework und klare Entscheidungshilfen, die dir bei der Auswahl helfen. Spoiler: Es gibt kein "bestes" Framework – es kommt auf deinen Use Case an.

Was sind JavaScript-Frameworks?

Bevor wir in den Vergleich einsteigen, lass uns kurz klären, was JavaScript-Frameworks eigentlich sind und warum wir sie brauchen.

Ein JavaScript-Framework ist eine Sammlung von vorgefertigten Code-Bausteinen, die dir helfen, moderne Webanwendungen effizienter zu entwickeln. Statt jedes Mal das Rad neu zu erfinden, bieten Frameworks Lösungen für wiederkehrende Probleme wie:

  • Komponentenbasierte Entwicklung: Teile deine Benutzeroberfläche in wiederverwendbare Bausteine auf
  • Reaktivität: Die Benutzeroberfläche aktualisiert sich automatisch, wenn sich Daten ändern
  • State Management: Verwalte den Zustand deiner Anwendung zentral
  • Routing: Navigation zwischen verschiedenen Seiten ohne volle Seitenladezeiten

Frameworks sparen dir Zeit, helfen dir dabei, sauberen Code zu schreiben, und bieten bewährte Lösungsansätze, die in der Community getestet wurden.

React: Der etablierte Standard

Was ist React?

React wurde 2013 von Facebook (heute Meta) entwickelt und ist heute das mit Abstand populärste JavaScript-Framework. Genau genommen ist React eine Bibliothek (Library) für User Interfaces, wird aber oft als Framework bezeichnet. React setzt auf das Konzept des Virtual DOM – einer virtuellen Darstellung des DOM, die React nutzt, um Updates effizient durchzuführen.

Die Stärken von React

Riesiges Ökosystem: React hat die größte Community aller JavaScript-Frameworks. Das bedeutet:

  • Unzählige Third-Party-Bibliotheken für fast jeden Use Case
  • Viele Tutorials, Kurse und Lernressourcen
  • Schnelle Antworten auf Stack Overflow und in Foren

Job-Markt: Wenn du als Entwickler arbeiten möchtest, ist React die sicherste Wahl. Die meisten Job-Angebote setzen React-Kenntnisse voraus.

Mature und stabil: Nach über 10 Jahren Entwicklung ist React ausgereift. Breaking Changes sind selten, und Meta investiert kontinuierlich in die Weiterentwicklung.

Die Lernkurve

React hat eine mittelschwere Lernkurve für Einsteiger:

  • JSX-Syntax: Du schreibst HTML-ähnlichen Code direkt in JavaScript. Das wirkt anfangs ungewohnt, wird aber schnell zur zweiten Natur.
  • Hooks: Seit React 16.8 gibt es Hooks wie useState und useEffect. Sie ersetzen die alten Class Components und sind einfacher zu verstehen.
  • Konzepte: Du musst Konzepte wie Props, State und Component Lifecycle verstehen.

Praktisches React-Beispiel

Hier ist eine einfache Counter-Komponente in React:

// Einfache Counter-Komponente mit React Hooks
import { useState } from 'react';

function Counter() {
  // useState Hook für reaktiven State
  // count ist die aktuelle Zahl, setCount ist die Funktion zum Ändern
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>React Counter</h1>
      <p>Aktuelle Zahl: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Erhöhen
      </button>
      <button onClick={() => setCount(count - 1)}>
        Verringern
      </button>
      <button onClick={() => setCount(0)}>
        Zurücksetzen
      </button>
    </div>
  );
}

export default Counter;

Was passiert hier?

  • useState(0) erstellt eine State-Variable count mit Startwert 0
  • Bei jedem Klick auf "Erhöhen" wird setCount aufgerufen
  • React erkennt die Änderung und aktualisiert automatisch die Anzeige
  • JSX mischt HTML-ähnliche Syntax mit JavaScript ({count} ist JavaScript)

Svelte: Der aufsteigende Stern

Was ist Svelte?

Svelte, entwickelt von Rich Harris, ist das jüngste der drei Frameworks (erstes Release 2016, große Überarbeitung 2019 mit Svelte 3). Der große Unterschied zu React: Svelte ist ein Compiler, kein Framework, das zur Laufzeit im Browser läuft.

Das bedeutet: Svelte verwandelt deinen Code beim Build-Prozess in hochoptimiertes Vanilla JavaScript. Es gibt keine Framework-Runtime, die im Browser geladen werden muss – Svelte "verschwindet" im finalen Bundle.

Die Stärken von Svelte

Einfache, intuitive Syntax: Svelte fühlt sich näher an HTML, CSS und JavaScript an als React. Es gibt weniger Boilerplate-Code.

Performance: Da Svelte zur Build-Zeit kompiliert wird, ist es extrem schnell. Keine Virtual DOM-Berechnungen zur Laufzeit.

Weniger Code: Svelte-Komponenten brauchen im Schnitt 40% weniger Code als vergleichbare React-Komponenten.

Reaktivität "einfach da": In Svelte ist Reaktivität eingebaut – du musst keine speziellen Hooks oder State-Management-Tools lernen.

Die Lernkurve

Svelte hat die niedrigste Lernkurve der drei Frameworks:

  • HTML-ähnlicher als JSX: Svelte-Templates sehen aus wie HTML mit einigen Erweiterungen
  • Reaktivität ist intuitiv: let count = 0; count += 1 funktioniert einfach
  • Scoped CSS: Styles sind automatisch auf die Komponente beschränkt

Praktisches Svelte-Beispiel

Hier ist die gleiche Counter-Komponente in Svelte:

<script>
  // Reaktive Variable - automatisch aktualisiert
  let count = 0;

  // Reaktive Berechnungen mit $:
  // Wird automatisch neu berechnet, wenn count sich ändert
  $: doubled = count * 2;

  // Funktionen für Button-Clicks
  function increment() {
    count += 1; // So einfach ist Reaktivität in Svelte!
  }

  function decrement() {
    count -= 1;
  }

  function reset() {
    count = 0;
  }
</script>

<div>
  <h1>Svelte Counter</h1>
  <p>Aktuelle Zahl: {count}</p>
  <p>Verdoppelt: {doubled}</p>

  <button on:click={increment}>
    Erhöhen
  </button>
  <button on:click={decrement}>
    Verringern
  </button>
  <button on:click={reset}>
    Zurücksetzen
  </button>
</div>

<style>
  /* Scoped CSS - gilt nur für diese Komponente */
  div {
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
  }

  button {
    margin: 5px;
    padding: 10px 15px;
    background-color: #ff3e00;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background-color: #cc3100;
  }
</style>

Was passiert hier?

  • let count = 0 ist eine normale Variable – Svelte macht sie automatisch reaktiv
  • $: doubled = count * 2 ist eine reaktive Berechnung
  • on:click={increment} bindet die Funktion an den Button
  • CSS im <style> Block gilt nur für diese Komponente
  • Deutlich weniger Code als React, aber gleiche Funktionalität!

Astro: Der Performance-Champion

Was ist Astro?

Astro ist das neueste Framework in diesem Vergleich (erstes Release 2021) und verfolgt einen radikal anderen Ansatz: Zero JavaScript by Default. Astro ist primär ein Static Site Generator mit einer innovativen Architektur namens "Islands Architecture".

Die Grundidee: Deine Website ist standardmäßig statisches HTML und CSS – komplett ohne JavaScript. Nur dort, wo du Interaktivität brauchst, fügst du "Islands" (Inseln) von JavaScript hinzu.

Die Stärken von Astro

Extrem schnell: Da Astro standardmäßig kein JavaScript ausliefert, sind Astro-Sites blitzschnell. Perfekte Lighthouse-Scores sind die Regel, nicht die Ausnahme.

Content-fokussiert: Astro wurde für Content-Sites wie Blogs, Marketing-Websites und Dokumentationen entwickelt. Weniger für hochinteraktive Web-Apps.

Multi-Framework Support: Das Besondere an Astro: Du kannst React, Svelte, Vue und andere Frameworks gleichzeitig in einem Projekt nutzen. Jede Komponente kann in einem anderen Framework geschrieben sein.

Developer Experience: Astro bietet eine hervorragende Entwickler-Erfahrung mit schnellem Hot Reload und klarer Fehlermeldungen.

Die Lernkurve

Astro hat eine mittlere Lernkurve:

  • Ähnlich wie andere Komponenten-Frameworks: Wenn du React oder Svelte kennst, findest du dich schnell zurecht
  • Neues Konzept: "Islands Architecture" ist ein neues Paradigma, das du verstehen musst
  • Zwei "Modi": Code im Frontmatter (--- Bereich) läuft beim Build, Code in <script> Tags läuft im Browser

Praktisches Astro-Beispiel

Hier ist die Counter-Komponente in Astro:

---
// Component Script (läuft nur beim Build)
const title = "Astro Counter";
const currentDate = new Date().toLocaleDateString('de-DE');

// Dieser Code läuft auf dem Server, nicht im Browser!
console.log('Diese Komponente wird gerade gebaut...');
---

<div class="counter-container">
  <h1>{title}</h1>
  <p class="date">Erstellt am: {currentDate}</p>

  <!-- Interaktive Island mit Client-JavaScript -->
  <!-- client:load bedeutet: JavaScript beim Laden ausführen -->
  <div id="counter">
    <p>Aktuelle Zahl: <span id="count">0</span></p>
    <button id="increment">Erhöhen</button>
    <button id="decrement">Verringern</button>
    <button id="reset">Zurücksetzen</button>
  </div>
</div>

<script>
  // Dieser Code läuft im Browser (Client-Side)
  let count = 0;

  // DOM-Elemente holen
  const incrementBtn = document.getElementById('increment');
  const decrementBtn = document.getElementById('decrement');
  const resetBtn = document.getElementById('reset');
  const countDisplay = document.getElementById('count');

  // Event Listeners hinzufügen
  incrementBtn?.addEventListener('click', () => {
    count++;
    updateDisplay();
  });

  decrementBtn?.addEventListener('click', () => {
    count--;
    updateDisplay();
  });

  resetBtn?.addEventListener('click', () => {
    count = 0;
    updateDisplay();
  });

  // Display aktualisieren
  function updateDisplay() {
    if (countDisplay) {
      countDisplay.textContent = count.toString();
    }
  }
</script>

<style>
  .counter-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    max-width: 400px;
    margin: 20px auto;
  }

  .date {
    color: #666;
    font-size: 0.9em;
  }

  #counter {
    margin-top: 20px;
    padding: 15px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  button {
    margin: 5px;
    padding: 10px 15px;
    background-color: #5b21b6;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
  }

  button:hover {
    background-color: #4c1d95;
  }

  #count {
    font-weight: bold;
    font-size: 1.2em;
    color: #5b21b6;
  }
</style>

Was passiert hier?

  • Code im --- Bereich läuft beim Build (Server-Side)
  • currentDate wird zur Build-Zeit erstellt, nicht beim Seitenaufruf
  • HTML wird als statischer Content ausgeliefert
  • Nur der Code im <script> Tag läuft im Browser
  • Weniger "magisch" als React/Svelte, aber volle Kontrolle

Hinweis: In der Praxis würdest du für interaktive Komponenten in Astro oft React, Svelte oder Vue nutzen. Das obige Beispiel zeigt Vanilla JavaScript, um die Islands-Idee zu verdeutlichen.

Direkter Vergleich: Die wichtigsten Unterschiede

Hier ist eine Übersicht, die dir bei der Entscheidung hilft:

Kriterium React Svelte Astro
Lernkurve Mittel Niedrig Mittel
Performance Gut Sehr gut Hervorragend
Bundle Size ~40-50 KB (gzipped) ~2-3 KB (gzipped) 0 KB (Standard)*
Ökosystem Riesig Wachsend Klein, aber wachsend
Job-Markt Sehr groß Klein, aber wachsend Sehr klein
Beste für SPAs, komplexe Apps Moderne Web-Apps Content-Sites, Blogs
Community Sehr groß Groß Mittel
Learning Resources Sehr viele Viele Wachsend
Entwicklungsgeschwindigkeit Gut Sehr gut Gut
Reaktivität Hooks Eingebaut Manuell (oder via Framework-Integration)

*Astro liefert standardmäßig kein JavaScript aus. JavaScript wird nur für interaktive "Islands" geladen.

Bundle Size erklärt

Die Zahlen bedeuten, wie viel Framework-Code im Browser geladen werden muss:

  • React: ~42 KB (React + ReactDOM, gzipped)
  • Svelte: ~2 KB – fast nichts, da Svelte beim Build kompiliert wird
  • Astro: 0 KB – statische Sites brauchen kein Framework im Browser

Das ist besonders wichtig für:

  • Mobile Nutzer mit langsamen Verbindungen
  • SEO (Google bevorzugt schnelle Websites)
  • User Experience (schnellere Ladezeiten)

Welches Framework für wen?

Hier sind meine Empfehlungen, basierend auf verschiedenen Szenarien:

Wähle React, wenn du...

Jobs als Frontend-Entwickler suchst: React ist mit Abstand am gefragtesten
Ein großes Ökosystem brauchst: Für jedes Problem gibt es eine React-Library
Komplexe Single-Page Applications (SPAs) baust: React ist perfekt für Web-Apps wie Dashboards, SaaS-Tools
Mit einem etablierten, ausgereiften Tool arbeiten möchtest: React ist "battle-tested"
Teil einer großen Community sein willst: Hilfe ist überall verfügbar

Nicht ideal für: Einfache Websites, Performance-kritische Content-Sites

Wähle Svelte, wenn du...

Einfache, intuitive Syntax magst: Svelte ist am schnellsten zu lernen
Performance wichtig ist: Svelte ist extrem schnell
Weniger Code schreiben willst: Svelte ist prägnant und ausdrucksstark
Moderne Entwicklung magst: Svelte fühlt sich "2025" an
Kleinere bis mittlere Web-Apps baust: Svelte glänzt hier

Nicht ideal für: Wenn du sofort einen Job brauchst (noch nicht so verbreitet)

Wähle Astro, wenn du...

Content-Sites baust: Blogs, Marketing-Websites, Dokumentationen, Portfolios
Performance oberste Priorität ist: Astro ist unschlagbar schnell
Wenig JavaScript brauchst: Die meiste Site ist statisch
SEO wichtig ist: Statische Sites sind perfekt für Suchmaschinen
Flexibilität willst: Du kannst React, Svelte, Vue mischen

Nicht ideal für: Hochinteraktive SPAs, Echtzeit-Apps, komplexe Web-Apps

Mein persönlicher Tipp für Einsteiger

Wenn du gerade erst anfängst, würde ich in dieser Reihenfolge lernen:

  1. Starte mit Svelte – Die niedrigste Lernkurve, und du verstehst Grundkonzepte schnell
  2. Lerne dann React – Für Job-Chancen und das große Ökosystem
  3. Entdecke Astro – Wenn du Content-Sites bauen willst

Du musst nicht alle drei können! Wähle eines und werde richtig gut darin.

Erste Schritte: So startest du

Hier ist, wie du mit jedem Framework ein erstes Projekt erstellst:

React: Projekt starten

# Mit Vite (empfohlen – schneller als Create React App)
npm create vite@latest mein-react-projekt -- --template react

# In das Projektverzeichnis wechseln
cd mein-react-projekt

# Dependencies installieren
npm install

# Entwicklungsserver starten
npm run dev

Der Dev-Server läuft dann auf http://localhost:5173

Svelte: Projekt starten

# Mit SvelteKit (empfohlen)
npm create svelte@latest mein-svelte-projekt

# Wähle: Skeleton project ? Yes, using TypeScript syntax (optional) ? Add Prettier

# In das Projektverzeichnis wechseln
cd mein-svelte-projekt

# Dependencies installieren
npm install

# Entwicklungsserver starten
npm run dev

Der Dev-Server läuft dann auf http://localhost:5173

Astro: Projekt starten

# Mit dem Astro CLI
npm create astro@latest mein-astro-projekt

# Wähle: Empty ? Yes (TypeScript optional) ? Install dependencies: Yes

# In das Projektverzeichnis wechseln
cd mein-astro-projekt

# Entwicklungsserver starten
npm run dev

Der Dev-Server läuft dann auf http://localhost:4321

VS Code Extensions

Installiere diese Extensions für bessere Developer Experience:

Für React:

  • ES7+ React/Redux/React-Native snippets
  • Prettier – Code formatter

Für Svelte:

  • Svelte for VS Code (offiziell)
  • Svelte Intellisense

Für Astro:

  • Astro (offiziell)
  • Prettier (mit Astro Plugin)

Browser-Kompatibilität & Voraussetzungen

Node.js Version

Alle drei Frameworks benötigen Node.js:

  • Minimal: Node.js 18.x
  • Empfohlen: Node.js 20.x oder 22.x (LTS)

Download: nodejs.org

Browser-Support

React:

  • Alle modernen Browser (Chrome, Firefox, Safari, Edge)
  • Internet Explorer 11 wird nicht mehr unterstützt

Svelte:

  • Alle modernen Browser
  • Sehr guter Support bis zurück zu Safari 12

Astro:

  • Alle modernen Browser
  • Da Astro statisches HTML generiert, funktioniert die Basis-Site sogar ohne JavaScript

Empfohlene Entwicklungsumgebung

  • Editor: VS Code, WebStorm oder Cursor
  • Terminal: Integriertes Terminal oder iTerm2 (Mac) / Windows Terminal
  • Browser: Chrome oder Firefox (mit DevTools)
  • Git: Für Versionskontrolle

Zusammenfassung

Hier sind die wichtigsten Punkte im Überblick:

  • Es gibt kein "bestes" Framework – die richtige Wahl hängt von deinem Use Case ab
  • React ist der etablierte Standard mit riesigem Ökosystem und den meisten Job-Möglichkeiten
  • Svelte ist modern, einfach zu lernen und extrem performant – perfekt für Einsteiger
  • Astro ist ideal für Content-Sites und bietet unschlagbare Performance durch statische HTML-Generierung
  • Alle drei sind 2025 gute Wahlen und werden aktiv weiterentwickelt
  • Fokussiere dich auf eines und lerne es richtig, statt alle oberflächlich anzukratzen
  • Die Grundlagen sind wichtiger als das Framework – HTML, CSS und JavaScript sind das Fundament

Meine Empfehlung

Für deinen ersten Einstieg: Probiere Svelte aus! Es hat die niedrigste Lernkurve und zeigt dir moderne Konzepte ohne viel Komplexität.

Wenn du als Entwickler arbeiten willst: Investiere Zeit in React. Es öffnet die meisten Türen.

Wenn du einen Blog oder eine Marketing-Site baust: Schau dir Astro an. Du wirst die Performance lieben.

Weiterführende Ressourcen

Offizielle Dokumentationen

Interactive Learning

Community & News

  • State of JavaScript Survey: stateofjs.com – Jährliche Entwickler-Umfrage
  • JavaScript Weekly: javascriptweekly.com – Newsletter mit News
  • Dev.to: Viele Tutorials und Erfahrungsberichte zu allen drei Frameworks

Kittyfier Bookmarklet – Süße Kätzchen überall

Was passiert, wenn man sich als Programmierer mal etwas vom normalen Arbeitsstress ablenken will? Man programmiert etwas, dass Spaß macht.

Auf genau diese Weise ist auch dieses Bookmarklet entstanden. Es wandelt einfach alle per IMG HTML-Tag eingebundene Bilder einer Seite in Bilder mit niedlichen kleinen Katzen um. Um zu sehen, was es macht, einfach den folgenden Link in die Bookmark-Leiste eures Browsers ziehen und auf einer beliebigen Seite mit Bildern ausprobieren!

Kittyfier Bookmarklet

Wer es gleich hier auf dieser Seite testen möchte, kann auch einfach nur den Link anklicken.

Hier sind ein paar zufällige Bilder zum Testen.

Flowersflowers and bokehMacro flower experimentFire-tree flower oppening, Tulipa africana, bisnagueira (Spathodea campanulata). Ceret park São Paulo Brasil. African native

Wer wissen möchte, wie das Kittyfier Bookmarklet funktioniert, kann sich den kompletten Code hier ansehen. Eigentlich nichts besonderes:

var images = document.images; 
var icount = 0; 
for(var i = 0; i < images.length; i++) { 
var img = images.item(i);
if (img.width > 20 && img.height > 20) { 
img.src = "http://placekitten.com/"+img.width+"/"+img.height+"?image="+icount; 
icount++;if(icount > 16){icount=0;}
} 
}

Wie man sehen kann, verwende ich den Placekitten Service, welcher es einem erlaubt durch Angabe von Höhe und Breite beliebig große Katzenbilder zu generieren um diese als Platzhalter in die eigenen Entwürfe einzubauen. Dies ist vor allem dann praktisch, wenn man nur mal schnell ein HTML Layout testen möchte, aber noch keine passenden Bilder hat.

Ich hoffe ihr habt Spaß an diesem kleinen Script und ich freue mich über eure Kommentare.

A small update to my CSS3 Rotating Image Gallery

A couple of months ago I wrote a small image gallery script using some of the new CSS3 functions like transitions and transforms of the Webkit Nightly Browser. It is a simple gallery with only four pictures in it which rotates on mouse click to show the next picture.

That thing became a little famous and was shown on many other websites as an example to what can be done with CSS3 and a modern browser.

Now, a year later, I updated this script so it works now in many other modern browsers such as Firefox, Chrome, Opera and Internet Explorer.

Just browse to the example page and see it for yourself.

And if you have an older browser you can watch this little screen capture:

I hope you like it and I am eager to see what you can come up with using those CSS3 transitions and transforms.

5 extrem nützliche Tools für JavaScript Entwickler

Wenn es eine Programmiersprache gibt, die ich wirklich liebe, dann ist dies auf jeden Fall JavaScript. Früher von vielen belächelt, hat sich JavaScript heute zu einem wirklich mächtigen Tool unter Webentwicklern gemausert. Viele hilfreiche Seiten wie z.B. Google Maps wären ohne JavaScript überhaupt nicht möglich gewesen und selbst auf der Serverseite findet es in letzter Zeit immer mehr Verwendung - siehe node.js. Heute möchte ich euch fünf interessante und nützliche Tools vorstellen, die einem das Arbeiten mit JavaScript sehr erleichtern können.

JSFIDDLE - JavaScript direkt im Browser entwickeln

Dieses Tool ist noch relativ jung, hat sich aber für mich bereits jetzt zu einem der wichtigsten Tools beim Entwickeln und Testen von JavaScript Scripten entwickelt. Das Besondere an JSFIDDLE ist, dass man vier verschiedene Felder zur Verfügung gestellt bekommt. Im Ersten schreibt man seinen HTML Code, im Zweiten den benötigten CSS Code und im Dritten schließlich das JavaScript.

Wenn man möchte lassen sich externe JavaScript Bibliotheken wie Prototype, jQuery, Mootools und viele weitere per Klick einbinden.

Ein Klick auf 'Run' und das fertige Script wird ausgeführt und das Ergebnis im vierten Feld angezeigt. Diese so geschriebenen Scripte können gespeichert werden und sind über eine feste URL jederzeit wieder aufrufbar. Bei jedem Speichern bleibt übrigens die vorherige Version erhalten und kann über die alte URL aufgerufen werden.
Weiterlesen →

Ein einfacher Cross-Browser Tooltip mit Javascript und CSS

Vor einiger Zeit habe ich hier auf webmatze.de einen einfachen auf JavaScript und CSS basierenden Tooltip vorgestellt, mit dem sich schnell und einfach Tooltips in die eigenen Seiten integrieren ließen. Dieser funktionierte soweit auch ganz gut in vielen Browsern, doch die Zeit ist nicht stillgestanden und seit der Veröffentlichung hat es einige neue Browserversionen und sogar ganz neue Browser gegeben.

Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.

Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.

XBT - Der Cross-Browser Tooltip

Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.

Hier könnt ihr den Code sehen:

Weiterlesen →

Ist display=“none“ jetzt irrelevant?

Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

HTML 5 Draft Recommendation Screenshot

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)
Weiterlesen →