Mobil, Klein, Porträt, Langsam, Interlace, Monochrom, Grob, Nicht-Hover, Zuerst

Vor einem Monat habe ich die Wichtigkeit der Abhängigkeit von Interaktionsmedienmerkmalen zur Identifizierung der Fähigkeit des Benutzers, über Elemente zu schweben, oder zur Erkennung der Genauigkeit seines Zeigegeräts, d. h. eines feinen Zeigers wie einer Maus oder eines groben Zeigers wie eines Fingers, untersucht.

Aber es geht über die Eingabegeräte oder die Fähigkeit zum Hovern hinaus; die Bildschirmaktualisierungsrate, die Farbe des Bildschirms oder die Ausrichtung. Annahmen über diese Faktoren, die auf der Breite des Viewports basieren, sind nicht zuverlässig und können zu einer kaputten Benutzeroberfläche führen.

Ich nehme Sie mit auf eine Reise durch das Land von Media Query Level 4 und erkunde die Möglichkeiten, die W3C CSS WG entworfen hat, um uns bei diesem ganzen Geräte-Fruchtsalat-Wahnsinn zu helfen.

Medienabfragen

Medienabfragen, kurz gesagt, informieren uns über den Kontext, in dem unsere Inhalte angezeigt werden, und ermöglichen es uns, unsere Stile zu beschränken und zu optimieren. Das bedeutet, wir können die gleichen Inhalte je nach Kontext unterschiedlich anzeigen.

Die Media Queries Level 4 Spezifikation beantwortet zwei Fragen

• Wie groß und aufgelöst ist die Geräte-Viewport-Größe?
• Was kann das Gerät tun?

Wir können den Gerätetyp erkennen, auf dem das Dokument angezeigt wird, indem wir die Medientyp-Schlüsselwörter all, print, screen oder speech verwenden, oder Sie können mit Media Features granularer werden.

Medienmerkmale

Jedes Medienmerkmal testet ein einzelnes, spezifisches Merkmal des Geräts. Es gibt fünf Typen

• Medienmerkmale für Bildschirmabmessungen erkennen die Viewport-Größe und -Ausrichtung.
• Medienmerkmale für Anzeigequalität identifizieren die Auflösung und die Aktualisierungsgeschwindigkeit.
• Farb-Medienmerkmale erkennen die Menge an Farben, die ein Gerät anzeigen kann.
• Interaktions-Medienmerkmale stellen fest, ob ein Gerät über eine Hover-Funktion verfügt und wie gut sein Eingabegerät ist.
• Skripting-Medienmerkmale erkennen, ob Skriptsprachen, z. B. JavaScript, unterstützt werden.

Wir können diese Merkmale einzeln verwenden oder sie mit dem Schlüsselwort and oder einem Komma kombinieren, um "oder" zu bedeuten. Es ist auch möglich, sie mit dem Schlüsselwort not zu negieren.

Zum Beispiel:

@media screen and ((min-width: 50em) and (orientation: landscape)), print and (not(color)) {
  ...
}

Beschränkt die Stile auf Querformat-Bildschirme, die kleiner oder gleich 50em breit sind, oder auf monochrome Druckausgaben.

Der beste Weg, etwas zu verstehen, ist, es tatsächlich zu tun. Tauchen wir ein in die Eckfälle einer Navigationsleiste, um diese Konzepte zu testen.

Die unnötig komplizierte Navigationsleiste

Einer der besten Ratschläge, die uns Brad Frost in „7 Habits of Highly Effective Media Queries“ gab, ist, es nicht zu übertreiben.

Je komplexer wir unsere Benutzeroberflächen gestalten, desto mehr müssen wir nachdenken, um sie richtig zu warten. – Brad Frost

Und genau das werde ich jetzt tun. Lassen wir es uns übertreiben!

Beachten Sie, dass die folgende Demo als Beispiel zur Veranschaulichung jedes Medienmerkmals konzipiert wurde: Wenn Sie sie verwenden (und warten) möchten, tun Sie dies auf eigene Gefahr (und lassen Sie es mich wissen!).

Vor diesem Hintergrund beginnen wir mit der weniger leistungsfähigen kleineren Erfahrung, auch bekannt als „Der Ansatz ‚zuerst mobil, klein, Porträt, langsam, interlace, monochrom, grob, nicht-hover‘“.

Die HTML-Struktur

Um die Medienabfragemerkmale zu testen, habe ich mit einer sehr einfachen Struktur begonnen. Auf der einen Seite: ein header mit einem h1 für einen Markennamen und ein nav mit einer ungeordneten Liste. Auf der anderen Seite: ein main-Bereich mit einem Platzhalter für Titel und Text.

