カスタムCSSプロパティを使用してウィジェットを作成します。NHLWebサイトへのカスタムリンクを埋め込みます

HTML Web Design Netologyコースの著者であるStas Melnikovは、サードパーティのサイトに埋め込むことができるウィジェットレイアウトの例を示しました。



前回、 ユーザープロパティとは何かについて説明しましたが 、今度はNHL Webサイトを例として使用して、カスタムプロパティを埋め込む方法を示します。



時には、さまざまなプロジェクトで実装される1つのウィジェットを開発する必要があります。 CSSの特異性の性質により、これはしばしば頭痛の種になります。



カスタムプロパティについて知ったとき、この問題の解決策を思いつきました。 それがどのように機能するかをお見せしましょうawesomeLink



ウィジェットを作成し、 awesomeLink



に埋め込みます。



ウィジェットには、組み込みのcolor



、 font-size



およびdisplay



プロパティの値を設定するために使用できる3つのカスタムプロパティがあります。 display



プロパティでは、デフォルト値をinline-block



に設定します。

 .awesomeLink { --uiAwesomeLinkColor: var(--awesomeLinkColor); --uiAwesomeLinkFontSize: var(--awesomeLinkFontSize); --uiAwesomeLinkDisplay: var(--awesomeLinkDisplay, inline-block); display: var(--uiAwesomeLinkDisplay); font-size: var(--uiAwesomeLinkFontSize); color: var(--uiAwesomeLinkColor); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSファイルを接続するには、 devTools



を開いてlink



タグを追加します。

NHL.comサイトメニューで統計要素を変更する

サイトメニューの統計リンクを変更しましょう。 ナビゲーションのStats要素にawesomeLink



クラスを追加します。







要素のCSSを見ると、 display



の特異性により、 font-size



とcolor



プロパティが消されていることがわかります。







おなじみの絵ですね。 ウィジェットの組み込みプロパティが常に著作権スタイルよりも優先されるようにするには、 !important



追加し!important



。



多くの人は言葉を恐れますが、それだけではありません。 確かに、値を変更する必要がある場合は、再度!important



する必要がありますが、これは既にそれとの無限の闘争につながります。



カスタムプロパティを使用してこの問題を解決します。組み込みプロパティの値を制御できるのは、それらを通してです。 仕組みを見てみましょう。

 .awesomeLink { --uiAwesomeLinkColor: var(--awesomeLinkColor); --uiAwesomeLinkFontSize: var(--awesomeLinkFontSize); --uiAwesomeLinkDisplay: var(--awesomeLinkDisplay, inline-block); display: var(--uiAwesomeLinkDisplay) !important; font-size: var(--uiAwesomeLinkFontSize) !important; color: var(--uiAwesomeLinkColor) !important; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、組み込みのcolor



、 font-size



、およびdisplay



プロパティの値を設定できます。

 :root { --awesomeLinkColor: #c21bc2; --awesomeLinkFontSize: 20px; --awesomeLinkDisplay: flex; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

統計要素の色とサイズが変更されました



設定が機能していることがわかりますが、[計算済み]タブで値を確認してください。







すべてが正常に機能しました。

制御実験：Sheduleエレメントの変更

実験のために、Schedule要素に別のawesomeLink



クラスを追加してみてください。 設定は、クラスmegamenu-navbar-overflow__menu-item



して親要素li



設定されmegamenu-navbar-overflow__menu-item



。

 .megamenu-navbar-overflow__menu-item:nth-child(6) { --awesomeLinkColor: tomato; --awesomeLinkFontSize: 25px; --awesomeLinkDisplay: block; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

視覚的には、要素は次のように表示されます。







異なる色とサイズの鞘



読者は!important



宣言を使用することに疑問があることを知っています。 私も疑問がありましたが、これまでのところ何の問題も発生していません。 !important



ために問題が発生した場合は、コメントで議論しましょう。

編集者から

トピックに関するNetologyコース：

• オンライン職業「 フロントエンド開発者 」
• オンライン職業「 ウェブ開発者 」
• オンライン職業「 テスター 」
• 無料のHTMLおよびCSSの基礎オンラインコース