CSS problema aggiornamento pagina

[capellea]

Ciao a tutti.
Ho un problema di aggiornamento della pagina web: potete aiutarmi a scoprire cosa sta succedendo?

Sto lavorando su un file HTML corredato di CSS, quando faccio un aggiornamento del css, ricarico la pagina html relativa ma non vedo la modifica se non cancellando la cronologia del browser e spesso devo ripetere l'operazione più volte prima di vedere la modifica.
Sto usando Chrome su W10 e le modifiche le faccio dall'editor di Altervista, quindi già dentro il sistema.

In alternativa ho caricato la pagina web su Edge e lì funge meglio ma non troppo, perché anche su Edge devo cancellare la cronologia.

Inoltre, ho caricato alcune immagini in formato PNG, nel tempo mi sono accorto che non erano precise e le ho modificate, niente di speciale, solo qualche ritocco e le ho ricaricate nella stessa posizione; ebbene anche quelle non le vedo aggiornate, nonostante abbia cancellato il file vecchio e ricaricato il nuovo.

Ho anche ricopiato tutto su harddisk, index.html, css, immagini, e da lì il file viene caricato correttamente.

Qualche idea?
Grazie.
Ugo

[GraphOGLRisorse]

Salve,
il suo è un problema di cache del browser.

In alternativa ho caricato la pagina web su Edge e lì funge meglio ma non troppo, perché anche su Edge devo cancellare la cronologia.

E' normale che usando un altro browser si possa riscontre un comporteamento un pò differente.

Qualche idea?

Se diepnde dal browser, a meno di eventuali impostazioni specifiche in quello in uso, generalemnte non si può fare altro che aggiornare la cache più volte, quando si apportano modifiche lato server. Svuotare la cache del browser.

Cordiali saluti.

[capellea]

Grazie della risposta, quindi avevo visto giusto.
Il suo intervento però mi ha fatto scoprire la funzione CTRL+F5 che qualcosa mi ha aggiustato.
Come ho già detto ho svuotato la cache del browser parecchie volte, ma con CTRL+F5 ho ottenuto un piccolo risultato: alcune parti grafiche le ha sistemate ed ora cerco di far funzionare il resto.
Grazie
Ciao
Ugo

[capellea]

Ciao, se qualcuno ha idee in merito sono ancora perso nelle nebbie dei browser.
La mia risposta precedente è annullata dalla recidività di internet a fare quello che vuole invece di quello che gli dico di fare.
Lo so, il pc è stupido e la colpa è mia, ma allora perché il sito intero funziona se parte da pc invece che da rete?
Grazie ancora a chi vorrà spendere un po' di tempo su questo problema.
Ciao
Ugo

[alemoppo]

ma allora perché il sito intero funziona se parte da pc invece che da rete?

Il sito parte "dalla rete", o meglio da un server connesso ad internet. Il tuo PC, per non scaricare ogni volta tutti i dati, salva qualche elemento così da poter caricare i siti più velocemente (senza ogni volta riscaricare tutto). Se però viene modificato qualcosa lato server, il PC può non accorgersene ed utilizzare la vecchia versione salvata in locale.

Tornando al tuo problema, puoi indicare un elemento di una pagina che non si è aggiornata? Magari mostrando qualche schermata?

Ciao!

[capellea]

Grazie alemoppo, ti faccio un riepilogo, tieni conto che ho cancellato la cronologia decinaia e decinaia di volte, come si dice.
Il sito però ha anche altri problemi che si sono aggiunti nel frattempo.
Il sito è capellea.altervista.org non è un gran sito ma fa quello che serve.

Problema 1: visualizzazione errata dell'immagine.
Ho caricato l'immagine di una sciarpa sul sito il berretto ha un'ombra verde sulla parte superiore, ma nell'immagine sul server non c'è; vedendo il dettaglio, ho ricaricato la foto dopo averla corretta, ovviamente con lo stesso nome file, eppure non si carica l'immagine corretta.