Siehe den Pen Teil 1: Mobil, grob, Porträt, langsam, monochromatisch, nicht-Hover zuerst von Andres Galante (@andresgalante) auf CodePen.

Standard-CSS für weniger leistungsfähige Geräte und kleinere Viewports

Wie ich bereits erwähnt habe, denken wir zuerst an die weniger leistungsfähigen, kleineren Geräte. Obwohl wir die Stile noch nicht beschränken, berücksichtige ich eine Erfahrung, die

• max-width: 45em kleiner Viewport, kleiner oder gleich 45em breit
• orientation: portrait Porträt-Viewport, Höhe ist größer als Breite
• update: slow das Ausgabegerät kann Änderungen nicht schnell genug rendern oder anzeigen, damit sie als flüssige Animation wahrgenommen werden.
• monochrome alle monochromen Geräte
• pointer: coarse der primäre Eingabemechanismus hat eine begrenzte Genauigkeit, wie ein Finger
• hover: none zeigt an, dass das primäre Zeigesystem nicht schweben kann

Kümmern wir uns um die Positionierung. Für Porträt-, Kleinformat- und Touchscreen-Geräte möchte ich das Menü am unteren Rand des Viewports anheften, damit die Benutzer mit ihren Daumen bequem auf das Menü zugreifen können.

nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

Da wir Touchscreen-Geräte ansprechen, ist es wichtig, das Berührungsziel zu vergrößern. In Inclusive Design Patterns erwähnt Heydon Pickering, dass es immer noch unklar ist, wie groß ein Berührungsbereich sein sollte, verschiedene Anbieter empfehlen unterschiedliche Größen.

Pickering zitiert Anthony Thomas' Artikel über fingerfreundliche Erlebnisse und Patrick H. Laukes Forschung für The W3C Mobile Accessibility Taskforce zu Touch-/Pointer-Zielgrößen, und die wichtigste Erkenntnis ist: „...jedes Link größer machen als den Durchmesser eines erwachsenen Fingerpads“.

Deshalb habe ich die Höhe der Menüelemente auf 4em erhöht. Da dies nicht gescort ist, gilt es für jede Viewport-Größe, sodass sowohl große Touchscreen-Geräte wie ein iPad Pro als auch winzige Smartphones bequeme Berührungsziele haben werden.

li a {
  min-height: 4em;
}

Um die Lesbarkeit auf monochromen oder langsamen Geräten wie einem Kindle zu verbessern, habe ich die Unterstreichungen von Links nicht entfernt oder Animationen hinzugefügt. Das mache ich später.

Siehe den Pen Teil 2: Mobil, grob, Porträt, langsam, monochromatisch, nicht-Hover zuerst von Andres Galante (@andresgalante) auf CodePen.

Kleine Querformat-Viewports, vertikale große Displays oder Mauszeiger

Für Querformat-Viewports orientation: landscape, große Porträt-Viewports wie vertikale Monitore oder Tablets min-width: 45em oder kleine Porträt-Geräte mit feinen Zeigern wie einem Stift pointer: fine, werden die Benutzer ihre Daumen nicht mehr auf einem Handheld-Gerät verwenden; deshalb habe ich das Menü entriegelt und oben rechts in der Kopfzeile platziert.

@media (orientation: landscape), (pointer: fine), (min-width: 45em) {
  main {
    padding-bottom: 1em;
    padding-top: 1em;
  }
  h1, nav {
    position: static;
  }
}

Da das Menü und der Markenname bereits flexibel und gedehnt sind, passen sie sich gut an.

Für Benutzer, die einen feinen Zeiger wie eine Maus oder einen Stift haben, möchten wir das Trefferziel verkleinern, um Platz im Hauptbereich zu gewinnen.

@media (pointer: fine) {
  h1, li a {
    min-height: 2.5em;
  }
}

Siehe den Pen Teil 3: Mobil, grob, Porträt, langsam, monochromatisch, nicht-Hover zuerst von Andres Galante (@andresgalante) auf CodePen.

Vertikale Navigation für große Querformat-Viewports

Vertikale Navigationen sind großartig für große Querformat-Viewports (orientation: landscape) and (min-width: 45em), wie ein Tablet oder ein Computerdisplay. Dazu flexe ich den Container

@media (orientation: landscape) and (min-width: 45em) {
  .container {
    display: flex;
  }
  ...
}

