Implementierung der Feature-Erkennung

Das Konzept der Feature-Erkennung

Die Idee der Feature-Erkennung ist, dass Sie einen Test durchführen können, um festzustellen, ob ein Feature im aktuellen Browser unterstützt wird, und dann bedingt Code ausführen, um eine akzeptable Erfahrung sowohl in Browsern zu bieten, die das Feature unterstützen, als auch in solchen, die es nicht unterstützen. Wenn Sie dies nicht tun, können Browser, die die von Ihnen verwendeten Features nicht unterstützen, Ihre Websites nicht ordnungsgemäß anzeigen oder vollständig fehlschlagen, was eine schlechte Benutzererfahrung erzeugt.

Lassen Sie uns rekapitulieren und das Beispiel betrachten, das wir in unserem Artikel über JavaScript-Debugging und Fehlerbehandlung angesprochen haben — die Geolocation API (die verfügbare Standortdaten für das Gerät bereitstellt, auf dem der Webbrowser läuft) hat den Haupteinstiegspunkt für ihre Nutzung, eine geolocation-Eigenschaft, die auf dem globalen Navigator-Objekt verfügbar ist. Daher können Sie ermitteln, ob der Browser Geolokalisierung unterstützt oder nicht, indem Sie etwas Ähnliches wie das folgende verwenden:

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    // show the location on a map, such as the Google Maps API
  });
} else {
  // Give the user a choice of static maps
}

Bevor wir fortfahren, möchten wir eines von Anfang an klarstellen — verwechseln Sie Feature-Erkennung nicht mit Browser-Erkennung (Erkennung, welcher spezifische Browser auf die Seite zugreift) — dies ist eine schlechte Praxis, die unter allen Umständen vermieden werden sollte. Weitere Details finden Sie unter Erkennung von Browsern mithilfe des User-Agent-Strings (UA Sniffing).

Eigene Feature-Erkennungstests schreiben

In diesem Abschnitt schauen wir uns an, wie Sie Ihre eigenen Feature-Erkennungstests in sowohl CSS als auch JavaScript implementieren können.

CSS

Sie können Tests für CSS-Features schreiben, indem Sie in JavaScript auf die Existenz von element.style.property (z. B. paragraph.style.rotate) testen.

Ein klassisches Beispiel könnte darin bestehen, zu testen, ob die Subgrid-Unterstützung in einem Browser vorhanden ist; für Browser, die den subgrid-Wert für grid-template-columns und grid-template-rows unterstützen, können wir Subgrid in unserem Layout verwenden. Für Browser, die dies nicht tun, könnten wir ein reguläres Grid verwenden, das gut funktioniert, aber nicht so cool aussieht.

Anhand dieses Beispiels könnten wir ein Subgrid-Stylesheet einbinden, wenn der Wert unterstützt wird, und ein reguläres Grid-Stylesheet, wenn nicht. Dazu könnten wir zwei Stylesheets im Kopf unserer HTML-Datei einbinden: eins für alle Styling, und eins, das das Standardlayout implementiert, wenn Subgrid nicht unterstützt wird:

<link href="basic-styling.css" rel="stylesheet" />
<link class="conditional" href="grid-layout.css" rel="stylesheet" />

Hier behandelt basic-styling.css alle Styling, die wir jedem Browser geben wollen. Wir haben zwei zusätzliche CSS-Dateien, grid-layout.css und subgrid-layout.css, die das CSS enthalten, das wir abhängig von den Unterstützungsebenen der Browser selektiv anwenden wollen.

Wir verwenden JavaScript, um die Unterstützung für den Subgrid-Wert zu testen, und aktualisieren dann das href unseres bedingten Stylesheets basierend auf der Browserunterstützung.

Wir können ein <script></script> zu unserem Dokument hinzufügen, gefüllt mit dem folgenden JavaScript

const conditional = document.querySelector(".conditional");
if (CSS.supports("grid-template-columns", "subgrid")) {
  conditional.setAttribute("href", "subgrid-layout.css");
}

In unserer bedingten Anweisung testen wir, ob die Eigenschaft grid-template-columns den subgrid-Wert mithilfe von CSS.supports() unterstützt.

@supports

CSS hat einen nativen Mechanismus zur Feature-Erkennung: die @supports Anweisung. Dies funktioniert ähnlich wie Media Queries, außer dass anstelle von CSS selektiv anzuwenden, je nach einer Medienfunktion wie Auflösung, Bildschirmbreite oder Bildseitenverhältnis, es CSS selektiv anwendet, abhängig davon, ob ein CSS-Feature unterstützt wird, ähnlich wie CSS.supports().

Zum Beispiel könnten wir unser vorheriges Beispiel umschreiben, um @supports zu verwenden:

@supports (grid-template-columns: subgrid) {
  main {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, minmax(100px, auto));
  }

  .item {
    display: grid;
    grid-column: 2 / 7;
    grid-row: 2 / 4;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(3, 80px);
  }

  .subitem {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
  }
}

