Le 07 Janvier 2016

Feuille de style CSS non prise en charge

Lorsque l’on débute en HTML on est souvent confronté à de petits soucis plus ou moins graves. L’un d’entre eux qui revient souvent est l’absence du style CSS., on se retrouve devant une page blanche avec du texte et pourtant vous pensez avoir fait les choses correctement. Alors que ce passe t-il…

Procéder aux premières vérifications

Avant de crier « Au-secours » soyons logique en commençant par le début, soit rechercher les erreurs les plus fréquentes tout en étant méthodique afin d’éliminer un à un les problèmes.

Points à vérifier :

  • L'orthographe
  • La casse
  • L’extension de fichier
  • L’emplacement du fichier
  • Vérifier le Chemin d’accès

1) Si l’orthographe est plutôt simple à vérifier, la casse est aussi à prendre en compte.

2) En informatique, la casse est simplement la sensibilité entre minuscule et majuscule des lettres, ce qui peut parfois changer la signification. Ainsi un fichier nommé « connexion .html » ne sera pas le même que celui-ci : « Connexion.html »

Mais je vous venir en me disant oui mais non, je n’ai jamais eu de souci avec les majuscules dans mes fichiers. C’est que vous travaillez certainement sur un système d’exploitation Windows, qui par défaut ne respecte pas la casse et laisse en grande liberté dans le nommage des fichiers et dossiers Mais c’est ne pas le cas sous dans un système Linux, hors c’est le plus souvent le système que l’on choisit pour héberger nos sites web et projets développés avec PHP.

3) Le point suivant concerne l’extension du fichier, résultant bien souvent d'une erreur d’étourderie qui est parfois difficile à constater vu notre certitude.

Le premier conseil est d’ afficher les extensions de fichiers. Sous Windows 7 et les versions supérieur

Voici quelques exemples d’erreurs possibles : écrire .htm au lieu du .html, confondre jpg et jpeg pour les images. Notez qu’avec certains éditeurs comme Notepad++ il arrive d’avoir ce type d’extension : monfichier.html.html

Evitez aussi les noms décomposés comme ceci : "ma photo vacances.jpg" , dans ce cas utiliser l'underscore comme caractère d’espacement : "ma_photo_vacances.jpg"

4) Vérifier l’emplacement du fichier, vous avez peut-être oublié de l’inclure dans votre dossier de travail. S’il est à l’extérieur de celui-ci, le chemin d’accès est peut-être erroné. Une architecture de travail bien pensée permet d’éviter ce genre de problème, un exemple sera étudié au chapitre « bien s’organiser »

5) Si après avoir passer en revue chaque point le problème persiste il vous faut vérifier le chemin d’accès au fichier. Pour le faire nous allons étudier le comportement des liens relatifs et absolus.

Chemins relatifs et absolus

Nous venons de voir précédemment les différentes sources d’erreurs liées à l’absence de feuille de style. Les mêmes conseils s’appliquent également dans les cas d’images ou pages introuvables (la très connue "page 404")

Il nous reste à étudier le problème lié au chemin d’accès au fichier. On appel « chemin » l’adresse d'une ressource comme une image, un fichier et même une inclusion de fichier.

Il existe deux méthodes de définir ce fameux chemin dans nos liens:

  • Le chemin Retatif
  • Le chemin Absolu

Le chemin Relatif #

On appel relatif le fait de cibler un fichier interne en navigant dans l’arborescence du dossier de travail "racine".
Dans l’exemple de dossier de travail ci-dessus on constate la présence de dossiers contenants d’autres dossiers contenant des fichiers.

Règles de navigation : En relatif, le fichier ciblé sera recherché par votre navigateur depuis le fichier ouvert (en cours)

./ Signifie : on reste dans le dossier courant.

/ signifie : on remonte vers le dossier parent le plus haut dans la hiérarchie (dossier racine)

../ signifie : au remonte d’un dossier.

Il est bien sûr possible de remonter plusieurs dossiers comme ceci :

../../ signifie : au remonte d’un dossier parent dans la hiérarchie, puis d'un autre, et ainsi de suite..

Dossier/fichier.html signifie : chemin relatif pour accèder au fichier d'un sous dossier.

/Dossier/fichier.html signifie : chemin absolu pour accèder au fichier d'un sous dossier.

Pour bien comprendre je vous propose quelques exemple avec cette arborescence de dossier :



     

1) Depuis le fichier « index.html »

On souhaite charger la feuille de style nommée « styles.css »


        

Atteindre le fichier « connexion.php »


        

Faire une inclusion du fichier « verifications.php »


        

