Jenseits von Media Queries: Verwendung neuerer HTML- & CSS-Funktionen für responsive Designs

Abgesehen von Media Queries und modernen CSS-Layouts wie Flexbox und Grid, um responsive Websites zu erstellen, gibt es bestimmte übersehene Dinge, die wir gut tun können, um responsive Websites zu gestalten. In diesem Artikel befassen wir uns mit einer Reihe von Werkzeugen (rund um HTML und CSS), die uns zur Verfügung stehen, von responsive Bildern bis hin zu relativ neuen CSS-Funktionen, die natürlich funktionieren, egal ob wir Media Queries verwenden oder nicht.

Tatsächlich werden Media Queries bei der Verwendung mit diesen Funktionen eher zu einer Ergänzung als zu einem vollständigen Ansatz. Sehen wir uns an, wie das funktioniert.

Wirklich responsive Bilder

Erinnern Sie sich, als wir einfach width: 100% auf Bilder anwenden und es dabei belassen konnten? Das funktioniert natürlich immer noch und macht Bilder dehnbar, aber es hat eine Reihe von Nachteilen, von denen die bemerkenswertesten sind:

• Das Bild kann so stark gequetscht werden, dass es seinen Fokus verliert.
• Kleinere Geräte laden immer noch das Bild in voller Größe herunter.

Bei der Verwendung von Bildern im Web müssen wir sicherstellen, dass sie hinsichtlich Auflösung und Größe optimiert sind. Der Grund dafür ist, dass wir die richtige Bildauflösung für das richtige Gerät haben, damit wir nicht wirklich große und schwere Bilder für kleinere Bildschirme herunterladen, was die Leistung einer Website beeinträchtigen könnte. 

Einfach ausgedrückt stellen wir sicher, dass größere, hochauflösende Bilder an größere Bildschirme gesendet werden, während kleinere, niedrigauflösende Variationen an kleinere Bildschirme gesendet werden, was sowohl die Leistung als auch die Benutzererfahrung verbessert.

HTML bietet das <picture>-Element, mit dem wir die exakte Bildressource angeben können, die basierend auf der von uns hinzugefügten Media Query gerendert wird. Wie bereits beschrieben, geben wir anstelle eines Bildes (normalerweise eine große, hochauflösende Version), das an alle Bildschirmgrößen gesendet und auf die Breite des Viewports skaliert wird, eine Reihe von Bildern an, die in bestimmten Situationen geladen werden sollen.

<picture>
  <source media="(max-width:1000px)" srcset="picture-lg.png">
  <source media="(max-width:600px)" srcset="picture-mid.png">
  <source media="(max-width:400px)" srcset="picture-sm.png">
  <img src="picture.png" alt="picture"">
</picture>

In diesem Beispiel ist picture.png das Vollbild. Von dort definieren wir die nächstgrößere Version des Bildes, picture-lg.png, und die Größe verringert sich absteigend bis zur kleinsten Version, picture-sm.png. Beachten Sie, dass wir bei diesem Ansatz immer noch Media Queries verwenden, aber es ist das <picture>-Element selbst, das das responsive Verhalten steuert, anstatt Breakpoints in CSS zu definieren.

Die Media Queries werden entsprechend hinzugefügt, um mit den Größen des Bildes zu skalieren

• Viewports von 1000 Pixel und mehr erhalten picture.png.
• Viewports zwischen 601 Pixel und 999 Pixel erhalten picture-lg.png.
• Viewports zwischen 401 Pixel und 600 Pixel erhalten picture-sm.png.
• Alles, was kleiner als 400 Pixel ist, erhält picture-sm.png.

Interessanterweise können wir jedes Bild auch nach Bilddichte kennzeichnen — 1x, 2x, 3x und so weiter — nach der URL. Dies funktioniert, wenn wir die verschiedenen Bilder proportional zueinander erstellt haben (was wir getan haben). Dies ermöglicht es dem Browser, basierend auf der Pixeldichte des Bildschirms und der Viewport-Größe zu entscheiden, welche Version heruntergeladen werden soll. Aber beachten Sie, wie viele Bilder wir definieren

