Hack CSS per tutti browser!
10
Massimo Mastromarino
il 15 gennaio 2010
State impazzendo e non trovate una la soluzione per le vostre pagine HTML per fare in modo che funzionino correttamente su tutti browser? Il primo consiglio è quello di staccare alzarvi dal computer e riprendere in un secondo momento. Spesso la troppa concentrazione ci impedisce di vedere anche le soluzioni più semplici.
Ma se proprio non volete mollare ed Internet Explorer o Firefox o Opera o Chrome o Safari non rispondono alle vostre richieste: allora vi presento l’ Hack CSS dei vostri sogni (anche se non credo tutti la pensino così).Poter decidere di comandare distintamente ben 8 browser in base ad un unico class è può essere una soluzione allettante per chi è arrivato al punto di impazzire col CSS.
Su GiantIsland ho trovato CSS Hack for Chrome, Safari, and Internet Explorer, questo Hack CSS che promette proprio di fare ciò. Per assurdo sarebbe possibile decidere di assegnare ad ogni browser utilizzato un colore diverso del testo.
Guardate esempio del l’hack CSS.
Il codice Hack css per tutti i browser
/*//// GIANTISLAND LLC CSS HACK*/
#test1 {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:grey;\
color:black;
[color:black;
color:yellow;]
}
/*end*/
/*\*/
html*#test1 {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}
/*\*/
* html #test1 {
color:green;
}
/*end*/
[#test1 {
[color:red;
color:blue;
]color:purple;
Legenda Hack CSS
Se vedi nero, usi un browser basato su Mozila (Firefox).
Se vedi rosso, usi una vecchia versione Mozilla (< version 1.01) (Firefox).
Se vedi giallo, usi Google Chrome (2.01+), Opera, o Safari (4.0+).
Se vedi blu, usi Google Chrome (1.0 – 2.01), o Safari (1 – 3).
Se vedi grigio, usi Internet Explorer 8.
Se vedi lilla, usi Internet Explorer 7.
Se vedi verde, usi Internet Explorer 6.
Se vedi arancione, usi Internet Explorer 5.
Demo hack CSS
Verificate voi stessi con i browser che avete installato sul vostro sistema: esempio del l’hack CSS.
Interessante, ho fatto le prove
Con Google Chrome vedo giallo quindi funziona
Con IE 8 vedo grigio quindi funziona
Con IE 7 vedo lilla
L’unico a dare problemi è Firefox perchè la scritta la vedo comunque grigia
Già è vero,
ora ho sistemato ho preso il codice direttamente dal sorgente della pagina ora mi sembra corretto. Lo vedi giusto anche tu?
Interessante prova di abilità ma dal punto di vista pratico è disastroso, davvero pensando che si possa utilizzare qualcosa di simile nella vita lavorativa di tutti i giorni? Non credo proprio, meglio fare il targeting del browser via js con http://rafael.adm.br/css_browser_selector/ il risultato è identico ma molto più controllabile e veloce in caso si debba applicare anche a decine di regole diverse.
Salve a tutti
scusate la domanda che può sembrare un pò sciocca, ma qualcuno saprebbe dirmi il nome del font che è utilizzato nell’immagine di quest’articolo?
Lo trovo leggibilissimo e decisamente bello. Per scrivere codice mi sembra il top!
Grazie anticipatamente
Alberto
Ok ora funziona benissimo
l’articolo è sicuramente utile, ma è scritto veramente da schifo. Era tanto difficile fare gli hack distinti per i diversi browser?….
Non posso che dirmi daccordo con Carlo, scritto così richiede un po’ troppo impegno per separare i commenti.
Certo che Carlo poteva usare toni un poco meno aspri…
eheh! Lamentatevi con l’autore
io l’ho solo riportato:
http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx
Scherzi a parte direi che questo hack è frutto dell’esasperazione di chi vuole a tutti i costi mostrare elementi differenti in differenti browser. Esistono degli hack che possono essere più utili per sistemare il singolo browser che non risponde come desideriamo.
Salve a tutti, avrei due domandine da fare a voi esperti:
1) Nel mio sito ho un problemino di visualizzazione, o meglio sul mio pc quando modifico qualche elemento non lo vedo caricato correttamente mentre chi vede il sito da casa propria, sia con Firefox sia con Explorer lo vede bene. Penso sia un problema di cache giusto? In pratica è come se alcuni “pezzi del sito” tipo la sidebar o alcuni riquadri spariscano e non vengano caricati. L’hack di cui si parla qui è la soluzione?
2) Vorrei sapere il nome del font dell’immagine per scrivere il codice e il normale font utilizzato qui su questo sito.
Grazie e spero di essere stato chiaro!
1) Non credo che questo hack sia la soluzione al tuo problema. Hai provato a svuotare bene la cache?
2) Non saprei con certezza di che font si tratti, ma puoi cercare su google “Font monospace” o sfogliare questa pagina pena di risorse http://keithdevens.com/wiki/ProgrammerFonts
ciao