Bagaimana untuk Menyasarkan Pelayar Khusus dengan Gaya CSS?

Cara Menyasarkan Pelayar Tertentu dengan CSS

Pernyataan Masalah:

Anda menghadapi senario di mana anda perlu melaksanakan khusus Gaya CSS bergantung pada penyemak imbas pengguna. Khususnya, anda ingin menyesuaikan padding untuk elemen #container dalam Internet Explorer, Mozilla dan Chrome.

Penyelesaian Kemungkinan:

Terdapat beberapa pendekatan yang boleh anda ambil untuk mencapai ini:

1. Pengesanan Penyemak Imbas dengan PHP:

   • Gunakan fungsi get_browser() PHP untuk mengesan penyemak imbas pengguna dan mencipta fail CSS dinamik yang mengandungi gaya khusus untuk penyemak imbas yang dikesan.

2. Css Hacks:

   • Gunakan CSS hacks untuk menyasarkan versi penyemak imbas tertentu dan gunakan gaya yang diingini. Sebagai contoh, untuk melaraskan padding bagi elemen #container dalam IE7, anda boleh menggunakan *:first-child html #container { padding: 5px; }.

3. Pengesanan Penyemak Imbas dengan Pemalam:

   • Pasang pemalam pengesanan penyemak imbas yang menambah kelas pada badan berdasarkan dokumen pada pelayar yang dikesan. Anda kemudian boleh menggunakan kelas ini dalam CSS anda untuk menggunakan gaya yang sesuai.

Contoh Menggunakan PHP:

<?php
$browser = get_browser();
switch ($browser['browser']) {
    case 'IE':
        $css = '.container { padding: 5px; }';
        break;
    case 'Mozilla':
        $css = '.container { padding: 7px; }';
        break;
    case 'Chrome':
        $css = '.container { padding: 9px; }';
        break;
}

file_put_contents('browser-specific.css', $css);
?>

Contoh Menggunakan Hacks CSS:

/* Target IE7 */
*:first-child+html #container { padding: 5px; }

/* Target Mozilla */
html>form #container { padding: 7px; }

/* Target Chrome */
html>**/*body #container { padding: 9px; }

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan Pelayar Khusus dengan Gaya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!