Partage

Capricieux... très capricieux CSS

Yantar1975

19 août 2023 à 20:01:57

Hello,

Je suis en train de bosser sur la refonte de mon site en me basant sur Bootstrap 5 mais je me heurte à un problème de CSS qui va au-delà de mes compétences... parce que c'est au-delà de toutes mes compréhensions.

Sur ma page, j'ai deux CSS: Boostrap 5.3 et le mien pour des particularités mais ça ne fonctionne pas comme ça le devrait. En gros:

Edge utilise le Bootstrap sur l'hébergement d'origine et qu'une partie de mon CSS

Chrome utilise le Bootstrap sur l'hébergement d'origine et qu'une partie de mon CSS (différente de celle de Edge sinon ça ne serait pas marrant)

Si je change uniquement la couleur "primary" (uniquement le code HEX tout en gardant le nom) et aucun autre paramètre, Edge affichera la couleur demandée mais supprimera certains paramètres de la mise en page de mon menu et de mon footer. Edge affichera les bonnes couleurs (sauf pour le menu déroulant) sans rien décaler.

Dans mon CSS propre, j'ai ajouté une règle pour la couleur du menu mais n'est acceptée que par Chrome ainsi qu'une barre stylisée avant et après le titre. Alors que Edge affichera la barre avant et après le titre, Chome n'affichera que celle d'après.

Pour répondre à certaines questions légitimes:

Est-ce que j'ai effacé le cache pour ces 2 navigateurs? Oui et je le fais à chacune des modifications pour être sûr mais ça ne change rien.

Est-ce que je suis sûr de l'adresse de mes CSS? Oui puisqu'ils fonctionnent partiellement

Est-ce que j'ai bien mis mon CSS après celui de Bootstrap? Oui

Est-ce que j'ai mis les liens CSS après la balise title (apparemment, ça pourrait jouer chez certains)? Oui

Si quelqu'un a une idée d'où pourrait venir ces problèmes, ça me serait d'un grand secours. Difficile de travailler une nouvelle mise en page dans ces conditions. Quand je teste certaines choses, Chrome les affichera tandis que Edge les ignorera et inversément.

Ci-dessous une capture d'écran. En haut Edge et en bas Chrome. Je précise que c'est le Bootstrap d'origine où je n'ai changé que le code heximal de la couleur "Primary". C'est la mise en page Edge qui se rapproche le + de ce que je veux. Par contre, si je remets la couleur d'origine du "Primary", c'est Chrome qui se rapproche le + du rendu attendu. Ca a n'y rien comprendre.

AbcAbc6

19 août 2023 à 20:47:05

Bonsoir, sans voir le code difficile de répondre. Est ce que le code est valide tant du point de vu du HTML que du CSS?

Validateur HTML => https://validator.w3.org
Validateur CSS => https://jigsaw.w3.org/css-validator/

Domi65

19 août 2023 à 22:22:36

Hello ! Chrome et Edge utilisent le même moteur de rendu, donc il est probable que le SCC soit cherché dans le cache, comme tu le pressent.

Pour mettre une page à jour ainsi que ses dépendances, il faut faire Ctrl + F5

Cordialement.

Yantar1975

20 août 2023 à 11:56:12

Bonjour,

Le CSS fourni par Bootstrap ne passait pas le Validateur CSS. J'ai recopié le CSS corrigé par le validateur et je l'ai utilisé pour ma page mais j'ai le même soucis. Les couleurs d'origine passent mais une fois que je change le code heximal de ma couleur principale, le contenu de la barre de navigation et une partie du footer vire à gauche sur Chrome et le menu ne se déroule pas de la même façon qu'avec la couleur d'origine (taille du déroulant changée).

La page HTML est valide sauf pour la taille du logo dans la barre de navigation parce que le validateur me trouve un width="50px" alors que sur la page c'est bien écrit width="50"

Le CTRL + F5 met à jour bien à jour Edge et l'affichage correspond à mes attentes tout comme avec Firefox.

En attendant de trouver la solution avec Chrome, j'ai remis la couleur primaire (#0D6EFD) du CSS de Bootstrap. Si Edge et Firefox affichent cette couleur là après actualisation de la page, Chrome continue à afficher l'autre couleur et à décaler certains éléments de la page. Mieux encore... Malgré une désinstallation, réinstallation, suppression de l'historique et redémarrage de l'ordinateur, Chrome persiste à afficher autre chose.

