css mit Adi Prinz

Ein Bild einbinden

<img
  src="images/landschaft.jpg"
  alt="Berglandschaft mit einem See"
  width="1200"
  height="800"
>

Die Attribute width und height geben das Seitenverhältnis des Bildes an. Der Browser kann dadurch bereits vor dem Laden den benötigten Platz reservieren. Das verhindert unerwartete Verschiebungen des Seiteninhalts.

Alternativtext richtig verwenden

Der Alternativtext beschreibt den Inhalt oder Zweck eines Bildes. Er ist besonders für Screenreader und für den Fall wichtig, dass die Bilddatei nicht geladen werden kann.

<img
  src="images/excel-diagramm.png"
  alt="Säulendiagramm mit den Umsätzen von Jänner bis Juni"
>

Rein dekorative Bilder erhalten ein leeres alt-Attribut. Dadurch werden sie von Screenreadern normalerweise übersprungen.

<img src="images/dekoration.svg" alt="">

Das alt-Attribut sollte nicht vollständig fehlen. Außerdem sind Formulierungen wie „Bild von“ meist unnötig, weil der Screenreader bereits mitteilt, dass es sich um ein Bild handelt.

Bilder mit CSS responsiv gestalten

Ein Bild sollte auf kleinen Bildschirmen nicht breiter als sein umgebendes Element werden. Dafür kann max-width: 100% verwendet werden.

img {
  max-width: 100%;
  height: auto;
  display: block;
}

• max-width: 100% begrenzt die Bildbreite auf die verfügbare Breite.
• height: auto erhält das ursprüngliche Seitenverhältnis.
• display: block entfernt den für Inline-Elemente vorgesehenen Abstand unterhalb des Bildes.

Bild mit Bildunterschrift

Mit <figure> und <figcaption> kann ein Bild mit einer zugehörigen Beschriftung ausgezeichnet werden.

<figure>
  <img
    src="images/box-modell.png"
    alt="Aufbau des CSS-Box-Modells"
    width="800"
    height="500"
  >

  <figcaption>
    Content, Padding, Border und Margin
  </figcaption>
</figure>

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

Bilder mit object-fit zuschneiden

Mit object-fit wird festgelegt, wie ein Bild in einen Bereich mit vorgegebener Breite und Höhe eingepasst wird.

.teaser-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

Mit object-position kann zusätzlich bestimmt werden, welcher Bildbereich beim Zuschneiden bevorzugt sichtbar bleibt.

Bilder verzögert laden

Mit loading="lazy" kann das Laden von Bildern hinausgezögert werden, die sich zunächst außerhalb des sichtbaren Bereichs befinden.

<img
  src="images/produkt.jpg"
  alt="Produktansicht eines Notebooks"
  width="800"
  height="600"
  loading="lazy"
>

Ein wichtiges Bild am Anfang der Seite sollte normalerweise nicht verzögert geladen werden, weil es sofort sichtbar sein soll.

Unterschiedliche Bildformate anbieten

Moderne Bildformate wie AVIF und WebP können kleinere Dateien ermöglichen. Der Browser verwendet die erste unterstützte Bildquelle.

<picture>
  <source
    srcset="images/landschaft.avif"
    type="image/avif"
  >

  <source
    srcset="images/landschaft.webp"
    type="image/webp"
  >

  <img
    src="images/landschaft.jpg"
    alt="Berglandschaft mit einem See"
    width="1200"
    height="800"
  >
</picture>

Das abschließende <img>-Element dient als Ersatzlösung, falls keines der angegebenen Formate unterstützt wird. Es enthält außerdem den Alternativtext.

Unterschiedliche Bildausschnitte verwenden

Mit dem Attribut media kann abhängig von der Bildschirmbreite ein anderer Bildausschnitt verwendet werden. Dieses Verfahren wird auch Art Direction genannt.

<picture>
  <source
    media="(min-width: 1200px)"
    srcset="images/header-breit.jpg"
  >

  <source
    media="(min-width: 768px)"
    srcset="images/header-mittel.jpg"
  >

  <img
    src="images/header-hochformat.jpg"
    alt="Teilnehmer bei einer Computerschulung"
    width="600"
    height="800"
  >
</picture>

Auf einem kleinen Bildschirm wird das Hochformat verwendet. Ab 768 Pixel wird die mittlere und ab 1200 Pixel die breite Variante geladen.

srcset und sizes

Für dasselbe Bild in unterschiedlichen Auflösungen kann direkt beim <img>-Element mit srcset gearbeitet werden. Der Browser wählt selbstständig eine passende Datei aus.

<img
  src="images/kurs-800.jpg"
  srcset="
    images/kurs-480.jpg 480w,
    images/kurs-800.jpg 800w,
    images/kurs-1200.jpg 1200w
  "
  sizes="
    (min-width: 1200px) 50vw,
    (min-width: 768px) 75vw,
    100vw
  "
  alt="Teilnehmer während eines Excel-Kurses"
  width="1200"
  height="800"
>

• 480w, 800w und 1200w geben die tatsächliche Breite der jeweiligen Bilddatei an.
• sizes beschreibt, wie breit das Bild unter verschiedenen Bedingungen voraussichtlich dargestellt wird.
• Der Browser berücksichtigt unter anderem Bildschirmgröße, Pixeldichte und verfügbare Bilddateien.

Audiodatei einbinden

<audio controls preload="metadata">
  <source src="media/beispiel.mp3" type="audio/mpeg">
  <source src="media/beispiel.ogg" type="audio/ogg">

  Ihr Browser unterstützt das Audio-Element nicht.