Beachten Sie, dass Trefferziele nichts mit der Größe des Viewports oder dem Stil der Navigation zu tun haben. Wenn sich der Benutzer auf einem großen Touchscreen-Gerät mit einem vertikalen Tab befindet, sieht er größere Ziele, unabhängig von der Bildschirmbreite.

Siehe den Pen Teil 4: Mobil, grob, Porträt, langsam, monochromatisch, nicht-Hover zuerst von Andres Galante (@andresgalante) auf CodePen.

Animationen, Dekorationen und Randfälle

Animationen sind eine großartige Möglichkeit, Interaktionen zu verbessern und Benutzern zu helfen, ihre Ziele schnell und einfach zu erreichen. Aber einige Geräte sind nicht in der Lage, flüssige Animationen zu erzeugen – wie E-Reader. Deshalb beschränke ich Animationen auf Geräte, die in der Lage sind, ein gutes Erlebnis zu generieren (update: fast), (scan: progressive), (hover: hover).

@media (update: fast), (scan: progressive), (hover: hover) {
  li a {
    transition: all 0.3s ease-in-out;
  }
}

Ich entferne auch die Textdekoration auf Farbgeräten.

@media (color) {
  li a { text-decoration: none; }
}

Das Entfernen von Unterstreichungen (über text-decoration) ist ein heikles Thema. Unsere Beraterin für Barrierefreiheit, Marcy Sutton, hat es gut ausgedrückt:

Einige Benutzer profitieren sehr von Link-Unterstreichungen, besonders in Fließtext. Aber da diese speziellen Links Teil der Navigation mit einer ausgeprägten Designbehandlung sind, muss die Linkfarbe einfach ausreichenden Kontrast zur Hintergrundfarbe haben, um Benutzern mit eingeschränkter Sehkraft oder Farbenblindheit gerecht zu werden.

Ich erhöhe auch die Rahmenbreite auf 2px, um "Twitter" (echter Begriff!) auf interlaceden Geräten wie Plasmafernsehern zu vermeiden.

@media (scan: interlace) {
  li a, li:first-child a {
    border-width: 2px;
  }
}

Und hier ist das Endergebnis.

Siehe den Pen Teil 5: Mobil, grob, Porträt, langsam, monochromatisch, nicht-Hover zuerst von Andres Galante (@andresgalante) auf CodePen.

Testen Sie es

Das Testen all dieser Dinge ist vielleicht nicht so einfach! Dieses Beispiel basiert auf Flexbox, und einige Browser haben nur begrenzte Unterstützung für andere moderne CSS-Funktionen. Ein Kindle liest zum Beispiel keine @media, @support oder Flexbox-Eigenschaften.

Ich habe hier Float-Fallbacks hinzugefügt.

Siehe den Pen Teil 6: Mobil, grob, Porträt, langsam, monochromatisch, nicht-Hover zuerst von Andres Galante (@andresgalante) auf CodePen.

Sie können das vollständige Beispiel auf verschiedenen Geräten, im Quer- oder Hochformat öffnen und es ausprobieren!

Wie bald werden wir realistischerweise in der Lage sein, all diese Funktionen zu nutzen?

Sofort! Das heißt, wenn Sie damit einverstanden sind, unterschiedliche Erlebnisse auf verschiedenen Browsern anzubieten.

Heute unterstützt Firefox keine Interaktionsmedienabfragen. Ein Firefox-Benutzer mit einem feinen Zeigemechanismus, wie einer Maus, sieht große Trefferflächen, die den Hauptbereich reduzieren.

Die Browserunterstützung für die meisten dieser Funktionen ist bereits verfügbar und die Unterstützung für Interaktionsmedienmerkmale ist nicht schlecht! Ich bin sicher, dass wir sie bald flächendeckend unterstützt sehen werden.

Denken Sie daran, so viel wie möglich zu testen und gehen Sie nicht davon aus, dass etwas davon einfach funktioniert, insbesondere auf weniger leistungsfähigen oder älteren Geräten.

Es gibt noch mehr!

Ich habe einige der Medienmerkmale im Beispiel behandelt, aber andere habe ich weggelassen. Zum Beispiel das Auflösungs-Medienmerkmal, das die Auflösung des Ausgabegeräts beschreibt.

Mein Ziel ist es, Sie über Ihren allmächtigen MacBook oder Ihr iPhone mit Retina-Display hinausdenken zu lassen. Das Web ist so viel mehr und es ist überall. Wir haben die Werkzeuge, um die erstaunlichsten, flexibelsten, inklusivsten und anpassungsfähigsten Erlebnisse zu schaffen; nutzen wir sie.