Olimpo Informatico

[juzo kun]

Il JS per la grafica può essere ottimamente sostituito dal CSS: esempio classico, il rollover sui bottoni.

Secondo me Javascript serve per altre cose (controllo di campi di inserimento in form, per fare un altro esempio di tanti)



E Sverx ha perfettamente ragione



Il cambio di CSS ha un'utilità nell'ambito dell'accessibilità, per "servire" una grafica adatta agli ipovedenti, con contrasto elevato, caratteri più grandi eccetera (per esempio,

Constile - altro sito moolto interessante)



Per quel che ho capito dalla mia esperienza i vari script JS usati per cambiare CSS (non conosco abbastanza javascript da crearmene uno io, sigh, sigh) usano il comando reload che il browser interpreta come se ricaricasse la pagina nella maniera consueta: se è impostato in maniera standard la pagina html viene presa dalla cache, quindi l'unico elemento che cambia è solo il CSS (e le immagini che questo carica, ovviamente). Tocca al webdesigner evitare di fare CSS di 40k e rotti (ne ho visti!) e immagini da 200



...a meno che la pagina non sia dinamica, nel qual caso viene per forza scaricata ogni volta.



Cià

JK

Edited by: juzo kun at: 16/12/04 11:29

[rebelia]

Quote:

---

Concordo con quanto detto da SverX, io a casa sono un utente 56k (perché non è ancora arrivato altro) e garantisco che ricare la pagina per sole funzioni estetiche è molto noioso, unica eccezione è il cambio totale del css.



Secondo voi quindi meno js ci sono e meglio è anche a scapito della grafica?

---

la parte sbagliata e' quella che comincia "a scapito" e finisce "della grafica"



la massima leggerezza nelle pagine e' uno dei must, proprio per non penalizzare chi ha connessioni lente o hw non aggiornatissimo



js: la penso come juzo

Edited by: rebelia at: 16/12/04 12:18

[aibsusa]

Quote:

---

la parte sbagliata e' quella che comincia "a scapito" e finisce "della grafica"

---

Hai ragione, purtroppo ho da poco intrapreso il cammino verso l'accessibilità e sono ancora troppo legato al passato.



Ho sfogliato con interesse l'altro sito che mi avete consigliato e ho visto un paio di cose che si possono fara con i css al posto del js.



Adesso non mi resta che mettere mano al codice e vedere cosa si può fare.

[rebelia]

Quote:

---

Hai ragione, purtroppo ho da poco intrapreso il cammino verso l'accessibilità e sono ancora troppo legato al passato.

---

ehm... non era un rimprovero, il mio, ok?

---

... e dio disse "pkunzip universo" (anonimo)

[aibsusa]

Non ti preoccupare, l'ho inteso come un giusto ammonimento.



Da quello che ho letto nelle giude che mi avete consigliato il primo pensiero deve sempre essere all'accessibilità e solo in seguito all'aspetto estetico. Vero è anche che un sito deve essere anche piacevole da guardare quindi gli stili vanno pensati bene.



Un altro consiglio, se un sito di molte pagine ovviamente la grafica principale deve essere comune, per quanto riguarda invece i contenuti specifici è meglio mettere tutto sullo stesso CSS oppure crearne un certo numero a seconda delle esigenze.

Mi spiego meglio.

Io ho un layout a due colonne, su quella di sinistra c'è il menù comune a tutte le pagine e a destra ci sono i contenuti, nei contenuti posso avere diverse tipologie di pagine (tabelle di dati, articoli, testi di legge, form, ecc.).

Gli stili che mi definiscono ad esempio una articolo potrebbero non servire se nella pagina c'è una tabelle e viceversa.



E' quindi meglio:

- fare n fogli di stile e su ogni pagina collegare quello appropriato al contenuto

- fare un unico foglio di stile contenente tutto

- fare un unico foglio di stile con le cose generali e nelle pagine definire dei tag "style"



Vedo pro e contro in tutte e tre le situazioni.

Edited by: aibsusa at: 16/12/04 13:56

[ioSOLOio]

i pro e i contro credo ci possano sempre essere... e la risposta ottimale alla domanda penso non sia sempre la stessa a seconda delle situazioni, cioè di come è strutturato il sito..



