Problems to display my site on Chrome

Asked

Viewed 2,763 times

0

Ola, I’m having trouble displaying my site on Google Chrome. I edit the codes mainly in css, in mozila displays on the fly, but in Chrome it takes a long time (after updating 20 times) that works, or not at all.

The problem is only with css. I’m making a wordpress theme, so I use the style.css

I call the style so:

<link href="<?php bloginfo('template_url'); ?>/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

I’m using 3 more css pages:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" >
<link href="<?php bloginfo('template_url'); ?>/css/grayscale.css" rel="stylesheet">
<link href="<?php bloginfo('template_url'); ?>/css/agency.css" rel="stylesheet">

It was necessary to use them to get certain results that I wanted. I don’t know if this is getting in the way. But I had the same problem in another theme that I was developing and only used the style and bootstrap. All this to make a responsive website too.

html css google-chrome responsive-layout
  • 1

    This is probably because Chrome is caching your application without checking the file for changes. You can try to clear the browser cache and refresh the page or use the HTML meta tags to disable the cache permanently (advisable only while development, for production it is better to keep the cache).

  • How do I do that?? Some things I’m still learning hehe!

  • 1

    To clear the browser cache: https://support.google.com/accounts/answer/32050?hl=pt-BR. About the meta tags, you can read more about here: http://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-caching-in-all-browsers

  • It worked out Thank you so much. I used the tag. You said then that when I put the site on the air I need to take the tags??

  • Exact, because the cache benefits in the loading time of your site, making it faster.

  • how to answer the question in the comments is not a good practice (I did it just because I was not sure if it was the same problem), transcribed the solution as an answer. If possible, mark it as useful and signal the post as answered.

  • Okay, thank you very much.

  • Possible duplicate of How to force load JS and CSS files with each new published version?

Show 3 more comments

2 answers

4


Just transcribing the solution that was presented in the comments.

The fact that you do not update the changes in the Chrome browser is the cache. If I’m not mistaken, locally, at least, Firefox also keeps cached versions of the files, but updates them if there are any changes. Unlike Chrome, which takes time to cache files naturally. That is, once you’ve loaded the CSS file into Chrome, new changes won’t work until the cache refreshes.

There are two possible solutions:

  1. Delete the cache stored in the browser manually by following the steps in official website, Clearing cache and cookies; or
  2. Use HTML meta tags to control page caching, as you can see here.

Briefly, just add the tag below so that browsers no longer cache the page.

<meta http-equiv="Cache-Control" content="no-store" />

Note: It is advisable to keep this setting only in development environment. Once your site is completed and goes to production environment, keeping cache is something extremely healthy and recommended as it decreases the loading time of your page and also reduces traffic from your server.

0

The only thing that worked for me was to insert a "hash" stating that there is a new version of css for Chrome:

<link rel="stylesheet" type="text/css" href="css/style.css?version=2">

Browser other questions tagged html css google-chrome responsive-layout

You are not signed in. Login or sign up in order to post.