[HACK & ESCAPE] CSS x tipo di browser

[Jarno]

a parte la soluzione (forse migliore) di caricare un CSS personalizzato per ogni tipo di browser ...se invece voglio fare un CSS unico ed all'interno usare i trucchettini per fare lo "slalom" tra i diversi brower, c'è un modo standard per fare l'escape di alcune proprietà per certi browser?

tipo "-moz-box-sizing: border-box;"

[Jarno]

ok, ho trovato questi "HACKS" in giro per google....ma alla fine mi si incrociano gli occhi!!! e che devo fare?!?! ogni volta che modifico una proprietà in css mi tocca cervellarmi per ricordare tutti gli hack e se qualcosa è scritta in un certo modo proprio perchè è così che funziona.... da matti VVoVe:

cmq QUI ho trovato un ottimo riassunto.


cmq per quanto sia odioso dover gestire in parallelo 3 CSS ...credo che sia l'unica, più pulita ed organica soluzione

<SCRIPT language="JavaScript">
if(document.layers){ document.write("<link rel='stylesheet' href='net4x.css' type='text/css'>"); }
if(document.all){ document.write("<link rel='stylesheet' href='ie.css' type='text/css'>"); }
if(document.getElementById){ document.write("<link rel='stylesheet' href='net6.css' type='text/css'>"); }  // per Netscape 6
</SCRIPT>

QUI invece è proposta una soluzione mista, interessante ma la devo capire ancora....

[fcaldera]

A me sembra invece una soluzione poco accessibile.
Senza javascript puoi ottenere lo stesso effetto

<link rel="stylesheet" type="text/css" href="nn4.css" media="all" />

<style type="text/css">
  @import url(firefox-e-altri-w3c-compliant.css)
</style>


<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" media="all" />
<![endif]--> 

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" media="all" />
<![endif]--> 

....

[Mega69]

Originariamente inviato da Jarno
tipo "-moz-box-sizing: border-box;"

Inoltre tieni conto che le proprietà non supportate da un browser vengono semplicemente tralasciate. In parole povere puoi usare il filter di IE o i -moz- di FF senza doverti preoccupare della compatibilità crossbrowser ( al massimo ti devi preoccupare della validazione del css ).

[Jarno]

x fcaldera

per me chi non attiva javascript può far quello che gli pare.... ma come si fa a navigare senza Javascript+Cookie+Css ...?!?!

cmq, sono curioso, come funziona quello che hai scritto? come avviene la selezione del file css? basta quella scritta dentro il commento? e come mai funziona?

:master:

[fcaldera]

per me chi non attiva javascript può far quello che gli pare.... ma come si fa a navigare senza
Javascript+Cookie+Css ...?!?!

- c'è chi esclude i cookie ad eccezioni di certi domini
- i palmari potrebbero non supportare javascript
- potresti usare certi costrutti di javascript 1.6 (ad esempio "each" o un "try... catch") che non funzionerebbero dovunque
- Un utente non vedente di fatto naviga la pagina come se non avesse alcun CSS (se non forse quello con media="braille")

Ma non devi preoccuparti se i css vengono disabilitati... quello che ti deve importare è che senza i css le informazioni restino fruibili.

cmq, sono curioso, come funziona quello che hai scritto? come avviene la selezione del file css? basta quella scritta dentro il commento? e come mai funziona?

partendo dal tuo esempio suppongo tu voglia impostare un css per NN4 (document.layers), uno per i browser w3c compliant (document.getElementById) e uno (o più) per IE (document.all)



Il codice che ti ho postato (l'ho appena modificato, mi sono accorto di una svista ) riflette il fatto che:

- NN4 ignora la clausola import e quindi lo includo all'inizio con link. Di fatto poi ignorerà i css seguenti
- l'import (non letto da NN4) ripristinerà il css impostato per NN4 e lo setta quindi per i browser più aderenti agli standard.
- I commenti condizionali in coda correggono lo stile per ciascuna specifica versione di IE (ammesso che sia necessario)

se ti interessa l'argomento cerca tra i link utili "filtri css" e "commenti condizionali"

[thomas_anderson]

A mio avviso la browser detection migliore è lato server. in questo modo ti assicuri che i fogli di stile vengano letti sempre.

http://techpatterns.com/downloads/ph..._detection.php

NB: a parte gli hack per IE, c'è un hack più pericoloso, per Opera:

@media all and (min-width: 0px) {
codice per opera }

questo lo sconsiglio, in quanto non sappiamo se in futuro
anche FF implementerà le media query.

una query simile esiste anche per FF, solo che è per i fogli di stile utente:

@-moz-document { ... }

[zoom]

solitamente creo un css unico per ff

poi ne creo uno per ogni browser che da problemi inserendo SOLO gli elementi da cambiare per fare funzionare tutto correttamente.

solitamente quindi devo fare il css standard, un css per IE vecchi, un css per IE recenti, a volte qualcosina per Opera.
Su altri browser finora cambia al massimo qualcosina graficamente di poco conto, quindi lascio correre il più delle volte.

[Jarno]

anche questa è forte...