Menggodam menggunakan ungkapan CSS. Hack menggunakan simbol

Untuk setiap pereka reka letak yang baik, pada satu ketika persoalan keserasian silang pelayar timbul. Apakah keserasian silang pelayar? Sifat tapak atau reka bentuk tapak ini dipaparkan sama dalam pelayar yang berbeza. Hakikatnya ialah apabila mencipta penyemak imbas, pembangun tidak terlalu memikirkan tentang penyeragaman; ini menimbulkan perwakilan yang berbeza dari tapak yang sama dalam produk mereka. Mencipta susun atur/tapak penyemak imbas merentas membolehkan anda mengatasi perbezaan ini.

Untuk tujuan ini, apa yang dipanggil hacks (cheat) telah dicipta dalam bahasa CSS, yang membolehkan anda menggunakan sekumpulan sifat hanya pada satu penyemak imbas atau beberapa, contohnya, hanya Opera atau hanya Chrome/Safari.

Artikel ini membentangkan pilihan kerja yang mungkin untuk versi terkini pelayar, semua penggodaman telah diuji versi terkini setakat 10 Mei 2015. Jika artikel ini membantu anda atau anda masih mempunyai soalan, tanya dalam ulasan dan nilaikannya, ini mungkin menggalakkan kami untuk mengembangkan bilangan penggodaman untuk pelayar yang berbeza, serta menambah contoh penggunaan untuk setiap satu.

Jika penggodaman itu ditulis terus dalam jadual, maka untuk menggunakannya anda perlu menyalinnya ke fail .CSS dan menyesuaikannya dengan gaya anda, jika tidak, sebagai ganti nama akan ada pautan dengan Penerangan terperinci bagaimana untuk melakukan hack.

Jadual keserasian Hacks Nama dan godam sendiri internet Explorer Google Chrome Opera Safari Mozilla Firefox

	+	-	-	-	-
	-	+	-	-	-
	-	-	+	-	-
_::-moz-svg-foreign-content, :root .class ()	-	-	-	+	-
html/**/body .class, x:-moz-any-link, x:default (warna: #F00 ;)	-	-	-	-	+
	-	+	+	+	-
@supports (-webkit-appearance:none) ( /* berikut ialah gaya anda dalam bentuk biasa */ )	-	+	+	-	-

Pilihan yang paling mudah dan berkesan ialah mencipta fail .css yang berasingan untuk semua versi IE dan menyambungkannya bersama-sama dengan yang utama, tetapi dengan cara yang istimewa.

Komen bersyarat hanya berfungsi dalam IE pada Windows; untuk pelayar lain ia adalah ulasan biasa, jadi ia boleh digunakan tanpa rasa sakit. Sintaksnya ialah ini (dalam fail .php atau .html, tempat kami menyambungkan fail gaya, tambah baris berikut):

di mana styles.css ialah fail yang akan bertanggungjawab untuk gaya untuk IE sahaja.

Satu-satunya yang diketahui pada masa ini satu cara untuk menulis gaya hanya untuk Google Chrome, menggunakan JavaScript. Anda tidak perlu tahu JS, cuma ambil contoh dari sini dan sesuaikan dengan keperluan anda.

Intinya ialah kami menyemak pelayar apa yang digunakan oleh pelawat tapak dan jika ia adalah Google Chrome, maka kami menyambungkannya untuknya fail tambahan gaya, di mana sifat yang diperlukan yang mungkin bertindih dalam fail gaya utama, pilih !penting.

bahagian, tambah baris berikut di dalam teg):

var isChrome = !!window.chrome && !!window.chrome.webstore; if (isChrome) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //laluan ke fail stylesheet untuk Chrome sahaja link.media = "semua"; head.appendChild( pautan );)

Satu-satunya cara yang diketahui pada masa ini untuk menulis gaya Opera sahaja menggunakan JavaScript. Anda tidak perlu tahu JS, cuma ambil contoh dari sini dan sesuaikan dengan keperluan anda.

