In this week’s roundup, WebKit’s prefixed autofill becomes a standard, the pointer cursor is for more than just links, and browsers are jumping on board to delay videos set to autoplay until they’re in view… plus more! Let’s jump right into it.
CSS ::-webkit-autofill ist zu einer Standardfunktion geworden
Chrome, Safari und praktisch alle anderen modernen Webbrowser außer Firefox (mehr dazu später) unterstützen seit vielen Jahren die CSS :-webkit-autofill Pseudoklasse. Dieser Selektor passt auf Formularfelder, die vom Browser automatisch ausgefüllt wurden. Websites können diese Funktion nutzen, um automatisch ausgefüllte Felder in CSS zu stylen (mit einigen Einschränkungen) und solche Felder in JavaScript zu erkennen.
let autofilled = document.querySelectorAll(":-webkit-autofill");Derzeit gibt es kein standardmäßiges autocomplete- oder autofill-Ereignis, das ausgelöst wird, wenn der Browser ein Formularfeld automatisch ausfüllt. Sie können jedoch auf das input-Ereignis im Webformular hören und dann prüfen, ob eines seiner Felder mit dem :-webkit-autofill-Selektor übereinstimmt.
Der HTML-Standard hat diese Funktion nun standardisiert, indem :autofill (und :-webkit-autofill als Alias) zur Liste der Pseudoklassen hinzugefügt wurde, die mit HTML-Elementen übereinstimmen. Diese Pseudoklasse wird auch dem CSS Selectors-Modul hinzugefügt.
Die Pseudoklassen
:autofillund:-webkit-autofillmüssen mit<input>-Elementen übereinstimmen, die vom User-Agent automatisch ausgefüllt wurden. Diese Pseudoklassen müssen die Übereinstimmung beenden, wenn der Benutzer das automatisch ausgefüllte Feld bearbeitet.
Nach der Standardisierung wurden beide Pseudoklassen in Firefox implementiert und werden voraussichtlich noch in diesem Monat in Firefox 86 veröffentlicht.
Sie können CSS Grid verwenden, um Abstände in Schaltflächen und Links zu definieren
In dem Artikel „Lassen Sie uns Spacer-GIFs wieder einführen!“ argumentiert Josh W. Comeau dafür, ein „Spacer“-<span>-Element anstelle eines einfachen CSS-Margins zu verwenden, um den Abstand zwischen dem Icon und dem Text einer Schaltflächenkomponente zu definieren.
In unserem Home-Button-Beispiel, soll der Abstand am Rückwärtspfeil oder am Text liegen? Mir scheint nicht, dass ein Element den Platz „besitzen“ sollte. Es ist eine eigenständige Layout-Angelegenheit.
CSS Grid ist eine Alternative zu solchen Spacer-Elementen. Zum Beispiel enthält der Link „Link zur Ausgabe“ im Newsletter-Bereich von CSS-Tricks zwei nichtbrechende Leerzeichen ( ), um den Abstand zwischen dem Emoji-Zeichen und dem Text zu vergrößern. Der Link könnte stattdessen in ein einfaches Grid-Layout umgewandelt werden, um eine feinere Kontrolle über den Abstand über die gap-Eigenschaft zu erhalten.
Websites sind sich einig, dass der Zeiger-Cursor nicht nur für Links gedacht ist
Das CSS Basic User Interface-Modul definiert die CSS cursor-Eigenschaft, die es Websites ermöglicht, die Art des Cursors zu ändern, der angezeigt wird, wenn der Benutzer über bestimmte Elemente fährt. Die Spezifikation sagt Folgendes über den pointer-Wert der Eigenschaft:
Der Cursor ist ein Zeiger, der einen Link anzeigt. … User Agents müssen
cursor: pointerfür Hyperlinks anwenden. … Autoren solltenpointerfür Links verwenden und können es für andere interaktive Elemente verwenden.
Dementsprechend zeigen Browser den pointer-Cursor (dargestellt als Hand) bei Links und den default-Cursor (dargestellt als Pfeil) bei Schaltflächen an. Die meisten Websites (einschließlich Wikipedia) stimmen jedoch nicht mit diesem Standardstil überein und wenden cursor: pointer auch auf andere interaktive Elemente wie Schaltflächen und Kontrollkästchen an.
Ein weiteres interaktives Element, für das es Sinn ergibt, den pointer-Cursor zu verwenden, ist das <summary>-Element (der „Toggle-Button“ zum Öffnen und Schließen des übergeordneten <details>-Elements).
Browser verzögern autoplay, bis das Video sichtbar wird
Im Vergleich zu modernen Videoformaten sind animierte GIF-Bilder bis zu „doppelt so energieintensiv“. Aus diesem Grund haben die Browser ihre Video-Autoplay-Richtlinien (vor einiger Zeit) gelockert, um Websites zu ermutigen, von GIFs auf stumme oder lautlose Videos umzusteigen.
<!-- a basic re-implementation of a GIF using <video> -->
<video autoplay loop muted playsinline src="meme.mp4"></video>Wenn Sie <video muted autoplay> verwenden, machen Sie sich keine Sorgen um das Pausieren solcher Videos, wenn sie nicht mehr im Viewport sichtbar sind (z. B. mit einem Intersection Observer). Alle wichtigen Browser (außer Firefox) führen diese Optimierung bereits standardmäßig durch.
<video autoplay>-Elemente beginnen erst zu spielen, wenn sie auf dem Bildschirm sichtbar sind, z. B. wenn sie in den Viewport gescrollt, durch CSS sichtbar gemacht oder in das DOM eingefügt werden.
Chrome führt drei neue @font-face-Deskriptoren ein
Unterschiedliche Browser und Betriebssysteme verwenden manchmal unterschiedliche Schriftmetriken, selbst wenn sie dieselbe Schriftart rendern. Diese Unterschiede wirken sich auf die vertikale Position von Text aus, was besonders bei großen Überschriften auffällt.
Ebenso können die unterschiedlichen Schriftmetriken einer Webfont und ihrer Fallback-Schriftart zu einem Layout-Shift führen, wenn die Schriften während des Seitenladens ausgetauscht werden.
Um Websites dabei zu helfen, Layout-Shifts zu vermeiden und interoperable Textlayouts zu erstellen, hat Chrome kürzlich die folgenden drei neuen CSS @font-face-Deskriptoren hinzugefügt, um die Standardmetriken der Schriftart zu überschreiben:
ascent-override(Anstieg ist die Höhe über der Grundlinie)descent-override(Abstieg ist die Tiefe unter der Grundlinie)line-gap-override
@font-face {
font-family: Roboto;
/* Merriweather Sans has 125.875px ascent
* and 35px descent at 128px font size.
*/
ascent-override: calc(125.875 / 128 * 100%);
descent-override: calc(35 / 128 * 100%);
src: local(Roboto-Regular);
}Das folgende Video zeigt, wie das Überschreiben der Anstiegs- und Abstiegsmetriken der Fallback-Schriftart (Roboto), um die gleichen Metriken wie die Webfont (Merriweather Sans) zu erhalten, Layout-Shifts beim Wechsel zwischen diesen beiden Schriften vermeiden kann.