CSSの開発能力を高めるためのテクニック集

0.ディレクトリ

ディレクトリ

引用

本文

1 notを使ってナビゲーションバーに間隔線を追加する

body要素にLine-Height属性を追加します.

任意の要素が垂直中央に配置されている

.

コンマ区切りのリスト

5は、nth-childにマイナス

を使用する.

はsvgアイコン

を使用します.

テキスト表示最適化

8 Pure CSS Slidersにmax-height

を使用する.

9 box-sizingを初期化する

表のセルの等幅

11 Flexboxを使用して各種Margin Hacks

を脱出する.

12空接続に属性選択子

を使用する.

ステートメント

1.引用
ギthubのA collection of useful CSS protips訳者:愛の前端を分かち合うFedFun、意訳を主として不適切なところ、ご指摘ください.あなたのCSS開発能力を高めるための技術集です.皆さんの役に立つことを願っています.
2.本文
2.1 :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;
}

2.2 body元素にLine-Height属性を追加する
各p、h 1要素にline-heightを設定する必要はありません.body要素の設定だけが必要です.他のテキスト要素は自動的にbodyの特性を継承します.

body {
  line-height: 1;
}

2.3任意の要素を垂直中央に配置
黒魔法ではなく、任意の要素を垂直に中央に配置することができます.

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

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

2.4コンマ区切りのリスト
リストを現実のカンマ区切りのように表示します.

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

2.5マイナスを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;
}

2.6 svgアイコンを使用する
svgアイコンを使わない理由はありません.ほとんどの解像度とブラウザでスケーリングができます.IE 9にも対応していますので、使用しなくてもいいです.

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

2.7テキスト表示の最適化
一部のフォントはすべてのデバイスの中で最適に展示できないので、設定が必要です.

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

注意optimizeLegibility属性値の使用については、IE／Edgeはtext-renderingをサポートしていない.
2.8 Pure CSS Slidersにmax-heightを使用する
max-heightを使って隠し、表示するアニメーションを実現します.

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

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

本博「Auto値のCSS 3 Transitionソリューション」を参照してください.
2.9初期化box-sizinghtmlからbox-sizing属性を継承すると後期メンテナンスが便利です.

html {
  box-sizing: border-box;
}

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

2.10表のセルの均等幅

.calendar {
  table-layout: fixed;
}

2.11 Flexboxを使用して各種Margin Hacksを脱する
サイドバーを実現する際には、各種nth-、first-、last-childなどのマーギンスを必要とせず、Flexboxを使って簡単に均一分布を実現することができます.

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

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

2.12空接続に属性選択子を使う
href属性を持っていますが、内容が空のaに対して、自動的に内容を追加します.

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

とても便利ですね.
3.声明
愛の先端、喜びを分かち合う.先端痴王海慶のブログ、あなたと一緒に進歩したいです.ブログのスターオーディションが行われています.投票してください.ありがとうございます.いかなる形式の転載を歓迎して、積付を明記して下さい、この段の文字を保留します.本文の原文のリンクhttp://blog.csdn.net/whqet/article/details/48997389 のブログですhttp://whqet.github.io 新浪微博http://weibo.com/FedFun 極客頭条http://geek.csdn.net/user/publishlist/whqet