Intinya ialah kami menyemak pelayar yang digunakan oleh pelawat tapak dan jika ia adalah Opera, kemudian kami menyambungkan fail gaya tambahan untuknya, di mana sifat yang diperlukan yang mungkin bertindih dalam fail gaya utama, kami pilih !penting.

Sintaksnya ialah ini (dalam fail .php atau .html, di mana kami memasukkan fail gaya, iaitu dalam bahagian, tambah baris berikut di dalam teg):

var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) ( var $ = document; var cssId = "myCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet"; link.type = "text/css"; link.href = "/css/template.css"; //laluan ke fail gaya untuk Opera sahaja link.media = "semua"; head.appendChild( pautan );)

Satu-satunya perkara yang anda perlu ubah di sini ialah dalam baris 10 laluan ke fail gaya anda.

Terima kasih atas perhatian anda semua, kami berbesar hati untuk mencuba untuk anda. Kami mengulangi bahawa kami mengalu-alukan komen anda, cadangan untuk penambahbaikan, dsb.

Apabila menggunakan susun atur semantik, setiap pembangun pasti akan menghadapi masalah keserasian silang pelayar, untuk menyelesaikan yang dalam kebanyakan kes perlu menggunakan apa yang dipanggil "godam". Biasanya, istilah ini merujuk kepada cara menulis pemilih atau peraturan khas yang hanya difahami oleh penyemak imbas tertentu. Walau bagaimanapun, keserasian CSS dalam kebanyakan penyemak imbas telah mencapai tahap di mana penggunaan penggodaman harus dihadkan.

Sebagai peraturan, Internet Explorer adalah punca utama masalah. Pelbagai ralat dalam pelaksanaan CSS dalam pelayar Microsoft mengejutkan walaupun pereka susun atur yang paling berpengalaman. Oleh sebab itu, timbul situasi di mana perlu menggunakan peraturan tambahan atau alternatif untuk IE. Ia adalah dalam kes sedemikian yang disyorkan untuk menggunakan hacks. Jika anda tiba-tiba memerlukan peraturan alternatif, katakan, hanya untuk Firefox, maka disyorkan untuk menyemak kod anda, dan dalam 99% kes anda akan menemui lebih banyak lagi. penyelesaian yang elegan.

Hack yang paling popular hari ini kekal yang dipanggil "star html hack":

#element ( position:relative; /* Peraturan asas untuk semua penyemak imbas */ ) * HTML #element ( position:static; /* Mentakrifkan semula peraturan untuk IE lebih awal daripada versi ketujuh */ )

Dalam dokumen HTML dan XHMTL yang sah Pemilih HTML sentiasa memainkan peranan unsur akar, dan BADAN ialah anak peringkat pertama, tetapi bukan peringkat kedua atau lebih. tahap tinggi. Jadi, secara teori, pemilih "*HTML" tidak boleh digunakan pada mana-mana elemen. Tetapi dalam amalan IE versi kelima dan keenam disebabkan ralat dalam enjin sendiri tafsirkan pemilih yang diberikan sebagai HTML dan gunakan peraturan yang ditentukan. Kerana selebihnya pelayar moden pemilih "*HTML" diabaikan, teknik ini boleh digunakan dalam untuk tujuan mementingkan diri sendiri. Ini berguna, tetapi adakah ia betul?

Walaupun fakta bahawa hack ini betul dari sudut pandangan standard CSS, terdapat beberapa nuansa negatif.

Bagaimana untuk menjinakkan Internet Explorer tanpa menggunakan hacks?

Jalan keluar alternatif

Terdapat penyelesaian yang lebih baik dalam kedalaman Rangkaian Pembangun Microsoft - . teknologi ini disokong dalam Internet Explorer bermula dari versi kelima, dengan itu meliputi semua pelayar yang kami minati. Di bawah ialah contoh penggunaan komen bersyarat yang elegan:

Sambungan biasa fail CSS, bagaimanapun, hanya penyemak imbas keluarga Internet Explorer akan melihat baris kedua, dan oleh itu memuatkan fail CSS. Ini berlaku kerana keadaan yang wujud dalam komen bersyarat- jika IE. syarat ini bermaksud "jika Internet Explorer" dan Penjelajah versi lima dan lebih tinggi (termasuk yang ketujuh terkini) baca kod di dalam ulasan dan tafsirkannya.

Oleh itu, semua hacks kami boleh diletakkan dalam fail berasingan:

style.css:

#element ( position:relative; /* Peraturan asas untuk semua pelayar */ )

#element ( position:static; /* Mengatasi peraturan untuk IE semua versi */ )

Kini kami tidak menggunakan penggodaman dalam helaian gaya utama; memastikan bahawa peraturan alternatif digunakan untuk semua Penjelajah, termasuk yang ketujuh; dan juga pengguna yang disimpan pelayar alternatif daripada memuatkan kod yang tidak diperlukan. Pada masa yang sama, kami mengekalkan (X)HTML dan CSS kami sah, kerana ulasan bersyarat sedemikian tidak diiktiraf oleh sesiapa selain IE, termasuk juga pengesah W3C.

Komen bersyarat adalah lebih fleksibel daripada yang dicadangkan oleh satu contoh. Anda boleh merangkumi bukan sahaja semua Penjelajah, tetapi juga semua versinya di bawah atau di atas versi tertentu atau khusus; dan juga memuatkan kod yang akan ditafsirkan oleh semua pelayar kecuali Internet Explorer. Malangnya, ini adalah topik untuk artikel yang berasingan dan pembaca harus membiasakan diri dengan kemungkinan ini sendiri.

kedudukan: relatif

Pepijat Latar Belakang Senarai IE/Win Menghilang
Kekacauan Sempadan IE6

Peraturan ini juga sering digunakan untuk blok yang hilang secara spontan. Tidak jatuh atau tersalah dipaparkan, tetapi hilang. Internet Explorer 5.0 terutamanya bersalah dalam hal ini.

ketinggian: 1%

IE6 Three Pixel Text-Jog
Pepijat Terapung IE Escaping
IE dan huruf condong (berhati-hati dengan 5.0, gunakan melarikan diri)
IE/Win Unscrollable Content Bug
IE/Menangi Pepijat Guillotine

Juga digunakan untuk membersihkan elemen. Tetapkan pada bekas yang mengandungi terapung.

paparan: sebaris

Terapung, Margin dan IE
IE Menggandakan Pepijat Terapung-Margin

paparan: blok sebaris

Peratusan Pelik dalam Model Pemformatan Visual IE6

Ketinggian analog: 1% untuk IE 7.

Dan beberapa petua lagi:

Pertama, gunakan peraturan ini untuk IE hanya jika boleh. Dan untuk versi berbeza penyelesaian mungkin berbeza-beza (lebih kerap ini digunakan untuk ketinggian: 1% dan zum: 1).

Kedua, apabila berhadapan dengan tingkah laku Explorer yang tidak diingini yang tiada penjelasan yang didokumenkan (atau anda terlalu malas untuk mencarinya), cuba gunakan semua peraturan yang mempengaruhi sifat hasLayout secara berurutan kepada elemen yang bermasalah. Kaedah carian berurutan sangat kerap digunakan dalam profesion kami.

Sesiapa sahaja yang telah terlibat dalam reka bentuk Web telah menghadapi masalah ini: apabila semua penyemak imbas biasanya memaparkan gaya yang digunakan pada halaman, dan hanya seorang "bajingan" mencacatkan halaman. Selalunya, pelayar "bajingan" ini menjadi Internet Explorer, terutamanya versi 6 dan lebih rendah, yang digunakan oleh kira-kira 7-8% pengguna Internet. Setuju bahawa ini agak banyak untuk mengabaikan mereka. Walaupun pelayar lain (walaupun yang moden) kadangkala menunjukkan kejutan. Oleh itu, untuk membolehkan mana-mana pelayar memaparkan halaman anda dengan betul, kami telah mencipta hacks CSS.

Hack CSS ialah sintaks khas gaya yang hanya difahami oleh satu penyemak imbas tertentu. Lebih-lebih lagi, penggodaman CSS selalunya berbeza untuk versi berbeza pelayar yang sama.

Walau bagaimanapun, sebelum beralih kepada penggodaman CSS, saya ingin bercakap tentang cara lain untuk memisahkan gaya, yang lebih disukai: dengan menggunakan PHP atau JavaScript, di mana kami boleh menentukan jenis dan versi penyemak imbas, dan, selaras dengan ini, sambungkan fail gaya yang sesuai. Kami tidak akan mempertimbangkan kaedah ini, kerana untuk memahaminya, anda perlu mempunyai set pengetahuan minimum dalam bahasa ini.

Cara lain adalah disebabkan oleh fakta bahawa "deserter" utama, sebagai peraturan, adalah IE. Oleh itu, kaedah berasingan telah dicipta untuknya, walaupun tanpa menggunakan skrip. Ia terdiri daripada ulasan bersyarat di kepala dokumen (di dalam teg). Ia hanya berfungsi untuk pelayar IE, tetapi, sebagai peraturan, terdapat masalah dengan mereka, jadi kaedah ini boleh didapati dengan kerap. Ia kelihatan seperti ini:

Jika diterjemahkan ke dalam bahasa Rusia, ia akan menjadi seperti ini: "Jika penyemak imbas pengguna ialah IE, kemudian sambungkan helaian gaya daripada fail css/ie.css".

Jika anda perlu menentukan versi tertentu penyemak imbas, maka bersama-sama dengan "IE" anda juga mesti memasukkan nombor versi. Contohnya seperti ini:

Seperti yang anda fikirkan, gaya hanya akan digunakan pada pelayar IE versi 6. Ia juga mungkin perlu untuk menentukan helaian gaya penyemak imbas di bawah versi tertentu. Dalam kes ini, sintaks ini digunakan:

Gaya ini akan digunakan pada semua versi pelayar IE di bawah versi 6. Jika bukannya "lt" kami meletakkan "lte", ini bermakna lebih rendah atau setara dengan versi ke-6.

Dalam kebanyakan kes, pengetahuan ini sudah mencukupi, dan kita mesti cuba untuk tidak memerlukan lebih. Walau bagaimanapun, terdapat situasi di mana kaedah ini tidak sepenuhnya munasabah. Sebagai contoh, dalam keadaan di mana dalam besar fail CSS, hanya 1-2 gaya memerlukan penampilan khas untuk penyemak imbas individu. Dalam kes ini, adalah bodoh untuk mencipta fail besar yang berasingan, yang kemudiannya disambungkan melalui skrip atau melalui keadaan sedemikian. Inilah sebabnya mengapa penggodam CSS untuk penyemak imbas dicipta, yang kini kita beralih kepada. Dan kita akan mulakan dengan:

1) Internet Explorer. Godam CSS ini berfungsi untuk versi IE7 dan lebih rendah. Seperti yang ditunjukkan oleh pengalaman saya, pelayar IE8 sudah sangat baik, jadi saya tidak mempunyai sebarang masalah dengannya lagi. Tetapi untuk pelayar IE7 dan ke bawah saya menunjukkan hack:

