Hallo, wir sind zurück mit wöchentlichen Updates über die Browserlandschaft von Šime Vidas.
In der heutigen Ausgabe geht es um die CSS-Pseudoklasse :not, die komplexe Selektoren akzeptieren kann, wie man das sanfte Scrollen deaktiviert, wenn man in Chrome „Auf Seite suchen…“ verwendet, die Unterstützung von Safari für das media-Attribut bei <video>-Elementen und die lang erwartete Einführung der path()-Funktion für die CSS-Eigenschaft clip-path.
Tauchen wir in die Nachrichten ein...
Die erweiterte :not()-Pseudoklasse ermöglicht neue Arten von leistungsstarken Selektoren
Nach jahrelangem Warten wurde die erweiterte :not()-Pseudoklasse endlich in Chrome und Firefox veröffentlicht und wird jetzt in allen wichtigen Browser-Engines unterstützt. Diese neue Version von :not() akzeptiert komplexe Selektoren und sogar ganze Selektorlisten.
Sie können jetzt zum Beispiel alle <p>-Elemente auswählen, die sich *nicht* innerhalb eines <article>-Elements befinden.
/* select all <p>s that are descendants of <article> */
article p {
}
/* NEW! */
/* select all <p>s that are not descendants of <article> */
p:not(article *) {
}In einem anderen Beispiel möchten Sie vielleicht das erste Listenelement auswählen, das *nicht* das Attribut hidden hat (oder irgendein anderes Attribut). Der beste Selektor für diese Aufgabe wäre :nth-child(1 of :not([hidden])), aber die of-Notation wird immer noch nur in Safari unterstützt. Glücklicherweise kann dieser nicht unterstützte Selektor jetzt mit nur der erweiterten :not()-Pseudoklasse neu geschrieben werden.
/* select all non-hidden elements that are not preceded by a non-hidden sibling (i.e., select the first non-hidden child */
:not([hidden]):not(:not([hidden]) ~ :not([hidden])) {
}Der HTTP-Refresh-Header kann ein Barrierefreiheitsproblem darstellen
Der HTTP-Refresh-Header (und das entsprechende HTML-<meta>-Tag) ist ein sehr altes und weit unterstütztes nicht standardisiertes Feature, das den Browser anweist, die Seite nach einer bestimmten Zeit automatisch und periodisch neu zu laden.
<!-- refresh page after 60 seconds -->
<meta http-equiv="refresh" content="60">Laut Googles Daten wird das <meta http-equiv="refresh">-Tag bei einem satten 2,8 % aller Seitenaufrufe in Chrome verwendet (gegenüber 4 % vor einem Jahr). All diese Websites riskieren, mehrere Erfolgskriterien der Web Content Accessibility Guidelines (WCAG) nicht zu erfüllen.
Wenn das Zeitintervall zu kurz ist und es keine Möglichkeit gibt, das automatische Aktualisieren abzuschalten, haben blinde Menschen nicht genügend Zeit, ihre Screenreader die Seite lesen zu lassen, bevor die Seite unerwartet aktualisiert wird und der Screenreader wieder von vorne zu lesen beginnt.
WCAG erlaubt jedoch die Verwendung des <meta http-equiv="refresh">-Tags speziell mit dem Wert 0, um eine clientseitige Weiterleitung durchzuführen, falls der Autor den Server nicht kontrolliert und somit keine ordnungsgemäße HTTP-Weiterleitung durchführen kann.
Wie man das sanfte Scrollen für die Funktion „Auf Seite suchen…“ in Chrome deaktiviert
CSS scroll-behavior: smooth wird in Chrome und Firefox unterstützt. Wenn diese Deklaration auf das <html>-Element gesetzt wird, scrollt der Browser die Seite „auf sanfte Weise“. Dies gilt für Navigationen, die Standard-Scroll-APIs (z. B. window.scrollTo({ top: 0 })) und Scroll-Snapping-Operationen (CSS Scroll Snap).
Leider behält Chrome fälschlicherweise das sanfte Scrollen bei, auch wenn der Benutzer eine Textsuche auf der Seite durchführt („Auf Seite suchen…“-Funktion). Manche Leute empfinden das als nervig. Bis dies behoben ist, können Sie Christian Schaephers clevere CSS-Umgehung verwenden, die das sanfte Scrollen effektiv nur für die Funktion „Auf Seite suchen…“ deaktiviert.
@keyframes smoothscroll1 {
from,
to {
scroll-behavior: smooth;
}
}
@keyframes smoothscroll2 {
from,
to {
scroll-behavior: smooth;
}
}
html {
animation: smoothscroll1 1s;
}
html:focus-within {
animation-name: smoothscroll2;
scroll-behavior: smooth;
}Beachten Sie in der folgenden Demo, wie das Klicken auf die Links die Seite sanft scrollt, während die Suche nach den Wörtern „oben“ und „unten“ die Seite sofort scrollt.
Safari unterstützt weiterhin das media-Attribut bei Videoquellen
Mit dem HTML-<video>-Element ist es möglich, mehrere Videoquellen mit unterschiedlichen MIME-Typen und Kodierungen anzugeben. Dies ermöglicht es Websites, modernere und effizientere Videoformate in unterstützenden Browsern zu verwenden und gleichzeitig eine Fallback-Lösung für andere Browser bereitzustellen.
<video>
<source src="/flower.webm" type="video/webm">
<source src="/flower.mp4" type="video/mp4">
</video>Früher unterstützten Browser auch das media-Attribut bei Videoquellen. Eine Webseite konnte beispielsweise ein Video mit höherer Auflösung laden, wenn die Ansichtsfenstergröße des Benutzers einen bestimmten Wert überschritt.
<video>
<source media="(min-width: 1200px)" src="/large.mp4" type="video/mp4">
<source src="/small.mp4" type="video/mp4">
</video>Die obige Syntax wird heute tatsächlich immer noch in Safari unterstützt, wurde aber um 2014 aus anderen Browsern entfernt, da sie nicht als gutes Feature angesehen wurde.
Es ist nicht geeignet, um zwischen niedriger und hoher Auflösung zu wählen, da sich die Umgebung ändern kann (z. B. könnte der Benutzer das Video in Vollbildmodus schalten, nachdem es mit dem Laden begonnen hat, und dann eine hohe Auflösung wünschen). Außerdem sind Bandbreiteninformationen in Medienabfragen nicht verfügbar, aber selbst wenn sie es wären, ist der User Agent in einer besseren Position, um zu bestimmen, was angemessen ist, als der Autor.
Scott Jehl (Filament Group) argumentiert, dass die Entfernung dieses Features ein Fehler war und dass Websites responsive Videoquellen nur mit <video> ausliefern können sollten.
Für jedes Video, das wir in HTML einbetten, sind wir mit der Wahl konfrontiert, entweder Quellendateien zu liefern, die für viele Benutzergeräte potenziell zu groß oder zu klein sind ... oder auf kompliziertere serverseitige oder skriptbasierte oder Drittanbieterlösungen zurückzugreifen, um eine korrekte Größe zu liefern.
Scott hat einen Vorschlag zur Wiedereinführung von media in Video-<source>-Elementen verfasst und freut sich über Feedback.
Die CSS-clip-path: path()-Funktion wird in Chrome veröffentlicht
Sie wurde nicht im neuesten Artikel „Neu in Chrome 88“ erwähnt, aber Chrome hat gerade die path()-Funktion für die CSS-Eigenschaft clip-path veröffentlicht, was bedeutet, dass diese Funktion jetzt in allen drei großen Browser-Engines (Safari, Firefox und Chrome) unterstützt wird.
Die path()-Funktion ist im CSS Shapes-Modul definiert und akzeptiert einen SVG-Pfad-String. Chris bezeichnet dies als die ultimative Syntax für die clip-path-Eigenschaft, da sie ein Element mit „buchstäblich jeder Form“ ausschneiden kann. Hier ist zum Beispiel ein Foto, das mit einer Herzform ausgeschnitten ist
Schöne Neuigkeiten! Ein paar Anmerkungen. Die erste bezüglich des Beispiels mit der
:not-Pseudoklasse. Könnten wir dieses Beispiel nicht so umschreibenDas heißt, ohne den ersten
:not([hidden])-Selektor?Zum Beispiel für *besseres sanftes Scrollen* bin ich wieder etwas verwirrt, warum wir 2 Animationen brauchen. Wenn ich nichts übersehe, glaube ich, wir könnten es auf folgende Weise umschreiben
Das heißt, wir verwenden nur eine Animation und entfernen diese dann, wenn der Fokus innerhalb von
htmlliegt.Wenn ich den Selektor richtig verstehe, wählt
:not(:not([hidden]) ~ :not([hidden]))das gewünschte Element aus (das erste, das nicht versteckt ist), aber es wählt auch alle versteckten Elemente aus.Um also *nur* das erste nicht versteckte Element und nicht die versteckten Elemente auszuwählen, müssen wir den Selektor mit einem zusätzlichen
:not([hidden])davor weiter qualifizieren.Ich muss zugeben, ich verstehe nicht, wie die Umgehung funktioniert, aber ich habe Ihren Code (CodePen) getestet und das Scrollen ist für mich in Firefox nicht mehr sanft.
Vielen Dank, Šime, für Ihre Antwort.
Diese doppelte Negation ist gelinde gesagt immer noch ziemlich verwirrend.
Zum Beispiel, wenn dieser Selektor
ul > :not(:not([hidden]) ~ :not([hidden]))bedeutet, dass die Listenelemente, denen ein anderes Listenelement mit dem Attribut
hiddenvorangestellt ist und dass es weitere Listenelemente mit dem Attributhiddengibt, die folgen,warum wird dann das erste Listenelement in der Liste, dem kein Geschwisterelement mit dem Attribut
hiddenvorangestellt ist, ausgewählt?Was den
smooth-scroll-Trick angeht. Nach dem ersten Klick auf den Link „nach unten“ tun nachfolgende Klicks nichts mehr, d.h. die Seite scrollt nicht einmal mehr zum Seitenende.Das könnte ein Bug in FF sein.
Ich habe unter Windows 10, FF 85 getestet.
Ja, es ist ein bisschen wie Regex, mächtig, aber nicht leicht zu lesen.
Ich denke, eine gute Möglichkeit, herauszufinden, was dieser Selektor tut, ist, zuerst den inneren Teil zu betrachten. Was wählt
:not([hidden]) ~ :not([hidden])aus? Es wählt alle nicht ausgeblendeten Elemente aus, denen mindestens ein nicht ausgeblendetes Element vorangestellt ist. In meiner Demo wären das die 5., 6., 8. und 9. Elemente.Das äußere
:not()invertiert dies, was bedeutet, dass:not(:not([hidden]) ~ :not([hidden]))alle anderen Elemente auswählt: das 1., 2., 3., 4. und 7. Element.Wir wollen nur das 2. Element auswählen, das einzige nicht ausgeblendete in dieser Gruppe, daher fügen wir am Anfang des Selektors ein weiteres
:not([hidden])hinzu, um die ausgeblendeten Elemente auszuschließen.Bezüglich
smooth-scrollvermute ich, dass das Problem durch die Wrapper von CodePen verursacht wird. Wenn ich die Demo auf einer sauberen Seite öffne*, tritt das Problem nicht auf.*Es gibt die Option „Frame in neuem Tab öffnen“ in Firefox.
Wie sähe eine Selektorliste für den :not()-Selektor aus... so
?
Ja, eine kommaseparierte Liste von Selektoren.
Die Spezifität des Selektors wird durch das spezifischste Argument bestimmt. Wenn Sie also
.foo:not(.bar, #baz)schreiben, beträgt die Spezifität des gesamten Selektors 1 ID (#baz) + 1 Klasse (.foo), was ziemlich hoch ist.Außerdem, wenn eines der Argumente in der Liste vom Browser nicht unterstützt wird, wird der gesamte Selektor ignoriert. Zum Beispiel wird
.foo:not(.bar, :focus-visible)in Browsern, die:focus-visiblenicht unterstützen, ignoriert.