検索

Web 機能を理解する

Sep 18, 2024 pm 02:47 PM

Making sense of Web features

ウェブには膨大な量の機能があります。ブラウザ互換性データ プロジェクトには、14000 を超えるそれらがリストされています。すべてを理解するにはどうすればよいでしょうか?

これは長い間答えられていない質問です。はい、すべての Web 開発者は caiuse.com を使用しています。あるいは、Google で調べたり、chatgpt に質問したりすることもあります。問題は、これらのツールには特定の質問に対する答えはあるものの、全体像や真実の情報源へのリンクが欠けていることです。

WebDXグループ

もうだめ! WebDX グループは現在、Web プラットフォーム周りの物事を整理し、分類し、名前を付けるという素晴らしい仕事をしています (← これはご存知のとおり、これが難しい部分です)。彼らは、連携した方法で Web とブラウザの全体的な開発者エクスペリエンスを向上させようとしています。

WebDX は、W3C の一部であるコミュニティ グループです。彼らがリポジトリで何を調理しているのかを見ることができます。私にとって最も興味深い出力は、Web 機能リポジトリです。彼らが行ったことは、膨大な量の特定の機能を、より理解しやすい高レベルの機能のセットに分類することです。

たとえば、新しく利用可能になった機能の 1 つは メソッドの設定 です。セットを操作するための新しい方法はすべて、単一の機能である可能性があります。ただし、単一の高レベルの機能として伝達および文書化すると、さらに便利になります。

ドキュメント

もう 1 つの部分は、機能 に関する詳細情報を見つける方法です。さて、ここで Open Web Docs イニシアチブが登場しました。MDN は常に優れたリファレンスですが、実践的なコンテンツが不足していました。 Open Web Docs グループは、この状況を変えようとしています。彼らは、基礎となるデータである BCD (Browser Compat Data) の更新だけでなく、MDN Web ドキュメントの新しいチュートリアル、ガイド、解説を大量に作成しています。

一例として、相対色に関する MDN のページがあります。これは、高レベルの Web 機能に明確にマッピングされています。各色の特徴の個別のリファレンス ページよりも、その特徴に関する理解とコンテキストがはるかにわかりやすくなります。

調査

上記の取り組みで本当に素晴らしいのは、彼らが本当に協力したいと考えていることです。 The State of HTML や The State of CSS などの調査から情報を取得し、後で Web 機能に同じ名前のセットを使用して、それらに関する調査結果を追跡できます。

ところで、これらのアンケートに記入しているときに、「閲覧リストに追加」ボタンをクリックすることができます。 MDN へのリンクが表示され、あなたが知らなかったことについてさらに詳しく知ることができます。

現実

素晴らしいことですが、Web は改善されていますか?いや、その通りです!

ブラウザー間で必要な機能と実際の可用性との間のギャップを埋めるための取り組みは明らかです。つまり、Interop プロジェクトは、一連の機能がすべての主要なブラウザーに可能な限り完全に実装されることを保証します。このプロジェクトは毎年新たに実施されます。

これらの機能がどの程度、どの程度うまく実装されているかは、Web プラットフォーム テストを使用して測定されます。同じ一連のテストがすべてのブラウザに対して実行されます。そのため、ブラウザーの機能の実際の状態を反映するこのような優れたパーセンテージが得られます。

ベースライン

すべての主要ブラウザに機能が実装される瞬間は非常に重要です。そして、上で説明したように機能を適切にグループ化したので、現時点で不足しているのは名前だけです。そして、それができました: 機能はベースラインであり、すべての主要なブラウザーでサポートされている場合に新たに利用可能になります。そして、ある機能は、新たに利用可能になってから 2 年半が経過した時点で広く利用可能になりました。

ベースラインのアイデアは Google によって開始されたものであるため、web.dev で詳細を読むことができます。

ビジュアルダッシュボード

より視覚的な方法で見ることができると、すべてがより意味を持ち始めます。うまくデザインされた表、グラフ、そこにあるリソースへの便利なリンク…

これは、便利なダッシュボードを作成するためのいくつかの試みにまとめられています。それぞれをチェックしてください。それぞれがこの主題について異なる見方をしています:

  • WebDX グループの背後にいる人々によるシンプルなダッシュボード
  • Google Chrome チームによる機能ごとの Web プラットフォーム テストの合格に関する素晴らしいグラフ
  • そして、よりインタラクティブなバージョンを作成するという私の試み

これらを時々使用して、一般的な新機能や広範な導入状況の新機能を把握することができます。また、新しいプロジェクトを開始し、どの機能セットが実際に利用可能で十分にサポートされているかを判断するときにも役立ちます。

Making sense of Web features
Web 機能エクスプローラーは情報をわかりやすく表示します

Making sense of Web features
Webstatus.dev は、合格した Web プラットフォーム テストに関する機能の実際の進捗状況をグラフで表示します

Making sense of Web features
「Web プラットフォーム機能」ダッシュボードでは、機能のフィルタリングと並べ替えが可能です

未来

最近、いくつかの機能がすべてのブラウザにかなり早く実装されました。ただし、一部のブラウザ メーカーによっては、良いアイデアとさえみなされないものもあります。何が提供されるか、または提供されない可能性があるかについての詳細情報は、次のサイトで見つけることができます:

  • Mozilla 標準の立場
  • Webkit チームの標準ポジション
  • Google Chrome 機能ロードマップ

結論

Web プラットフォームが進化するのを見るのは興味深いことです。フィードバックループは改善されています。多くの分野で相互運用性が向上しています。

長い間、Web 機能を備えた便利なダッシュボードが欲しいと思っていましたが、突然データの品質が非常に高くなったため、数晩で独自のダッシュボードを構築することができました。

以上がWeb 機能を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
cohost.orgの失われたCSSトリックcohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AM

この投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。

カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee'の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG'の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind'の@Apply機能は、響きよりも優れていますTailwind'の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind'の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール