毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加

šimeの毎週のWebプラットフォームニュースは、開発者向けの洞察に満ちた更新を提供します。今週のハイライトには、Date Pickersのキーボードアクセシビリティの問題、FOUCのスタイリングリストのアイテムマーカー、Webメントを追加するための簡単なガイドがあります。

日付入力アクセシビリティの懸念

標準のテキストフィールドは、複雑なデートピッカーよりもキーボードユーザーが好む。スクリーンリーダーのユーザーは、ネイティブの日付コントロールで課題も発生します。カスタム検証付きのプレーンテキスト入力は、よりアクセスしやすいソリューションを提供します。

クライアント側とサーバー側の検証により、日付のプレーンテキスト入力の優先順位付けは、特に誕生日のような既知の日付に対して効果的であることが証明されています。

（Adrian Roselli経由）

ステンシルを使用したWebコンポーネントの合理化

Webコンポーネントコンパイラであるステンシル、プレレンダーコンポーネント（シャドウDOMを含む）、またはスタイリングが完了するまでレンダリングを遅らせ、FOUC（スタイルのないコンテンツのフラッシュ）を防ぎます。ポリフィルロードを最適化し、開発者に優しいコンポーネントAPIを役立つデコレーターとフックで提供します。

 "@stencil/core"から{component、prop、h}をインポートします。

@成分（{
  タグ：「私の成分」
}）
MyComponentをエクスポートする{
  @prop（）age：number = 0;

  与える（） {
    戻る<div>私は{this.age}の前です</div>;
  }
}

（マックスリンチ経由）

CSS ::マーカーを備えたスタイリングリストアイテムマーカー

::marker擬似エレメントは、 display: list-itemが使用される場合、リストアイテムマーカー（箇条書き、数字）のスタイリングを可能にします。現在、Firefoxは完全なサポートを備えた主要なブラウザです。

（レイチェルアンドリュー経由）

4つのステップでウェブメントを実装します

サイトにウェブメントを追加すると、エンゲージメントとインタラクションが強化されます。

1. 登録： webmention.io（ウェブメント受信サービス）にアカウントを作成します。
2. リンクタグを追加：含める<link rel="webmention" href="%5Byour-webmention-endpoint%5D">HTMLで。 CMSプラグインも利用できます。
3. フェッチWebMentions： ajaxを使用して、webmention.ioからウェブメントを取得して表示します。
4. 自動送信： WebMention.Appを使用して、他のWebMention対応サイトへのリンクを使用してコンテンツを公開するときにWebMentionsの送信を自動化します。

（ダニエル・アレクサンダーセン経由）

以上が毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。