P(
* jidar atas: 30px; # Untuk pelayar IE7 dan lebih rendah.
}

Seperti yang anda lihat, sifat kedua "margin-top" didahului oleh simbol "*". Ini adalah hack CSS. Iaitu, jika anda meletakkan "*" di hadapan nama hartanah, maka harta ini hanya akan digunakan untuk pelayar IE7 dan ke bawah. Kesimpulan: untuk semua penyemak imbas "margin-top" akan menjadi "20px", dan untuk pelayar IE7 dan lebih rendah ia akan menjadi "30px". Jika anda perlu menentukan gaya hanya untuk IE6 dan lebih rendah (ini sering berlaku, kerana perkara lebih baik dengan IE7 dan selalunya tidak perlu mengedit gaya untuk penyemak imbas ini), maka terdapat satu lagi hack CSS:

P(
jidar atas: 20px; # Untuk semua pelayar
_margin-top: 30px; # Untuk pelayar IE6 dan ke bawah.
}

Memandangkan ia tidak sukar untuk diperhatikan, sifat kedua didahului oleh tanda "_", yang merupakan hack CSS untuk pelayar IE6 dan lebih rendah.

2) Mozilla Firefox. Hack CSS ini hanya berfungsi untuk pelayar Mozilla Firefox. Berikut adalah contoh beliau:

