いくつかのcss関連知識の総括

1. @supports

概要

@supportsはcssでブラウザがいくつかのcss構文機能をサポートしているかどうかを検出するためのラベルであり、@mediaと同様にor(または)、and(および)、not(非)キーワードをサポートして論理判断を行う.ブラウザがflexをサポートしているかどうかを検出するためにsupportsを使用するコードの例を示します:

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    div { display: flex; }
}

現代ブラウザの多くはflex構文をサポートしているかもしれませんが、supportsで判断する必要はありませんが、将来的には新しい構文を追加して互換性を必要とする可能性があります.これは、次のiPhone Xのような漸進的な強化と優雅な降格の概念にも関連しています.

iPhone X対応

iPhone Xが発売された後、その特殊な携帯電話の画面のために特定の適合が必要で、ここでsupportsを使って

を検出することができます.

/*     ios11 */
@supports (padding: constant(safe-area-inset-top)) or (padding: env(safe-area-inset-top)) {
  body > header {
    background: #fff;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }
}

上記は私たちのプロジェクトで頭をiPhone Xに適合させるためのコードです.その中でconstantとenvが使用されています.iPhone X適合の問題を解決するための新しい方法です(具体的な使い方はよく分かりません)、supportsを使用して検出がサポートされているかどうかを確認します.

2.スクロールバーを隠す

webkitカーネルのブラウザでは、初期化cssコードに

と書くことができます.

::-webkit-scrollbar{
  display:none;
}
.className::-webkit-scrollbar{
  width: 0;
}

3.コンテンツのコピー/選択不可

ページの内容の一部を選択できない場合は、ユーザーがページの内容をコピーすることを禁止し、

を追加することができる.

p {
  -webkit-user-select: none; 
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}