Cosa significa la faccina ":)" nei CSS?

321

Ho notato questo codice CSS in un progetto:

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

Sono in giro con CSS da molto tempo ormai ma non ho mai visto questo codice ":)" prima. Significa qualcosa o è solo un refuso?

css css-hack

— marchio
fonte

A me sembra un errore di battitura. Lo sviluppatore sta cercando di essere divertente, o forse un modo per lui di contrassegnare le aree del codice che cercherà?

— Lee,

@stijn potrebbe ancora essere un codice specifico del fornitore strano ...

— Segna il

@ series0ne Presumo che tu non abbia mai visto l'hacker di Internet Explorer asterisco.

— Nit

Se si tratta effettivamente di un hack del browser, ti consigliamo di aggiungere un commento nel file CSS che spieghi questo.

— user247702

La mia ipotesi: l'autore del codice ha digitato :) pensando che il focus fosse sul client di messaggistica istantanea. Quando non lo era, fecero clic sul client di messaggistica istantanea e procedettero da lì, senza mai rendersi conto di aver digitato una faccina nell'ultima posizione in cui si trovava il cursore, che era il file CSS.

— Nathan,

Risposte:

279

Da un articolo su javascriptkit.com , applicato per IE 7 e versioni precedenti:

se aggiungi un carattere non alfanumerico come un asterisco ( *) immediatamente prima del nome di una proprietà, la proprietà verrà applicata in IE e non in altri browser.

Inoltre c'è un trucco per <= IE 8 :

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

Tuttavia non è una buona idea, non convalidano. Ti senti sempre libero di lavorare con i commenti condizionali per il targeting di versioni specifiche di 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]-->

Ma per quelli che vogliono vedere l'hacking in realtà, per favore apri questa pagina nell'ultima versione di IE che hai. Quindi vai alla modalità sviluppatore facendo un F12. Nella sezione Emulazione ( ctrl+ 8) cambia la modalità documento in 7e vedi cosa succede.

inserisci qui la descrizione dell'immagine

La proprietà utilizzata nella pagina è :)font-size: 50px;.

— revo
fonte

sapevo di "_" e "*" prima del selettore, ma non di quello che hai detto.

— valerio0999,

@vlrprbttst Questi sono caratteri convenzionali usati per facilità. Tuttavia, conclude tutti i valori non alfanumerici.

— revo

Sto contrassegnando questa risposta come corretta anche se Salman-a era anche corretta ma un po 'più lenta. Ero a conoscenza di questo trucco ma ho sempre usato un "*". Colui che ha fatto questa pagina è un jolly;).

— Segna il

Potrei essere abbastanza stupido da perdere qualcosa qui, ma perché può farlo usando 2 personaggi? Dice "aggiungi un non alfanumerico", non "aggiungi uno o più ...". O :significa qualcos'altro? Altrimenti, non posso mettere *********************font-size: "150%";, ecc.?

— Max

Giusto per aggiungere una parte in più a questa risposta. La risposta è ottima e corretta, ma manca questo il fatto che questa non è la migliore pratica. Come regola generale, dovresti fare del tuo meglio per offrire la migliore esperienza in tutti i browser utilizzati dalla tua base di utenti. Per non parlare, a mio avviso, non dovresti supportare i browser che la società che li ha resi non supporta più.

— AlienDev,

171

Sembra un hack CSS per colpire IE7 e i browser precedenti. Mentre questo è CSS non valido e i browser dovrebbero ignorarlo, IE7 e precedenti analizzeranno e rispetteranno questa regola. Ecco un esempio di questo hack in azione:

CSS

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

IE8 (ignora la regola)

Esempio 1 - IE8

IE7 (applica la regola)

Esempio 1 - IE7

Nota che non deve essere una faccina sorridente; Menzioni BrowserHacks :

Qualsiasi combinazione di questi caratteri: [prima che il nome della proprietà funzionerà] Internet Explorer ≤ 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

L'esempio del supporto per hot dog GAH è qui .

— Salman A
fonte

GAH Flashback stand per hot dog

— MikeTheLiar,

Sì, da IE8 in poi IE si considera conforme ai CSS ed è un po 'alla volta rompendo tutte le loro correzioni css specifiche per IE. (quindi quindi dobbiamo ricorrere a soluzioni javascript)

— Flip Vernooij

Tutti i siti dovrebbero utilizzare un tema di supporto per hot dog per tutti gli utenti <IE10. +1

— Pete TNT,

@ikkuh Per essere onesti, IE11 è un browser abbastanza decente e conforme. C'è una ragione per cui hanno abbandonato il supporto per i commenti condizionali di IE in esso.

— ajp15243,

@ apj15243 Sì, hanno fatto molta strada e spero che continueranno ad andare avanti, la verità è che ho ancora bisogno del supporto condizionale per questo, e questo non è solo IE11, ma anche 10,9 e 8. Quindi desideriamo un auto- aggiornare anche, non vi è alcun motivo per non eseguire IE11 su XP se non per motivi commerciali. Ma questa è una discussione diversa.

— Flip Vernooij,