HTML/Tutorials/responsive Webdesign/neuere HTML- und CSS-Features

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Nicht nur Media Queries: Wie man neuere HTML- & CSS-Features für Responsive Designs verwendet
Von David Atanda, veröffentlicht auf css-tricks.com
Ins Deutsche übertragen von Rolf Borchmann

Um responsive Webseiten zu erstellen, gibt es nicht nur Media Queries und moderne CSS-Layouttechniken wie Flexbox und Grid. In diesem Artikel wollen wir uns mit einigen häufig übersehenen Werkzeugen aus dem HTML- und CSS-Baukasten befassen, von responsiven Bildern bis hin zu relativ neuen CSS-Funktionen, die auch ohne Media Queries funktionieren.

In Kombination mit diesen Techniken werden Media Queries tatsächlich eher zu einer Ergänzung anstatt das Hauptwerkzeug zu sein. Schauen wir uns an, wie das funktioniert.

Richtig responsive Bilder[Bearbeiten]

Wissen Sie noch, wie wir einfach ein width: 100% auf ein Bild geschmissen und die Sache damit als erledigt galt? Das funktioniert natürlich immer noch und passt die Bilder elastisch an die Größe an, aber damit sind auch einige Nachteile verbunden:

  • Das Bild wird (auf großen Viewports) so weit vergrößert, dass es pixelig wird.
  • Kleinere Geräte müssen das Bild immer noch in voller (Datei)-größe herunterladen.

Wenn wir im Web Bilder verwenden, müssen wir darauf achten, dass sie hinsichtlich Auflösung und Größe optimiert sind. Der Grund dafür ist, dass wir für jedes Gerät die passende Auflösung bereitstellen wollen. Würden wir für kleinere Bildschirme richtig große und fette Bilder laden, würde das die Leistung der Website beeinträchtigen.

Einfach gesagt: wir sorgen dafür, dass größere, hochauflösende Bilder an größere Bildschirme gesendet werden, und kleinere, gering aufgelöste Bilder an kleinere Bildschirme, was die Performance der Website und die Zufriedenheit ihrer Benutzer der Website verbessert.

HTML bietet das picture-Element an, mit dem wir exakt angeben können, welche Bildressource abhängig von einer Media Query geladen wird. Anstatt ein großes, hoch aufgelöstes Bild an jede Bildschirmgröße zu senden und es auf die Viewportbreite zu skalieren, geben wir eine Liste von Bildern an, die je nach Situation zum Einsatz kommen.

Picture-Element mit Medienabfragen ansehen …
<picture>
  <source media="(min-width: 50em)" 
          srcset="TotemPole-2000.jpg">
  <source media="(min-width: 30em)" 
          srcset="TotemPole-1200.jpg">
  <source srcset="TotemPole-600.jpg">
  <img src="TotemPole-2000.jpg" alt="Monument Valley - Totem Pole">
</picture>

Die vorhandene Grafik wird in drei Versionen mit jeweils unterschiedlichen Seitenverhältnissen abgespeichert. TotemPole-2000.jpg ist das Bild in voller Größe. Davon ausgehend definieren wir die zweitgrößte Version, TotemPole-1200.jpg, und die Größe nimmt immer weiter ab bis zur kleinsten Version, TotemPole-600.jpg.

Beachten Sie, dass wir in dieser Vorgehensweise immer noch Medienabfragen verwenden, aber es ist das picture-Element selbst, das das responsive Verhalten auslöst und keine im CSS definierten Medien-Breakpoints.

Die Medienabfragen werden so hinzugefügt, dass sie zu den Bildgrößen passen:

  • Bei einer Viewport-Breite von mehr als 50em wird die Panorama-Version (Verhältnis 2:5) geladen.
  • Sobald der Viewport kleiner wird, erscheint eine schmalere Version ( Verhältnis von 2:4).
  • Bei kleinen Viewports unterhalb von 30em erscheint eine quadratische Version.

Bilder für hochauflösende Bildschirme[Bearbeiten]

Es ist auch interessant, dass wir jedes Bild hinter seiner URL mit einer Pixeldichte markieren können - 1x, 2x, 3x und so weiter. Das funktioniert so, als ob wir die Bilder in einem entsprechenden Verhältnis zueinander angefertigt hätten (was wir auch getan haben). Der Browser hat damit die Möglichkeit, das Bild zusätzlich zur Viewportgröße auch noch passend zur Pixeldichte des Bildschirms auszuwählen. Aber schauen Sie, wie viele Bilder wir dann definieren müssen:

Picture-Element mit Abfrage von Breite und Auflösung
<picture>
  <source media="(max-width:1000px)"
          srcset="bild-gross_1x.png 1x, bild-gross_2x.png 2x, bild-gross_3x.png 3x">
  <source media="(max-width:600px)" 
          srcset="bild-mittel_1x.png 1x, bild-mittel_2x.png 2x, bild-mittel_3x.png 3x">
  <source media="(max-width:400px)" 
          srcset="bild-klein_1x.png 1x, bild-klein_2x.png 2x, bild-klein_3x.png 3x">
  <img src="picture.png" alt="picture"">
</picture>

Werfen wir nun einen genaueren Blick auf die beiden Elemente, die ins picture-Element eingebettet sind: source und img.

Der Browser sucht nach dem ersten source-Element, dessen Media Query zur momentanen Viewport-Breite passt, und zeigt dann das passende Bild aus dem srcset Attribut an. Das img-Element ist als letztes Kind des picture-Elements vorgeschrieben und dient als Rückfall-Lösung, falls keins der source-Elemente passt.

@Bild picture-element-diagram.jpg

Die Pixeldichte kann auch in einem eigenständigen <img> Element verwendet werden, wenn man dort das srcset-Attribut verwendet:

srcset Attribut im img Element
<img
 srcset="
  blume4x.png 4x,
  blume3x.png 3x,
  blume2x.png 2x,
  blume1x.png 1x
 "
 src="blume-fallback.jpg"
>

Was wir auch tun können, ist, Media Queries basierend auf der Bildschirmauflösung (zumeist in Punkten pro Zoll gemessen, dpi) des Gerätes selbst zu schreiben, statt auf der Größe des Viewports basierend. Das bedeutet, dass wir anstelle von

@media only screen and (max-width: 600px) {
  /* Styleregeln */
}

nun dies hier haben:

@media only screen and (min-resolution: 192dpi) {
  /* Styleregeln */
}

Auf diese Weise können wir das darzustellende Bild basierend auf der Bildschirmauflösung des verwendeten Geräts vorgeben, was nützlich sein kann, wenn man mit hochauflösenden Bildern zu tun hat. Im Grunde genommen bedeutet das, dass wir auf Bildschirmen, die hohe Auflösungen unterstützen, Bilder mit hoher Qualität anzeigen können, und kleinere Versionen auf niedrigeren Auflösungen. Es ist einen Hinweis wert, dass Mobilgeräte zwar kleine Bildschirme haben, aber zumeist hohe Auflösungen. Das bedeutet, dass es vermutlich nicht die beste Idee ist, sich nur auf die Auflösung zu verlassen, um das darzustellende Bild auszuwählen. Es könnte dazu führen, dass man große, hoch aufgelöste Bilder an richtig kleine Bildschirme sendet, was vielleicht nicht das ist, was wir dort darstellen wollen.

body {
  background-image : bild-mittel.png; /* the default image */
}

@media only screen and (min-resolution: 192dpi) {
  body {
    background-image : bild-gross.png; /* higher resolution */
  }
}

Der letzte Schliff![Bearbeiten]

Mit picture bekommen wir einen Gestaltungsspielraum um bei der Bilddarstellung Regie führen zu können. Und, wo wir gerade bei dieser Idee sid, können wir CSS Features wie object-fit ausnutzen, das uns zusammen mit object-position erlaubt, Bilder für einen besseren Ausschnitt zu beschneiden und gleichzeitig das Seitenverhältnis beizubehalten.

Wahl des Bildausschnitts ansehen …
<source lang="css">
img {
	animation: direction 5s infinite alternate linear;
}

@keyframes direction { 
  from { 
	object-fit: cover;
	object-position: 50% 50%;
	width: 50em;
	height: auto;
  } 
  to { 
	object-fit: cover;
	object-position: 100% 50%;
	width: 20em;
	height: 20em;	
  } 
}

Damit das Bild auf kleineren Bildschirmen nicht zu klein dargestellt wird, wird es mit object-fit: cover; passend beschnitten und mit object-position: 100% 50%; am Reiter in der rechten Bildhälfte ausgerichtet.

Hauptartikel: Art Direction

Responsive Einheiten verwenden[Bearbeiten]

Haben Sie jemals eine Seite mit einer großen Überschrift gebaut und bewundert, wie großartig sie auf einem Desktop-Bildschirm aussah, nur um sie dann auf einem Mobilgerät zu überprüfen und herauszufinden, dass sie zu groß ist? Ich (d.h. der Originalautor) bin definitiv schon in dieser Situation gewesen und in diesem Abschnitt werde ich erklären, wie man mit solchen Problemen umgeht.

CSS bietet mehrere unterschiedliche Maßeinheiten an, mit denen man Größen oder Längen von Elementen festlegen kann. Zu den häufigsten gehören px, em, rem, %, vw und vh. Es gibt noch einige mehr, aber sie werden nicht so häufig verwendet. Von Bedeutung ist für uns der Umstand, dass man px als eine absolute Einheit ansehen kann, während man die übrigen relativ sind.

Absolute Einheiten[Bearbeiten]

Ein Pixel (px) bezeichnet man hauptsachlich deshalb als absolute Einheit, weil es festgelegt ist und sich nicht abhängig von den Abmessungen eines anderen Elements verändert. Es lässt sich als die Basiseinheit (oder Wurzeleinheit) betrachten, die einige der relativen Einheiten verwenden. Der Versuch, das Pixel für responsives Verhalten zu verwenden, kann auf Schwierigkeiten stoßen, eben weil es fix ist, aber es ist gut geeignet wenn man Elemente hat, deren Größe unveränderlich sein soll.

Relative Einheiten[Bearbeiten]

Relative Einheiten wie %, em oder rem sind für ein responsives Design besser geeignet. Hauptsächlich deshalb, weil sie im Stande sind, mit unterschiedlichen Bildschirmgrößen zu skalieren.

vw Relativ zur Breite des Viewports (Prozentwert)
vh Relativ zur Höhe des Viewports (Prozentwert)
rem Relativ zur Schrifthöhe (font-size) des html-Elements (Dezimalwert)
em Relativ zur font-size des Elements selbst (Dezimalwert)
% Relativ zu einer Längenangabe Elternelement.

Information: Annmerkung zur Übersetzung

David schreibt, dass em relativ zum parent sei. Das ist falsch.


Jeder Browser legt eine Defaultgröße für Text fest, zumeist font-size: 16px. Die Einheit rem verwendet diesen Wert als Rechenbasis. Wenn ein Anwender die Standardtextgröße in seinem Browser verändert, skaliert alles auf der Seite passend zur Basisgröße. Maße, die Sie in rem angeben, werden mit dieser Größe multipliziert. Zum Beispiel:

.8rem = 12.8px  (0,8 * 16)
1rem  = 16px    (1 * 16)
2rem  = 24px    (2 * 16)

Was ist, wenn Sie oder der Anwender die Defaultschriftgröße ändern? Wie schon gesagt, dies sind relative Einheiten und die endgültigen Größenwerte werden dann aus der neuen Basisgröße ermittelt. Das ist in Media Queries nützlich; man muss nur die Schriftgröße verändern und die ganze Seite skaliert dementsprechend hoch oder herunter.

rem Werte bei 10px Basisschriftgröße
html {
  font-size: 10px;
}
 .8rem =  8px (0,8 * 10)
  1rem = 10px (1   * 10)
  2rem = 20px (2   * 10)

Mit Prozentangaben lässt sich der Wert einer Eigenschaft basierend auf dem Wert einer Elterneigenschaft festlegen. Welcher das ist, ist nicht immer ganz logisch, und muss im Zweifelsfall bei der festzulegenden Eigenschaft nachgeschlagen werden.

Beachten Sie: Alle genannten Einheiten, außer Prozent, sind Längeneinheiten und lassen sich überall dort verwenden, wo eine CSS Eigenschaft eine Länge erwartet. Die Angabe eines Prozentwertes an Stelle einer Länge ist an vielen Stellen zulässig, aber nicht überall. Beispielsweise ist die Angabe einer Randdicke (border-width) nicht in Prozent möglich.
Prozentangaben
html {
  font-size: 16px;
}
p {
   font-size: 200%;    /* Bezieht sich auf die font-size des Elternelements */
   width: 50%;         /* Bezieht sich auf die Breite des Elternelements */
   padding-top: 5%;    /* Bezieht sich ebenfalls auf die Breite des Elternelements! */
}
Diese CSS Regel stellt p-Elemente mit einer Schrift dar, die doppelt so groß wie die Schrift im Elternelement ist. Wenn sonst nirgends Schriften festgelegt wurden, wären das im Beispiel 32px. Die Breite der p-Elemente wäre die Hälfte der Breite des Elternelements (z.B. des body).

Achtung!

padding-Angaben beziehen sich immer auf die Breite des Elternelements. Auch padding-top!