<picture>
  <source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x">
  <source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x">
  <source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x">
  <img src="picture.png" alt="picture"">
</picture>

Betrachten wir speziell die beiden Tags, die in das <picture>-Element verschachtelt sind: <source> und <img>.

Der Browser sucht nach dem ersten <source>-Element, bei dem die Media Query mit der aktuellen Viewport-Breite übereinstimmt, und zeigt dann das entsprechende Bild (im Attribut srcset angegeben) an. Das <img>-Element ist als letztes Kindelement des <picture>-Elements erforderlich und dient als Fallback-Option, wenn keiner der anfänglichen Quell-Tags übereinstimmt.

Wir können auch die Bilddichte verwenden, um responsive Bilder nur mit dem <img>-Element und dem srcset-Attribut zu handhaben.

<img
 srcset="
  flower4x.png 4x,
  flower3x.png 3x,
  flower2x.png 2x,
  flower1x.png 1x
 "
 src="flower-fallback.jpg"
>

Eine weitere Möglichkeit besteht darin, Media Queries in CSS zu schreiben, die auf der **Bildschirmauflösung** (normalerweise in Dots per Inch oder DPI gemessen) **des Geräts selbst** und nicht nur auf dem Geräte-Viewport basieren. Das bedeutet, dass wir **anstelle** von

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

Jetzt haben wir

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

Dieser Ansatz ermöglicht es uns, zu bestimmen, welches Bild basierend auf der Bildschirmauflösung des Geräts selbst gerendert werden soll, was bei hochauflösenden Bildern hilfreich sein kann. Grundsätzlich können wir hochqualitative Bilder für Bildschirme anzeigen, die höhere Auflösungen unterstützen, und kleinere Versionen bei niedrigeren Auflösungen. Es ist erwähnenswert, dass mobile Geräte zwar kleine Bildschirme haben, diese aber normalerweise hochauflösend sind. Das bedeutet, dass es wahrscheinlich keine gute Idee ist, sich bei der Entscheidung, welches Bild gerendert werden soll, nur auf die Auflösung zu verlassen. Dies könnte dazu führen, dass große, hochauflösende Bilder auf sehr kleinen Bildschirmen angezeigt werden, was möglicherweise nicht die Version ist, die wir auf einem so kleinen Bildschirm tatsächlich anzeigen möchten.

body {
  background-image : picture-md.png; /* the default image */
}


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

Was <picture> uns bietet, ist im Grunde die Möglichkeit, Bilder künstlerisch zu gestalten. Und in diesem Sinne können wir CSS-Funktionen nutzen, wie die object-fit-Eigenschaft, die uns zusammen mit object-position ermöglicht, Bilder für bessere Fokuspunkte zuzuschneiden, während das Seitenverhältnis des Bildes beibehalten wird.

Um den Fokuspunkt eines Bildes zu ändern

@media only screen and (min-resolution: 192dpi) {
  body {
    background-image : picture-lg.png;
    object-fit: cover;
    object-position: 100% 150%; /* moves focus toward the middle-right */
  }
}

Festlegen von Minimal- und Maximalwerten in CSS

Die Funktion min() gibt die absolut kleinste Größe an, auf die ein Element schrumpfen kann. Diese Funktion ist sehr nützlich, um Textgrößen über verschiedene Bildschirmgrößen hinweg richtig zu skalieren, z. B. um Fluid-Schriftarten niemals unter eine lesbare Schriftgröße fallen zu lassen.

html {
  font-size: min(1rem, 22px); /* Stays between 16px and 22px */
}