Dieser Anweisungsblock wendet die CSS-Regel nur an, wenn der aktuelle Browser die Regel grid-template-columns: subgrid; unterstützt. Damit eine Bedingung mit einem Wert funktioniert, müssen Sie eine komplette Deklaration (nicht nur einen Eigenschaftsnamen) einschließen und KEIN Semikolon am Ende hinzufügen.

@supports hat auch AND, OR und NOT Logik verfügbar — der andere Block verwendet das reguläre Grid-Layout, wenn die Subgrid-Option nicht verfügbar ist:

@supports not (grid-template-columns: subgrid) {
  /* rules in here */
}

Dies ist bequemer als das vorherige Beispiel — wir können alle unsere Feature-Erkennung in CSS durchführen, ohne dass JavaScript notwendig ist, und wir können die gesamte Logik in einer einzigen CSS-Datei handhaben, wodurch HTTP-Anfragen reduziert werden. Aus diesem Grund ist es die bevorzugte Methode zur Bestimmung der Browserunterstützung für CSS-Features.

JavaScript

Wir haben bereits früher ein Beispiel für einen JavaScript-Feature-Erkennungstest gesehen. Im Allgemeinen werden solche Tests in einem von einigen gängigen Mustern durchgeführt.

Gängige Muster für nachweisbare Features sind:

Mitglieder eines Objekts

Überprüfen Sie, ob eine bestimmte Methode oder Eigenschaft (typischerweise ein Einstiegspunkt in die Nutzung der API oder eines anderen von Ihnen erkannten Features) im übergeordneten Object existiert.

Unser früheres Beispiel verwendet dieses Muster, um die Geolocation-Unterstützung zu erkennen, indem das navigator Objekt auf ein geolocation-Mitglied getestet wird:

js

if ("geolocation" in navigator) {
  // Access navigator.geolocation APIs
}

Eigenschaften eines Elements

Erstellen Sie ein Element im Speicher mit Document.createElement() und überprüfen Sie dann, ob eine Eigenschaft darauf existiert.

Dieses Beispiel zeigt einen Weg, die Unterstützung der Canvas API zu erkennen:

js

function supportsCanvas() {
  return !!document.createElement("canvas").getContext;
}

if (supportsCanvas()) {
  // Create and draw on canvas elements
}

Hinweis: Das doppelte NOT im obigen Beispiel (!!) ist eine Möglichkeit, einen Rückgabewert zu einem "richtigen" booleschen Wert zu zwingen, anstatt eines Truthy/Falsy Wertes, der die Ergebnisse verfälschen könnte.

Spezifische Rückgabewerte einer Methode an einem Element

Erstellen Sie ein Element im Speicher mit Document.createElement() und überprüfen Sie dann, ob eine Methode darauf existiert. Falls ja, prüfen Sie, welchen Wert sie zurückgibt.

Beibehaltung eines zugewiesenen Eigenschaftswerts durch ein Element

Erstellen Sie ein Element im Speicher mit Document.createElement(), setzen Sie eine Eigenschaft auf einen bestimmten Wert und überprüfen Sie dann, ob dieser Wert beibehalten wird.

Bedenken Sie, dass einige Features jedoch als nicht erkennbar bekannt sind. In diesen Fällen müssen Sie einen anderen Ansatz verwenden, wie die Verwendung eines Polyfills.

matchMedia

Wir wollten auch das JavaScript-Feature Window.matchMedia an diesem Punkt erwähnen. Dies ist eine Eigenschaft, die es Ihnen ermöglicht, Media Query-Tests innerhalb von JavaScript auszuführen. Es sieht so aus:

if (window.matchMedia("(width <= 480px)").matches) {
  // run JavaScript in here.
}

Als Beispiel verwendet unser Snapshot Demo dies, um die Brick-JavaScript-Bibliothek selektiv anzuwenden und zu verwenden, um das UI-Layout zu handhaben, aber nur für das kleine Bildschirm-Layout (480px breit oder weniger). Wir verwenden zuerst das media Attribut, um das Brick-CSS nur dann auf die Seite anzuwenden, wenn die Seitenbreite 480px oder weniger beträgt:

<link href="dist/brick.css" rel="stylesheet" media="(width <= 480px)" />

Wir verwenden dann matchMedia() mehrmals in dem JavaScript, um Brick-Navigationsfunktionen nur dann auszuführen, wenn wir uns im kleinen Bildschirm-Layout befinden (in größeren Bildschirm-Layouts kann alles auf einmal gesehen werden, daher müssen wir nicht zwischen verschiedenen Ansichten navigieren).

if (window.matchMedia("(width <= 480px)").matches) {
  deck.shuffleTo(1);
}

Zusammenfassung

Dieser Artikel behandelte die Feature-Erkennung in angemessenem Detail, indem die Hauptkonzepte vorgestellt wurden und gezeigt wurde, wie Sie Ihre eigenen Feature-Erkennungstests implementieren können.

Als nächstes werden wir uns mit automatisiertem Testen befassen.

• Zurück
• Übersicht: Testen
• Weiter