Und was ist der Unterschied zwischen den Einheiten rem und em? Er besteht darin, was die Einheit als Basiselement verwendet. rem berechet Werte basierend auf der font-size des <html> Elements, während ein Element, das em Werte spezifiziert, seine eigene font-size verwendet. Ein Sonderfall ist dabei die Angabe der eigenen font-size in em, dieser Wert bezieht sich auf vom Elternelement geerbte font-size. Wenn sich die font-size des Elternelements von der im <html> Element unterscheidet, ermitteln rem und em unterschiedliche Werte. Damit erhalten wir eine feinere Kontrolle darüber, wie sich unsere Elemente in unterschiedlichen responsiven Kontexten verhalten.

vh ist eine Abkürzung für viewport height. Der Viewport ist der Teil des Browserfensters, der die Webseite darstellt. 100vh ist die vollständige Höhe des darstellbaren Bereichs (also des Browserfensters abzüglich Rändern, Titelleiste, Adresszeile, Lesezeichenzeile und ggf. weiterer Gimmicks). Dementsprechend ist 100vw (viewport width) die vollständige Breite dieses Bereichs.

Anmerkung des Übersetzers: Leider ist die CSS Spezifikation hier nicht ganz exakt, und es gibt Unklarheiten, wie Scrollbars zu behandeln sind, und was passiert, wenn ein Mobilgerät-Browser beim Scrollen die Adresszeile wegblendet oder eine Tastatur einblendet. Ursprünglich hat sich vh an solche Ein- oder Ausblendungen angepasst, mit unangenehmen Folgen für die Darstellung der Seite. Deswegen wurde das in Safari für iOS und Chrome für Android geändert, vh bleibt dort nun konstant. In Firefox für Android ist das (Stand September 2020) ein sechs Jahre altes, offenes Ticket.

Minimum- und Maximum-Werte in CSS setzen[Bearbeiten]

(Anmerkung des Übersetzers: Der Originaltext scheint gut gemeint, aber schlecht gemacht zu sein. Ich gehe hier auf min() und max() mit eigenen Worten ein).

Die Vergleichsfunktionen min(), max() dienen dazu, den kleinsten beziehungsweise größten Wert aus einer Liste von Werten auszuwählen. Damit kann man erreichen, dass der berechnete Wert für eine Eigenschaft einen bestimmten Wert nicht überschreitet oder unterschreitet. Es ist allerdings nicht ganz intuitiv: um für eine Eigenschaft einen Maximalwert festzulegen, muss man die min() Funktion verwenden - weil ja in dem Moment, wo der berechnete Wert das gewünschte Maximum überschreitet, dieses Maximum der kleinere der beiden Werte ist.

Festlegen einer maximalen Breite für einresponsives Bild ansehen …
  img {
    width: min(100%, 400px);
  }

Die Grafik ist responsiv und nimmt 100% der Containerbreite ein, bis zu einem Maximalwert von 400px. Um dies zu veranschaulichen wird die Breite des body-Element durch eine CSS-Animation verändert.

Es kommt auch vor, dass man eine Unter- und eine Obergrenze festlegen möchte. Dazu kann man min und max kombinieren, z.B. so: width: max(300px, min(50%, 800px) );. Die Breite des Elements wird auf 50% des Elternelements festgelegt, aber mindestens 300px und nicht mehr als 800px. Um eine solche Angabe lesbarer zu gestalten, gibt es die Funktion clamp():

Festlegen eines Wertebereichs für eine Eigenschaft
.box {
   width: clamp(400px, 50%, 800px);   /* 50% Breite, mindestens 400px und höchstens 800px*/
}

Media Queries hinter sich lassen[Bearbeiten]

Haben Sie gesehen? Wir haben nun einige wirklich leistungsstarke und relativ neue HTML und CSS Funktionalitäten betrachtet, die uns zusätzliche (und möglicherweise effektivere) Möglichkeiten verschaffen, unsere Seiten responsive zu machen. Es ist nicht so, dass diese neumodischen Techniken ersetzen würden, was wir die ganze Zeit schon gemacht haben. Sie sind lediglich weitere Werkzeuge an unserem Entwicklerwerkzeuggürtel, die uns eine stärkere Kontrolle über das Verhalten von Elementen in verschiedenen Kontexten geben. Ob es nun Schriftgrößen, Auflösungen, Breiten, Bildausschnitte oder viele andere Dinge sind, wir können die Benutzererfahrung feinkörniger steuern als je zuvor.

Also, wenn Sie sich das nächste Mal in einem Projekt wiederfinden, wo Sie sich wünschen, das exakte Aussehen einer Seite genauer steuern zu können, schauen Sie sich an, was natives HTML und CSS dazu beitragen können - es ist unglaublich, wie weit sich diese Sachen entwickelt haben.


Weblinks[Bearbeiten]