Verwenden Sie die Feature-Erkennung, – Bedingungen und-Gruppen mit Selektoren

0
22

CSS ist auf eine Art entworfen, die erlaubt, dass für die relativ nahtlose hinzufügen neuer features. Seit den Anfängen der Sprache, Spezifikationen erforderlich Browsern ohne Fehler zu ignorieren, die Eigenschaften, Werte, Selektoren, oder-Regeln, die Sie nicht unterstützen. Folglich in den meisten Fällen ist es möglich, erfolgreich eine neuere Technologie, die ohne Probleme in älteren Browsern.

Betrachten Sie die relativ neue Cursor-Eigenschaft color (ändert die Farbe des Cursors in Eingänge). Ihre Unterstützung ist immer noch gering, aber das bedeutet nicht, dass wir Sie nicht benutzen sollten Sie es heute.

.myInput {
Farbe: blau;
caret-Farbe: rot;
}

Beachten Sie, wie wir es rechts neben Farbe, eine Eigenschaft, mit der praktisch Universelle browser-Unterstützung; eines, das überall angewandt werden. In diesem Fall haben wir nicht explizit unterschieden zwischen modernen und älteren Browsern. Stattdessen haben wir nur verlassen sich auf die älteren zu ignorieren features, die Sie nicht unterstützen.

Es stellt sich heraus, dass dieses Muster ist stark genug, in der überwiegenden Mehrheit der Situationen.

Bei der feature-Erkennung ist erforderlich,

In einigen Fällen, jedoch, wir würden wirklich gerne eine moderne Eigenschaft oder die Eigenschaft value, deren Einsatz unterscheidet sich deutlich von seinem fallback. In diesen Fällen @unterstützt, kommt zur Rettung.

@unterstützt, ist eine Besondere at-Regel, die es uns ermöglicht, bedingt gelten alle Stile, die in Browsern, die Unterstützung einer bestimmten Eigenschaft und deren Wert.

@unterstützt (display: grid) {
/* Styles für Browser, die Unterstützung der grid-layout -… * /
}

Es funktioniert Analog zu den @media-Abfragen, die auch nur die Stilarten bedingt, wenn ein bestimmtes Prädikat erfüllt ist.

Zur Veranschaulichung der Verwendung von @unterstützt, betrachten Sie das folgende Beispiel: wir möchten eine Anzeige des Benutzer-hochgeladene avatar in einem netten Kreis, aber wir können nicht garantieren, dass die eigentliche Datei wird von quadratischen Abmessungen. Für die, die Objekt-fit-Eigenschaft wäre sehr hilfreich; jedoch, es ist nicht unterstützt von Internet Explorer (IE). Was tun wir dann?

Lassen Sie uns beginnen mit markup:

<div class=”avatar”>
<img class=”avatar-image” src=”…” alt=”…” />
</div>

Als nicht-so-schön-fallback, wir quetschen Sie die Breite des Bildes in den avatar bei den Kosten, größere Dateien werden nicht vollständig bedecken die avatar-Bereich. Stattdessen werden unsere einfarbigen hintergrund erscheinen unterhalb.

.avatar {
position: relative;
Breite: 5em;
height: 5em;
border-radius: 50%;
overflow: hidden;
background: #cccccc; /* Fallback-Farbe */
}

.avatar-Bild {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
}

Sie können dieses Verhalten in Aktion hier:

Finden Sie den Stift, Demo-fallback für Objekt-fit von Jirka Vebr (@JirkaVebr) auf CodePen.

Merke, es ist ein Quadrat-Bild, eine große eine, und groß.

Nun, wenn wir die Objekt-fit, lassen wir den browser entscheiden, der beste Weg, um das Bild zu positionieren, nämlich, ob die Strecke, die Höhe, Breite, oder weder.

@unterstützt (object-fit: cover) {
.avatar-Bild {
/* Wir müssen nicht mehr die absolute Positionierung oder alle Transformationen */
position: static;
transform: none;
object-fit: cover;
width: 100%;
height: 100%;
}
}

Das Ergebnis, der gleiche Satz von Bild-Dimensionen, funktioniert gut in modernen Browsern:

Finden Sie den Stift @unterstützt Objekt-fit-demo von Jirka Vebr (@JirkaVebr) auf CodePen.

Bedingte selector support

Obwohl der Selektoren Stufe 4-Spezifikation ist immer noch ein Working Draft, einige der Selektoren definiert — wie :Platzhalter-gezeigt — werden bereits unterstützt von vielen Browsern. Sollte sich dieser trend fortsetzen (und sollte dem Entwurf behalten die meisten von Ihre aktuelle Vorschläge), auf dieser Ebene der Spezifikation, wird die Einführung von mehr neuen Selektoren als alle seine Vorgänger. In der Zwischenzeit und auch während der IE ist immer noch lebendig, CSS Entwickler haben zum Ziel, eine noch mehr verschiedene und flüchtige Spektrum von Browsern mit angeregtem Unterstützung für Selektoren.

