ホームページ >ウェブフロントエンド >CSSチュートリアル >目を落とす'
Chromeブラウザと関連するブラウザは、 EyeDropper
というWebページAPIを追加しており、Web開発者は画面上の任意の場所でカラー値を簡単に取得できます。
次のコードスニペットは、APIの使用方法を示しています。
if( 'eedropper' in Window){ const eyedropper = new Eyedropper(); 試す { //これには、const result = awaiteedropper.open()をトリガーするにはユーザーインタラクションが必要です。 const colorhexvalue = result.srgbhex; } catch(err){ //ユーザーキャンセルカラーピックアップ} }
このAPIは現在、Chromeおよび関連するブラウザのみをサポートしています。開発プロセスはEdgeブラウザから始まり、後にコミュニティグループによって議論されレビューされ、最終的にChromeで発売されました。 Chromeはプロセスで主導的な役割を果たしていますが、全体としては、特にEyeDropper
が比較的マイナーな機能であることを考えると、それは肯定的なケースです。
EyeDropper
APIの利点は、画面全体から色を拾うことができることです。これにより、Figmaなどのデザインツールのユーザーエクスペリエンスが大幅に向上し、キャンバス内に制限されているカラーピックアップの欠点を補います。 Slides.comやPolypaneなどのアプリケーションは、APIを生産環境に適用し、ユーザーエクスペリエンスを改善しています。さらに、対応するクロム拡張機能とブックマークレットも登場しました。
EyeDropper
APIを使用してユーザーエクスペリエンスを強化し、進行性の強化を実現しながら、アクセス可能なシステムカラーセレクターボタンを提供することをお勧めします。 これは、スタンドアロンのWebコンポーネントとして開発できます。
以上が目を落とす'の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。