</audio>

Die <source>-Elemente stellen mehrere Audioformate bereit. Der Browser verwendet die erste unterstützte Datei.

Der Text innerhalb des <audio>-Elements wird nur angezeigt, wenn der Browser das Audio-Element nicht unterstützt.

Audiodateien vorladen

• preload="none": Die Audiodatei soll zunächst nicht geladen werden.
• preload="metadata": Nur Metadaten wie Dauer und Dateiinformationen sollen vorgeladen werden.
• preload="auto": Der Browser darf die gesamte Datei vorladen.

preload ist lediglich ein Hinweis. Der Browser kann abhängig von Verbindung, Einstellungen und Gerätezustand anders entscheiden.

Audio mit CSS gestalten

Die eingebauten Bedienelemente unterscheiden sich je nach Browser und Betriebssystem. Mit normalem CSS können sie nur eingeschränkt gestaltet werden. Die Breite des Audioelements lässt sich jedoch problemlos anpassen.

audio {
  display: block;
  width: 100%;
  max-width: 600px;
  margin-block: 1rem;
}

Für vollständig selbst gestaltete Bedienelemente wären zusätzliche HTML-Buttons und JavaScript erforderlich.

Barrierefreiheit bei Audio

Wichtige Audioinhalte sollten zusätzlich als Text oder Transkript angeboten werden. Dadurch stehen die Informationen auch Personen zur Verfügung, die den Ton nicht hören können oder die Audiodatei nicht abspielen möchten.

<audio controls>
  <source src="media/lektion.mp3" type="audio/mpeg">
</audio>

<p>
  <a href="transkript.html">
    Transkript der Audiolektion lesen
  </a>
</p>

Video einbinden

<video
  controls
  width="1280"
  height="720"
  poster="images/video-vorschau.jpg"
  preload="metadata"
>
  <source src="media/tutorial.mp4" type="video/mp4">
  <source src="media/tutorial.webm" type="video/webm">

  Ihr Browser unterstützt das Video-Element nicht.
</video>

Das Attribut poster legt ein Vorschaubild fest, das vor dem Start des Videos angezeigt wird. Ohne Poster kann der Browser beispielsweise das erste Videobild oder eine leere Fläche darstellen.

Video responsiv gestalten

Ein Video kann wie ein Bild an die verfügbare Breite angepasst werden.

video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

Die Breite des Videos passt sich dadurch an das umgebende Element an. Mit height: auto bleibt das Seitenverhältnis erhalten.

.video-wrapper {
  width: min(100%, 960px);
  margin-inline: auto;
}

.video-wrapper video {
  width: 100%;
  height: auto;
}

<div class="video-wrapper">
  <video controls poster="images/vorschau.jpg">
    <source src="media/tutorial.mp4" type="video/mp4">
  </video>
</div>

Automatische Wiedergabe

Browser blockieren Videos mit automatischer Wiedergabe häufig, wenn sie Ton enthalten. Für automatisch gestartete Videos werden deshalb normalerweise autoplay und muted gemeinsam verwendet.

<video autoplay muted loop playsinline>
  <source src="media/header-video.mp4" type="video/mp4">
</video>

Automatisch abgespielte Videos können ablenken und zusätzlichen Datenverbrauch verursachen. Für Lernvideos ist ein bewusst gestartetes Video mit controls meistens die bessere Lösung.

Untertitel mit track

Mit <track> können Untertitel, Beschreibungen oder Kapitel eingebunden werden. Häufig wird dafür eine WebVTT-Datei mit der Endung .vtt verwendet.

<video controls poster="images/vorschau.jpg">
  <source src="media/excel-tutorial.mp4" type="video/mp4">

  <track
    src="media/excel-tutorial-de.vtt"
    kind="subtitles"
    srclang="de"
    label="Deutsch"
    default
  >
</video>

Aufbau einer WebVTT-Datei

Eine einfache Untertiteldatei könnte unter dem Namen excel-tutorial-de.vtt gespeichert werden.

WEBVTT

00:00:00.000 --> 00:00:04.000
Willkommen zu diesem Excel-Tutorial.

00:00:04.500 --> 00:00:09.000
In diesem Beispiel verwenden wir die WENN-Funktion.

00:00:09.500 --> 00:00:14.000
Zuerst wählen wir die Zelle aus, die das Ergebnis enthalten soll.

Grundformatierung für Medien

img,
picture,
video {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

audio {
  display: block;
  width: 100%;
}

Das <picture>-Element stellt selbst nur den Container für die Bildquellen dar. Die eigentliche Größenanpassung erfolgt beim enthaltenen <img>-Element.

Beispiel einer Medienkarte

<article class="media-card">
  <img
    class="media-card-image"
    src="images/excel-kurs.jpg"
    alt="Excel-Tabelle mit einem Säulendiagramm"
    width="1200"
    height="800"
    loading="lazy"
  >

  <div class="media-card-content">
    <h3>Excel-Grundlagen</h3>

    <p>
      Formeln, Zellbezüge, Datum, Uhrzeit und Prozentrechnen
      verständlich erklärt.
    </p>
  </div>
</article>

.media-card {
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12);
}

.media-card-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.media-card-content {
  padding: 1.25rem;
}

Seitenverhältnis mit aspect-ratio

Mit aspect-ratio kann ein festes Seitenverhältnis definiert werden. Für Videos wird häufig das Format 16:9 verwendet.

.video-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Bei Bildern und Videos legt object-fit: cover fest, dass der gesamte Bereich ausgefüllt wird. Dabei können Teile des Mediums abgeschnitten werden.