🧑🏿‍🤝‍🧑🏾 🏂 🏬 CSSの問題。パート1 🖖🏽 🏂🏾 👩🏼‍🤝‍👨🏾

翻訳者から

大きな記事を2つの部分に分けることにしました。

最初のcssは1995年頃に導入され、単純なテキストドキュメントをスタイルするように設計されました。 Webサイトはありません。アプリはありません。すなわち、テキスト文書。それ以来、CSSは長い道のりを歩んできました。長すぎるかもしれません。

多くの場合、cssは本来、たとえば、マルチカラム、レスポンシブWebデザインなどを目的としていませんでした。それが、多くの拡張機能を備えたある種の古代のマシンのように、ハックとグリッチに満ちた言語になった理由です。

最良の場合、cssでの作業は楽しいアクティビティと呼ばれます。そしてそれが私たちに仕事がある理由です。私が信じているように、効果的でクロスブラウザのCSSスタイルの生成は不可能であり、近い将来不可能になるからです。

私がCSSについての私の意見を表明するためにここにいないので、ポイントに行きましょう。また、CSSの一般的な問題とその解決策を検討するために。

私はいくつかの本当に一般的なものを選択しようとしました：

フロートをクリアします。
インラインブロックで要素間のインデントを無効にする方法は？
絶対配置の理解。
100％に等しい幅/高さを使用する場合（パート2）
Z-Indexを使いこなす方法。（パート2）
マージンの崩壊とは何ですか？（パート2）

フロートをクリアします。

これはcssで最も一般的な質問のようです。彼は世界と同じくらい年をとっていて、正直なところ、cssで書いたことのある人なら誰でも彼に出会ったと確信しています。

簡単に言えば、次のように説明できます。要素にフロートを持つ要素のみが含まれている場合、子要素がまったくないように折りたたまれます。つまり、実際には、floatを持つ要素は一般ストリームから除外されます。

この問題を解決するにはいくつかの方法があります。以前は空のdivを使用していましたが、 どちらもコンテナーの一番下にあるクリアスタイルです。次に、それをhrタグに置き換えましたが、これはあまり良くありません。

最後に、ニコラス・ギャラガーは、マークアップにまったく触れずにフロートをクリアする新しい方法を提案しました。長い議論とテストの後、彼の仕事に必要な最小限のスタイルのセットを得ました。彼の最新バージョンは次のとおりです。

.clearfix:after { content: ""; display: table; clear: both; }

実際、私は嘘をついた、彼女は最後ではなく、彼女は最も短い。ただし、IE 6/7のサポートが必要な場合は、これを追加する必要があります。

 .clearfix { *zoom: 1; }

動作させるには、プロジェクトに.clearfixクラスを追加し、それをマークアップ要素に適用する必要があります。これは、フロートを操作する最も簡単でクリーンな方法です。

インラインブロックで要素間のインデントを無効にする方法は？

要素の行への配置を続けます。今回はフロートではなく、インラインブロックを使用します。 display：inline-blockは長い間過小評価されてきましたが、それがどのように機能し、なぜそれがクールなのかを理解しました。今日、フロントエンドの開発者は、こうした機会があればフロートではなくインラインブロックを使用することを好んでいます。

インラインブロックの主な利点は、フロートをクリーニングする必要がなく、フロートを使用して配置された要素が原因で発生する可能性がある他の問題が発生しないことです。 display要素のプロパティをinline-blockに設定するだけで、line要素とblockのハイブリッドが得られます。サイズ、インデントを設定できますが、デフォルトでは幅はコンテンツに依存し、親要素の幅全体を占めることはありません。したがって、垂直ではなく水平に配置されます。

あなたは尋ねることができます：「問題は何ですか？」そして問題は、それらが半分小文字であるということです。つまり、スペースと等しいサイズで互いにインデントされます。標準の16pxフォントでは、4pxです。ほとんどの場合、インデントサイズはフォントサイズの25％として計算できます。何らかの方法で、これは要素の通常の配置を妨げる可能性があります。たとえば、内部に3つの要素があり、サイズが200pxで、 display：inline-blockプロパティで設定された600pxコンテナを使用します。インデントを削除しないと、1行に配置できません（200 * 3 + 4 * 2 = 608）。

不要なギャップを削除する方法はいくつかあり、それぞれにプラスとマイナスがあります。正直なところ、完璧な解決策はまだありません。順番にすべてを見てみましょう！

マークアップレベル：スペースを削除する

すべてのテストで、次のマークアップを使用します。

 <div class="parent"> <!-- 600px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> </div>

前に述べたように、子要素はそれぞれの間に追加のスペース文字（この場合は改行と4つのスペース）があるため、1行になりません。問題を解決する最初の方法は、スペースを完全に削除することです。

 <div class="parent"> <div class="child">I'm a child!</div><div class="child">I'm a child!</div><div class="child">I'm a child!</div> </div>

本当に機能しますが、コードを読むのは便利ではありません。ただし、読みやすさを維持するために、要素をわずかに再編成できます。

 <div class="parent"> <div class="child"> I'm a child!</div><div class="child"> I'm a child!</div><div class="child"> I'm a child!</div> </div>