Problema 2: visualizzazione differenziata con CSS su desktop e smartphone.
Il problema è che sembra che faccia all'opposto di quanto scritto nel CSS, su desktop ho messo un :hover all'immagine cosicché deve ingrandirla mentre su smartphone deve lasciarla così: funziona al contrario, ma so per certo che il codice CSS è inserito correttamente perché uso 2 file .css diversi, è quindi facile verificare a quale si riferisce vedendo il layout generale al caricamento sui dispositivi.

Problema 3: visualizzazione di alcuni DIV in posizione non corretta.
Il sito è costruito come fosse una tabella con a sinistra la descrizione della foto sistemata sulla destra, i DIV di descrizione non si posizionano correttamente, è possibile verificare direttamente sul sito che le prime 2 descrizioni si affiancano alla prima immagine sballando di conseguenza le descrizioni successive, inoltre l'ultimo DIV che recita "Molti altri articoli..." dovrebbe essere sotto a tutte le immagini invece che sistemato sulla sinistra di esse e con la width al 95% del div parent. Se non bastasse, le scritte delle descrizioni risultano di larghezza 40% invece di 95%, andando a capo peggiorando l'estetica del layout.

Problema 4: redirecting su sito non sicuro. E qui la questione si fa spessa...
Cliccando sulle immagini si attiva un redirecting su un sito che l'antivirus mi indica come non sicuro. Non so che farci.

In generale ti posso dire che il mio codice è pulito e molto semplice, è evidente anche solo sbirciando il sito. Ripeto provando il sito offline, da hd, va tutto a meraviglia, non ho più idee. Ho anche un altro sito su Altervista e non mi dà questi problemi.

Grazie per l'aiuto, magari puoi consigliarmi anche su come contattare i gestori di Altervista, soprattutto nel caso del ridirecting, la pagina Contatti è abbastanza spoglia.
Cordialmente
Ugo

[alemoppo]

1) Io visualizzo questa immagine, è aggiornata?


2) A me l'effetto :hover funziona in tutti i dispositivi ed è corretto così: hai definito :hover su style.css che viene interpretato in tutti i dispositivi che hanno uno schermo ('only screen'). Come mai ti aspetti che invece non venga applicato sui dispositivi mobili? Piuttosto potresti impostare un filtro: includere il file style solo se la risoluzione è superiore ad un certo valore, altrimenti includere l'altro.

3) Io vedo i vari div a sinistra allineati con l'immagine a destra. Non vedo la scritta "Molti altri articoli", ma vedo "Molte altre qualità...", e mi sembra sia proprio sotto e non vedo ritorni a capo:

Puoi mostrare un'immagine? Probabilmente ho capito male.

4) Ho notato che la prima volta che si entra sul sito, cliccando su qualsiasi oggetto (ad esempio lo sfondo), viene caricato un popup di un sito esterno e settato un cookie. Se il cookie è stato settato, il popup non viene più mostrato.
Questo è dato dal contatore javascript che hai inserito, ti consiglierei di rimuoverlo: probabilmente il messaggio dell'antivirus è riferito a questo. Se vuoi monitorare i visitatori, ti consiglierei piuttosto di utilizzare Analytics.


Riguardo all'html, hai utilizzato il doctype per HTML5 (correttamente), ma poi hai utilizzato tag molto obsoleti, come <center>, <font> che sono deprecati, o attributi grafici indicati sull'html (come width etc). I tag e attributi di stile appesantiscono il codice HTML: gli attributi di stile vanno definiti lato CSS.
Ti consiglierei anche di spostare i vari <meta> (soprattutto quello riguardo il charset) prima delle inclusioni degli altri file di stile o javascript.
Infine, ti consiglierei di spostare il primo div fuori da <head>. Ho notato anche dei contenuti dopo la chiusura di <body>, questo andrebbe evitato.

Ciao!

