高度な CSS スキルのまとめ_html/css_WEB-ITnose

私たちは普段コードを書くときに、CSS のスキルを習得していませんか? 今日は「コードを簡潔かつ効率的にするための高度なCSSテクニックのまとめ」を共有したいと思います。誰もがこれらのヒントをマスターする必要があります。これにより、Web ページを非常に効率的に作成できるようになります。

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

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

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

...次に最後の要素を削除します...

//* remove border */.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 を追加します

line- を追加する必要はありませんそれぞれの

、 などを個別に指定します。本文に追加するだけです:

body {   line-height: 1;}

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

◆すべてを縦方向に中央揃えにする

すべての要素を縦方向に中央揃えにするのはとても簡単です:

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 はテキスト レンダリングをサポートしていません。

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

を使用します。

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

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

◆box-sizing を継承する

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

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

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

◆表のセルは均等な幅にする

表は操作が面倒なので必ずtable-layout:fixed as much as possible to keep celles of the width:

.calendar {   table-layout: fixed;}

◆Flexboxを使ってさまざまなマージンを取り除く ハック

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

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

Now 、リストの区切り シンボルは等間隔の位置に表示されます。

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

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

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

とても便利です。

◆これらの高度なテクニックをサポートし、現在のバージョンの Chrome、Firefox、Safari、Edge、IE11 で効果的に動作します。