un unico css se non è troppo pesante ha il vantaggio di essere caricato una volta sola all'inizio e poi per ogni pagina è già in cache..



nel caso invece ciò non sia valido, tu dici di avere una colonna destinata al menù che resta sempre identico....

quindi già potresti fare un css che riguarda solo il menù..e magari, caso mai ci fossero, includere i dati per testa e fondo pagina (header e footer ?)

e poi vedere come ottimizzare la disposizione del resto dei contenuti..



personalmente preferisco avere il più possibile stili in uno o più css esterni....

[rebelia]

css tutti esterni, altrimenti se ne perde meta' dell'utilita' pratica



piu' css? un css per ogni media usato: uno per il monitor ed uno per la stampa, i piu' classici, cosi' agli elementi che non intendi stampare, puoi dare display: none e sei a posto



di default il css ha media="all", cmq se ne usi anche uno per la stampa, in quello per il monitor puoi mettere media="all" o media="screen" (ma non so se e' ben supportato... juuuuzooooo! help!); media="all" non entra in conflitto con media="screen"



un po' di casino, ma spero che tu mi capisca ugualmente

[juzo kun]

Quoto Rebelia: dipende dai casi



Di solito cerco sempre di tenere avere un unico CSS per l'intero sito, e lavorare per cercare di evitare il sinistro fenomeno della proliferazione indiscriminata delle classi



Però nessuno vieta di includere più fogli di stile esterni nella stessa pagina: così tutto quello che è grafica generale lo metti nel CSS principale, e se hai una singola pagina con elementi spiccatamente diversi o unici rispetto al resto (per esempio, un'impaginazione speciale, una tabella di dati con una quantità mostruosa di classi - capita, a volte...) si può fare un CSS a parte che viene richiamato assieme a quello principale solo per quella specifica pagina.



Cià

JK

[ioSOLOio]

segnalo il seguente articolo [in cui sono illustrate dieci semplici dritte per l'uso dei css e per snellire il codice degli stessi] tratto da questa discussione sul forum di html.it

[juzo kun]

Ehi, due di quelli non li conoscevo! Grassie grassie



Cià

JK

[Gateo]

Premesso che non_capisco_nulla di tutto il thread in particolare e di html e famiglia in generale, vi segnalo questo sito dove ci sono varie risorse gratuite che forse hanno a che fare con quello che state dicendo.

L'hardware e' la parte del computer che puoi prendere a calci;

il software quella contro cui puoi solo imprecare

[juzo kun]

aaarghhhh ma dove ho la testa... mi sono persa metà dei messaggi

Quote:

---

css tutti esterni, altrimenti se ne perde meta' dell'utilita' pratica

---

quoto

Quote:

---

di default il css ha media="all", cmq se ne usi anche uno per la stampa, in quello per il monitor puoi mettere media="all" o media="screen" (ma non so se e' ben supportato... juuuuzooooo! help!); media="all" non entra in conflitto con media="screen"

---

media="screen" penso che sia supportato senza problemi da tutti i browser standard (almeno, non ho mai incontrato problemi)



Se "all" e "screen" hanno delle dichiarazioni diverse sullo stesso elemento viene applicata l'ultima in ordine di lettura (salvo comandi appositi come !important)



Stando a questa tabellona quelli che danno problemi con il media sono Safari 1.0 e altri browser per mac che proprio non se lo fumano.



Cià

JK

[aibsusa]

Ciao, rieccomi.



Dopo aver letto tutti documenti che mi avete consigliato ho iniziato a riscrivere le mie pagine secondo gli standard.



Mi sono però imbattuto in un problema grafico che, anche se conta meno dell'accessibilità, è comunque importante.



Ho un layout a due colonne in cui quella di sinistra è il menù e quella a destra i contenuti, ho utilizzato il posizionamento assoluto, colori, ecc..



Con Opera e Netscape tutto funziona come vorrei io, con IE invece il div che contiene i contenuti sembra ignorare il margin-left che gli ho impostato per lasciare spazio al menù, o meglio, sembra convertirlo in un padding-left. Ho messo un bordo ed ho visto che il div tiene il 100% della larghezza mentre i paragrafi contenuti sono correttamente posizionati.



Avrei per voi esperti due domande:

1) esiste documentazione che parli di qualcosa di analogo e di come risolverlo?

2) Per ovviare al problema ho utilizzato nel css una "expression(window.innerWidth - 115 + "px");". Cosa pensate di questa tecnica? E' tanto sbagliata?

[juzo kun]

Il problema dipende (se ho capito bene la tua descrizione) dal fatto che IE 5.5 non interpreta bene il "box model", ovvero come il padding e il margin si aggiungono alla dimensione del box. Questo, in layout "fissi" (ovvero che usano unità di misura assolute tipo i pixel) può dare qualche problema.



(...se ho capito bene...)



Un suggerimento per girarci attorno è qua



Un'spiegazione con relativo metodo per evitarlo è qua



2) si tratta di uno dei tanti "hack" (ovvero, codice scritto per sfruttare intenzionalmente gli errori di rendering di un certo browser, per passargli un parametro diverso rispetto a quelli a norma)... il validatore CSS che dice?



Cià

JK



edit: ah, la grammatica

Edited by: juzo kun at: 16/1/05 15:28

[aibsusa]

Al validatore non piace.



Anche io avevo pensato in principio che fosse dovuto al "box model" che con IE fa i capricci ma non rientro nei casi descritti nei manuali da te segnalati in quanto IE include nel width anche i bordi e il padding mentre nel mio caso è il margin a non funzionare. (vedi le immagini in questa pagina).



La colonna di sinistra l'ho dimensionata fissa a 100px, quella di destra (div dei contenuti) volevo lasciarla libera di espandersi fino a riempire tutto lo spazio disponibile imponendo l'unico vincolo di margin-left: 100px;

Opera e Netscape lo capiscono da soli che la larghezza del div dovrà essere ridotta di quei 100px mentre per IE funziona solo se specifico esplicitamente l'attributo width: altrimenti lui mette 100% e mi sposta solo il contenuto di 100px.



Il problema quindi è che io non posso sapere a priori quanto sarà larga la pagina e quindi come faccio a dargli un width fisso?



L'altra soluzione che mi è venuta in mente è di impostare tutte le larghezze in percentuale ma rischio che la colonna del menu mi venga troppo stretta o troppo larga.

[juzo kun]

Prova a mettere tutto dentro un box "contenitore" e dai una larghezza percentuale a quello.



(metodo usato parecchio, se dai un'occhiata alle varie pagine "stylose", tra l'altro è anche un buon modo per centrare il tutto alla pagina)



...puoi caricare la pagina "incriminata" da qualche parte così posso dare un'occhiata?



Cià

JK

[rebelia]

ciao



metodo che ho usato anch'io (quello del doppio contenitore, intendo) e che funziona



in alternativa, uso



#divcontenitore p table h3 {width: 98%; margin-left: 1%}



(si intende che p table h3 sono esempi di tutti gli elementi contenuti nel tal div, ma potrebbero essercene altri)



'sto sistema mi incasina _leggermente_ meno la vita rispetto a quello del div sottocontenitore (degustibus, cmq)

[aibsusa]

ok, avevo già il doppio contenitore ma in quello esterno non impostavo la width, appena possibile verificherò. La cosa strana (che mi impedisce di provare ora) è che sul browser (sempre IE) di un altro pc funziona... mah....



Ora non posso fare upload, questa sera metto online i miei esperimenti così mi date un giudizio.

[juzo kun]

Forse perché tu hai la versione 5.5 e l'altro la 6 (o viceversa)?



Ci sono un po' di differenze di rendering ta i due, motivo per cui mi è toccato di fare cose strane per averli tutti e due sulla stessa macchina senza essere costretta al dual-boot...



Cià

JK



EDIT: oggi non c'è verso di riuscire a scrivere 3 parole di fila senza sbagliarne 2

Edited by: juzo kun at: 17/1/05 12:37

[aibsusa]

Quote:

---

Forse perché tu hai la versione 5.5 e l'altro la 6 (o viceversa)?

---

Negativo, entrambi con SO win2000 e IE6.



Mi è venuta in mente una cosa: quando sviluppo a casa non sono sempre connesso: i browser (solo IE a dire il vero) hanno bisogno della rete per interpretare correttamente il DOCTYPE?



Se non è neppure questo l'unica cosa che rimane sono le patch varie di windows e ie.