Wöchentliche Plattform-Nachrichten: CSS ::marker Pseudo-Element, Pre-Rendering von Web Components, Webmention zu Ihrer Website hinzufügen

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

In der dieswöchigen Zusammenfassung: Datepicker bereiten Tastaturnutzern Kopfzerbrechen, ein neuer Web-Component-Compiler hilft gegen FOUC, wir können endlich Listenpunktmarkierungen gestalten, und vier Schritte, um Webmentions auf Ihrer Website einzurichten.

Verwendung von einfachen Textfeldern für die Datumseingabe

Tastaturnutzer bevorzugen einfache Textfelder gegenüber komplexen Datepickern, und Sprachnutzer sind frustriert von der nativen Steuerung (<input type="date">).

Zuvor habe ich für die Datumseingabe einfache Textfelder mit benutzerdefinierter Validierung für die Website verwendet, typischerweise mit der gleichen Logik auf Client- und Serverseite. Für bekannte Daten – Geburtstage, Feiertage, Jahrestage usw. – hat sich dies gut bewährt.

(via Adrian Roselli)

Pre-Rendering von Web Components

Stencil ist ein „Web Component Compiler“, der zum Pre-Rendering von Web Components (einschließlich Shadow DOM) oder zum Ausblenden bis sie vollständig gestylt sind verwendet werden kann, um den Flash of Unstyled Content (FOUC) zu vermeiden.

Dieses Tool stellt außerdem sicher, dass Polyfills nur bei Bedarf geladen werden, und seine Component API enthält nützliche Decorators und Hooks, die das Schreiben von Web Components erleichtern (z. B. behandelt der Prop Decorator Änderungen an Attributen).

import { Component, Prop, h } from "@stencil/core";

@Component({
  tag: "my-component"
})
export class MyComponent {
  @Prop() age: number = 0;

  render() {
    return <div>I am {this.age} years old</div>;
  }
}

(via Max Lynch)

Das CSS ::marker Pseudo-Element

Wenn die CSS-Deklaration display: list-item auf ein Element angewendet wird, generiert das Element eine Markierungsbox, die eine Markierung enthält, z. B. einen Listenpunkt (die Elemente <li> und <summary> haben standardmäßig Markierungen).

Markierungen können über das ::marker-Pseudo-Element gestylt werden (nützlich zum Ändern der Farbe oder Schriftart der Markierung), aber diese CSS-Funktion wird derzeit nur in Firefox unterstützt.

(via Rachel Andrew)

Webmention zu Ihrer Website hinzufügen

1. Melden Sie sich bei Webmention.io an; dies ist ein Dienst, der Webmentions in Ihrem Namen sammelt.
2. Fügen Sie <link rel="webmention"> (mit dem entsprechenden href-Wert) zu Ihren Webseiten hinzu.

   Es gibt auch Webmention-Plugins für alle wichtigen Content-Management-Systeme (CMS), wenn Sie lieber auf Ihrem CMS aufbauen möchten.

3. Rufen Sie Webmentions von Webmention.io (via Ajax) ab, um sie auf Ihrer Seite anzuzeigen.
4. Verwenden Sie webmention.app, um das Senden von Webmentions zu automatisieren (wenn Sie Inhalte veröffentlichen, die Links zu anderen Seiten enthalten, die Webmention unterstützen).

(via Daniel Aleksandersen)