Apakah definisi 'Hack CSS'?-tutorial css-php.cn

Apakah definisi 'Hack CSS'?

Jika anda telah menulis CSS selama sekurang -kurangnya beberapa tahun, maka anda pasti menggunakan hack CSS. Tetapi jika anda agak baru untuk CSS, mungkin anda telah mendengar istilah tetapi tidak pasti apa yang dimaksudkan.

Dalam jawatan ini, saya akan menerangkan apa sebenarnya istilah CSS Hack bermakna dan bagaimana hack CSS digunakan. Tetapi pertama, beberapa latar belakang untuk menjelaskan mengapa saya merasakan jawatan ini perlu.

Takeaways Key

Ramai pemaju nampaknya salah faham istilah

Sebilangan besar daripada anda sedar, SitePoint baru -baru ini menerbitkan hasil tinjauan CSS yang besar yang saya sediakan. Salah satu soalan tinjauan yang ditanya ialah seperti berikut:

Antara pelayar Microsoft berikut yang manakah anda menulis atau memasukkan hacks CSS?

Apabila saya mula -mula mengkaji hasilnya, saya seolah -olah telah terlepas keanehan dalam keputusan untuk soalan ini. Nasib baik, David Storey, yang merupakan seorang jurutera yang bekerja di pelayar terbaru Microsoft, menegaskannya. Daripada 1,418 orang yang menjawab soalan ini, hasilnya seperti ini:

cukup buruk bahawa lebih daripada 60% pemaju mendakwa menulis hacks CSS untuk IE9 dan IE10 - tetapi 45% untuk Edge? Walaupun terdapat beberapa hacks yang diterbitkan untuk Edge, mereka belum lagi di laman web Browserhacks, jadi nampaknya tidak banyak orang yang menggunakan hacks untuk penyemak imbas itu. Tetapi persoalan yang lebih penting ialah: Apakah masalah pemaju yang berjalan dengan memberikan CSS dalam kelebihan yang mereka perlukan hacks?

Pada mulanya, saya fikir mungkin banyak peserta yang mengelirukan hacks dengan pengesanan penyemak imbas melalui ejen pengguna menghidu. Tetapi itu tidak akan menjelaskan mengapa nombor itu begitu tinggi untuk kelebihan.

maka saya menyedari bahawa mereka mesti salah faham soalan sepenuhnya; Mereka berfikir 'menulis CSS Hacks for Browser X' adalah sama dengan 'Penyemak Sokong X'. Tidak ada penjelasan logik lain, terutamanya apabila anda menganggap peratusan yang tinggi untuk pelayar lain yang juga tidak memerlukan hacks.

jadi mari kita tentukan dengan tepat apa hack, bagi mereka yang mungkin dikelirukan oleh istilah.

apakah hack CSS?

mari kita pertimbangkan contoh. Ini adalah hack CSS:

CSS dalam contoh di atas (sering dirujuk sebagai "Hack Star-HTML") akan mensasarkan

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Salin selepas log masuk

hanya Internet Explorer versi 6 dan ke bawah

. Kebanyakan pemaju yang menyokong IE6 tidak begitu peduli dengan apa-apa sebelum IE6, jadi ini biasanya berfungsi sebagai hack IE6 sahaja. Bahagian yang "hack", adalah asterisk diikuti oleh "HTML". Ini adalah gabungan pemilih sejagat dan pemilih jenis elemen. Pada satu ketika, seseorang mendapati bahawa kedua -dua pemilih ini bersama -sama sebelum kerja pemilih lain hanya dalam versi tertentu IE sementara tidak mempunyai kesan pada penyemak imbas lain. Ini bermakna bahawa margin kiri pada elemen .sideBar yang ditakrifkan dalam contoh kod di atas hanya akan dikenakan ke IE6 atau lebih awal. Dalam kes ini, CSS sebenarnya sah, jadi anda tidak akan mendapat ralat atau amaran mengenainya (lebih lanjut mengenai ini kemudian).

Berikut adalah contoh lain yang diambil dari laman web Browserhacks, kali ini mensasarkan IE11:

Saya tidak akan masuk ke dalam spesifik mengapa ini adalah hack (sebahagiannya kerana saya tidak sepenuhnya pasti saya memahaminya), tetapi CSS di atas hanya akan digunakan untuk Internet Explorer versi 11. Secara teknikal, Browserhacks berkata 'IE11 dan ke atas', jadi saya mengandaikan ini bermakna ia juga akan berfungsi dalam pelayar Edge Microsoft, tetapi saya tidak mengesahkannya.

<span>_<span>:-ms-fullscreen, :root .selector</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Salin selepas log masuk

Titik penting di sini bukanlah penyemak imbas yang disasarkan, tetapi kita semua berada di halaman yang sama dalam memahami apa itu Hack CSS.

Adakah CSS Hacks tidak sah CSS?

