12 の高度な CSS テクニックのまとめ_html/css_WEB-ITnose

私は一般の人には次のような高度な CSS スキルを教えません。

• :not() を使用して、メニューの境界線を適用/非適用します
• 本文に行の高さを追加します
• すべてを垂直方向に中央揃えします
• カンマ区切りのリスト
• 負の nth-child を使用して項目を選択します
• アイコンの場合 SVG を使用します
• 表示テキストを最適化する
• 純粋なCSSスライダーにはmax-height
を使用する
box-sizingを継承する
同じ幅の表のセル
Flexboxを使用してさまざまなマージンハックを取り除く
空のリンクには属性セレクターを使用する

使用する:not() メニューの境界線を適用/非適用します

まず各メニュー項目に境界線を追加します

/* add border */.nav li {  border-right: 1px solid #666;}

...そして最後の要素を削除します...

//* 境界線を削除します */

.nav li:last-child {  border-right: none;}

… :not() 疑似クラスを直接使用して要素を適用できます。

.nav li:not(:last-child) {  border-right: 1px solid #666;}

この方法では、コードがクリーンで、読みやすく、理解しやすくなります。

もちろん、新しい要素に兄弟要素がある場合は、ユニバーサル兄弟セレクター (~) を使用することもできます:

..nav li:first-child ~ li {

  border-left: 1px solid #666;}

本文に行の高さを追加します

You No各

、 などに個別に行の高さを追加する必要があります。 body に追加するだけです:

body {  line-height: 1;}

このようにして、テキスト要素は body から簡単に継承できます。

すべてを垂直方向の中央に配置します

すべてを垂直方向の中央に配置するのはとても簡単です:

そうです

ほら、簡単です。

注: IE11 のフレックスボックスには注意してください。

カンマ区切りリスト

HTML リスト項目を実際のカンマ区切りリストのように見せます:

html, body {  height: 100%;  margin: 0;}body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}

最後のリスト項目には :not() 疑似クラスを使用します。

負の nth-child を使用して項目を選択します

CSS で負の nth-child を使用して項目 1 から項目 n を選択します。

そうです

とても簡単です。

アイコンには SVG を使用しましょう

アイコンに SVG を使用しない理由はありません:

そうです

SVG はすべての解像度タイプに適切に対応し、IE9 までのすべてのブラウザをサポートします。こうすることで、.png、.jpg、または .gif ファイルを回避できます。

表示テキストを最適化する

すべてのデバイスでフォントが最適に表示されない場合があるため、デバイスのブラウザーを使用してください:

ul > li:not(:last-child)::after {  content: ",";}

注: optimizeLegibility は責任を持って使用してください。さらに、IE/Edge はテキスト レンダリングをサポートしていません。

純粋な CSS スライダーには max-height を使用します

max-height とオーバーフロー非表示を使用して CSS のみのスライダーを実装します:

li {  display: none;}/* select items 1 through 3 and display them */li:nth-child(-n+3) {  display: block;}

box-sizing を継承する

box-sizing に HTML を継承させます:

.logo {  background: url("logo.svg");}

次のようにプラグイン 他のコンポーネントでボックスのサイズを変更したり、他の動作を利用したりすることが簡単になります。

表のセルを同じ幅にします

表は扱いが面倒なので、必ず table-layout:fixed to keep cell of the width を使用してください:

html {  -moz-osx-font-smoothing: grayscale;  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;}

マージンに関するさまざまなハックを取り除くには Flexbox を使用してください

Use必要に応じて 列区切り文字に関しては、フレックスボックスの space-between プロパティを使用して、n 番目、最初、最後の子のハックを取り除くことができます:

.slider ul {  max-height: 0;  overlow: hidden;}.slider:hover ul {  max-height: 1000px;  transition: .3s ease;}

これで、リスト区切り文字が等間隔の位置に表示されます。

空のリンクには属性セレクターを使用します

要素にテキスト値がなく、href 属性にリンクがある場合にリンクを表示します:

html {  box-sizing: border-box;}*, *:before, *:after {  box-sizing: inherit;}

非常に便利です。

サポート

これらの高度なヒントは、Chrome、Firefox、Safari、Edge、IE11 の現在のバージョンで効果的に機能します。

🎜