數(shù)年前、私はWebコンポーネントについて多くのことを聞き始めました。私はかなり興奮し、ノイズが落ち著くと完全に忘れてしまいました。いくつかの良い動きがあり、サポートが増加し始めていることがわかりました。特に、レスポンシブWebコンポーネントは、レスポンシブデザインにどのようにアプローチするかを単純化するように設(shè)定されています。これは有望なことに、多くの開発者が今日それらの使用を開始する前に知りたいと思う4つの質(zhì)問があります：

彼らは…

になります

• Webの現(xiàn)在の狀態(tài)に適合しますか？
• ワーククロスブラウザ？
• それらがドロップされるスペースに合わせて適応しますか？
• モジュラーコードを宣伝しますか？

この記事では、これらの質(zhì)問のそれぞれに対する答えを調(diào)べます！

キーテイクアウト

Webコンポーネントは、開発者が獨(dú)自のHTML要素を構(gòu)築できるようにするW3仕様です。ブラウザにネイティブに存在しないUI要素を作成したり、ソーシャルボタンなどの一般的に使用しているコンポーネントをバンドルしたり、フォームをカプセル化されたモジュールに購読したりすることができます。 。
レスポンシブWebコンポーネントは、メディアクエリ、フレックスボックス、要素クエリ、屬性などの手法を使用して、より柔軟で順応性を高めることができます。これらの手法により、コンポーネントはさまざまな畫面サイズとコンテキストに合わせて調(diào)整できるようになり、本當(dāng)に応答します。
• Webコンポーネントを使用すると、各コンポーネントに単一の真実のソースを備えたライブラリを作成し、コードの繰り返しを削減し、他の開発者またはWebサイトの所有者とコンポーネントを共有できるようになります。このアプローチはモジュラーコードを促進(jìn)し、レスポンシブデザインへのアプローチを簡素化します。
• Webコンポーネントは何ですか？

本質(zhì)的に、それらは獨(dú)自のHTML要素を構(gòu)築できるW3仕様です。文字通りそれらについて何も知らない場合、記事で使用している用語のいくつかが基本的な理解が必要であるため、それらについて簡単に読む価値があるかもしれません。

なぜそれらを使用したいのですか？

Webコンポーネントを使用したい場合の良い例は、カラーピッカー、カルーセル、アコーディオン、タイプヘッドなどの要素など、ブラウザにネイティブに存在しないUIを構(gòu)築している場合です。または、毎回再構(gòu)築するのにうんざりしているさまざまなサイトで常に使用するコンポーネントがいくつかある可能性があります。これらは、ソーシャルボタン、購読フォーム、または通知などです。 Webコンポーネントを使用すると、 などのHTMLタグを使用して、マークアップ、スタイル、およびスクリプトをカプセル化されたモジュールにバンドアップして參照できます。これは、Angular DirectivesまたはReactコンポーネントを使用した場合は馴染みのあるように思えますが、ここでの利點(diǎn)は、ブラウザとフレームワークの不可知論者に自生していることです。

Webコンポーネントを使用すると、UIの斷片を1回構(gòu)築し、どこでも使用できます。これは、各コンポーネントに単一の真実のソースを備えたライブラリを構(gòu)築したいリビングスタイルガイドのようなプロジェクトに最適です。このアプローチは、コードを繰り返し、あなたまたはあなたのチームがあなたのインターフェイスに參照を単純にドロップできるポータブルコンポーネントを持つことを意味します。

Webコンポーネントを使用するもう1つの大きな利點(diǎn)は、これらのコンポーネントをパッケージ化し、他の開発者またはWebサイトの所有者と共有することができることです?；镜膜恕⑾M(fèi)者は次のようなインポートステートメントをWebページに配置できます。

次に、そのコンポーネントで定義したカスタム要素タグを使用します。これがWebページにインポートされているため、ページ上にカスタムコンポーネントのインスタンスが必要な限り多くのインスタンスを作成できます。購読フォームの例では、ページの複數(shù)の場所でタグ を使用できます。もちろん、これを行っている場合は、作成した美しいコンポーネントが非常に柔軟であり、さまざまなデバイスと畫面サイズで動作することを確認(rèn)する必要があります。

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