Jika anda mempunyai hacks dalam lembaran styles anda, mungkin CSS anda akan menghasilkan amaran dan/atau kesilapan jika anda menjalankannya melalui Validator CSS W3C. Tetapi itu bukan jaminan, dan juga cara untuk mengenali jika ada sesuatu yang hack.

Mungkin CSS anda boleh mengandungi hacks dan tidak menghasilkan amaran atau kesilapan. Sebagai contoh, jika satu-satunya hacks CSS yang anda gunakan mensasarkan IE6 menggunakan hack Star-HTML, stylesheet anda akan mengesahkan dengan baik tanpa kesilapan atau amaran yang berkaitan dengan hacks.

Juga, beberapa hacks (seperti hack IE11 yang saya dibincangkan di atas) menggunakan kod khusus vendor (mis.: -Ms-fullscreen). Dalam kes sedemikian, tetapan lalai dalam pengesahan dapat memaparkan CSS anda dengan mesej skrin hijau "lulus":

Apakah definisi 'Hack CSS'?

Tetapi jika anda tatal ke bawah pada skrin Validator, anda akan melihat amaran seperti ini:

Dalam kes ini, ia memberi amaran kepada saya kerana: -ms-fullscreen dianggap "vendor yang tidak diketahui dilanjutkan kelas pseudo". Jika anda berasa lebih selesa melihat jenis CSS ini sebagai ralat dan bukan hanya amaran, anda boleh menyesuaikan tetapan pengesahan menggunakan bahagian "lebih banyak pilihan" di bawah kawasan input Validator:

Menukar pilihan "Pelanjutan Vendor" kepada "kesilapan" akan menghalang lembaran gaya daripada lulus pengesahan jika ia mengandungi awalan vendor atau CSS khusus pelayar (tidak semestinya hacks). Apakah definisi 'Hack CSS'?

Sebaliknya, anda mungkin menggunakan sesuatu seperti ini:

Sasaran CSS di atas IE8 dan ke bawah. "Hack" adalah gabungan backslash dan sembilan (9). Kebanyakan penyemak imbas akan mengabaikan garis penuh, kerana bahagian 9 menjadikan garis CSS tidak sah. Tetapi, atas sebab apa pun, Internet Explorer versi 8 dan lebih rendah masih akan melihatnya sebagai sah dan akan menggunakan tetapan margin.

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

Salin selepas log masuk

Dalam kes ini, bagaimanapun, tidak kira apa tetapan yang anda pilih untuk pengesahan, ia akan memaparkan mesej ralat dan lembaran styles tidak akan lulus pengesahan:

Teknik apa yang bukan hacks?

Apakah definisi 'Hack CSS'? Kaedah dan teknik berikut tidak semestinya dikategorikan sebagai hacks CSS:

! Pengisytiharan penting bukan Hacks

Barisan CSS dengan! Kata kunci penting yang dilampirkan adalah isu yang berbeza sama sekali. Ini adalah CSS yang sah dan tidak digunakan untuk menyasarkan penyemak imbas tertentu. Ini bukan hack, tetapi ia boleh dilihat sebagai CSS yang buruk.

awalan vendor tidak semestinya hacks

Awalan vendor mensasarkan penyemak imbas tertentu, tetapi ini bukanlah apa yang kita rujuk sebagai hacks. Dalam kebanyakan kes, jika anda menggunakan awalan vendor, maka anda juga membekalkan kod standard yang disertakan yang sah. Itu bukan hack. Bahawa dikatakan, terdapat beberapa kes di mana anda akan menulis kod khusus vendor untuk menargetkan penyemak imbas, dengan itu layak sebagai hack. Kod di atas yang menggunakan _:-MS-Fullscreen adalah contoh. Contoh lain yang baik ialah mencetuskan pecutan perkakasan Dalam pelayar WebKit. Tetapi awalan vendor, untuk sebahagian besar, adalah subjek yang berasingan. Malah, W3C mempunyai dokumentasi mengenai kod khusus vendor, menyokong tanggapan bahawa ini tidak seharusnya, dalam diri mereka, dilihat sebagai hacks.

pemilih spesifik tinggi bukan hacks