そして、あなたが本当にクールなら、あなたはこれをすることができます：

 <div class="parent"> <div class="child">I'm a child!</div ><div class="child">I'm a child!</div ><div class="child">I'm a child!</div> </div>

はい-機能します！もちろん、このアプローチはお勧めしません。直感的ではなく、コードが見苦しくなります。より良い、何か他のものを試してみましょう。

マークアップレベル：スペースに関するコメント

スペースを削除する代わりにコメントアウトするとどうなりますか？

 <div class="parent"> <!-- 600px --> <div class="child">I'm a child!</div><!-- --><div class="child">I'm a child!</div><!-- --><div class="child">I'm a child!</div> </div>

はい、それははるかに良いです！コードが読み取られて機能します。はい、メソッドは一見馴染みがないように見えますが、慣れるのはそれほど難しくありません。私自身は、インラインブロックを使用して要素間のスペースを削除する必要がある場合に、この方法を使用します。

もちろん、マークアップ側で機能し、CSSレベルで問題を解決する必要があるため、誰かがこれは理想的なソリューションではないと言うでしょう。本当に。私たちのほとんどは実際にCSSソリューションを使用しています。

CSSレベル：文字間隔

文字間隔プロパティは、文字間のインデントを設定するために使用されます。アイデアは、要素間のインデントが均等になるようにインデントを設定し、子要素の文字間隔をリセットして、子要素内のテキストが正常に見えるようにすることです。

 .parent { letter-spacing: -0.3em; } .child { letter-spacing: normal; }

この手法は、Nicolas GallagherによるSassベースのグリッドシステムであるGriddleで使用されているため、ご覧のとおり、これは非常に深刻なソリューションです。率直に言って、私たちがスタイルのマジックナンバーに依存しているという事実は好きではありません。さらに、一部のフォントでは、この数値は0.31emなど変化する可能性があります。つまり、特定のケースごとにカスタマイズする必要があります。

Cssレベル：負のマージン

問題を解決する別のアプローチは前のものと非常に似ていますが、負のインデントを使用します。主な欠点は、IE 6/7では機能しないことです。さらに、最初の要素からインデントを削除して、コンテナ内に正確に収まるようにする必要があります。

 .child { margin-left: -0.25em; } .child:first-of-type { margin-left: 0; }

IE 6/7のサポートを必要としない場合、これはかなり良いソリューションだと思います。

CSSレベル：フォントサイズ

最後に、親ブロックのフォントサイズを0に設定して、スペースを0pxに等しくしてから、子のフォントサイズを復元できます。

 .parent { font-size: 0; } .child { font-size: 16px; }

このソリューションには、いくつかの問題と制限があります。

emをフォントサイズとして使用して、子要素のフォントを復元することはできません
JellybeanまでAndroidデバイスのスペースは削除されません
@ font-faceを使用するテキストは、Safari 5でアンチエイリアスを失う場合があります
一部のブラウザーはfont-size：0を無視します。たとえば、Chromeの中国語バージョンの場合、font-sizeは12pxにリセットされます

したがって、これは最善の解決策ではありません。前に言ったように、コメントスペースでパスを使用する可能性が高いです。不快に見える場合は、フロートに戻るか、一般的にフレックスボックスを使用できます。

絶対位置の理解。

要素の配置は難しいプロセスであり、常に行われています。初心者向けのポジショニングは非常に困難です。多くの場合、positionプロパティを使用します（使用しません）。このプロパティは、オフセット（上、右、下、左）を使用して要素を移動する方法を決定します。そして、次の値を取ります。

静的-デフォルトでは、オフセットは機能しません
relative-オフセットは視覚レイヤーを移動しますが、要素自体は移動しません
absolute-要素をコンテキスト内で移動するオフセット（最初の要素は静的要素ではありません）
固定-オフセットはビューポート内の要素を配置し、ドキュメント内のどこに配置されていてもかまいません

position：absoluteを使用すると問題が発生します。そして、あなたはすでにそれらに遭遇しました：絶対配置で要素を識別しました。それは、親の右上隅（たとえば、モーダルウィンドウの閉じるボタン）に配置するためです。

 element { position: absolute; top: 0; right: 0; }

...そして、彼はドキュメントの右上隅に表示されます。「一体何？」という考えは、あなたの心を通して光ります。これは実際にはブラウザの通常の動作です。キーワードはcontextです。

上記のコードは、単に「要素をコンテキストの右上隅に配置したい」と言っています。それでは、コンテキストとは何ですか？これは、positionプロパティがstaticと等しくない最初の要素です。これは、直接親、親の親、または親の親の親になります。そして、position！= Staticの最初の要素まで続きます。

この概念は初心者にとって理解するのが難しい場合が多くありますが、理解すると、絶対に配置された要素を扱う大きな機会が開かれます。

上記を示す小さなデモ。 2つの親、それぞれ1つの子が絶対にtop：0およびright：0のオフセットで配置されます。左側はposition：relativeの正しい親であり、右側はposition：staticで正しくありません。

jsFiddle

CSS問題の継続。パート2」

CSSの問題。 パート1