これらの悪い男の子をレスポンシブなWebコンポーネントに変えます

デモンストレーションの最良の方法は例であると感じているので、異なるサイトと実裝の間であまり変わらないUIの一般的な部分であるサブスクライブフォームを続けます。

以前に作ったものです：

私のWebコンポーネントテンプレート內(nèi)には、フォームの基本的なマークアップがあります。

私のマークアップとCSSは、仕様のシャドードム部分を使用してコンポーネント內(nèi)に押し出されています。これにより、カプセル化が得られ、他のスタイルが出血したり、親サイトに出血したりすることを心配することなく、コードでラベルセレクターと入力を使用できます。 明確さと簡潔さのために、私はレイアウトに使用されるもの以外のスタイルを書き出すつもりはありません。 Float：left and Display：Table：Tableの組み合わせを使用して、このレイアウトを?qū)g現(xiàn)して、幅の破損を防ぎます。

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

デモとしてHTMLインポートを使用してSitePointサイトに引き込みます：

私たちはすべてセットアップされています、いくつかの応答性のあるテクニックを見てみましょう。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

メディアクエリ

私たちが知っていて愛する古典的なアプローチは、まだ生きており、レスポンシブなWebコンポーネントの中でうまくいっています。いくつかのブレークポイントで焼きたい場合は、コンポーネントをコーディングするときにテンプレート內(nèi)に適用できます。または、その決定を消費(fèi)者に任せたい場合は、コンテナにフック（クラスを使用して）を適用できます。この場合、私たちがする必要があるのは、フロートを剝ぎ取り、それらを完全な幅に調(diào)整することだけです。

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

しかし、メディアのクエリは今回私たちを救うのに十分ではありません。

サインアップフォームスタイルに満足しており、體內(nèi)では正常に機(jī)能しますが、ウェブサイトの著者がサイドバーにチャックしたいときはどうなりますか？突然、私のフォームは押しつぶされているように見え、実際には使用できません。

これは、コンポーネントがその境界を認(rèn)識していないためです。コンテキストがありません。

Webコンポーネントの全體的なポイントは、どこにでもドロップできることです。したがって、明らかにこれはしませんが、コンポーネントが応答性があり文脈的であることを保証するために使用できるいくつかのテクニックがあります。

FlexBox Trickery

Webコンポーネントの使用を検討している場合、オッズは最新のブラウザのみをサポートしており、IE9を心配していない場合、その場合、FlexBoxマジックの少しはこれらをレスポンシブWebコンポーネントに変えるのに最適かもしれません。追加のJavaScriptを必要としないため、これは私の好みのアプローチです。

もう一度、ここのコードサンプルは、私が使用したレイアウトスタイルを純粋に示しています：

容器を表示するように設(shè)定して表示します。Flex;フレックスラップ：ラップ、.form__item要素は並んで表示されますが、コンテナが小さくなりすぎるとうまくスタックするように、いくつかの調(diào)整を行う必要があります。 .form__itemの內(nèi)部では、フレックスのフレックスの速記を使用しました：1 0 320px;これは、1つの成長、ゼロのフレックスシュリンク、および320ピクセルのフレックス基底に変換されます。フレックスラップをラップに設(shè)定することは、設(shè)定された基礎(chǔ)（320px）よりも小さくないことを意味しますが、それをフレックスに設(shè)定することは、利用可能なスペースの殘りの部分を占めることを意味します。

ラベル要素と入力要素に同様の処理をしました。それらの組み合わせたフレックス値は合計(jì)320です。つまり、それらはより小さなコンテナサイズで望ましいように振る舞うことを意味します。

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

これらの調(diào)整を適切に配置すると、SitePointのサイドバーで同じ形式を見てみましょう。

ずっと良く！しかし、貓を皮を剝ぐ方法は複數(shù)あります。

