mon Chrome zappe la css

AlainL :

Bonjour,

J'ai quelques pages faisant appel à une page de style (style_fleurs.css)
Afin d'ajouter un paragraphe, j'ai ajouté un div "commentaires" avec un
font-style, et un align:justify dans cette page css.

Ca marche en local sur mes deux machines (W10 et Chrome sur les deux)
Envoyé sur le site distant, ça marche avec le pc fixe mais sur le SurfacePro
de Micro, la modif apportée à la page de style n'est pas prise en compte...

http://autourdalos.fr/EssaisHerbier/aquilegia_vulgaris.htm

Le paragraphe en question est hors boite, juste entre les deux boites de
titre et les premières img: il devrait donc être en italic et justifié.
Est-ce que ça marche chez vous ?

Oui

Peut-être un souci avec le cache. Essayez dans le Chrome de la
tablette:
paramètres/confidentialité/effacer les données de navigation (cocher
les trois premiers, ou tout sauf les mots de passe et les données de
saisie) /effacer les données. Ensuite, rafraichissez la page.

Ou alors, renommez fichier.css et ses références, rafraichissez.

C'est assez simple de faire du debug (F12) avec Chrome/Windows, un
cable usb et Chrome sur un téléphone Android. Ça vous permet de voir le
CSS appliqué. Et même parfois être en debug suffit à rafraîchir. Je
pense que ça doit également fonctionner avec Chrome sur votre tablette
(Windows 10 Mobile ?)


--
Pierre Maurette

Le 14/04/2017 à 15:48, Pierre Maurette a écrit :

AlainL :

Bonjour,

J'ai quelques pages faisant appel à une page de style (style_fleurs.css)
Afin d'ajouter un paragraphe, j'ai ajouté un div "commentaires" avec
un font-style, et un align:justify dans cette page css.

Ca marche en local sur mes deux machines (W10 et Chrome sur les deux)
Envoyé sur le site distant, ça marche avec le pc fixe mais sur le
SurfacePro de Micro, la modif apportée à la page de style n'est pas
prise en compte...

http://autourdalos.fr/EssaisHerbier/aquilegia_vulgaris.htm

Le paragraphe en question est hors boite, juste entre les deux boites
de titre et les premières img: il devrait donc être en italic et
justifié.
Est-ce que ça marche chez vous ?

Oui

Peut-être un souci avec le cache. Essayez dans le Chrome de la tablette:
paramètres/confidentialité/effacer les données de navigation (cocher les
trois premiers, ou tout sauf les mots de passe et les données de saisie)
/effacer les données. Ensuite, rafraichissez la page.

Ou alors, renommez fichier.css et ses références, rafraichissez.

C'est assez simple de faire du debug (F12) avec Chrome/Windows, un cable
usb et Chrome sur un téléphone Android. Ça vous permet de voir le CSS
appliqué. Et même parfois être en debug suffit à rafraîchir. Je pense
que ça doit également fonctionner avec Chrome sur votre tablette
(Windows 10 Mobile ?)

Merci. La solution 1 a fonctionné.
Donc, Chrome garde en cache la page visitée et la css qu'elle utilise
mais en cas de rafraichissement de la page il conserve la css d'origine.
Je ne sais pas si c'est pour gagner du temps ! On gagne 1 seconde au
chargement et on perd 2 minutes dans les paramètres !!
Bonne journée
alainL

AlainL :

Le 14/04/2017 à 15:48, Pierre Maurette a écrit :

AlainL :

Bonjour,

J'ai quelques pages faisant appel à une page de style (style_fleurs.css)
Afin d'ajouter un paragraphe, j'ai ajouté un div "commentaires" avec
un font-style, et un align:justify dans cette page css.

Ca marche en local sur mes deux machines (W10 et Chrome sur les deux)
Envoyé sur le site distant, ça marche avec le pc fixe mais sur le
SurfacePro de Micro, la modif apportée à la page de style n'est pas
prise en compte...

http://autourdalos.fr/EssaisHerbier/aquilegia_vulgaris.htm

Le paragraphe en question est hors boite, juste entre les deux boites
de titre et les premières img: il devrait donc être en italic et
justifié.
Est-ce que ça marche chez vous ?

Oui

Peut-être un souci avec le cache. Essayez dans le Chrome de la tablette:
paramètres/confidentialité/effacer les données de navigation (cocher les
trois premiers, ou tout sauf les mots de passe et les données de saisie)
/effacer les données. Ensuite, rafraichissez la page.

Ou alors, renommez fichier.css et ses références, rafraichissez.

C'est assez simple de faire du debug (F12) avec Chrome/Windows, un cable
usb et Chrome sur un téléphone Android. Ça vous permet de voir le CSS
appliqué. Et même parfois être en debug suffit à rafraîchir. Je pense
que ça doit également fonctionner avec Chrome sur votre tablette
(Windows 10 Mobile ?)

Merci. La solution 1 a fonctionné.
Donc, Chrome garde en cache la page visitée et la css qu'elle utilise mais en
cas de rafraichissement de la page il conserve la css d'origine.
Je ne sais pas si c'est pour gagner du temps ! On gagne 1 seconde au
chargement et on perd 2 minutes dans les paramètres !!

