フロントエンドの開発者は、CSSのヒントについて知っておくべき

いくつかのヒントは、あなたのCSS技術は、より専門的な作るために

1,使用:not()去除导航上不需要的边框
2,为body添加行高
3,垂直居中任何元素
4,逗号分离的列表
5,使用负nth-child选择元素
6,使用SVG图标
7,文本显示优化
8,在纯CSS幻灯片上使用max-height
9,继承box-sizing
10,表格单元格等宽
11,使用Flexbox摆脱边界Hack
12,使用属性选择器选择空链接

使用方法：ありません（）ナビゲーションフレーム上の不要な追加/削除するには
境界線を追加するには...

/* 添加边框 */
 
.nav li { 
     border-right: 1px solid #666; 
}

...その後、国境の最後の要素を取り除きます...

/* 移除边框 */
 
.nav li:last-child {
     border-right: none; 
}

...擬似クラスを使用しますない（）だけで必要なスタイルの要素に適用されます。

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

もちろん、あなたが.navのLi +、Liや.navリチウムを使用することができます。最初の子〜李が、使用：ありません（）特別な意図は明確な、CSSセレクタは、人間に合わせて、それは境界線を定義した方法について説明します。

高いボディラインを追加するに
は、<P>、<H *>上位要素の行を追加しますが、体が追加するために、それぞれに別々にする必要はありません。

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

希望を中心とする他の要素？垂直、水平の...何でも、いつでも、どこでも？CSS-トリックでそれをすべて行うには良い記事があります。
注：IE11のいくつかの欠陥の挙動のフレキシボックス。

カンマで区切られたリスト
よりリアルコンマのようなリストの外観を作成するには、リストを分離しました：

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

擬似クラス：ていない（）ので、最後の要素は、コンマを追加していないこと。

負の要素は、n番目の子を選択した
n個のCSSに第nの子陰性選択エレメント1を使用して。

li {
   display: none;
}
 
/* 选择1到3的元素并显示 */
 
li:nth-child(-n+3) { 
   display: block;
}

それとも、あなたが使用してについて何かを学んだ：いない（）、試してみてください。

/* select items 1 through 3 and display them */
 
/* 选择1到3的元素并显示 */
 
li:not(:nth-child(-n+3)){
  display: none;
}

それは非常に簡単です。

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

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

SVGは、すべてのIE9ブラウザのサポートを超えるすべての種類の解像度のための良好な柔軟性を持っています。だから、.PNG、.JPGまたはGIF-JIFおよび他の文書を与えます。
注：SVGのアイコンボタンを使用する場合、SVGのロードに失敗しながら、次は、アクセシビリティを維持するのに役立ちます。

.no-svg .icon-only:after {
  content: attr(aria-label);
}

テキスト表示の最適化は、
一部のフォントは、そのデバイスのブラウザは、ヘルプを聞かせて、すべてのデバイスで最適な表示ではありません。

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

注：使用optimizeLegibility。一方、IE /エッジは、テキストのレンダリングをサポートしていません。

純粋なCSSの内容に、最大高さスライダを使用して実装され
、純粋なCSSの内容に最大の高さのスライダーを使用して達成し、セットオーバーフローが隠さ：

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

ボックスサイジング継承
ボックスサイジングHTMLから継承されました：

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

これは簡単にボックスサイズを変更することができるプラグインや挙動の他の成分の使用を可能にします。

幅テーブルセル
、非常に痛みを伴うであろうテーブルを使用して、表レイアウトを使用するように：同じ保持セル幅に固定されました。

.calendar {
  table-layout: fixed;
}

無痛テーブルレイアウト。

使用フレキシボックスはボーダーハックを取り除きます

列制約は、nth-一次および最後の子、と宇宙の間フレックスボックスのプロパティの使用ハックを捨てることができた場合：

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

今列制約は常に等間隔で表示されます。

選択するために、エア・リンク・プロパティセレクタを使用して
表示テキスト値が、リンクを持っていないリンクのhref属性の要素を：

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

これは便利です。

ブラウザはサポート
クロム、Firefoxの、サファリ、およびエッジ、およびIE11の仕事の現在のバージョンでこれらのスキルを。

おすすめ