min() akzeptiert zwei Werte, und diese können relative, prozentuale oder feste Einheiten sein. In diesem Beispiel weisen wir den Browser an, dass ein Element mit der Klasse .box niemals kleiner als 45 % Breite oder 600 Pixel sein soll, je nachdem, was kleiner ist, basierend auf der Viewport-Breite.

.box {
  width : min(45%, 600px)
}

Wenn 45 % einen Wert ergeben, der kleiner als 600 Pixel ist, verwendet der Browser 45 % als Breite. Umgekehrt, wenn 45 % einen Wert ergeben, der größer als 600 Pixel ist, werden 600 Pixel für die Breite des Elements verwendet.

Ähnlich verhält es sich mit der Funktion max(). Sie akzeptiert ebenfalls zwei Werte, aber anstatt die kleinste Größe für ein Element anzugeben, definieren wir die größte, die es erreichen kann.

.box {
  width : max(60%, 600px)
}

Wenn 60 % einen Wert ergeben, der größer als 600 Pixel ist, verwendet der Browser 60 % als Breite. Auf der anderen Seite, wenn 60 % einen Wert ergeben, der kleiner als 600 Pixel ist, werden 600 Pixel als Breite des Elements verwendet.

Werte begrenzen

Viele von uns haben schon seit einiger Zeit nach clamp() geschrien, und wir haben tatsächlich eine breite Unterstützung in allen modernen Browsern (sorry, Internet Explorer). clamp() ist die Kombination der Funktionen min() und max() und akzeptiert drei Parameter:

1. den Minimalwert,
2. den bevorzugten Wert und
3. den Maximalwert.

Zum Beispiel:

.box {
  font-size : clamp(1rem, 40px, 4rem)
}

Der Browser setzt die Schriftgröße auf 1rem, bis der berechnete Wert von 1rem größer als 40 Pixel ist. Und wenn der berechnete Wert über 40 Pixel liegt? Ja, der Browser hört auf, die Größe zu erhöhen, nachdem er 4rem erreicht hat. Sie können sehen, wie clamp() verwendet werden kann, um Elemente fließend zu gestalten, ohne auf Media Queries zurückgreifen zu müssen.

Arbeiten mit responsiven Einheiten

Haben Sie jemals eine Seite mit einer großen Überschrift oder Unterüberschrift erstellt und bewundert, wie gut sie auf einem Desktop-Bildschirm aussah, nur um sie auf einem Mobilgerät zu überprüfen und festzustellen, dass sie zu groß ist? Ich war definitiv schon in dieser Situation, und in diesem Abschnitt werde ich erklären, wie man solche Probleme bewältigt.

In CSS können Sie Größen oder Längen von Elementen mit verschiedenen Maßeinheiten bestimmen, und die am häufigsten verwendeten Maßeinheiten sind: px, em, rem, %, vw und vh. Obwohl es mehrere weitere Einheiten gibt, die nicht so häufig verwendet werden. Was uns interessiert, ist, dass px als absolute Einheit betrachtet werden kann, während die anderen als relative Einheiten gelten.

Absolute Einheiten

Ein Pixel (px) gilt als absolute Einheit, hauptsächlich weil er fest ist und sich nicht aufgrund der Messung eines anderen Elements ändert. Er kann als Basis- oder Stammeinheit betrachtet werden, die einige andere relative Einheiten verwenden. Der Versuch, Pixel für responsives Verhalten zu verwenden, kann zu Problemen führen, da sie fest sind, aber sie sind großartig, wenn Sie Elemente haben, die überhaupt nicht in der Größe geändert werden sollen.

Relative Einheiten

Relative Einheiten wie %, em und rem eignen sich besser für responsives Design, hauptsächlich aufgrund ihrer Fähigkeit, über verschiedene Bildschirmgrößen hinweg zu skalieren.

vw: Relativ zur Breite des Viewports
vh: Relativ zur Höhe des Viewports
rem: Relativ zum Root-Element (<html>) (Standard-Schriftgröße ist normalerweise 16px)
em: Relativ zum übergeordneten Element
%: Relativ zum übergeordneten Element