D'abord, oui, c'est rentable, ça fait gagner de la réactivité. En
particulier, mais pas uniquement, ça justifie les CDN (dépôts publics
de ressources telles js, jquery, polices, frameworks css) puisque
beaucoup de sites les utilisent et que le cache des ressources d'un
site est utilisé sur un autre site.

En gros, le html n'est pas caché (en tout cas s'il est changé ne
serait-ce que d'un caractère il est rafraichi). En revanche tout ce que
cet html va charger sera identifié par l'url, dont le nom, et caché.

La "solution 1" est certes un peu longue sur un mobile, sur un desktop
Ctrl-F5 suffit en général. Mais ce n'est nécessaire qu'en
développement. Si la modification est déployée, vos visiteurs n'ont
aucune raison de faire la manip.
Justement, il faut enviager le problème quand vous déployez une mise à
jour, ou tout simplement une modification normale dans le cycle de vie,
changement d'une image par exemple. Il existe des solutions basées sur
les entêtes cache-control and co, mais c'est fastidieux et imparfait,
par exemple si on positionne la durée à 24 heures. Le mieux est
généralement une durée la plus longue possible et renommer,
systématiquement. Une image sur la page d'acceuil nommée
imagedujour.jpg sera mal nommée si comme son nom le suggère elle est
changée chaque jour. Vous pouvez préférer ...id="imagedujour" ....
idj05042017.jpg.

Vous devez également envisager le cache coté serveur. L'Apache s'en
occupe, je ne sais plus trop comment, mais souvent ça suffit. Les
frameworks également. Sur une page quasi-statique, c'est à dire n'étant
modifiée que rarement par le webmaster, vous pouvez facilement le gérer
vous-même. Ça vous permet d'utiliser des outils puissants avec la
réactivité d'une page servie statiquement, à peu près comme si vous
génériez off-line. Imaginez, vous avez un gros menu généré en php, base
de données, processeur de template, inclus dans chaque page de votre
site. Le principe c'est de tester si le html est sur le disque, si oui,
le servir, si non le générer, l'écrire sur le disque et le servir.
A chaque modification, vous effacez le html, et pour bien faire vous
accédez une fois à la page.


--
Pierre Maurette

Pierre Maurette , dans le message <mn.7af37e141bc1beb4.79899@free.fr>, a
écrit :

D'abord, oui, c'est rentable, ça fait gagner de la réactivité. En
particulier, mais pas uniquement, ça justifie les CDN (dépôts publics
de ressources telles js, jquery, polices, frameworks css) puisque
beaucoup de sites les utilisent et que le cache des ressources d'un
site est utilisé sur un autre site.

Pour ce genre de chose, je me désole que les navigateurs n'aient pas un
protocole explicite pour désigner un fichier ressource indépendamment de
son origine, quelque chose du genre :

resource://sha256:2405bdf4c255a4904671bcc4b97938033d39b3f5f20dd068985a8d94cde273e2/https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js

-> si le navigateur a un fichier caché avec le bon haché, il l'utilise,
sinon il le télécharge à l'URL indiquée. Inconvénient : il faut mettre à
jour toutes les pages clientes quand le fichier est mis à jour. Énorme
avantage : ça protège des modifications imprévues sur les dépôts de
ressources.

Justement, il faut enviager le problème quand vous déployez une mise à
jour, ou tout simplement une modification normale dans le cycle de vie,
changement d'une image par exemple. Il existe des solutions basées sur
les entêtes cache-control and co, mais c'est fastidieux et imparfait,
par exemple si on positionne la durée à 24 heures. Le mieux est
généralement une durée la plus longue possible et renommer,
systématiquement. Une image sur la page d'acceuil nommée
imagedujour.jpg sera mal nommée si comme son nom le suggère elle est
changée chaque jour. Vous pouvez préférer ...id="imagedujour" ....
idj05042017.jpg.

J'approuve totalement ces conseils, sauf un petit détail sur la fin :
idj20170415.jpg plutôt qu'img15042017.jpg.

Il y a une bonne raison à cela : c'est le seul ordre logique. Je
m'explique. Si on regarde 15/04/2017, le 15 change tous les jours, le 04
change tous les mois, le 2017 change tous les ans : c'est par ordre
croissant de période ; a contrario, 2017-04-15, c'est par ordre
décroissant, les deux sont logiques ; et l'ordre puritanien¹,
04/15/2017, est idiot parce que c'est dans le désordre.

Mais si on regarde à l'échelle des chiffres, c'est différent. En
reprenant 15/04/2017 : le 1 change tous les dix jours, le 5 tous les
jours, le 0 tous les dix-ou-deux mois, le 4 tous les mois, le 2 tous les
millénaires, le 0 tous les siècles, le 1 tous les dix ans, le 7 tous les
ans : c'est complètement dans le désordre. Mais 2017-04-15 : c'est
totalement par ordre décroissant.

Une conséquence très pratique, c'est que quand la date est écrite ainsi,
un tri par ordre alphabétique a pour conséquence de trier par ordre
chronologique. Or l'option pour trier par ordre alphabétique est bien plus
souvent présente dans les logiciels que l'option pour trier par ordre
chronologique des dates écrites n'importe comment. (Quant à la date de
modification du fichier, elle n'est souvent pas préservée par les
manipulations.)

1 : gentilé inventé par un ami à moi pour le grand pays sans nom entre
le Canada et le Mexique.