[翻訳] あなたの知らないいくつかの CSS プロパティ (公開)_html/css_WEB-ITnose

Box-sizing

box-sizing は CSS3 でのみ導入されましたが、その値の 1 つは border-box であり、要素の高さと幅にパディングとボーダーを含めることができます。

.div {     width: 150px;     height: 100px;     border: 1px solid #ccc;     box-sizing: border-box;}

Chrome 31 以降、IE8 以降、Firefox 31 以降、Safari 7 以降、Opera 27 以降、iOS Safari 7.1 以降、および Android ブラウザ 4.1 以降はすべてこの属性をサポートしています。

z-index とpositioning

要素に static/absolute/relative/fixed などの位置決め属性がない場合、属性の変更は無視されます

position: relative;z-index: 100;

要素を無効にする

none の値を使用できますpointer-event 属性を無効にする要素。 JQuery か JavaScript かに関係なく、クリック イベントはトリガーされません

.bricked {     pointer-events: none;}

Chrome 31 以降、IE11 以降、Firefox 31 以降、Safari 7 以降、Opera 27 以降、iOS Safari 7.1 以降、および Android ブラウザ 4.1 以降がこの属性をサポートします

長いリンク 行の折り返し

長いリンクが親要素からはみ出さないようにする

a {     word-wrap: break-word;}

ps: 関連記事: CSS の行の折り返し

メディアクエリで Retina ディスプレイを検出する

次のメディアクエリを使用して Retina ディスプレイを検出できます

@media     (min-device-pixel-ratio: 2),      (min-resolution: 192dpi) {           /* Retina CSS */     }

フィルター

IE に加えて、フィルター プロパティは広くサポートされていますが、Spartan によってサポートされる場合もあります。今後数十年で大変なことになるだろう。

.blur {     filter: blur(30px);}

Chrome 31 以降、Firefox 35 以降、Safari 7 以降、Opera 27 以降、iOS Safari 7.1 以降、Android ブラウザ 4.4 以降がこの属性をサポートしています

省略記号を使用してテキストを短縮します

要素内で省略記号を使用して長いテキストを短縮できますtext テキスト

.whatever {     overflow: hidden;     text-overflow: ellipsis; }

空の要素を幅に従わせる

空の要素を width 属性に従う必要がある場合は、次のようにすることができます:

.whatever {     min-height: 1px;}

@supports

@supports クエリは @media クエリに似ています。ブラウザがサポートしている場合は、指定された CSS が表示されます。現在、IE と Safari はこの属性をサポートしていませんが、これはすぐに変更される予定です。 Spartan はこの属性をサポートすることを約束しており、期待する価値があります

@supports (display: flex) {     /* flexbox CSS */  }@supports not (display: flex) {     /* CSS for no flexbox */   }

Chrome 31 以降、Firefox 31 以降、Opera 27 以降、Android ブラウザ 4.4 以降などがこの属性をサポートします。

追記:
Zhihu のコラムでは、非常に役立つ 3 つの奇妙なテクニックを紹介しました。これらはこの記事の最後に追加されています:
[ほぼ] 誰も知らない CSS についての 3 つのこと

英語の原文: Some CSS you知らないかもしれません
翻訳元: あなたが知らないいくつかの CSS プロパティ