So verwenden Sie CSS-Funktionsabfragen

Die Welt des Webdesigns verändert sich ständig und es ist spannend, mit neuen Designtrends in CSS Schritt zu halten. Wenn Sie ein früher CSS-Anwender sind, freuen Sie sich vielleicht schon darauf, Dinge wie CSS-Rasterlayouts, CSS-Mischmodi oder etwas mit typografischer Flexibilität zu verwenden, das eine einfache Möglichkeit zum Erstellen von Anfangsbuchstaben mit CSS ermöglicht.

Bei so vielen neuen CSS-Fortschritten ist es spannend zu wissen, dass neue Wege zur Gestaltung von Websites im Bereich des Möglichen liegen. Traditionell mussten Designer warten, um Websites mit diesen neuen Techniken zu erstellen, da es Probleme mit der Browserunterstützung gab. Sie möchten Ihren Kunden doch keine Website bauen, die die meisten Browser nicht unterstützen können, oder? Dies kann oft enttäuschend für diejenigen sein, die „im Voraus planen“, aber nicht alle Hoffnung ist verloren. In den meisten Fällen gibt es eine Möglichkeit, eine gute Erfahrung für alle Benutzer zu schaffen, unabhängig davon, welchen Browser sie verwenden. Wir können nicht viel tun, um die gewünschte Browserunterstützung unserer Kunden zu erzwingen, aber es gibt Möglichkeiten, wie wir unsere Designs zum Leben erwecken können, selbst mit Einschränkungen. Hier kommen CSS Feature Queries ins Spiel.

Wie man ungleiche Browserunterstützung im Webdesign berücksichtigt

Klingen die Begriffe „anmutige Degradation“ und „progressive Verbesserung“ bei Ihnen? Dies sind wahrscheinlich zwei Begriffe, die Sie regelmäßig verwenden, wenn Sie darüber diskutieren, wie Sie die Einschränkungen älterer Browser überwinden können. Auch wenn Sie diese Ansätze nicht beim Namen nennen, haben Sie deren Konzepte wahrscheinlich schon in die Tat umgesetzt.

Bevor Sie sich mit CSS-Funktionsabfragen befassen, ist es wichtig, die üblichen Methoden zur Behebung von Browser-Inkonsistenzen zu verstehen. Diese beiden Ansätze gibt es schon viel länger und bieten zwei verschiedene Arten des Design Thinking.

Anmutige Erniedrigung

Abgesehen davon, dass es sich wie ein Bandname aus den 90er Jahren anhört, nutzt Graceful Degradation die Idee, allen Schnickschnack in moderneren Browsern bereitzustellen, wird aber in älteren Browsern auf ein niedrigeres Funktionsniveau „degradated“.

Es ist verlockend, die ganze Zeit auf den „Wow“-Faktor zu setzen, indem Sie all die neuen glänzenden CSS-Attribute verwenden, die Sie finden können, aber es ist wichtig, den Fokus nicht auf das zu verlieren, was am wichtigsten ist, nämlich den eigentlichen Seiteninhalt. Deshalb sind Ihre Besucher da; Sie müssen in der Lage sein, den Inhalt der Website einfach anzuzeigen und mit ihm zu interagieren. In den älteren Browsern ist die Erfahrung möglicherweise nicht so schön, aber sie bietet Ihren Benutzern eine angemessene Grundfunktionalität, sodass sie den Inhalt der Website weiterhin anzeigen können, ohne dass Dinge auf der Seite beschädigt oder fehlend erscheinen.

Progressive Enhancement

