Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your site

Šime's weekly web platform news delivers insightful updates for developers. This week's highlights include keyboard accessibility issues with date pickers, a new web component compiler tackling FOUC, styling list item markers with CSS, and a straightforward guide to adding Webmentions.

Date Input Accessibility Concerns

Standard text fields are preferred by keyboard users over complex date pickers; screen reader users also experience challenges with native date controls. Plain text inputs with custom validation offer a more accessible solution.

Prioritizing plain text inputs for dates, with client-side and server-side validation, has proven effective, especially for known dates like birthdays.

(via Adrian Roselli)

Streamlining Web Components with Stencil

Stencil, a web component compiler, pre-renders components (including Shadow DOM) or delays rendering until styling is complete, preventing FOUC (Flash of Unstyled Content). It optimizes polyfill loading and provides a developer-friendly Component API with helpful decorators and hooks.

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)

Styling List Item Markers with CSS ::marker

The ::marker pseudo-element allows styling of list item markers (bullets, numbers) when display: list-item is used. Currently, Firefox is the primary browser with full support.

(via Rachel Andrew)

Implementing Webmentions in Four Steps

Adding Webmentions to your site enhances engagement and interaction:

1. Register: Create an account on Webmention.io (a webmention receiving service).
2. Add Link Tag: Include <link rel="webmention" href="%5Byour-webmention-endpoint%5D"> in your HTML. CMS plugins are also available.
3. Fetch Webmentions: Use Ajax to retrieve webmentions from Webmention.io for display.
4. Automate Sending: Employ webmention.app to automate sending webmentions when publishing content with links to other Webmention-enabled sites.

(via Daniel Aleksandersen)

The above is the detailed content of Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your site. For more information, please follow other related articles on the PHP Chinese website!