web-dev-qa-db-fra.com

Les changements de CSS ne sont pas pris en compte. Pourquoi?

Je travaille sur mon site Web et chaque fois que j'ajoute de nouvelles lignes à mon fichier CSS, il ne veut tout simplement pas utiliser les lignes que j'ai créées.

Pourtant, ils devraient bien se passer.

.what-new {
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3 {
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;

Juste à titre d'exemple.

Le fichier CSS fonctionne à un endroit, mais de quelque part, il cesse simplement d'utiliser mon fichier . Pourtant, il est lié dans la < head >.

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

Et mon code HTML est le suivant (notez qu'il ne s'agit que d'une partie du code):

    <div class="what-new">
    <div class="container">
        <h3>What's new</h3>
        <div class="blog-news">
            <div class="blog-news-grid">
                <div class="news-grid-left">
                    <h4>06</h4>
                    <small>of january 2015</small>
    </div>

Quelqu'un connaît une solution pour ça?

htmlcsscss3
12
Kian Pasani

J'ai oublié de fermer un { dans le fichier CSS .

1
Kian Pasani

Habituellement, la cause est l'une des suivantes:

1) Votre règle n'est pas appliquée

Cela peut arriver parce que:

Vous pouvez vérifier cela avec les outils de développement de votre navigateur, inspecter le panneau CSS, où les règles sont énumérées par importance dans ordre décroissant (du plus au moins important).

2) Votre fichier CSS est mis en cache

Cela peut arriver parce que votre serveur ou votre navigateur met en cache la ressource CSS. Pour forcer l'actualisation de la ressource, vous devez appuyer sur CTRLF5 au lieu de F5 seul, une seule fois (après avoir redéployé votre ressource statique).

Il y a n SO Q & A bien connu à ce sujet , et il est clairement spécifié que:

Au cas où le serveur ignore la demande du navigateur pour effacer le cache (cela arrive parfois), le moyen le plus rapide que j'ai trouvé pour traiter ce problème est le suivant: entrez dans la barre d'adresse l'URL des ressources statiques et appuyez sur CTRLF5 sur cette page (c'est-à-dire le fichier CSS), au lieu de cela dans la page l'important. Cela fonctionne 100% du temps.

Pour le faire rapidement, utilisez Open link in a new Tab dans les outils de navigation du navigateur, ou en cliquant sur le lien CSS du code HTML ouvert avec View Source.

39
Andrea Ligios

Vous êtes fondamentalement confronté à un problème de mise en cache où votre navigateur n’a pas l’impression de demander la nouvelle version au serveur mais utilise celle mise en cache dans le cache interne du navigateur.

Le simple fait d'utiliser des outils de développement pour désactiver le cache fonctionnera pendant le développement, mais si votre flux de travail est basé sur la mise en ligne fréquente de documents, vous serez éventuellement confronté à une situation dans laquelle vous ne contrôlerez plus la version de votre code CSS que vos visiteurs voient (et vous ne pouvez pas compter sur eux en utilisant leurs outils de développement pour désactiver la mise en cache).

Pour éviter que de tels événements ne se produisent, vous devez utiliser une technique appelée "contournement du cache", ce qui signifie essentiellement que vous allez ajouter des éléments aux URL de vos ressources, qui changeront chaque fois que vos fichiers de ressources changent. Essentiellement, votre URL CSS se transforme

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

à quelque chose comme ça

<link rel="stylesheet" href="style/css_2-play.css?1422585377" type="text/css"/>

Il existe une grande couverture sur le contournement de la mémoire cache sur SO. Vous pouvez donc examiner toutes les options disponibles avant de décider de la manière dont vous souhaitez gérer le problème.

Ma technique préférée personnelle est de combiner le code côté serveur avec mod_rewrite pour obtenir le contournement du cache. Le flux de travail est comme suit.

1) Le code côté serveur utilise DOMDocument pour rechercher tous les fichiers de ressources dans le code HTML généré, tels que CSS, JavaScript, etc., et ajoute un horodatage modifié récupéré avec filemtime . 

