Media queries

[Roberta245]

ciao. sto usando le media queries con il template Protostar. Mi funzionano abbastanza bene ma sotto Internet Explorer 8 non funzionano. Mi sono documentata e ho letto che con IE8 effettivamente ci sono dei problemi che si dovrebbero risolvere agganciando il file "media-queries-ie.js" nella index.php del template tramite un semplie script.
Ho applicato questa tecnica ma non mi sembra abbia risolto granchè (sempre sotto IE8).
Sapete indicarmi un metodo efficace che avete testato con successo per risolvere questo problema?

Grazie

[lucantropo]

ciao. ti dico come ho risolto per quel che mi riguarda, da quando utilizzo html5 ho deciso di infischiarmene degli utenti di IE8 e ancora di più da quando è finito il supporto per xp.
Utilizzo una pagina di cortesia che si visualizza con IE8 e inferiori che avvisa l'utente che il browser è troppo obsoleto e li rimanda ad aggiornarlo o ad utilizzare browser diversi.

So che è un po' estrema come soluzione, ma ho valutato l'incidenza della visualizzazione di più di 20 siti che avevo al momento con ie8 e non valeva la pena di perdere tempo per adattare tutto il sito solo a quel browser.

[Roberta245]

ciao lucantropo. secondo te sono molti gli utenti che usano ancora IE 8? Lavorando prevalentemente su macintosh conosco poco Explorer sinceramente.

Come si fa a creare una pagina di cortesia e farla aprire quando l'untente si collega da internet explorer 8?

Thanks

[lucantropo]

Ciao, per come farlo ti lascio un link dove di un mio blog dove avevo spiegato la procedura

http://www.photofever.it/web-creation/web/web-creation/internet-explorer-8-invitiamo-gli-utenti-ad-aggiornare-il-browser

é molto semplice, usi un div che si visualizzerà con internet explorer 8 e inferiori, lo personalizzi in maniera semplice a tuo piacere inserendo i vari link per gli altri browser.

Per quanto riguarda gli utenti ho guardato i dati del sito che ti ho linkato nel mese di novembre, tra internet explorer 7 e 8 la percentuale non arriva al 3%, lo stesso vale per altri siti che tengo monitorati.

[Roberta245]

interessante. quindi i più usati mi sembra di capire siano  explorer9  explorer 10 ed explorer 11 correggimi se sbaglio.
In questi ultimi penso che le media query non dovrebbero dare problemi vero?

Grazie

[lucantropo]

Internet explorer ha avuto un calo tremendo negli ultimi anni, le percentuali non sono altissime, sui miei siti se li metto tutti e tre assieme forse arrivo al 4% contro un quasi 50% di chrome (diviso tra mobile e fisso), firefox e safari.

Detto questo finalmente con internet explorer 11 sono riusciti a fare un browser decente, il 10 è quasi decente, il 9 ha ancora grossi problemi ma è usato poco. il 10 e l11 dovrebbero funzionare tranquillamente con le media query, sul 9 non sono del tutto sicuro ma credo di si.

[Roberta245]

ho guardato la pagina che mi hai linkato vediamo se ho capito bene il da farsi.
Apro la pagina index.php del mio template protostar e prima della fine dell'head metto:

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all"/>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/css/ie.css"/>
<![endif]-->

quindi nel file  "template.css"(che nel template Protostar sarebbe l'equivakente del tuo "style.css") metto la regola:

.aggiorna{
    display:none;
}


mentre nel file  "i.e.css" metto le regole:


.main{
    display:none;
}
.aggiorna{
    display:block;
}



è giusto?
non ho però capito dove e come devo scrivere il testo con i link ai vari browser.

[lucantropo]

Nel file index.php del template devi scrivere il div "aggiorna" subito prima del contenitore generale del sito. io l'ho chiamato main ma non so come venga chiamato nel protostar, in ogni caso mettilo  proprio dopo il tag body.

[Roberta245]

ciao Luca. Ho fatto delle prove anche con internet explorer 9 e le media queries non funzionano neanche li. E' un bel problema con explorer effettivamente. Non ho provato con la 10 e la 11 ma se il buongiorno si vede dal mattino mi vengono dei dubbi sinceramente.

[lucantropo]

Ciao, da quel che ho letto poco fa le media queries sono supportate da internet explorer 9 in poi, mentre il supporto non è completo per i css3, quale è il problema nello specifico?

[Roberta245]

ciao Luca
dunque ti sintetizzo brevemente il mio problema. sto applicando le media queries per rendere il mio sito responsive. Uso il template Protostar che è responsive però negli smartphone incolonna prima la colonna di sinistra poi i contenuti centrali ed infine la colonna di destra. Questa sequenza non mi soddisfa in quanto per prima volevo fa apparire i contenuti centrali poi di seguito la colonna sinistra e a chiudere la colonna destra.
Per ottenere questo l'unica via che posso percorrere è l'uso delle media queries attarverso le quali cancello (display: none) tutti i moduli della colonna di sinistra e quindi i contenuti centrali appaiono per primi ( i moduli cancellati li metto poi nella colonna di destra e quindi negli smartphone mi appaiono alla fine come voglio io).
Ora..tutto questo funziona perfettamente su Firefox ma in explorer no. Ho provato sulla versione 8 e anche sulla 9 ma non mi funzionano cioè anche se do la regola del "display: none" i moduli continuano a vedersi ugualmente quando li osservo con explorer.
Spero di essermi spiegata correttamente.

[lucantropo]

Aloora, ti faccio un paio di domande:
1) hai provato a fare operazioni tipo svuotare la cache di internet explorer?
2) Quando dici che su internet explorer non funziona, ovviamente fai la prova riducendo la finestra del browser rimpicciolendola come fosse uno smartphone?
Se rispondi si a questa domanda il problema non si pone, perchè di solito internet explorer non viene utilizzato come browser sui cellulari, se non internet explorer mobile sui windows phone, Quindi in teoria non dovresti avere problemi di visualizzazione.
Se vuoi andare sul sicuro dovresti cercare un emulatore di explorer mobile.
Altrimenti prova a verificare che tutto funzioni regolarmente su Screenfly che ti farà vedere il sito a diverse risoluzioni.

[Roberta245]

Luca mi vergogno un po a dirlo ma effettivamente era la cache. Appena l'ho rimossa il "display: none" ha iniziato a funzionare anche su explorer. Su Smartphone non ho mai avuto problemi ha sempre funzionato era sul Pc da scrivania (sotto explorer che non funzionava).
Non so come ringraziarti era una banalità ma non ci avevo pensato.

Grazie 1000 Luca