Wöchentliche Plattform-Nachrichten: Mozillas AV1-Encoder, Samsung One UI CSS, DOM Matches Methode

Šime veröffentlicht regelmäßig Inhalte für Webentwickler auf webplatform.news.

In der dieswöchigen Zusammenfassung arbeiten Vimeo und Mozilla bei einem Video-Encoding-Format zusammen, wie man Anweisungen mit Aria-Labels an Formularfelder bindet, das DOM hat eine passende Funktion und Samsung arbeitet an seiner eigenen CSS-Bibliothek.

---

Vimeo arbeitet mit Mozilla zusammen, um deren rav1e-Encoder zu nutzen

Vittorio Giovara: AV1 ist ein lizenzfreier Videocodec, der von der Alliance for Open Media entwickelt wurde und der am meisten erwartete Nachfolger von H.264 ist. Vimeo trägt zur Entwicklung des AV1-Encoders von Mozilla bei.

Damit AV1 erfolgreich sein kann, ist ein Encoder wie x264 erforderlich, ein kostenloser und Open-Source-Encoder, der von der Community für die Community geschrieben und für jedermann zugänglich ist: rav1e. Vimeo glaubt an das, was Mozilla tut.

Verwenden Sie aria-describedby, um Anweisungen an Formularfelder zu binden

Raghavendra Satish Peri: Wenn Sie zusätzliche Anweisungen für ein Formularfeld bereitstellen, verwenden Sie das Attribut aria-describedby, um die Anweisung an das Feld zu binden. Andernfalls könnten Benutzer von assistiven Technologien, die die Tabulatortaste verwenden, diese Informationen verpassen.

<label for="dob">Date of Birth</label>
<input type="text" aria-describedby="dob1" id="dob" />
<span id="dob1">Use DD/MM/YY</span>

Samsung Internet kündigt One UI CSS an

Diego González: Samsung entwickelt experimentell eine CSS-Bibliothek, die auf seiner neuen One UI-Designsprache basiert. Die Bibliothek heißt One UI CSS und enthält Stile für gängige Formularsteuerelemente wie Schaltflächen, Menüs und Schieberegler sowie andere Assets (Web-Schriften, SVG-Icons, Polyfills).

DOM-Elemente haben eine matches-Methode

Sam Thorogood: Sie können die Methode matches verwenden, um zu testen, ob ein DOM-Element eine bestimmte CSS-Klasse, ein bestimmtes Attribut oder einen bestimmten ID-Wert hat. Diese Methode akzeptiert einen CSS-Selektor und gibt true zurück, wenn das Element mit dem angegebenen Selektor übereinstimmt.

el.classList.has('foo')  /* becomes */ el.matches('.foo');
el.hasAttribute('hello') /* becomes */ el.matches('[hello]');
el.id === 'bar'          /* becomes */ el.matches('#bar');