Menjadi benar -benar spesifik dengan pemilih anda untuk cuba mengatasi sesuatu di bahagian lain dari lembaran styles (mis. Body. Content #Sidebar P) bukan hack CSS. Ia adalah CSS yang buruk, tetapi ia bukan hack.

sintaks lama bukan hack

Contoh yang baik ini ialah kod kompleks yang diperlukan untuk sokongan penyemak imbas yang mendalam di Flexbox. Selain hakikat bahawa ini mungkin tidak perlu hari ini, saya tidak akan mengkategorikan perkara semacam itu sebagai hack. Ia adalah kod yang sah apabila penyemak imbas itu menyokongnya, jadi ia mungkin mempunyai kesan yang sama seperti hack, tetapi saya tidak fikir ia adalah perkara yang sama.

bagaimana dengan komen bersyarat?

Komen bersyarat yang membolehkan anda menulis CSS atau bahkan HTML untuk menyasarkan versi tertentu Internet Explorer (atau bahkan untuk mengecualikan versi Internet Explorer tertentu) adalah sedikit kawasan kelabu. Jika ditulis dengan cara tertentu, mereka sah HTML, tetapi mereka adalah "hacky".

Kembali pada tahun 2008, Paul Irish mempopularkan apa yang kita rujuk sebagai "kelas bersyarat", yang saya pasti ramai di antara kita telah digunakan. Ini menggunakan komen bersyarat untuk menghasilkan kelas yang boleh anda gunakan dalam lembaran styles anda untuk mensasarkan versi tertentu IE menggunakan CSS yang sah.

Jadi penggunaan komen bersyarat sebagai "hack CSS"? Saya akan berkata ya, hanya kerana mereka mencapai perkara yang sama yang dimaksudkan apabila menggunakan hack CSS yang lebih biasa.

Sekiranya anda menggunakan Hacks CSS?

seperti yang berlaku dengan banyak topik pembangunan web, jawapan di sini bukan hanya ya atau no . Jawapan yang betul ialah ia bergantung kepada . Kebanyakan pemurni akan mengatakan tidak menggunakannya. Tetapi ia sering tidak begitu mudah. Ketika datang ke hacks, nasihat saya adalah ini:

Lakukan segala-galanya dalam kuasa anda, dalam anggaran dan kekangan masa projek, untuk menulis CSS yang sah, berasaskan standard, cross-melayari tanpa menggunakan hacks.
Jika anda telah meletihkan semua jalan atau tidak mempunyai masa atau anggaran untuk menyelesaikan masalah dengan CSS yang sah, bebas hack, kemudian teruskan dan gunakan hack.
Semasa menulis hacks anda, lakukan sesuatu seperti apa yang dicadangkan oleh Harry Roberts, jadi hacks anda dipisahkan dan lebih mudah untuk refactor apabila masa dan anggaran anda membenarkan.
Sentiasa sertakan komen (atau dokumentasi) dengan hack dan cuba refactor kod secepat mungkin.

Secara ringkas

Jika anda tidak ingat apa -apa lagi dari siaran ini, ingatlah ini:

Hack CSS memohon CSS dalam satu atau lebih versi penyemak imbas khusus manakala CSS yang sama akan diabaikan oleh pelayar lain.

Itulah definisi mudah hack CSS. Jadi hanya kerana anda menyokong Microsoft Edge dalam CSS anda, tidak bermakna anda menulis hacks untuk Edge; Sokongan adalah topik yang berbeza sama sekali.

Mungkin ada beberapa perkara dalam jawatan ini yang tidak semua orang bersetuju, tetapi saya fikir kebanyakan pemaju yang memahami apa yang akan dipersetujui oleh hacks di atas.

Jika saya telah meninggalkan apa -apa atau membuat apa -apa kesilapan, jangan ragu untuk memberitahu saya dalam komen dan saya akan membuat apa -apa pembetulan yang diperlukan.

Soalan Lazim (Soalan Lazim) Mengenai Hacks CSS

Apakah tujuan hack CSS?

Hack CSS adalah teknik yang digunakan oleh pemaju web untuk membuat gaya atau susun atur tertentu yang mungkin tidak mungkin dengan peraturan CSS standard. Hacks ini sering digunakan untuk mengatasi ketidakkonsistenan atau batasan penyemak imbas. Sebagai contoh, pemaju mungkin menggunakan hack CSS untuk memastikan laman web memaparkan dengan betul dalam versi lama Internet Explorer, yang mungkin tidak menyokong sepenuhnya piawaian CSS terkini. Walau bagaimanapun, penting untuk menggunakan hacks CSS dengan berhati -hati dan hanya apabila perlu, kerana mereka boleh menjadikan kod anda lebih kompleks dan lebih sukar untuk dikekalkan. melibatkan penggunaan pemilih atau sifat CSS dengan cara yang tidak konvensional. Sebagai contoh, pemaju mungkin menggunakan hack CSS untuk menyasarkan penyemak imbas tertentu dengan mengeksploitasi bug atau ciri yang unik untuk penyemak imbas itu. Ini boleh melibatkan menggunakan harta CSS yang hanya diiktiraf oleh penyemak imbas itu, atau menggunakan pemilih CSS dengan cara yang hanya difahami oleh pelayar. Sekiranya anda melihat kod CSS yang kelihatannya luar biasa atau tidak mengikuti sintaks CSS standard, mungkin hack CSS. Situasi tertentu, mereka umumnya dianggap sebagai amalan yang buruk. Ini kerana mereka boleh membuat kod anda lebih sukar difahami dan diselenggarakan, dan mereka boleh menyebabkan tingkah laku yang tidak dijangka dalam pelayar yang berbeza. Daripada menggunakan hacks CSS, biasanya lebih baik menggunakan teknik CSS standard dan untuk mereka bentuk laman web anda dengan cara yang merendahkan dengan anggun di pelayar yang lebih tua.