知らない 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 と位置決め

要素に 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知らないかもしれない