一般的に使用される高度な 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;}

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

各

、 などに個別に行の高さを追加する必要はありません。

body {  line-height: 1;}

を body に追加するだけです。このようにして、テキスト要素は 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 を選択します。

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

とても簡単です。

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

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

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

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

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

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

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

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

max-height を使用します

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

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

Inherit box-sizing

ボックス サイズを HTML から継承するようにします:

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

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

表のセルは同じ幅です

表は操作が面倒なので、必ず table-layout:fixed を使用してセルの幅を等しく保ちます:

.calendar {  table-layout: fixed;}

Flexbox を使用すると、マージンのさまざまなハックが削除されます

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

.list {  display: flex;  justify-content: space-between;}.list .person {  flex-basis: 23%;}

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

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

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

a[href^="http"]:empty::before {  content: attr(href);}

とても便利です。