CSS interne qui marche, externe NON !!??

part du CSS externe qui n'est pas pris en compte.

Sujet résolu

28 août 2023 à 20:08:26

Bonjour...

j'ai ce code :

<!DOCTYPE html>
<html>
<head>
  <title>Choix d'une image</title>
  <style>
    /* Style des boutons */
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #f5f5f5;
      border: none;
      color: #333;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      transition: background-color 0.3s;
    }

    .button:hover {
      background-color: #ddd;
    }

    /* Style des images */
    .image {
      display: none;
      max-width: 400px;
      margin-top: 20px;
    }

    #image1:checked ~ #image1-display,
    #image2:checked ~ #image2-display {
      display: block;
    }
  </style>
</head>
<body>
  <h1>Choisissez une image à afficher</h1>

  <input type="radio" id="image1" name="image" checked>
  <label class="button" for="image1">Image 1</label>

  <input type="radio" id="image2" name="image">
  <label class="button" for="image2">Image 2</label>

  <img id="image1-display" class="image" src="chemin/vers/image1.jpg" alt="Image 1">
  <img id="image2-display" class="image" src="chemin/vers/image2.jpg" alt="Image 2">
</body>
</html>

Ça marche. Pas de souci.

J'adapte pour mon besoin, en intégrant ce code dans une page .php et ça marche (avec les bons liens images, etc).(J'ai par exemple changé .button en .button_choix etc)

J'ai un fichier .css externe, qui est appelé dans le <head>. Là aussi, ça marche.

Sauf que... si j'enlève le CSS du <head> et que je rajoute ce css du code ci-dessus, dans le fichier .css externe, juste cette partie n'est pas lue, mais le reste du style est pris en compte !

Et si je laisse ce code dans le <head> à la suite de l'appel au fichier style.css, et bien sûr entre bornes <style>, ben là, ça marche, le style est pris en compte !!!

Je n'arrive pas à trouver pourquoi !!

Est-ce que quelque chose dans ce style, fait que ça doit se trouver directement dans le fichier .php, ou comment ?

Merci d'avance pour vos remarques ou conseils

-
Edité par climber1 28 août 2023 à 20:11:45

Ymox

28 août 2023 à 20:47:27

Salut

C'est probablement un problème de cache, que ce soit au niveau serveur ou au niveau navigateur.

Du moment que le style est "dans le HTML", il sera pris en compte, c'est normal. Pour les fichiers externes, c'est un peu différent. Les navigateurs vont effectuer une requête supplémentaire pour le récupérer. Mais, selon le navigateur et ses réglages (ou simplement si on est en navigation privée), il va décider s'il refait la requête du fichier CSS un peu plus tard quand on rafraîchit la même page HTML. Edit : utiliser Ctrl/Cmd + F5 peut régler ce genre de cas.
D'autre part, le serveur (Apache, nginx, IIS, etc.), pour diminuer un peu la charge, peut dire que certains fichiers ne sont pas modifiés pendant un certain temps, et ainsi ne pas détecter/fournir la version à jour. De plus, certains hébergeurs ajoutent encore un niveau (Varnish et ses confrère) pour renforcer ce fonctionnement.

La vieille école ajouterait un paramètre style ?v=truc à l'URL du fichier CSS, avec truc qui change à chaque fois que le fichier est modifié, pour s'assurer d'avoir la nouveauté. L'école actuelle ferait fichier-truc.css avec la même technique pour truc, parce qu'encore selon les réglages, la méthode de la vielle ne fonctionne pas/plus.

-
Edité par Ymox 28 août 2023 à 23:45:06

OC à changer • FAQ PHP • Et avant cela • Tutoriel WAMP • @Zeste de Savoir

AbcAbc6

28 août 2023 à 20:54:19

Bonsoir,

>> Sauf que... si j'enlève le CSS du <head> et que je rajoute ce css du code ci-dessus, dans le fichier .css externe, juste cette partie n'est pas lue, mais le reste du style est pris en compte !

Le css copier/coller ne serrait-il pas dans un commentaire par mégarde?

Qui à t-il d'autre dans le ficher .css? Les mêmes class ou même sélecteur?

A tout hasard, un CTRL + F5 pour recharger la page sans tenir compte du cache.

climber1

28 août 2023 à 21:41:33

Oh, comme chuis dég !!!!

Ymox a écrit:

La vieille école ajouterait un paramètre style ?v=truc à l'URL du fichier CSS

ça marche !!! o_O

Chuis d'autant plus dég que j'ai vu ça récemment pour un fichier .php?lang=fr ou =en ou =ce-que-tu-veux, mais je n'y ai pas pensé DU TOUT là, pour un fichier .css et encore moins pour l'appeler dans le <head> !!!

Purée. chuis dég !!! me casse en deux depuis des heures, pour une ... grrrr... :)))

(Et un F5, ça ne suffit pas... MAIS j'ai l'impression qu'un CTRL F5, oui, ça marche aussi !! )

Merci bcp Ymox, AbcAbc6 et à tous !

-
Edité par climber1 28 août 2023 à 21:50:06

Ymox

28 août 2023 à 23:27:52

+1 @AbcAbc6, j'ai oublié de préciser cela pour le cas du cache navigateur.

OC à changer • FAQ PHP • Et avant cela • Tutoriel WAMP • @Zeste de Savoir