12 の素晴らしい CSS スキルを共有する

以下の高度な CSS スキル

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

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

• すべてが垂直方向の中央に配置されます

• カンマ区切りリスト

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

• アイコンにはSVGを使用してください

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

• 純粋な CSS スライダーの場合は、max-height

• を使用します 継承 ボックスサイジング

• テーブルセルの均一な幅

• 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;
}

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

各

、 などに個別に line-height を追加する必要はありません。本文に追加するだけです:

body {
  line-height: 1;
}

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

すべてが垂直方向の中央に配置されます

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

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

ほら、とても単純じゃないですか？

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

カンマ区切りリスト

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

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

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

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

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

それはとても簡単です。

アイコンにはSVGを使用してください

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

li {
  display: none;
}

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

SVG は、すべての解像度タイプに対して優れたスケーラビリティを備えており、IE9 に戻ったすべてのブラウザをサポートします。こうすることで、.png、.jpg、または .gif ファイルを回避できます。

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

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

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

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

純粋な CSS スライダーには max-height

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

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

ボックスのサイズを継承します

ボックスのサイズ設定を HTML に継承させる:

.slider ul {
  max-height: 0;
  overlow: hidden;
}

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

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

表のセルの幅は同じです

テーブルは扱いにくいので、必ず table-layout を使用してください: セルの幅を等しく保つために可能な限り固定してください:

html {
  box-sizing: border-box;
}

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

Flexbox で余白をなくすためのさまざまなハック

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

.calendar {
  table-layout: fixed;
}

リスト区切り文字が等間隔の位置に表示されるようになりました。

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

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

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}