P, x:-moz-any-link (
jidar atas: 30px;
}

DALAM dalam contoh ini Dilaporkan bahawa gaya untuk pemilih "p" akan digunakan hanya pada pelayar Mozilla Firefox, dan semua pelayar lain akan mengabaikan gaya ini.

3) Opera. Godam CSS ini digunakan untuk penyemak imbas Opera. Contoh penggunaannya:

* |html p (
jidar atas: 30px;
}

Di sini saya rasa semuanya juga jelas.

Itu sahaja yang saya ingin tulis dalam artikel ini. Walau bagaimanapun, saya mengingatkan anda sekali lagi bahawa penggodaman CSS adalah buruk; selalunya mereka tidak lulus semakan kesahihan kod, dan ini tidak lagi bagus. Secara umum, cuba untuk tidak menggunakannya atau gunakannya hanya dengan paling banyak sebagai jalan terakhir. Secara umum, saya mengesyorkan agar anda membiasakan diri dengannya, maka anda akan mempunyai lebih sedikit masalah yang berkaitan dengan persembahan gaya yang berbeza dalam penyemak imbas.

Dalam Internet Explorer 7 (IE7) lwn. versi terdahulu telah ditetapkan sejumlah besar kesilapan. Walau bagaimanapun, ralat baru telah muncul yang juga memerlukan penulisan kod berasingan untuk versi pelayar ini. Berikut ialah penggodaman untuk versi ketujuh pelayar Internet Explorer.