要素クエリ

要素クエリのアイデアは、メディアクエリタイプの機(jī)能をエミュレートできるが、コンポーネントレベルで、レスポンシブWebコンポーネントに非常に便利だということです。基本的に、あなたのCSSでこのようなことを書くことができると想像してください：

要素クエリを使用して、まさに私たちにできることです。かなり強(qiáng)力な権利？

殘念ながら、ブラウザベンダーが無限のループを引き起こす可能性に関心があるため、この手法はネイティブに利用できません。ただし、一部の賢い人は、この機(jī)能を有効にするためのプラグインを書いています。私の例では、Marc J SchmidtによるCSS要素クエリを使用しました。これは本當(dāng)に素晴らしい実裝です。また、次の同様のプロジェクトもあります

初等

• 要素query
• eq.js
基本的に彼らがしていることは、JavaScriptを使用してコンポーネントの幅を検出し、屬性を変更してCSSでスタイリングできるようにすることです。いくつかはイベント駆動型であり、一部はサイズ変更に基づいています

これらのプラグインのいずれかと上記と同様の小さなコードスニペットの組み合わせにより、サイドバーでのFlexBox実裝とまったく同じ結(jié)果を得ることができます。

屬性

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

レスポンシブWebコンポーネントの消費(fèi)者に提供できるクールなものの1つは、屬性を介したAPIです。たとえば、レイアウトと呼ばれる屬性を設(shè)定し、「小」と「大」のサイズを持つことができます。コンポーネントの消費(fèi)者は次のように使用できます。

これにより、小さな実裝のスタイルがトリガーされます

シャドウdomでは、含有要素は次のように知られています。その例は、そうするかもしれません：

これにより、コンポーネントの消費(fèi)者がいくつかの簡単なJavaScriptを作成して、提供したさまざまなサイズをめくることができます。これは、モジュールの內(nèi)部に追加のJavaScriptをロードする代わりに、消費(fèi)者に任せて、どのように接続するかを決定することを意味します。これにより、コンポーネントがより將來の証拠になることができます

自分で試してみてください！

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

このデモで言及しているFlexboxバージョンを自分のマシンで表示することに興味がある場合は、Chromeで以下を?qū)g行できます。

CORS Chrome拡張機(jī)能をインストールし、オンにします。これは、HTMLインポートが外部サイトから動作できるようにするためです。 このページを更新するか、新しいタブまたはウィンドウでWebサイトを開くと、拡張機(jī)能が開始されます。

Chrome開発者ツールでは、これをタグ內(nèi)に追加します。

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

最後に、追加：

內(nèi)部のどこかで、私のサブスクライブフォームが自動的に引き抜かれているのを見るはずです。お楽しみください！

結(jié)論

1. 上記のアプローチは、実際にはUI開発に使用できますが、再利用可能で共有可能な性質(zhì)のため、応答性の高いWebコンポーネントに特に役立ちます。
まだWebコンポーネントをチェックアウトしていない場合は、そうすることを強(qiáng)くお勧めします。現(xiàn)在、完全な仕様はChromeとOperaでネイティブにのみ利用可能ですが、他のブラウザベンダーはそれほど遅れていません。レスポンシブウェブデザインについて詳しく知るのに興味がある場合は、Chris Wardによって書かれた新しい本「Jump Start Responsive Web Design」をご覧ください。 レスポンシブWebコンポーネントに関するよくある質(zhì)問（FAQ）

適切に設(shè)計(jì)されたレスポンシブWebコンポーネントの重要な要素は何ですか？

適切に設(shè)計(jì)されたレスポンシブWebコンポーネントは、柔軟で適応性があり、効率的でなければなりません。畫面サイズに応じてレイアウトを調(diào)整できるようにする流體グリッドシステムが必要です。また、畫面に合うようにサイズを変更できる柔軟な畫像とメディアも必要です。さらに、畫面のサイズ、解像度、オリエンテーションなどの特性に基づいて、Webサイトが異なるデバイスに異なるCSSスタイルルールを使用できるようにするメディアクエリが必要です。最後に、読み込み時間とパフォーマンスの點(diǎn)で効率的である必要があります。