Es wird sehr nützlich zum durchführen von feature-Erkennung auf-Selektoren. Leider, @unterstützt ist nur für den testing-Unterstützung von Eigenschaften und Ihren Werten, und auch der neueste Entwurf der Spezifikation wird nicht angezeigt, das zu ändern. Seit seiner Gründung, es hat, jedoch, definiert ein spezielles Produktionsverfahren Regel in seiner Grammatik, deren einziger Zweck ist es, Raum zu bieten für das Potenzial, rückwärts-kompatible Erweiterung, und so ist es durchaus möglich, bei einer zukünftigen version auch die Möglichkeit auf Bedingung auf eine Unterstützung für bestimmte Selektoren. Dennoch, der Fall bleibt völlig hypothetisch.

Selector Gegenstück zu @unterstützt

Zunächst ist es wichtig zu betonen, dass, Analog zu den oben genannten Cursor-Farbe Beispiel wo @unterstützt ist wahrscheinlich nicht nötig, viele Selektoren müssen nicht explizit getestet. Zum Beispiel, wir könnten einfach versuchen zu entsprechen ::Auswahl und sich keine sorgen über Browser, die nicht unterstützen, da es nicht das Ende der Welt, wenn die Auswahl Aussehen, bleibt der Standard-browser.

Trotzdem gibt es Fälle, in denen explizite feature-Erkennung für Selektoren sehr wünschenswert wäre. Im rest dieses Artikels stellen wir ein Muster für die Adressierung solche Bedürfnisse, und anschließend verwenden Sie es mit :Platzhalter-gezeigt, die bauen ein CSS-only-alternative zu den Material-Design-text-Feld mit einer schwebenden label.

Grundlegende Eigenschaft Gruppen von Selektoren

Um Doppelarbeit zu vermeiden, ist es möglich zu verdichten, um mehrere identische Deklarationen in eine Komma-getrennte Liste von Auswahlen, die bezeichnet wird als Gruppe von Selektoren.

Somit können wir wiederum:

.foo { color: red }
.bar { color: red }

…in:

.foo, .bar { color: red }

Jedoch, wie die Selektoren Level 3-Spezifikation warnt, diese sind nur äquivalent, da alle Selektoren, die involviert sind, gültig. Gemäß der Spezifikation, wenn jeder Selektor in der Gruppe ist ungültig, die gesamte Gruppe wird ignoriert. Folglich werden die Selektoren:

..foo { color: red } /* Beachten Sie den extra-Punkt */
.bar { color: red }

…konnte nicht sicher sein gruppiert, wie der ehemalige Selektor ist ungültig. Wenn wir gruppiert Sie, wir möchten, dass der browser ignorieren die Erklärung für die letztere als gut.

Es ist darauf hinzuweisen, dass, soweit ein browser betroffen ist, gibt es keinen Unterschied zwischen einer ungültigen Selektor und einem Selektor, der nur gültig ist, gemäß einer neueren version der Spezifikation, oder eine, die der browser nicht kennt. Der browser, beide sind einfach ungültig.

Wir nutzen diese Eigenschaft, um zu testen für die Unterstützung eines bestimmten Selektor. Alles, was wir brauchen, ist eine Auswahl, die wir können garantieren, dass Spiele nichts. In unserem Beispiel verwenden wir :nicht(*).

.foo { color: red }

:keine (*): – Platzhalter-gezeigt,
.foo {
Farbe: grün
}

Lassen Sie uns brechen, was hier passiert. Eine ältere browser erfolgreich anwenden der ersten Regel, aber bei der Verarbeitung der rest, es finden die ersten Selektor in der Gruppe ungültig, da es nicht weiß :Platzhalter-gezeigt, und so wird es ignorieren, den gesamten Selektor-Gruppe. Folglich werden alle Elemente zusammenbringen .foo bleibt rot. Im Gegensatz dazu, während Sie einen neueren browser wird wahrscheinlich Rollen Ihre Roboter-Augen auf die Begegnung :nicht(*) (was nie passt alles”), wird es nicht zum verwerfen der gesamten Selektor-Gruppe. Stattdessen überschreibt er die Vorherige Regel und somit alle Elemente zusammenbringen .foo grün.

Die ähnlichkeit zu @unterstützt (oder alle @media-query, für diese Angelegenheit), in der Art wie es verwendet wird. Wir geben Sie zunächst an die Ausweich-und dann überschreiben, für Browser, die das erfüllen, ein Prädikat, das in diesem Fall ist die Unterstützung für einen bestimmten Selektor — wenn auch geschrieben, in einem etwas gewundenen Mode.

Finden Sie den Stift @Unterstützung für Selektoren von Jirka Vebr (@JirkaVebr) auf CodePen.

Real-world Beispiel

Wir können dieses Verfahren verwenden, für unseren Eingang mit einem schwimmenden label zu trennen Browsern, die von denen, die nicht unterstützt : – Platzhalter-gezeigt, eine pseudo-Klasse, die ist absolut entscheidend für dieses Beispiel. Zum Wohle der relativen Einfachheit, trotz der besten UI-Praktiken, wählen wir unsere fallback-werden nur die tatsächlichen Platzhalter.

