I'm not running my CSS file

Question

I'm not running my CSS file

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Is anyone able to see why I suddenly do not read the CSS files?

I guess it will be an absurdity but I look at it and I do not see where it fails me. I made a very simple base to then work with php and databases, then I went to modify the aesthetics of the file and I see that nothing is modified. For example the header was before a red tone, now I change the background to green but it is still red. Another example is that I have put a height on it and it does not read it.

* {
  margin: 0;
  padding: 0;
}

.iconos {
  cursor: pointer;
}


/* ******************* HEADER ******************* */

header {
  height: 500px;
  /*    background-color: #be3144;*/
  background-color: darkseagreen;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#logo {
  font-size: 50px;
  font-family: 'Francois One', sans-serif;
}

<!DOCTYPE HTML>

<HTML lang="es">

<HEAD>
  <title>VIKINGS</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <link rel="stylesheet" type="text/css" href="CSS/general.css">

  <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</HEAD>

<BODY>

  <!-- ********************************* HEADER ************************************* -->
  <header>
    <i class="material-icons iconos" id="menu-desplegable-icono">menu</i>
    <a href="index.php" id="logo">Vikings</a>

    <a href="entrar.php">Entrar</a>
  </header>

  <!-- **************************** MENU DESPLEGABLE ******************************** -->
  <div id="menu-desplegable">
    <a href="#"> Crear WOD</a>
  </div>

  <!-- ********************************* FOOTER ************************************* -->
  <footer>

  </footer>

  <!-- Llamadas a los JS-->
  <script type="text/javascript" src="JS/entrar.js"></script>
  <script type="text/javascript" src="JS/menuDesplegable.js"></script>
  <script type="text/javascript" src="JS/crearWod.js"></script>
</BODY>

</HTML>

Now I see that changes are being made here, so I guess it must be something on the route, right?

I enclose an image where it looks like I have it saved.

css3 css

asked by NEA 02.04.2018 в 18:38

source

2 answers

Problem with date format Range of dates

score 1 · Answer 1

The problem is the browser cache

The browser caches your file, so if you update the file, the browser will keep the previous one for some time, there are many ways in which you can solve this but the one that seems easier because you use php is add a parameter after the file, so

Solution

<!DOCTYPE HTML>

<HTML lang="es">

<HEAD>
  <title>VIKINGS</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  <link rel="stylesheet" type="text/css" href="CSS/general.css?<?=date('Y-m-d H:i:s')?>">

  <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</HEAD>

<BODY>

  <!-- ********************************* HEADER ************************************* -->
  <header>
    <i class="material-icons iconos" id="menu-desplegable-icono">menu</i>
    <a href="index.php" id="logo">Vikings</a>

    <a href="entrar.php">Entrar</a>
  </header>

  <!-- **************************** MENU DESPLEGABLE ******************************** -->
  <div id="menu-desplegable">
    <a href="#"> Crear WOD</a>
  </div>

  <!-- ********************************* FOOTER ************************************* -->
  <footer>

  </footer>

  <!-- Llamadas a los JS-->
  <script type="text/javascript" src="JS/entrar.js"></script>
  <script type="text/javascript" src="JS/menuDesplegable.js"></script>
  <script type="text/javascript" src="JS/crearWod.js"></script>
</BODY>

</HTML>

Details to keep in mind

In this way each recharge will make a request for the css file, this may be well under development but it will cause problems in a final project, what I can recommend instead is create a global variable in your php project, for example $VersionPagina and every time you publish the site or application change it and force the most recent download with each change, I hope it helps you solve the problem.

Did it work?

Is the problem still?

Change something after doing this?

Source Bufa (January 10, 2012). Prevent CACHE from our CSS. April 4, 2018, from Bufa Website: link

score 0 · Answer 2

It looks like it's a cache problem. If you want to see the changes without affecting the Cache, you can browse incognito (Control + Mayus + N) in Google Chrome or you can delete the cache.

More information on how to clean the cache here: link