Clever Geek Handbook

CSSについて知っておくべき奇妙なこと

私たちの出版物は、定期的にCSSに関する記事を特集しています。 その中には、CSSの歴史に関する資料、CSSエンティティの名前の選択に関するストーリー、印刷用のCSSスタイルに関する記事など、多くの人が忘れています。 私たちは、 CSSセレクターがどのように機能するか、カーディーラーで何が起こっているのか、比較的新しいCSSグリッドレイアウトテクノロジーについて、そしてCSSが黒魔術ではないことについて書きました。 今日、私たちはあなたの注意にCSSの風変わりに捧げられた資料の翻訳をもたらします。この資料の著者が信じているように、それはほとんどの人が知りません。



画像



垂直フィールド



padding-top: 50%



プロパティを割り当てると、要素はどうなりますか？ 直感的に、そのようなプロパティは、要素のコンテンツの上端からフィールドのサイズを設定します。そのサイズは50％です...これらの50％は何から取得されますか？ 実際のところ、特定の瞬間に、このプロパティの機能を分析する際の直感は無意味です。 実際、これらの50％は、トップフィールドが割り当てられている要素の親要素の幅から取得されます。



CodePenが作成した例を次に示します。 そのような例は、この資料の他の多くのセクションにあります。



上記はpadding-bottom



プロパティで指定された下マージンにも当てはまります。 特に、この機能を知っていると、アスペクト比を保持するレスポンシブ要素を作成できます。 



 .square { width: 100%; height: 0; padding-bottom: 100%; }


一貫性のないインデントの崩壊について



次の要素間の距離は、 40px



ではなく20px



40px



。 



 <div style="margin-bottom:20px">foo</div> <div style="margin-top:20px">foo</div>


→ 例



ただし、これは常にそうではありません。 次の要素を使用する場合、インデントは折りたたまれません。





透明度レベルと要素の順序



3つの<div>



要素があり、それぞれが絶対位置にあるとします。 これらには、 z-index



値を持つz-index



プロパティが割り当てられた他の要素が含まれています。次の各要素は、前の要素の上に表示されます。 z-index: 10



を最下位の要素に割り当てると、他の2つの要素の上に表示され、順序は変わりません。 これまでのところ、すべてが期待どおりに見えます。 最初の<div>



要素を割り当てた場合、その要素は他の要素よりも高くなり、 opacity: 0.99



プロパティopacity: 0.99



になり、他の2つの要素の下に配置されます。



→ 例



これがなぜ起こっているかの詳細は、 ここで見つけることができます 。



カスタムプロパティとCSS変数



SASSまたはLESSを使用すると、カスタムプロパティとCSS変数がこれらのプリプロセッサで使用可能な機能と同等であると判断できます。 ただし、注意が必要な違いがいくつかあります。



最初に、基本事項を検討します。 



 //        :root { --foo: #000; } button { background-color: var(--foo); //  }


カスタムプロパティも継承されます。つまり、ローカル変数を再割り当てすると、すべての子孫要素に影響します。プリプロセッサとは異なり、ブラウザは、このような場合、そのような変数が使用されるすべての式を再カウントします。



カスタムプロパティを適用する場合、予約値はカンマでリストできます。 フォールバック値のリストには、他の変数が含まれる場合があります。 



 .foo { color: var(—-my-var, 'blue'); }


