@Supports Selector ()

Keupayaan peraturan @supports untuk memeriksa sokongan pemilih adalah mengejutkan teguh! Walaupun sering digunakan untuk menguji property: value , fungsi selector() memanjangkan keupayaannya untuk menilai sokongan pemilih. Ini dilakukan dengan hanya meletakkan pemilih dalam kurungan:

 @Supports Selector (: nth-child (1 of .foo)) {
  / * Gaya yang digunakan jika pemilih disokong */
}

The :nth-child(n of .foo) pemilih, "argumen senarai pemilih" yang serasi dengan :nth-child , berfungsi sebagai contoh yang baik. Pada masa ini, hanya Safari yang menyokong pemilih khusus ini.

Pertimbangkan senario di mana anda perlu gaya senarai dengan pemisah dan jalur zebra. Sebaik -baiknya, anda akan menggunakan pemilih seperti ini untuk mencapai jalur zebra sambil mengabaikan pemisah:

 li: nth-child (ganjil .list-item) {
  Latar Belakang: Lightgoldenrodyellow;
}

Walau bagaimanapun, disebabkan sokongan penyemak imbas terhad, anda boleh menggunakan @supports untuk menggunakan gaya ini:

 @Supports Selector (: nth-child (1 of .foo)) {
  li {
    Padding: 0.25em;
  }
  li: nth-child (ganjil .list-item) {
    Latar Belakang: Lightgoldenrodyellow;
  }
  li.separator {
    Senarai gaya: Tiada;
    Margin: 0.25em 0;
  }
}
@Supports bukan pemilih (: nth-child (1 of .foo)) {
  li.separator {
    Ketinggian: 1px;
    Senarai gaya: Tiada;
    Border-top: 1px berwarna ungu;
    Margin: 0.25em 0;
  }
}

Ini memberikan gaya sandaran untuk pelayar yang tidak mempunyai sokongan untuk pemilih lanjutan. Sintaks yang lebih baik, yang berpotensi menggunakan @when dan @else , dapat memudahkan ini:

 / * Sintaks masa depan hipotetikal */
@When menyokong (pemilih (: nth-child (1 of .foo))) {
  / * Gaya untuk penyemak imbas */
} @else {
  / * Gaya Fallback */
}

API JavaScript juga wujud untuk menguji sokongan pemilih:

 Css.supports ("pemilih (: nth-child (1 of .foo))")

Kaedah ini kembali true dalam safari dan false dalam krom (pada masa penulisan).

Walaupun peraturan @supports berkuasa, bilangan pemilih CSS dengan sokongan silang penyemak imbas yang tidak konsisten, dan bilangan kes penggunaan yang memerlukan @supports untuk pemilih tersebut, agak kecil. Ramai pemilih yang bermasalah sebelum ini, seperti ::marker dan pemilih atribut yang tidak sensitif, kini menikmati sokongan yang luas. Pemilih seperti :fullscreen atau :-webkit-full-screen mungkin menawarkan aplikasi yang menarik dan berguna kerana kekurangan sokongan mereka yang unik dalam safari iOS.

Atas ialah kandungan terperinci @Supports Selector (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!