En haut, version Edge avec la couleur #003470 et en bas la même version avec Chrome. On remarque que le menu est décalé à gauche, que la taille de police du menu est différente, que la taille des éléments du menu déroulant est au minimum, que les icones en bas de page sont à gauche. Les couleurs ne sont pas les bonnes (bleu trop foncé et gris trop clair). Mais une fois que je prends le CSS de la version 5.3.1 de Bootstrap depuis leur site, la page s'affiche normalement. On dirait que mon Chrome n'accepte que le CSS hébergé sur le serveur de Bootstrap et pas celui que je mets sur le mien.

<!DOCTYPE html>
<html lang="fr">
  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Test</title>

<link href="css/bootstrap.css" rel="stylesheet"> (je n'ai utilisé que ce fichier ou celui sur le serveur de bootstrap)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link href="css/styles.css" rel="stylesheet">
	
<body>
  
<header>
<nav class="navbar navbar-expand-lg navbar-primary bg-primary p-0">

  <div class="container-fluid">
  
    <a class="navbar-brand" href="https://destination-orbite.net/bs5/"><img src="files/logo.svg" width="250" height="50" alt="logo"></a>

    <button class="navbar-toggler text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"></path></svg>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link btn btn-primary rounded-0 btn-lg text-white py-4 fw-bold" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Home</a>
          <ul class="dropdown-menu rounded-0">
			<li><a class="dropdown-item" href="#">Link</a></li>
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link btn btn-primary rounded-0 btn-lg text-white py-4 fw-bold" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Astronautique</a>
          <ul class="dropdown-menu rounded-0">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link btn btn-primary rounded-0 btn-lg text-white py-4 fw-bold" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Astronomie</a>
          <ul class="dropdown-menu rounded-0">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link btn btn-primary rounded-0 btn-lg text-white py-4 fw-bold" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Exploration</a>
          <ul class="dropdown-menu rounded-0">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>

      <form class="w-auto">
        <div class="gcse-searchbox-only"></div>
      </form>

    </div>
  </div>

</nav></header>

<div class="container mb-3">

<h2 class="barre my-5 p-0">Publications</h2>

</div>

<footer class="text-lg-start pt-5 bg-primary text-white">


<div class="container-fluid p-3">
  <div class="row ">

    <div class="col-lg-3 col-md-6">
		<p class="h6 text-uppercase fw-bold">Astronautique</p>
		<span class="mb-4 mt-0 d-inline-block mx-auto primary" style="width: 60px; background-color: #0d6efd; height: 2px"></span>
		<ul class="list-unstyled">
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Actualité</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Transport spatial</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Lanceurs spatiaux</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Centres spatiaux</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Satellites</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Lancements</a></li>
		</ul>
    </div>

    <div class="col-lg-3 col-md-6">
		<p class="h6 text-uppercase fw-bold">Astronomie</p>
		<span class="mb-4 mt-0 d-inline-block mx-auto primary" style="width: 60px; background-color: #0d6efd; height: 2px"></span>
		<ul class="list-unstyled">
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Actualité</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Système solaire</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Planètes</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Comètes et astéroïdes</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Sondes spatiales</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Le Soleil en direct</a></li>
		</ul>
    </div>

    <div class="col-lg-3 col-md-6">
		<p class="h6 text-uppercase fw-bold">Exploration</p>
		<span class="mb-4 mt-0 d-inline-block mx-auto primary" style="width: 60px; background-color: #0d6efd; height: 2px"></span>
		<ul class="list-unstyled">
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Actualité</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Vaisseaux spatiaux</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Complexes orbitaux</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">Missions habitées</a></li>
		<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#0d6efd" d="M10.707 17.707L16.414 12l-5.707-5.707l-1.414 1.414L13.586 12l-4.293 4.293z"></path></svg> <a href="https://destination-orbite.net/bs5/#" class="link-primary text-decoration-none text-white">En direct de l'espace</a></li>
		</ul>
    </div>

    <div class="col-lg-3 col-md-6">
	<div class="container bg-dark border-3 border-primary border-top py-3">
		<div class="text-center pb-2"><img src="./Test_files/miniature_logo.svg" alt="Destination Orbite - Le site de l&#39;exploration de l&#39;espace" height="50px" width="50px"></div>
		<p>Destination Orbite propose du contenu sur l'exploration spatiale à travers l'actualité, des dossiers sur les lanceurs, le système solaire et les vols  habités.</p>
    </div>
    </div>

  </div>
</div>

<hr>

<div class="container-fluid px-3">
  <div class="row py-4">

    <div class="col-md-6">
		<p><a title="Copyright Destination Orbite" class="link-primary text-decoration-none text-white" href="https://destination-orbite.net/home/disclamer">Mentions légales</a> | 2023 Tous droits réservés</p>
    </div>

    <div class="col-md-6 text-end pe-2">
		<a href="https://destination-orbite.net/envoyer-un-message-a-destination-orbite" class="me-2 link-primary text-decoration-none text-white"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path fill="currentColor" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5m1.4 3.5h11.2c.77 0 1.4.62 1.4 1.4v8.2a1.4 1.4 0 0 1-1.4 1.4H6.4c-.77 0-1.4-.63-1.4-1.4V7.9c0-.78.62-1.4 1.4-1.4M6 8v2l6 4l6-4V8l-6 4l-6-4Z"></path></svg></a>
		<a href="https://www.facebook.com/destinationorbite" class="me-2 link-primary text-decoration-none text-white"><svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 20 20"><path fill="currentColor" d="M17 1H3c-1.1 0-2 .9-2 2v14c0 1.101.9 2 2 2h7v-7H8V9.525h2v-2.05c0-2.164 1.212-3.684 3.766-3.684l1.803.002v2.605h-1.197c-.994 0-1.372.746-1.372 1.438v1.69h2.568L15 12h-2v7h4c1.1 0 2-.899 2-2V3c0-1.1-.9-2-2-2z"></path></svg></a>
		<a href="https://twitter.com/DestinationOrb" class="me-2 link-primary text-decoration-none text-white"><svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm297.1 84L257.3 234.6L379.4 396h-95.6L209 298.1L123.3 396H75.8l111-126.9L69.7 116h98l67.7 89.5l78.2-89.5h47.5zm-37.8 251.6L153.4 142.9h-28.3l171.8 224.7h26.3z"></path></svg></a>
		<a href="https://www.instagram.com/destination_orbite/" class="me-2 link-primary text-decoration-none text-white"><svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 448 512"><path fill="currentColor" d="M224 202.66A53.34 53.34 0 1 0 277.36 256A53.38 53.38 0 0 0 224 202.66Zm124.71-41a54 54 0 0 0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31 6.43a54 54 0 0 0-30.41 30.41c-8.28 21-6.43 71.05-6.43 94.33s-1.85 73.27 6.47 94.34a54 54 0 0 0 30.41 30.41c21 8.29 71 6.43 94.31 6.43s73.24 1.93 94.3-6.43a54 54 0 0 0 30.41-30.41c8.35-21 6.43-71.05 6.43-94.33s1.92-73.26-6.43-94.33ZM224 338a82 82 0 1 1 82-82a81.9 81.9 0 0 1-82 82Zm85.38-148.3a19.14 19.14 0 1 1 19.13-19.14a19.1 19.1 0 0 1-19.09 19.18ZM400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48Zm-17.12 290c-1.29 25.63-7.14 48.34-25.85 67s-41.4 24.63-67 25.85c-26.41 1.49-105.59 1.49-132 0c-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61 0-132c1.29-25.63 7.07-48.34 25.85-67s41.47-24.56 67-25.78c26.41-1.49 105.59-1.49 132 0c25.63 1.29 48.33 7.15 67 25.85s24.63 41.42 25.85 67.05c1.49 26.32 1.49 105.44 0 131.88Z"></path></svg></a>
		<a href="https://www.flickr.com/photos/destination-orbite/" class="me-2 link-primary text-decoration-none text-white"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 16 16"><path fill="currentColor" d="M14.5 0h-13C.675 0 0 .675 0 1.5v13c0 .825.675 1.5 1.5 1.5h13c.825 0 1.5-.675 1.5-1.5v-13c0-.825-.675-1.5-1.5-1.5zm-10 10.5a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5zm7 0a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5z"></path></svg></a>
		<a href="https://www.youtube.com/user/DestinationOrbite" class="link-primary text-decoration-none text-white"><svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 448 512"><path fill="currentColor" d="m186.8 202.1l95.2 54.1l-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4c-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9c7.6-28.5 7.6-88.1 7.6-88.1z"></path></svg></a>
	</div>

  </div>
</div>
	
</footer>
  <!-- Footer -->

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>

<script async src="https://cse.google.com/cse.js?cx=11912d463e5d94def"></script>

-
Edité par Yantar1975 20 août 2023 à 11:58:46

AbcAbc6

20 août 2023 à 13:37:41

Bonjour,

Il y a un truc que je n'arrive pas à expliquer.

Pour votre fichier CSS https://destination-orbite.net/bs5/css/styles.css sur chrome et Firefox on y trouve :

.dropdown-item:hover, .dropdown-item:focus {
  color: #ffffff;
  background-color: #0d6efd;
}

Le même fichier ouvert avec Edge on y trouve :

.dropdown-item:hover, .dropdown-item:focus {
  color: #ffffff;
  background-color: #011b42;
}

Je ne comprends pas le changement de couleur pour une même source.

Je passe la main, peut être que domi a une explication?

Domi65

20 août 2023 à 16:17:01

« Je passe la main, peut être que domi a une explication »

A part une récupération "malheureuse" du cache, je ne vois pas.

Certains, lorsqu'ils modifient le CSS sur un site en ligne, modifient également le nom du fichier qui le contient et bien entendu les liens vers celui-ci. Moyen radical !

Je ne sais pas si on peut le faire facilement avec Bootstrap.

-
Edité par Domi65 20 août 2023 à 16:18:41

Yantar1975

21 août 2023 à 18:41:16

AbcAbc6 a écrit:

Bonjour,

Il y a un truc que je n'arrive pas à expliquer.

Pour votre fichier CSS https://destination-orbite.net/bs5/css/styles.css sur chrome et Firefox on y trouve :
.dropdown-item:hover, .dropdown-item:focus {
  color: #ffffff;
  background-color: #0d6efd;
}
Le même fichier ouvert avec Edge on y trouve :
.dropdown-item:hover, .dropdown-item:focus {
  color: #ffffff;
  background-color: #011b42;
}
Je ne comprends pas le changement de couleur pour une même source.

Je passe la main, peut être que domi a une explication?

J'en suis au même point. Je n'ai aucune idée de pourquoi en appelant le même fichier, j'ai des CSS différents selon le navigateur. Ouf! Je me sens moins seul face à ce problème... Il n'y a aucune explication logique à ça. Quand ça foire comme ça, j'ai tendance à créer un nouveau répertoire, histoire d'avoir de nouvelles URL pour le CSS, nom de page, nom des CSS, ... histoire de tester mais j'arrive au même résultat.

Au début, je pensais à un conflit CSS mais il ne peut y avoir un conflit de CSS juste en changeant le paramètre heximal d'une couleur unique. Je pensais que je faisais mal mes liens CSS mais si c'était le cas, tous les navigateurs auraient le même soucis. J'ai également pensé à un bug sur mes navigateurs (d'où que j'ai vidé l'historique, supprimer Chrome, éteindre/redémarrer le PC, réinstaller Chrome). Petit à petit, j'ai éliminé toutes les possibilités et me voilà ici