CSSコンテナクエリは、応答性コンポーネントにどのように貢獻(xiàn)しますか？ビューポートではなく、親コンテナのサイズに基づいて適用されます。これは、コンポーネントが獨(dú)自のサイズに基づいてレイアウトを適応させることができることを意味し、本當(dāng)に応答します。これは、さまざまなコンテキストで再利用され、周囲に適応する必要があるコンポーネントに特に役立ちます。レスポンシブWebコンポーネントの作成。 DOMを操作し、イベントを処理し、動的なコンテンツを作成するために使用できます。また、CSSメディアクエリと組み合わせて使用??して、より複雑な応答性の動作を作成することもできます。たとえば、JavaScriptを使用して、畫面のサイズまたはデバイス機(jī)能に基づいてさまざまなスクリプトまたはコンテンツをロードできます。レスポンシブWebコンポーネントを設(shè)計(jì)する際の重要な考慮。これには、テキストがすべての畫面サイズで読み取ることができること、インタラクティブな要素がタッチスクリーンで簡単にタップできるほど大きく、マウスを使用できない人のためのキーボードでサイトが操作できることを保証することが含まれます。さらに、セマンティックHTMLを使用して、読者をスクリーニングするためにコンテキストと意味を提供し、視覚障害のある人に色のコントラストが十分であることを確認(rèn)する必要があります?？朔工耄?/p>

いくつかの一般的な課題には、さまざまな畫面サイズと解像度を扱うこと、さまざまなブラウザーとデバイスとの互換性の確保、パフォーマンスの最適化などがあります。これらは、モバイルファーストアプローチを使用し、さまざまなデバイスでテストし、機(jī)能検出を使用して互換性を確保し、パフォーマンスの畫像とスクリプトを最適化することで克服できます。

レスポンシブWebコンポーネントは、SEOにどのように影響しますか？

レスポンシブWebコンポーネントは、SEOにプラスの影響を與える可能性があります。 Googleのアルゴリズムは、モバイルフレンドリーでレスポンシブデザインのWebサイトがこれの重要な側(cè)面です。さらに、デスクトップとモバイルのバージョンではなく単一のレスポンシブサイトを持つことで、SEOの重複にマイナスの影響を與える可能性のある複製の問題が回避されます。 Webコンポーネントの応答性をテストするためのいくつかのツールと手法です。これには、ブラウザウィンドウのサイズを変更して、レイアウトの適応方法を確認(rèn)し、ブラウザ開発者ツールでデバイスエミュレーション機(jī)能を使用し、Googleのモバイルフレンドリーテストなどのオンラインツールを使用します。 ??>

レスポンシブWebコンポーネントの未來には、より高度な技術(shù)と技術(shù)が含まれる可能性があります。これには、現(xiàn)在開発中のコンテナクエリなど、ユーザーの動作と好みに基づいてレイアウトを適応させるためのAIと機(jī)械學(xué)習(xí)の使用が含まれます。 ？
レスポンシブWebコンポーネントについて學(xué)習(xí)するために利用できるリソースがたくさんあります。これらには、オンラインチュートリアルとコース、書籍、コミュニティフォーラムが含まれます。さらに、獨(dú)自のレスポンシブコンポーネントの作成と他者のコードを研究することを?qū)g験することは、學(xué)習(xí)するのに最適な方法です。応答性の高いWebコンポーネントの作成に役立つ多くのフレームワークとライブラリが利用可能です。これらには、Bootstrap、Foundation、Reactなどが含まれます。これらのツールは、すでに応答性が高い事前に設(shè)計(jì)されたコンポーネントとレイアウトを提供し、時間と労力を節(jié)約できます。ただし、これらのツールを効果的に使用するには、レスポンシブデザインの根底にある原則を理解することが依然として重要です。

以上が今日のレスポンシブWebコンポーネントを使用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。