CSS3 に関する一般的なヒント practice_html/css_WEB-ITnose

この記事は部分的に翻訳された記事です。主な内容は css-protips からのものであり、著者は独自の小さなヒントも追加しています。

:not() 属性を使用して、ナビゲーション用の境界線を追加または削除します

従来の方法では、最初に各 li タグにラベルを追加します:

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

次に、last-child 疑似属性を使用して最後の要素に作用します:

/* remove border */.nav li:last-child {  border-right: none;}

代替方法 一部の要素にのみ影響する属性を設定するには、not 疑似クラスを使用する必要があります:

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

line-height 属性を本文に追加します

p や h などのタグに個別に line-height 属性を追加する必要があることがよくあります*. 代わりに、 body 属性に追加することもできます。

body {  line-height: 1;}

このようにして、text クラスの要素はこの属性を自動的に継承できます。

自動センタリングを設定する

任意の要素の自動センタリングに flex 属性を使用できます:

html, body {  height: 100%;  margin: 0;}body {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  display: -webkit-flex;  display: flex;}

カンマ区切りリストを使用します

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

負の nth-child 属性を使用して要素を選択します

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

SVG をアイコンとして使用します

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

SVG をアイコンとして使用して効果を実現します自動スケーリングの。

テキスト表示の最適化

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

純粋な CSS スライダーで max-height を使用する

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

ボックス サイズ プロパティを継承する

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

テーブル要素を同じ幅に設定する

.calendar {  table-layout: fixed;}

フレックスボックスをマージン ハックとして使用する

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

空のリンクにデフォルトのコンテンツを追加する

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

iOS デバイスで要素を防ぐクリックできません

iOS デバイスでは、Click イベントが失敗する場合があり、特別なカーソル属性を設定する必要があります:

cursor:pointer

ただし、この属性が Android デバイスで設定されている場合、Android デバイスでは設定できないことに注意してください。クリックすると青色の背景が表示されます。

iOS デバイスで入力がぼやけるのを防ぐ

iOS デバイスでは、キーボードがポップアップすると、入力ボックスがぼやけてしまうことがあります。つまり、キーボード上の内容が入力ボックスに表示されないことがあります。オーバーライドが必要です:

* {  -webkit-user-select: none; /* prevent copy paste */}

は

input[type="text"] {    -webkit-user-select: text;}

になります