Im Grunde ist progressive Verbesserung genau wie Graceful Degradation, außer rückwärts. Der Ansatz ist ähnlich, aber es macht die Dinge andersherum. Eine grundlegende Benutzererfahrung ist für alle Browser geplant, damit die Darstellung der Dinge auf einer grundlegenden Ebene konsistent ist, um sicherzustellen, dass Inhalte angemessen angezeigt werden können und der Benutzer alle erforderlichen Aufgaben mit dem ausführen kann, was bereitgestellt wird. Erweiterte Funktionen werden dann integriert und stehen den Browsern zur Verfügung, die sie rendern können.
Eine gute Möglichkeit, darüber nachzudenken, ist, dass Graceful Degradation komplex beginnt mit dem Ziel, bei Bedarf eine einfache Erfahrung bereitzustellen. Progressive Verbesserungen beginnen einfach und werden dann mit der gewünschten funktionsreichen Erfahrung ergänzt.

Modernisierer

So erstellen Sie ein einfaches Layout mit CSS Grid Layouts

Wenn Sie sich jemals mit Druckdesign beschäftigt haben, wissen Sie, woher die Idee der Rasterlayouts stammt. Ein Raster ist ein präzises Messwerkzeug, mit dem Designelemente auf einer Seite positioniert werden. Diese Idee ist oft u ...

Modernizer ist das am weitesten verbreitete Werkzeug in einer progressiven Verbesserung. Modernizr ist eine JavaScript-Bibliothek, die überprüft, ob ein Browser Webtechnologien der nächsten Generation unterstützt. Ich werde hier nicht auf alle technischen Details eingehen, aber im Grunde überprüft Modernizer, ob eine Funktion im Browser verfügbar ist, und gibt true oder false zurück. Auf diese Weise können Entwickler einige der neuen Technologien testen und Fallbacks für Browser bereitstellen, die sie nicht unterstützen. Es muss beachtet werden, wann Polyfills benötigt werden.

Es ist eine gute Lösung, aber Modernizer erfordert JavaScript, das zwar klein, aber immer noch langsamer ist als die Verwendung von CSS. Und obwohl es nicht üblich ist, was passiert, wenn JavaScript nicht ausgeführt wird? Das verfehlt den Zweck, was Feature Queries zu einer ziemlich attraktiven Option für den Umgang mit Browser-Inkonsistenzen macht.

CSS-Funktionsabfragen

CSS-Funktionsabfragen sind eine Möglichkeit, eine browsernative Methode zur Erkennung von Funktionen durchzuführen. Diese Abfragen analysieren, ob ein Browser eine CSS-Eigenschaft richtig implementiert hat oder nicht. Im Wesentlichen „meldet“ der Browser, ob eine bestimmte CSS-Eigenschaft oder ein bestimmter CSS-Wert unterstützt wird oder nicht. Das Ergebnis bestimmt, ob ein CSS-Block angewendet wird oder nicht.

Bei der Verwendung von CSS-Funktionsabfragen ist es hilfreich, entweder die Denkweise der würdevollen Degradation oder der progressiven Verbesserung zu verfolgen. Designer können einen eleganten Herabsetzungsansatz wählen, wenn bestimmte Funktionen nicht unterstützt werden. Stylesheets verwenden die neuen Funktionen, wenn sie verfügbar sind, werden jedoch ordnungsgemäß herabgesetzt, wenn diese Funktionen nicht vom Browser unterstützt werden.

Zum größten Teil gibt es eine ziemlich gute Browserunterstützung für CSS Feature Queries. Beachten Sie, dass sie derzeit nicht in allen Browsern unterstützt werden, insbesondere in älteren Versionen von Internet Explorer. Achten Sie darauf, auf Can I Use zu verweisen, um aktuelle Informationen zu erhalten. Lassen Sie sich nicht von der fehlenden IE-Unterstützung für Funktionsabfragen entmutigen. Wenn Sie Ihre Website planen, denken Sie an den CSS-Gesamtplan und was nicht unterstützt wird, und gehen Sie von dort aus weiter.

Beispiele für Funktionsabfragen