Une chose est sûre. Si je supprime mes CSS, tous les navigateurs réagissent de la même façon. C'est à dire qu'il n'y a plus aucune mise en page. C'est qu'ils réagissent bien à quelque chose d'existant. Serait-ce possible que ça soit lié à mon hébergement? Je supprimerais un fichier mais il resterait en cache et serait du même coup encore existant selon le navigateur, même si je ne la vois plus? Oubien ce serait lié à Bootstrap lui-même.

J'ai mon site depuis 2008 et je n'ai jamais eu ce genre de soucis, sauf depuis la version que j'ai mise en ligne en 2021... qui est la première justement à utiliser Bootstrap. Bien que récente, la version de 2021 est trop complexe à remanier pour répondre aux nouvelles exigences Google par rapport à l'INP que le moteur de recherche compte mettre en place en mars 2024. Le plus simple était de repartir de 0.

Ymox

22 août 2023 à 12:20:09

Salut !

Je constate le même problème, et à part me dire que Varnish n'est peut-être pas correctement configuré/purgé, je n'ai pas vraiment d'explication.

Par contre, une des méthodes pour éviter ce genre de souci à l'époque était d'ajouter un paramètre à l'URL des feuilles de style sous la forme style.css?v=unTrucQuiIdentifieLaVersioDeManièreUnique pourrait permettre de résoudre le souci rapidement. C'est un élément rapide à mettre en place pour tester.

Mais ce n'est plus considéré comme une bonne pratique parce que cela dépend des réglages de Varnish par exemple. Aujourd'hui, on recommande de changer le nom du fichier, en gros de faire style-unTrucQuiIdentifieLaVersioDeManièreUnique.css. Pas nécessairement pratique, mais plus fiable.
Si la proposition précédente ne résout rien, alors il faudrait penser à celle-ci.
Et si la proposition précédente résout le problème, cela peut être temporaire, et du coup, il faut aussi prévoir de passer à cette version par la suite.

-
Edité par Ymox 22 août 2023 à 12:21:40

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