Discussion :

[Amnael]

Bonjour,

j'ai le fichier suivant

site/assets/css/frontend/accueil.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.fabricant .scroll:before {
  content: "";
  display: block;
  width: 30px;
  height: 18px;
  background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
  background-size: contain;
}

Pour charger le css, j'ai deux possibilité, la première classique, Je ne m'attarderais donc pas dessus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="<?php echo URL_SITE; ?>style/index.css" />

La seconde méthode vise à accélérer le chargement de la page en écrivant directement le css.
Cette seconde méthode est appelé dans

site/apps/frontend/template/accueil.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<style>
    <?php
        $urlstyle = URL_SITE.'style/index.css?m='.(int) IS_ON_MOBILE;
        $style = file_get_contents($urlstyle);
        echo $style;
    ?>
</style>

Mais voilà mon problème: Vous voyez l'url background dans le fichier accueil.css ?

Le fichier se trouve dans

site/assets/img/picto/arrow-down.svg


Cas numéro 1 : site/assets/css/frontend/accueil.css/../assets/img/picto/arrow-down.svg ==> On est bien d'accord qu'étant donné l'arborescence indiqué, ce lien ne peut pas marcher ? On est au niveau du dossier css non ?
Hors sur mon site le lien se fait et le fichier est bien chargé....et je ne comprends pas pourquoi.

Cas numéro 2: site/apps/frontend/template/accueil.php/../assets/img/picto/arrow-down.svg ==> Là encore on est au niveau de frontend, donc ça ne devrait pas marcher non plus n'est-ce pas ? Pourtant ça fonctionne quand même aussi.


J'aimerais essayer de comprendre ce qu'il se passe. En espérant que vous aurez une idée.

[grunk]

Un chemin relatif dans url() est relatif au fichier css qui le charge.

Donc si ton fichier css ce situe dans site/assets/css/frontend/accueil.css l'url ../assets/img/picto/arrow-down.svg est en fait site/assets/css/assets/img/picto/arrow-down.svg

Pour ce qui est du fonctionnement étrange que tu as , vérifie via la console développeur le chemin exact de la ressource chargée (onglet network ou réseau). Il n'est pas impossible que ca ne marche pas mais que tu le vois car chargé depuis le cache.

Pour finir j'aurais tendance à dire que avec du css inline , l'url est relative au chemin de la page , sauf si tu as une balise <base> qui redéfinie tout ca. (à confirmer).

Ceci étant dit je suis pas convaincu que le gain de performance vaille l'emmerdement de tout inliner. Autant avoir un bon cdn que faire ce genre "d'économie"

[Amnael]

Pour ce qui est du pourquoi du comment, à priori pagespeed donnerait de meilleures notes aux sites qui font ce genre de choses. Après jsuis d'accord que c'est assez anecdotique en soit, mais j'essaie quand même de trouver le problème.

Donc si ton fichier css ce situe dans site/assets/css/frontend/accueil.css l'url ../assets/img/picto/arrow-down.svg est en fait site/assets/css/assets/img/picto/arrow-down.svg

Tout à fait d'accord avec toi.

Sauf que le fichier; il est pas du tout là vu que ce lien n'existe pas :/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Request URL: http://site.php/assets/img/picto/arrow-down.svg

Et donc je ne comprends pas ce qui fait que ce code marche alors qu'il ne devrait pas. (Déjà simplement avec le link rel...)

[grunk]

Est tu certains que l'image ne vient pas du cache :
Via chrome et les outils de développement par exemple sur cette page :


Si ce n'est pas le cas , tu as peut être une redirection d'uril via un htaccess qui permet de trouver l'image à une url qui ne correspond à rien sans cette redirection

[Amnael]

J'ai fini par trouver ce bout de code était en fait jamais exécuté...il y avait un autre endroit dans le code provoquant la lecture....merci le code inutile mal supprimé ><

Désolé d'avoir pris de votre temps pour ce qui s'avère être une bêtise...