これにより、プリプロセッサとの主な違いがわかります。CSS変数は、DOMの構造とそこで発生する変更を認識しています。 



 ::root { --default-color: #000000; } header { --primary-color: #ff0000; } a { color: var(--primary-color, --default-color); } <a href="">this is black</a> <header> <a href="">this is red.</a> </header>


継承を示す最初の例とは異なり、この例は、カスタムプロパティが親DOM要素に設定されているかどうかに影響されるフォールバック値に依存しています。



→ 例



さらに、JavaScriptを使用して簡単に変更できます。 



 //    inline- element.style.getPropertyValue("--my-var"); //    inline- element.style.setProperty("--my-var", jsVar + 4);


この機能は、Edge 15以降でサポートされています。



垂直方向の整列：上部構造| 真ん中| 下



vertical align: top | middle | bottom



構造vertical align: top | middle | bottom



vertical align: top | middle | bottom



vertical align: top | middle | bottom



は、インライン要素（ inline-block



を含む）およびtable-cell



要素に対してのみ機能します。 このメソッドは、親要素内の要素の整列には適していません。 これを行うには、フレックスボックスレイアウトツール、または「douchebag vertical align」と呼ばれるものを使用します（これについては以下で説明します）。



高さプロパティ：100％では、期待した効果が得られない場合があります。



前のセクションで説明したことは、 height: 100%



プロパティにも当てはまります。 多くの場合、このプロパティを設定しても、開発者が期待するものにはなりません。 この理由は、親要素の高さが設定されていないという事実にあります。 例を考えてみましょう： 



 <html> <body> <div style="height:100%;background:red;"></div> </body> </html>


ここに示す<div>



要素は、ページ全体を赤で塗りつぶしません。 これを実現するには、 <body>



要素と<html>



要素の両方でheight



プロパティを100%



に設定する必要があります。



識別子スタイルとクラススタイル



識別子スタイルは、クラスレベルで定義されたスタイルをオーバーライドします。 これは、IDセレクターがクラスセレクターよりも正確であるためです。 したがって、たとえば、 .foo.bar



指定されたルールは、 .foo.bar



.foo



別々に設定されたルール.foo.bar



オーバーライドします。 



 #foo { color: red; } .bar { color: green; } <h1 id="foo" class="bar">this will be red not green</h1>


特定の属性を持つアイテムを選択する



CSSを使用すると、特定の属性とその内容に基づいて要素を選択できます。 たとえば、これはsrc



またはhref



属性のコンテンツです。 



 //     zip- (  ) a[href$=".zip" i] { } //     google.com [href*="google.com"] { color: red; }


このテクニックは、たとえば、空のalt



属性を持つすべてのimg



要素を強調表示する場合に、デバッグ時に役立ちます。 



 img:not([alt]) { border: 2px dashed red; } img[alt=""] { border: 2px dashed red; }


Angularを使用する場合、このアプローチは[ng-click]



を含む要素を選択するのにも役立ち[ng-click]



。 または、必要に応じて、ローカルリソースへのリンクとhttp



またはhttps



で始まるリンクを視覚的に分離できhttps



。



→ 例



パラメーター値を水平および垂直に指定する場合のプロパティのシーケンスについて



水平軸と垂直軸に関連するいくつかの値を指定すると、通常、最初の数値が垂直値を設定し、2番目の数値が水平値を設定します。 たとえば、 padding: 10px 20px; 10px



式の場合padding: 10px 20px; 10px



padding: 10px 20px; 10px



は上下の20px



、 20px



は左右のマージンです。 これは、一般にマージン、マージン、境界線を設定するときの見た目とまったく同じです-値が正反対であるテーブルのborder-spacing



を除いて、これはほとんどすべてに当てはまります。最初の数値は水平方向に、2番目は垂直方向に値を設定します。



1つのアイテムに複数の背景画像



複数の背景画像をコンマで区切って同じ要素に割り当てることができます。 同時に、それらのそれぞれを、たとえば配置など、さまざまな方法でカスタマイズできます。 



 background: url(example1.png') no-repeat center 50px, url('example2.jpg') no-repeat bottom top;


この機能はIE11以降でサポートされています。



CSSアニメーションオーバーレイ



背景を操作するときと同じように、CSSアニメーションをオーバーラップできます。 



 @keyframes foo { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes bar { 0% { transform: translateX(-100px); } 100% { transform: translateX(0px); } } .element { animation: foo 2s 0s, bar 1s 0s; }


位置の奇妙な動作について：translateZ変換を使用する場合に修正



変換translateZ(0);



追加しtranslateZ(0);



コンテナには、次のposition: fixed;



持つ要素が含まposition: fixed;



ますposition: fixed;



property position: fixed;



要素をウィンドウではなくコンテナに揃えます。



→ 例



ポンド記号（/＃foo）を含むアドレスにナビゲートされる要素の様式



:target



擬似クラスを使用して、ポンド記号が付いたリンクをクリックしたときにクリックされる要素のスタイルを設定できます。 したがって、たとえば、 <a href="#foo">Go to Foo</a>



などのリンクをクリックすると、 <div id="foo">foo</div>



要素までスクロールします。 次に、CSSに#foo:target { color: red; }



という形式のルールを含めた場合#foo:target { color: red; }



#foo:target { color: red; }



、 <div> #foo



は赤に<div> #foo



ます。



このような要素を強調表示することは、 www.example.com/#foo



ような外部リンクを介してページにアクセスしたサイト訪問者にとって便利です。 このアプローチでは、ブラウザは目的の要素までスクロールし、この要素が強調表示されます。 これは最近ではめったに行われませんが、この手法により、サイトでの作業のユーザーエクスペリエンスが向上します。



→ 例



コンテンツのあまり知られていない機能： 'foo';



▍データ属性



データ属性は、動的なCSSコンテンツに使用できます。 例： 



 <div data-text="foo"></div> div:before { content: attr(data-text); }


→ 例



この手法は、たとえば、擬似クラスのテキストを翻訳する必要がある場合（たとえば、ツールチップに使用する場合）に便利です。 attr()



を使用すると、コンテンツのみを操作できます。 この設計が他のプロパティをサポートする可能性はありますが。 さらに、 attr()



から取得した値は文字列であるため、主にコンテンツを対象としており、サイズ（たとえばfont-size



）を指定するプロパティやリンク（たとえばcontent: url()



）には使用できませんcontent: url()



）。 ところで、これについて話しましょう。



▍内容：url（）



この設計は、多くの種類のデータ（画像、音声、ビデオ）に使用できます。 例： 



 <div></div> div:before { content: url(image.jpg); }


→ 例



ただし、DOMからCSSに任意のデータを転送する必要がある場合は、上記のカスタムプロパティを有効にする必要があります。 



 <div style="--background-image: url('http://via.placeholder.com/150x150');"></div> div:after { content: ''; background-image: var(--background-image); }


▍増分カウンター



content: counter()



コンストラクトを使用して、擬似要素に増分的に番号を付けることができます。 



 p { counter-increment: myIndex; } p:before { content:counter(myIndex); } <p>foo</p> <p>bar</p>


→ 例



quotation引用符の開閉



:before



や:after



などの擬似クラスのcontent



プロパティを使用して、要素に開始引用符と終了引用符を追加できます。 



 q:before { content: open-quote; } q:after { content: close-quote; }


引用について説明し、この手法と前述のデータ属性の選択を組み合わせた場合、CSSを使用して、 quotes



プロパティのみを使用して、サイトの言語に基づいて特定のローカライズされたスタイルの引用を指定することもできます。 



 html[lang="fr"] q { Quotes: "«" "»"; }


フォントプロパティを使用する



font



プロパティを使用すると、短縮形式でフォントパラメータを設定できます。 



 h1 { font-weight: bold; font-style: italic; font-size: 1rem; //etc… } //   h1 { font: italic lighter 1rem/150% Verdana, Helvetica, sans-serif; } //  // font: font-style font-variant font-weight font-size/line-height font-family;


ディレクティブのサポート



@supports



ディレクティブを使用して、ブラウザーが開発者の関心を引く機能をサポートしているかどうかを確認できます。 display:flex



使用を計画している場合、ブラウザがこの機能をサポートしていることが確実な場合にのみdisplay:flex



を使用すると、次の構成を適用できます。 



 @supports (display: flex) { div {  display: flex; } }


クラス名のコロン



クラス名にコロンを使用すると、わかりやすい名前を作成するのに役立ちます。この名前を読むと、部分に分割しやすくなります。 たとえば、一部のCSS UIフレームワーク（ Tailwindなど ）は、次の命名規則を使用します。 



 <div class="justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around"> <button class="bg-blue hover:bg-blue-dark text-white hover:text-blue-light">Button</button>


マウスポインターが上にある要素に適用されるスタイルの特定のクラスを定義することは、ほとんどの場合特に有用ではないかもしれませんが、このアプローチにより、対応する状態を他の状態と明確に区​​別でき、コードの可読性が向上します。



CSSでコロンを使用するには、エスケープする必要があります。 



 .sm\:justify-center { }


3要素セレクター



この資料を読む人は誰でも、一般に「 ロボット化されたフクロウセレクター 」と呼ばれる3要素のCSSセレクターを知っている必要があります。 これは次のようなものです。 



 * + * { margin-top: 2rem; }


同じタイプの要素が多くあり、その間にインデントが必要で、そのようなリストの最後の要素の後にインデントが必要ない場合に便利です。 



 li + li { margin-top: 1rem; } //  li { margin-bottom: 1rem; } li:last-of-type { margin-bottom: 0; }


潅水バッグの垂直方向の整列方法を使用した垂直方向の整列



珍しいセレクターについて話し始めたので、「douchebag vertical align」と呼ばれる垂直方向の整列手法も思い出します。 



 .element { position: relative; top: 50%; transform: translateY(-50%); }


OpenTypeフォントのFont-feature-settingsプロパティ



OpenTypeフォントは、プロパティのカスタマイズをサポートしています。 この機能は、 font-feature-settingsプロパティにより、特定のプロジェクトのニーズにフォントを適合させるために使用できます。



この機能を使用するためのオプションの1つは、カウントダウンタイマー用に等幅ではない美しいフォントが必要な場合です。 特別な設定がなければ、一連の数字の幅は常に変化します。 プロフェッショナルではないようです。 この問題の解決策は次のとおりです。 



 font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;


「...」で終わる省略記号付きのテキストのトリミング



ここではすべてが非常に簡単です。 



 p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


→ 例



まとめ



Web開発者にとって役立つと期待される、あまり知られていないCSS機能をいくつか見てきました。 ところで、ここにもう1つの興味深いものがありますが、CSSとは関係ありません。 これは、単語の区切りの場所をマークできるwbr HTML要素です。



親愛なる読者！ 役に立つが広く知られていないCSS機能を知っていますか？





More articles:


All Articles