Wöchentliche Plattform News: CSS :: Marker Pseudo-Element, Vorrendern von Webkomponenten, Hinzufügen von Webmenting zu Ihrer Website

Die wöchentlichen Webplattform -Nachrichten von Šime liefert aufschlussreiche Updates für Entwickler. Zu den Highlights dieser Woche gehören Probleme mit der Zugriffbarkeit von Tastaturen mit Datumspickern, einem neuen Webkomponenten -Compiler, der sich mit Fouc, Styling -List -Elementmarkierungen mit CSS und einer einfachen Anleitung zum Hinzufügen von Webmentionen befasst.

Date Input Barrierefreiheit Bedenken

Standardtextfelder werden von Tastaturbenutzern gegenüber komplexen Datumspickern bevorzugt. Benutzer von Bildschirmleser haben auch Herausforderungen mit nativen Datumsregelungen. Einheitliche Texteingaben mit benutzerdefinierter Validierung bieten eine besser zugängliche Lösung.

Die Priorisierung von Klartexteingaben für Daten mit clientseitiger und serverseitiger Validierung hat sich als effektiv erwiesen, insbesondere für bekannte Daten wie Geburtstage.

(über Adrian Roselli)

Staffeln von Webkomponenten mit Schablonen

STENCIL, ein Webkomponenten-Compiler, Pre-Renders-Komponenten (einschließlich Shadow DOM) oder Verzögerungen des Renders bis zum Abschluss des Stylings, die Fouc (Flash von unklarem Inhalt) verhindern. Es optimiert Polyfill-Belastung und bietet eine Entwickler-freundliche Komponenten-API mit hilfreichen Dekoratoren und Haken.

 importieren {component, prop, h} aus "@schablisch/core";

@Komponente({
  Tag: "My-Component"
})
Exportklasse MyComponent {
  @Prop () Alter: Nummer = 0;

  render () {
    zurückkehren<div> Ich bin {this.age} Jahre alt</div> ;
  }
}

(über Max Lynch)

Elementmarkierungen für Stylinglisten mit CSS :: Marker

Das ::marker -Pseudo-Element ermöglicht das Styling von Listenelementmarkierungen (Kugeln, Zahlen), wenn display: list-item verwendet. Derzeit ist Firefox der primäre Browser mit voller Unterstützung.

(über Rachel Andrew)

Implementierung von Webmentionen in vier Schritten

Durch das Hinzufügen von Webments zu Ihrer Website verbessert sich das Engagement und die Interaktion:

1. Registrieren: Erstellen Sie ein Konto auf Webmention.io (ein Webmention -Empfangsdienst).
2. Link -Tag hinzufügen: integrieren<link rel="webmention" href="%5Byour-webmention-endpoint%5D"> In deinem HTML. CMS -Plugins sind ebenfalls erhältlich.
3. Fetch Webmentions: Verwenden Sie AJAX, um Webmentions von Webmention.io abzurufen.
4. Senden automatisieren: Verwenden Sie Webmention.app, um das Senden von Webmentionen zu automatisieren, wenn Inhalte mit Links zu anderen Webmention-fähigen Websites veröffentlicht werden.

(über Daniel Aleksandersen)

Das obige ist der detaillierte Inhalt vonWöchentliche Plattform News: CSS :: Marker Pseudo-Element, Vorrendern von Webkomponenten, Hinzufügen von Webmenting zu Ihrer Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!