Menggunakan!iaitu

Dalam versi ketujuh, pepijat dengan !important telah dibetulkan, tetapi yang baharu muncul. Jika selepas harta anda menambah ruang Tanda seru dan mana-mana set aksara, maka sifat gaya akan diterima dengan betul dan bukannya diabaikan. Biasanya notasi !ie digunakan dan semua pelayar kecuali IE6 dan IE7 melangkau gaya ini. Sila ambil perhatian bahawa penggodaman menyebabkan kod CSS tidak sah.

Khaki .hack ( latar belakang: oren; /* Warna oren */ latar belakang: hijau !iaitu; /* Warna hijau */ padding: 10px; warna: #fff; ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt.

Dalam contoh ini, IE6 dan IE7 akan menunjukkan warna latar belakang blok dalam warna hijau, pelayar lain akan menunjukkan oren.

Penggunaan!!penting

Satu lagi masalah dengan !penting ialah IE7 membenarkan aksara haram dalam entri. Semua pelayar akan mengabaikan pembinaan yang penting, tetapi IE6 dan IE7 menganggapnya betul. Menggunakan entri sedemikian menyebabkan CSS tidak sah.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Khaki .hack ( latar belakang: oren; /* Warna oren */ latar belakang: hijau !!penting; /* Warna hijau */ warna: #fff; padding: 10px; ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Dalam contoh ini, dalam IE6 dan IE7 warna latar belakang blok akan menjadi hijau, dalam pelayar lain ia akan menjadi oren.

Asterisk sebelum nama pemilih

Menambah asterisk (*) sebelum nama sifat gaya adalah bertentangan dengan spesifikasi CSS, tetapi difahami oleh Internet Explorer sehingga dan termasuk versi 7.0. Sehubungan itu, sifat dengan asterisk di hadapan hanya akan berfungsi dalam keluarga penyemak imbas ini.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Khaki .hack ( latar belakang: oren; /* Warna oren (untuk semua pelayar) */ *latar belakang: hijau; /* Warna hijau (untuk pelayar IE7 dan bawah) */ warna: #fff; padding: 10px; ) Lorem ipsum dolor duduk amet...

Dalam contoh ini warna hijau Latar belakang blok akan ditetapkan hanya untuk pelayar Internet Versi penjelajah 7.0 dan ke bawah. Dalam pelayar lain warna latar belakang akan menjadi oren.

Pembinaan *:anak pertama+html

Binaan *:first-child+html yang ditambahkan sebelum nama pemilih hanya berfungsi untuk Internet Explorer 7. Kelebihannya ialah ia mematuhi spesifikasi CSS.

XHTML 1.0 CSS 2.1 IE 6 IE 7 IE 8+ Cr Op Sa Fx

Khaki *:anak pertama+html .hack ( latar belakang: hijau; /* Warna hijau */ ) .hack (latar belakang: oren; /* Warna oren */ warna: #fff; padding: 10px; ) Lorem ipsum dolor sit amet ...

Dalam contoh ini, warna latar belakang blok akan ditetapkan kepada hijau hanya untuk IE7. Dalam pelayar lain warna latar belakang akan menjadi oren.

hacks CSS untuk penyemak imbas Opera*|html .style ( background: #F00; ) html:first-child .style ( background: #F00; ) CSS hacks untuk pelayar FireFox@-moz-document url-prefix() ( .style (background: #F00;) ) CSS hacks untuk Internet Explorer 6.0 dan ke bawah .style ( _background: #F00; ) * html .style ( background: #F00; ) CSS godam untuk Internet Explorer 7.0 *+html .style ( background: #F00; ) html>body .style ( *background: #F00; ) CSS hacks untuk pelayar Safari body:anak terakhir:bukan(:root:root) .style (latar belakang: #F00; ) html body:last-child .style ( latar belakang: #F00; )

Untuk Internet Explorer ada penyelesaian alternatif- komen bersyarat (komen bersyarat). Teknologi ini disokong dalam Internet Explorer bermula dari versi kelima, dengan itu meliputi semua pelayar yang kami minati. Di bawah ialah contoh penggunaan ulasan bersyarat:

Baris pertama ialah sambungan biasa Fail CSS, bagaimanapun, baris kedua akan dilihat, dan oleh itu fail CSS akan dimuatkan, hanya oleh penyemak imbas keluarga Internet Explorer. Ini berlaku terima kasih kepada syarat yang dibenamkan dalam ulasan bersyarat - jika IE. Syarat ini bermaksud "jika Internet Explorer dan Explorer versi lima dan lebih tinggi baca kod di dalam ulasan dan tafsirkannya.

Oleh itu, semua hacks kami boleh diletakkan dalam fail yang berasingan.

Dan izinkan saya mengulangi diri saya sekali lagi. Masa IE6 akan berakhir, dan hari ini hampir semua pelayar moden dipaparkan kod yang sah cukup memadai. Oleh itu, jika anda menghadapi masalah dengan memaparkan halaman dalam mana-mana penyemak imbas, sebelum menggunakan penggodaman, semak semula kod anda, percubaan, cari maklumat di Internet, dan kemungkinan besar penggodaman yang tidak perlu boleh dielakkan, sekali gus mencapai kesahihan mutlak kod anda .