Auch hier ist die Standard-Schriftgröße für die meisten Browser 16px, und rem-Einheiten verwenden diese, um ihre berechneten Werte zu erzeugen. Wenn ein Benutzer die Schriftgröße im Browser anpasst, skalieren alle Elemente auf der Seite richtig, abhängig von der Root-Größe. Wenn Sie beispielsweise mit einer Root-Größe von 16px arbeiten, wird die von Ihnen angegebene Zahl mit der Standardgröße multipliziert. Zum Beispiel

.8rem = 12.8px (.8 * 16)
1rem = 16px (1 * 16)
2rem = 32px (2 * 16)

Was passiert, wenn Sie oder der Benutzer die Standardgröße ändern? Wie wir bereits gesagt haben, handelt es sich um relative Einheiten, und die endgültigen Größenwerte basieren auf der neuen Basisgröße. Dies ist nützlich innerhalb von Media Queries, wo Sie einfach die Schriftgröße ändern und die gesamte Seite entsprechend skaliert wird.

Wenn Sie beispielsweise die Schriftgröße innerhalb des CSS auf 10px ändern würden, wären die berechneten Größen:

html {
  font-size : 10px;
}

1rem = 10px (1 * 10)
2rem = 20px (2 * 10)
.5rem = 5px (.5 * 10)

Hinweis: Dies gilt auch für Prozente %. Zum Beispiel

100% = 16px;
200% = 32px; 
50% = 8px;

Und was ist der Unterschied zwischen rem und em Einheiten? Es hängt davon ab, welche Basis das Element verwendet. rem berechnet Werte unter Verwendung der Schriftgröße des Root-Elements (<html>), während ein Element, das em-Werte deklariert, auf die Schriftgröße des übergeordneten Elements verweist, das es enthält. Wenn die Größe des angegebenen übergeordneten Elements von der Root-Größe abweicht (z. B. das übergeordnete Element ist 18px, aber das Root-Element ist 16px), dann werden em und rem unterschiedliche berechnete Werte ergeben. Dies gibt uns eine feinere Kontrolle darüber, wie sich unsere Elemente in verschiedenen responsiven Kontexten verhalten.

vh ist eine Abkürzung für *viewport height* (Ansichtsfensterhöhe) oder die Höhe des sichtbaren Bildschirms. 100vh steht für 100 % der Höhe des Ansichtsfensters (abhängig vom Gerät). In ähnlicher Weise steht vw für *viewport width* (Ansichtsfensterbreite), was die sichtbare Breite des Bildschirms des Geräts bedeutet, und 100vw steht buchstäblich für 100 % der Breite des Ansichtsfensters.

Jenseits von Media Queries

Sehen Sie das? Wir haben gerade eine Reihe von wirklich leistungsstarken und relativ neuen HTML- und CSS-Funktionen durchgesehen, die uns zusätzliche (und möglicherweise effektivere) Möglichkeiten zum Erstellen von responsiven Designs bieten. Es ist nicht so, dass diese neuen Techniken das ersetzen, was wir bisher getan haben. Sie sind lediglich weitere Werkzeuge in unserem Entwickler-Werkzeugkasten, die uns mehr Kontrolle darüber geben, wie Elemente in verschiedenen Kontexten funktionieren. Ob es sich um Schriftgrößen, Auflösungen, Breiten, Fokuspunkt oder eine beliebige Anzahl von Dingen handelt, wir haben mehr Feinsteuerung über das Benutzererlebnis als je zuvor.

Wenn Sie also das nächste Mal an einem Projekt arbeiten, bei dem Sie mehr Kontrolle über das genaue Aussehen und Gefühl des Designs auf bestimmten Geräten wünschen, schauen Sie sich an, was natives HTML und CSS leisten können – es ist unglaublich, wie weit die Dinge gekommen sind.