Um CSS-Funktionsabfragen vollständig zu verstehen, ist es hilfreich, sie in Aktion zu sehen, indem Sie kleine Tests in Ihr CSS schreiben, um zu sehen, ob eine bestimmte Funktion unterstützt wird oder nicht. Dies hilft Ihnen beim Schreiben und Anwenden von CSS basierend darauf, was von einem Browser unterstützt wird (oder nicht), und optimiert Ihre Seite für die verfügbaren Funktionen.

CSS-Grid-Layouts

Nehmen wir zum Beispiel CSS Grid Layouts. Sie waren ein heißes Thema in der Webdesign-Community, aber da sie noch nicht Mainstream sind, können wir Feature Queries verwenden, um sie zu testen. Wir werden die @supports Regel verwenden und auf die Browser mit Grid-Unterstützung abzielen. Sie werden vielleicht bemerken, dass die Syntax einer Funktionsabfrage (das @ -Symbol) einer Medienabfrage sehr ähnlich ist, sodass sie leicht zu schreiben und zu merken ist.

Wenn der Browser display: grid versteht, werden in der CSS Feature Query-Deklaration die Stile in den Klammern angewendet. Wenn nicht, wird es zu unserem Fallback übersprungen.

// fallback code for older browsers (and those that do not support Feature Queries)
.content {
height: 400px;
background-color: purple;
color: white;
}
// start grid CSS

@supports (display: grid) {
.content {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #f5c531;
height: 400px;
}
}


Wie Sie sehen können, sind verschiedene Stile angegeben, je nachdem, ob der Browser Rasterlayouts unterstützt oder nicht. Derzeit verstehen nur experimentelle Browser display: grid , daher zeigen sie Folgendes an:

 Wie ein Browser, der CSS-Rasterlayouts unterstützt, den Code rendern würde.
		


Bei älteren Browsern wird der Fallback angezeigt, der einen violetten Hintergrund hat:
 Wie ein Browser, der CSS-Grid-Layouts nicht unterstützt, den Code rendern würde.

Textanpassung mit Initialen
Initialen sind eine ziemlich raffinierte CSS-Funktion, die der Typografie eine zusätzliche Eleganz verleiht. Diese Eigenschaft weist den Browser an, größere Buchstaben zu schreiben, wie es normalerweise bei Initialen der Fall ist. Beispielsweise könnte der erste Buchstabe im ersten Wort eines Absatzes die Größe von fünf Textzeilen haben. Der Buchstabe könnte fett sein, mit einem kleinen Rand auf der rechten Seite.
Sie werden jedoch nicht überall unterstützt, daher ist es am besten, sich einen Fallback auszudenken, der ähnlich gestaltet ist wie ein unterstützter Browser. In diesem Beispiel verwenden wir dieselbe Farbe, denselben Fettdruck und dieselbe Serifenschrift für das Design. Wir können die begrenzte Unterstützung für initial-letter berücksichtigen, indem wir diesen Standardstil als Fallback erstellen.
Sehen wir uns ein Beispiel an, um eine Initiale mit einem anderen Ansatz zu erstellen, anstatt initial-letter zu verwenden. (Dies wird Ihr Fallback-Code sein.)

p::first-letter {
float: left;
font-size: 5em;
line-height: 1;
font-weight: bold;
margin-right: .2em;
color: #00FFFF;
font-family: serif;
}


Das funktioniert, aber Sie können Initialen effizienter erstellen, indem Sie CSS initial-letter nutzen. So würde das aussehen:
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
p::first-letter {
-webkit-initial-letter: 5;
initial-letter: 5;
color: #00FFFF;
font-weight: bold;
margin-right: 0.5em;
font-family: serif;
}
}


Fällt hier etwas ein wenig anders auf? Wir haben eine gewisse Logik in unserer Funktionsabfrage mit or . Derzeit wird initial-letter nur in Safari 9 unterstützt, daher ist ein -webkit Präfix erforderlich. Es ist auch eine gute Idee, die Version ohne Präfix einzuschließen (die Browserunterstützung wird in Zukunft zunehmen). Denken Sie daran, dass Sie beim Experimentieren or , and und not in Ihren Funktionsabfragen verwenden können.
Folgendes wird von einem Browser gerendert, der die initial-letter unterstützt:

Neue Bildeffekte
Es gibt so viele neue Bildeffekte, die mit CSS gemacht werden können. Die Browserunterstützung variiert natürlich, aber einige dieser neuen Effekte sind ziemlich cool. Wer hätte gedacht, dass Überlagerungen nicht mehr nur eine Photoshop-Ebene sind? Werfen wir einen Blick auf mix-blend-modes und wie sie auf Bilder angewendet werden können, wenn sie unterstützt werden.
Neben der Feststellung, ob ein Browser ein bestimmtes Feature unterstützt oder nicht, sind Feature Queries ein Tool zum Bündeln von CSS-Deklarationen, sodass sie als Gruppe ausgeführt werden. Das folgende Beispiel sieht komplex aus, aber sobald es aufgeschlüsselt ist, ergibt es mehr Sinn.
Hier ist ein einfaches HTML-Snippet, das eine Klasse auf das <article> -Tag angewendet hat.
&amp;amp;amp;lt;article class=&amp;amp;quot;feature-img&amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;quot;example-img.jpg&amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/article&amp;amp;amp;gt;


Das CSS:
@supports (mix-blend-mode: overlay) and ((background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0))) or (background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0)))) {

.feature-img {
background: -webkit-linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
background: linear-gradient(rgb(166, 80, 80), rgb(139, 0, 0));
}
.feature-img img {
mix-blend-mode: overlay;
}
}


Wie Sie bereits wissen, muss die Bedingung sowohl eine Eigenschaft als auch einen Wert enthalten. Im obigen Beispiel suchen Sie nach der mix-blend-mode Eigenschaft und dem overlay -Wert für diese Eigenschaft. Einige ältere Android-Browser erfordern das Präfix -webkit- für lineare Farbverläufe, daher wurde dies in den @supports Block aufgenommen. Denken Sie daran, dass beim Gruppieren mehrerer Bedingungen die richtige Verwendung von Klammern erforderlich ist.
Dieser Block sucht insbesondere nach Browsern, die den mix-blend-mode der Überlagerung und die Fähigkeit zum Rendern eines linear-gradient ermöglichen. Wenn dies unterstützt wird, erhält das Bild eine Überlagerung mit einem darauf angewendeten Farbverlauf, der ihm eine rote Farbe verleiht.
 Links ist das Originalbild zu sehen. Wenn ein Browser mix-blend-mode: overlay unterstützt, wendet er eine rote Überlagerung auf das Bild mit einem Farbverlauf an.

Für Browser, die keine mix-blend-mode Unterstützung haben, würden Sie diese Syntax mit not verwenden. Es würden einige Stile angewendet, aber im Vergleich zu denen in der obigen Abfrage sehr begrenzt.
@supports not(mix-blend-mode: overlay) {
.feature-img img {
opacity: 0.5;
filter: alpha(opacity=50);
}
}


 Auf der linken Seite wird das Originalbild angezeigt, auf das kein CSS angewendet wurde. Das Bild auf der rechten Seite zeigt Browser, die mix-blend-mode: overlay nicht unterstützen.

Wenn Sie CSS Feature Queries noch nie verwendet haben, ist dies eine gute Einführung in die Möglichkeiten dieses Ansatzes. Es passieren so viele coole neue Dinge mit CSS, und CSS-Funktionsabfragen bieten eine Möglichkeit, einige der neuen Funktionen zu nutzen, die noch nicht vollständig unterstützt werden.

		
		
Willst du mehr Design-Tipps? Abonnieren Sie das Layout!
		
Wir senden Ihnen einmal pro Woche die neuesten Design-Tutorials und Inspirationen direkt in Ihren Posteingang.
		

		
		Ja bitte!