Exemple: /css/main.min.css devient /css/main.min-1422585377.css dans le code qui sera restitué au client (navigateur).

2) Lorsque le navigateur reçoit la réponse, il devra simplement traiter cette demande CSS comme une nouvelle ressource si l'horodatage ajouté ne correspond pas à celui du cache (une ressource portant un nom différent est toujours traitée comme une nouvelle demande).

3) Le navigateur envoie maintenant une demande de /css/main.min-1422585377.css au serveur.

4) Afin de rediriger toutes les demandes vers le seul et unique main.min.css qui existe réellement sur le serveur, nous utilisons une règle de réécriture simple comme celle-ci.

RewriteRule (.+)-(\d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L]

NOTE: En fait, je préfère inclure des horodatages dans le nom de fichier lui-même. Par conséquent, au lieu de /css/main.min.css?1422585377, je préfère utiliser /css/main-1422585377.min.css car certains serveurs proxy comme Squid ont tendance à ignorer les chaînes de requête et à traiter uniquement la partie du nom de fichier comme pertinente.

6
brezanac

S'il vous plaît fermer la div vous commencez. What-new h3

CODE CSS: 

.what-new{
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3{
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;
}
4
Jenti Dabhi

Cela m’arrive tout le temps lorsque je travaille sur mon site Web avec ma pile XAMPP sur mon mac. La solution consiste à activer les options du développeur et à sélectionner "cache vide" dans le menu du développeur. Cela oblige le navigateur à actualiser le fichier css de la page. Je ne suis pas habitué au développement sur d'autres plateformes, mais je vois si vous pouvez vider le cache dans votre navigateur.

Vérifiez également votre css et assurez-vous que votre syntaxe est correcte, en particulier si vous n’avez pas omis un "}" quelque part.

3
michael kagan

Si votre navigateur ne reflète pas les modifications apportées aux feuilles de style CSS jointes, essayez les solutions suivantes:

  1. Faites un clic droit sur votre document dans la fenêtre du navigateur.
  2. Aller à Voir la source de la page.
  3. Dans votre code, trouvez le lien vers votre fichier CSS attaché. Accédez au fichier CSS ci-joint Et voyez s’il contient les dernières modifications. Sinon, actualisez Votre fichier CSS et toutes les dernières modifications apparaîtront.
  4. Rechargez votre document et les modifications apparaîtront . Ouvrez le fichier CSS dans votre navigateur.Rechargez votre fichier CSS dans votre navigateur . J'espère que cela vous aidera !!
2
Shashwat Tiwari

Dans mon cas, l'erreur était que je n'avais pas installé le paquet dans VS2017 avec le nom Bundler & Minifier. Après l'installation, toutes les modifications apportées à, par exemple. main.css a également changé automatiquement. main.min.css et la publication Web ont pris le fichier CSS réel.

1
Honza P.

Pour Django, 'clearsessions', suivi de 'runserver' actualisera tous les paramètres du fichier .css.

Vous devez également nettoyer le cache de votre navigateur.

1
T.T

En réalité, le navigateur récupère l'ancien fichier css du cache du navigateur. vous devez vider le cache, puis essayez. J'étais aussi le même problème ...

1
Noor Khan

Après avoir beaucoup souffert et avoir fait toutes les formes déjà mentionnées ici.

J'ai trouvé sur mon CPanel une application appelée Cachewall , je viens de l'éteindre, et cela résout mon problème

Cela peut aider quelqu'un

1
Daniel Beltrami

Je suis confronté au même problème mais j'ai trouvé une solution. après avoir ajouté ou modifié les propriétés css dans css_2-play.css  

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

change le nom du fichier CSS en quelque chose.css 

<link rel="stylesheet" href="style/something.css" type="text/css"/>

n'oubliez pas de renommer le fichier css dans le répertoire original.

1
navjot singh

Cela est principalement dû à la mise en cache de votre navigateur . Supprimez le cache en supprimant l’historique et les caches, ou comme suggéré ci-dessus. Appuyez simplement sur ctrl + f5 au lieu de f5

1
Dhruv Aggarwal