Apa arti smiley face ":)" di CSS?

321

Saya melihat kode CSS ini dalam sebuah proyek:

html, body { :)width: 640px;}

Saya sudah menggunakan CSS sejak lama, tetapi saya belum pernah melihat kode ":)" ini sebelumnya. Apakah itu berarti sesuatu atau hanya kesalahan ketik?

css css-hack

— Menandai
sumber

Sepertinya salah ketik untuk saya. Pengembang berusaha untuk bersenang-senang, atau mungkin cara baginya untuk menandai area kode yang akan dicari?

— Lee

@stijn mungkin masih berupa beberapa kode khusus vendor ganjil ...

— Tandai

@ series0ne Saya rasa Anda belum pernah melihat asterisk hack Internet Explorer.

— Nit

Jika ini memang peretasan peramban, Anda ingin menambahkan komentar di file CSS yang menjelaskan ini.

— user247702

Tebakan saya: Penulis kode diketik :) mengira fokusnya adalah pada klien IM. Ketika mereka tidak mengklik ke klien IM dan melanjutkan dari sana, tidak pernah menyadari bahwa mereka telah mengetik smiley di tempat terakhir kursor mereka duduk, yang merupakan file CSS.

— Nathan

Jawaban:

279

Dari sebuah artikel di javascriptkit.com , itu diterapkan untuk IE 7 dan versi sebelumnya:

jika Anda menambahkan karakter non-alfanumerik seperti tanda bintang ( *) tepat sebelum nama properti, properti akan diterapkan di IE dan bukan di browser lain.

Juga ada peretasan untuk <= IE 8 :

div {
  color: blue;      /* All browsers */
  color: purple\9;  /* IE8 and earlier */
 *color: pink;      /* IE7 and earlier */
}

Namun itu bukan ide yang baik, mereka tidak memvalidasi. Anda selalu merasa bebas untuk bekerja dengan komentar Bersyarat untuk menargetkan versi khusus IE :

<!--[if lte IE 8]><link rel="stylesheet" href="ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie-6.css"><![endif]-->

Tetapi bagi mereka yang ingin melihat retas secara nyata, silakan buka halaman ini dalam versi terbaru IE yang Anda miliki. Kemudian buka mode pengembang dengan melakukan a F12. Di bagian Emulasi ( ctrl+ 8) ubah mode dokumen ke 7dan lihat apa yang terjadi.

masukkan deskripsi gambar di sini

Properti yang digunakan di halaman ini adalah :)font-size: 50px;.

— revo
sumber

saya tahu tentang "_" dan "*" di depan pemilih, tetapi tidak yang Anda katakan ini.

— valerio0999

@vlrprbttst Itu adalah karakter konvensional yang digunakan untuk kemudahan. Namun itu menyimpulkan semua nilai non-alfanumerik.

— revo

Saya menandai jawaban ini sebagai benar meskipun salman-a juga benar tetapi sedikit lebih lambat. Saya mengetahui peretasan ini tetapi selalu menggunakan "*". Orang yang melakukan halaman ini adalah joker;).

— Markus

Saya mungkin cukup bodoh untuk melewatkan sesuatu di sini, tetapi mengapa dia bisa melakukannya menggunakan 2 karakter? Dikatakan "tambahkan non-alfanumerik", bukan "tambahkan satu atau lebih ...". Atau apakah itu :berarti sesuatu yang lain? Kalau tidak, tidak bisakah saya menempatkan *********************font-size: "150%";, dll?

— Maks

Hanya dengan memberikan bagian tambahan untuk jawaban ini. Jawabannya bagus dan benar, tetapi melewatkan fakta ini bahwa ini bukan praktik terbaik. Sebagai aturan umum, Anda harus melakukan yang terbaik untuk memberikan pengalaman terbaik di semua browser yang digunakan basis pengguna Anda. Belum lagi, menurut pendapat saya, Anda seharusnya tidak mendukung browser bahwa perusahaan yang membuatnya tidak mendukung lagi.

— AlienDev

171

Sepertinya hack CSS untuk menargetkan IE7 dan browser sebelumnya. Meskipun ini adalah CSS yang tidak valid dan browser harus mengabaikannya, IE7 dan sebelumnya akan menguraikan dan menghormati aturan ini. Berikut ini contoh tindakan hack ini:

CSS

body {
    background: url(background.png);
    :)background: url(why-you-little.png);
}

IE8 (mengabaikan aturan)

Contoh 1 - IE8

IE7 (menerapkan aturan)

Contoh 1 - IE7

Perhatikan bahwa tidak harus berupa wajah yang tersenyum; BrowserHacks menyebutkan:

Kombinasi karakter-karakter ini: [sebelum nama properti bekerja] Internet Explorer ≤ 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

Contoh hot dog GAH ada di sini .

— Salman A
sumber

GAH Hot dog stand flashback

— MikeTheLiar

Ya, dari IE8 dan ke atas, IE menganggap dirinya kompatibel dengan CSS dan sedikit demi sedikit merusak semua perbaikan css khusus IE mereka. (jadi karenanya kita perlu menggunakan solusi javascript)

— Flip Vernooij

Semua situs harus menggunakan tema hot dog stand untuk semua pengguna <IE10. +1

— Pete TNT

@ikkuh Agar adil, IE11 adalah peramban yang cukup baik dan patuh. Ada alasan mereka menjatuhkan dukungan untuk komentar bersyarat IE di dalamnya.

— ajp15243

@ apj15243 Ya mereka telah datang jauh dan berharap mereka akan terus berjalan, kebenarannya adalah bahwa saya masih membutuhkan dukungan bersyarat untuk itu, dan itu tidak hanya IE11, tetapi juga 10,9 dan 8. Jadi mari kita berharap untuk sebuah auto- memperbarui juga, tidak ada alasan untuk tidak menjalankan IE11 di XP selain alasan komersial. Tapi itu diskusi yang berbeda.

— Balikkan Vernooij