Accéder au fichier « admin.php » qui se trouve dans le dossier « admin » qui est dans les sous dossier « fonction » et « login »



     

2) Depuis le fichier « admin.php » qui se trouve dans le sous dossier « /login/fonctions/admin »

On veut afficher l’image « photo.jpg »


		

Nous remontons bien de 2 dossiers pour se retrouver au niveau du dossier racine, puis on ouvre le sous dossier « /css » pour atteindre notre image.

Le chemin Absolu #

Avec cette méthode nous désignons un point unique comme référence, cela peut être le dossier racine, un point de départ dans l'arborescence ou tout simplement l’url de votre non de domaine.

Exemples :


     

Son utilisation est plutôt simple et on évite les montées-descentes entre les dossiers de votre arborescence.

Astuce :
Pour obtenir la racine de votre serveur web, utilisez la variable de serveur : $_SERVER['DOCUMENT_ROOT']. Consulter le manuel en ligne de PHP pour en savoir plus.

Cas particuliers : inclusions de fichier depuis différents sous-dossiers.
Dans notre exemple d'arborescence de dosssier de travail, nous pourrions avoir besoin d'inclure le fichier « menu.html » placé à la racine depuis n'importe quels sous dossiers.

Si en théorie l’utilisation de liens relatifs ou absolus semble ne pas poser de problèmes, cela dépend du contexte d’utilisation. Autrement de votre arborescence de dossiers.

En fait c’est très simple, si vous ne travailler que sur un seul niveau de dossier alors le relatif ne pose aucun souci. Par contre si vous sensé inclure un menu depuis d’autres sous dossier alors le chemin relatif aboutira logiquement sur une erreur de fichier introuvable.

Dans ce cas le chemin absolu est la solution recommandée puisque votre fichier à inclure sera disponible depuis n’importe quel sous dossier.

Maintenant nous allons découvrir une autre solution bien pratique en PHP.


Constante magique __DIR__ en PHP #

PHP introduit depuis les versions > 5.3 la constante magique __DIR__
Consultez manuel en ligne de PHP pour les découvrirs.

Cette technique peu connue des débutants est souvent utilisée pour l'inclusion de fichiers. Elle est simple, efficace et évite de nombreuses erreurs.

Elle à l’avantage de combiner les 2 méthodes, elle vous donne le chemin absolu comme base de repère auquel vous ajouter le chemin relatif au fichier à inclure.

> Mise en pratique avec notre arborescence d'exemple :


        

Maintenant que nous connaissons le chemin absolu, nous pouvons faire l'inclusion n'importe quel fichier avec un chemin relatif.

La syntaxe : la constante magique __DIR__ doit être suivie d’un / puis le chemin relatif du fichier à inclure.



     

L’intérêt est réel : Avoir comme base un chemin absolu, si vous l’utiliser en local vous n’aurez rien à modifier une fois en ligne ! Intéressant non ? Et comme le complément du chemin est en relatif vous ne devrez pas rencontrer de problèmes notables.

Je vous invite à tester cette technique et découvrir les différentes constantes magiques de PHP.


Alors quelle méthode choisir ? #

Bien souvent dans un projet web on prend l’habitude d’inclure certaines ressources depuis n’importe quel fichier, comme le menu, la navigation ou le footer. Si vous travaillez dans une arborescence qui comporte plusieurs niveaux de dossier alors l’utilisation du chemin absolu s’impose. Pour le reste c’est à vous de voir quelle méthode vois convient le mieux.

Pour faire votre choix, voici certains des avantages et inconvénients :

Pour le chemin Relatif :

  • Avantages
  • Offre une grande liberté et souplesse pour naviguer dans l'arborescence.
  • Nul besoins de changer les chemins lors de la mise en ligne ou en cas de changement de nom de domaine.
  • Inconvénients
  • Obligation d’avoir une structure de dossiers bien pensée.
  • On peut parfois se perdre suivant notre position dans l’arborescence.
  • Source d’erreurs et de page introuvables (404)

Pour le chemin Absolu :

  • Avantages
  • Facilite la gestion des chemins d’accès, notamment pour les fichiers inclus comportant des liens.
  • Pratique pour accéder aux ressources externes.
  • Limite les erreurs de pages introuvables.
  • Inconvénients
  • Besoin évident de modifier les liens au passage en ligne.
  • Perte des chemins en cas de changement de nom de domaine.


Voilà cet article touche à sa fin. Vous savez maintenant comment éviter et corriger les erreurs les plus fréquentes, choisir le type de chemin suivant son utilisation et l’importance d’avoir une structure de dossier bien pensée dans vos projets.