[capellea]

Cavoli! ma tu lo vedi correttamente!!!

Punto 1: la tua immagine è giusta.
Punto 3: Allineamento corretto, sia per la posizione della descrizione dell'articolo, sia la scritta "molti ... in negozio" intendevo proprio quella scritta, sia la larghezza della descrizione.

Punto 2: L'immagine ingrandita ha senso su desktop, su smartphone ha poco senso perché eccederebbe lo schermo già piccolo, per questo motivo ho messo su smartphone.css le limitazioni: questo aspetto è stato molto controverso ed oggetto di vari thread su altri forum, questa soluzione l'ho adottata molto di recente dopo aver tribolato alcuni anni e mi pare che funzioni rispetto alla grafica in generale, sul fatto che non funga per l'hover è un altro mistero dell'informatica. Come hai detto tu l'ho definito su style.css ma non su smartphone: perché lì agisce? Mah. "only screen" è una query che ho letto sia validata per i desktop o laptop, insomma schermi di una dimensione superiore ai tablet, se hai altri suggerimenti fatti avanti senza alcun ritegno, perché io sono alla frutta su questo argomento.

Punto 4: idea molto interessante, provo ad eliminare il contatore, non è che mi serva proprio; l'ho messo perché sto agganciando questo sito ad uno che coinvolge diverse attività locali e volevo capire se la gente lo guarda; finora sono sotto i 100 visitatori perché a parte voi del forum questo sito lo guardo praticamente solo io vabbeh.
Provo ad eliminarlo e faccio come dici tu.

Se riesci a scoprire qualcosa su come sistemare il punto 2 sono a posto.
Per ora grazie dei tuoi preziosi consigli, almeno so che altri lo vedono correttamente, perché io no? Boh.

Grazie anche per l'ultimo paragrafo che hai scritto, me lo leggo attentamente. Fuori da Body ho usato solo Footer con il div finale e il contatore che ho già tolto, dici che devo mettere anche Footer dentro Body? I deprecati mi sono scappati, è un po' che non ripasso html e le ultime novità non le conosco, ho visto le magie di SCSS ma mi hanno messo un po' di soggezione.

Ciao
Ugo

[alemoppo]

"only screen" è una query che ho letto sia validata per i desktop o laptop, insomma schermi di una dimensione superiore ai tablet

No, dove hai letto questo?
"Only" significa che deve essere nascosta ai browser meno recenti, ti cito la documentazione (la spiegazione è qui):

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

"Screen" invece, significa che deve essere utilizzato appunto sugli "screen", quindi a video. Per la stampa della pagina, verrà invece utilizzato lo style definito con "print", o "braille" per i non vedenti, etc. Non significa che deve essere utilizzato solo per schermi per PC (questo devi appunto impostarlo tu ad esempio con un min-width).

Per come hai impostato ora il tuo sito, tutti utilizzano style.css, poi se lo schermo è tra i 768px e 1279px, verranno sovrascritte le proprietà contenute in smartphone.css.

almeno so che altri lo vedono correttamente, perché io no? Boh

Quale browser stai utilizzando?

Ciao!

[capellea]

Ciao, se uso Chrome (attualmente ho installata la Versione 85.0.4183.102 Build ufficiale a 64 bit) non funziona e sono andato da un amico dove anche lui ha gli stessi problemi. "non funziona" significa che ho ancora gli stessi problemi di cui ai precedenti messaggi.

Invece su Edge abbiamo viste differenti, lui corretta ed io continuo ad avere gli stessi errori.
Provo a levare ONLY, al suo posto metterò il min-width a 1280px sperando che sistemi la questione.

Come da tua indicazione ho levato il contatore, ora non mi fa più il redirecting, almeno quello l'ho risolto, con il tuo aiuto ovviamente.
Ho anche spostato i <meta>.
Grazie ancora, ti faccio sapere se risolvo o no.
Ciao
Ugo