Lassen Sie uns beginnen mit markup:

<div class=”input”>
<input class=”input-control” type=”email” name=”email” placeholder=”Email” id=”email” required />
<label class=”input-label” for=”email”>E-Mail</label>
</div>

Wie vor, der Schlüssel ist, um das erste add-styles für ältere Browser. Wir blenden Sie die Beschriftung und die Farbe des Platzhalters.

.input {
Höhe: 3.2 em;
position: relative;
display: flex;
align-items: center;
font-size: 1em;
}

.input-Steuerung {
flex: 1;
z-index: 2; /* So, es ist immer “oben” – label */
border: none;
padding: 0 0 0 1em;
hintergrund: transparent;
position: relative;
}

.input-label {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 1em; /* Richten Sie diese mit der control-Polsterung */
z-index: 1;
display: none; /* Ausblenden dieses für alte Browser */
transform-origin: top left;
text-align: left;
}

Für moderne Browser, können wir effektiv deaktivieren Sie den Platzhalter, indem Sie seine Farbe zu transparent. Wir können auch richten Sie die Eingangs-und die Beschriftung relativ zu einer anderen, wenn der Platzhalter angezeigt wird. Zu diesem Zweck können wir nutzen auch die Geschwister-Selektor, um zum Stil des Labels mit Bezug auf den Zustand des Eingangs.

.input-Steuerung:Platzhalter dargestellt::Platzhalter {
Farbe: transparent;
}

.input-Steuerung:Platzhalter gezeigt werden,~ .input-label {
transform: translateY(-50%)
}

.input-Steuerung:Platzhalter-gezeigt {
transform: translateY(0);
}

Schließlich, das ist der trick! Genau wie oben, wir überschreiben die Stile für die label-und input für moderne Browser und den Staat, in dem der Platzhalter nicht angezeigt. Das umfasst das verschieben der Beschriftung aus dem Weg und schrumpft es ein wenig.

:keine (*): – Platzhalter-gezeigt,
.input-label {
display: block;
transform: translateY(-70%) scale(.7);

}
:keine (*): – Platzhalter-gezeigt,
.input-Steuerung {
transform: translateY(35%);
}

Mit alle Teile zusammen, wie gut als mehr styles und Konfigurations-Optionen, die orthogonal zu diesem Beispiel können Sie sehen, die volle demo:

Finden Sie den Stift CSS-only @Unterstützung für Selektoren demo von Jirka Vebr (@JirkaVebr) auf CodePen.

Die Zuverlässigkeit und die Grenzen dieser Technik

Grundsätzlich erfordert diese Technik einen Selektor passt nichts. Zu diesem Zweck haben wir bereits mit :not (*), aber Ihre Unterstützung ist auch begrenzt. Der universal-Selektor * unterstützt auch IE 7, in der Erwägung, dass das :nicht-pseudo-Klasse wurde nur implementiert, da IE 9, die somit die älteste browser, in denen dieses Konzept funktioniert. Ältere Browser ablehnen würden unsere Selektor-Gruppen für die falschen Grund — Sie unterstützen nicht :nicht! Alternativ könnten wir ein class-Selektor wie .foo oder einem Typ-Selektor, wie ” foo ” und unterstützt damit auch die meisten alten Browsern. Dennoch, diese machen den code schlechter lesbar, solange Sie nicht zu vermitteln, dass Sie sollten nie mit irgendetwas, und damit für die meisten modernen Websites, :keine(*) scheint die beste option.

Bei der Frage nach der Eigenschaft der Gruppen von Selektoren, die wir haben, zunutze hält auch in älteren Browsern, die das Verhalten zeigt ein Beispiel wie ein Teil der CSS-Abschnitt 1 auf vorwärts-kompatible parsing. Außerdem werden die CSS-2.1-Spezifikation dann explizit Mandate dieses Verhalten. Zu setzen das Alter dieser Spezifikation in Sicht, das ist die, eingeführt :hover. Kurz gesagt, während diese Technik noch nicht ausgiebig getestet in der die ältesten oder die meisten obskuren Browser, der Unterstützung sollte extrem breit.

Schließlich gibt es eine kleine Einschränkung für Sass Benutzer (Sass, nicht SCSS): auf die Begegnung mit der :kein (*): – Platzhalter-gezeigt selector, der compiler wird getäuscht durch den führenden Doppelpunkt, versucht zu analysieren, es als eine Eigenschaft, und bei der Begegnung mit dem Fehler, er berät die Entwickler zu entkommen, der Selektor etwa so: :kein (*): – Platzhalter-angezeigt, das sieht nicht sehr angenehm. Eine bessere Lösung ist vielleicht ersetzen der backslash mit einem weiteren universal-Selektor zu erhalten *:not(*):Platzhalter gezeigt werden, da, gemäß der Spezifikation, es wird angedeutet, jedenfalls in diesem Fall.