Pour accéder à votre tableau de bord :

Connectez-vous

Connexion S'inscrire

Connexion

Organisme de formation N°11 91 07318 91
Mon compte Statut
Logo NosyWeb
Réussir sur Internet
Marketing Digital - Google - Joomla

Savez-vous que vous pouvez inspecter un élément html, pré-appliquer un style sur votre site ou ajouter et supprimer un bloc html sans avoir à modifier un fichier ? Avez-vous déjà voulu savoir quelle police a été employée sur un site Web en particulier, quelle couleur a été utilisée pour un titre, ou quelle est la dimension d'une image affichée ? Oui, toutes les réponses à ces questions peuvent être trouvées grâce à la plupart des navigateurs.

En effet, un ensemble d'outils de création et de débogage Web sont intégrés à la plupart des navigateurs, permettant aux développeurs Web de repérer facilement et efficacement les problèmes de mise en page, les points d'arrêt Javascript et d'obtenir des informations sur l'optimisation du code.

Ils peuvent vous aider à diagnostiquer rapidement les problèmes, ce qui vous aidera à construire un meilleur site web.

 

Aujourd'hui, nous allons nous concentrer sur l'inspection des styles d'un site. Chaque développeur est passé par cette expérience où ce qui est affiché sur leur site ne reflète pas correctement ce qui a été codé dans les feuilles CSS ou le style appliqué semble très différent de ce qui était attendu. Ce tutoriel va vous montrer comment utiliser ces outils de diagnostic pour voir comment le navigateur applique réellement des styles sur le site.

Inspecter un élément

Ouvrez un nouvel onglet et tapez https://www.google.com. Cliquez avec le bouton droit sur le logo Google et sélectionnez Inspecter. Si vous utilisez Google Chrome, l'onglet Eléments s'ouvre et l'élément inspecté est mis en surbrillance. Si vous utilisez Firefox, l'onglet Inspecteur s'ouvre et l'élément inspecté est mis en surbrillance.

Inspect Google logo

Dans l'arborescence, vous pouvez monter ou descendre, modifier ou supprimer l'élément. Ces actions sont appliquées uniquement sur la vue en cours et toutes les modifications seront restaurées à leur état d'origine après l'actualisation de la page.

b2ap3 large inspect an element

Il y a plusieurs façons de sélectionner un élément. Dans votre fenêtre, cliquez avec le bouton droit sur l'élément et sélectionnez Inspecter. Avec les outils de développement, appuyez sur Commande + Maj + C (MacOS) ou sur Ctrl + Maj + C (Windows), puis cliquez sur l'élément dans la fenêtre.

Appliquer un style CSS

Utilisez l'onglet Styles ou Règles lorsque vous souhaitez modifier ou ajouter une nouvelle déclaration CSS à un élément. Notez que la liste des règles CSS affichées ici est appliquée à tout élément actuellement sélectionné. L'élément sélectionné est surligné en bleu dans l'arborescence DOM. À droite, les styles de l'élément sont affichés dans l'onglet Styles de l'onglet Google Chrome ou Règles de Firefox.

Cliquez avec le bouton droit sur le bouton Recherche Google et sélectionnez Inspecter. Si vous utilisez Google Chrome, cliquez sur la règle element.style située en haut de l'onglet Styles. Si vous utilisez Firefox, cliquez sur la règle de l'élément en haut de l'onglet Règles.

b2ap3 large applying css declaration

Tapez Color et appuyez sur Entrée. Tapez ensuite Red et appuyez sur Entrée. Dans l'arborescence DOM, vous pouvez voir qu'une déclaration de style a été appliquée à l'élément.

Vous pouvez également appliquer un code couleur Hexadécimal si vous le souhaitez. Voici quelques exemples #97caef, #e09085, #8eff60 et #000000. Modifiez le style de couleur que vous avez appliqué auparavant et remplacez le rouge par l'une des couleurs hexadécimales ci-dessus.

Ajouter une classe à un élément

Utilisez l'onglet Styles ou Règles pour voir à quoi ressemble un élément lors de l'application ou de la suppression d'une classe.

Cliquez avec le bouton droit sur l'arrière-plan et sélectionnez Inspecter. Si vous utilisez Google Chrome, l'onglet Eléments s'affiche et l'élément inspecté est mis en surbrillance. Si vous utilisez Firefox, l'onglet Inspecteur s'ouvre et l'élément inspecté est mis en surbrillance.

b2ap3 large inspect

Sur l'élément sélectionné, ajoutez une classe prédéfinie kpbb à l'élément sélectionné. Après avoir ajouté la classe, vous remarquerez que la couleur du texte de l'élément inspecté change. Cela est dû au style prédéfini sur l'élément.

b2ap3 large adding class to element

Vous pouvez également définir vos propres classes et styles. Par exemple, essayez d'ajouter une classe personnalisée à l'élément inspecté. Vous remarquerez que rien ne se passe. C'est parce qu'il n'y a pas encore de style disponible sur la classe.

Maintenant, créons une nouvelle règle pour cette classe. Dans l'onglet Règles, faites un clic droit et sélectionnez Ajouter une nouvelle règle si vous utilisez Firefox. Si vous utilisez Google Chrome, sur l'onglet Styles, cliquez sur l'icône +. Cela va automatiquement créer une nouvelle règle pour vous.

b2ap3 large adding custom class to element

Notez qu'une case à cocher apparaîtra à côté de chaque style. Vous pouvez activer ou désactiver chaque style. Si l'élément avait un autre style de classe appliqué, vous pouvez le désactiver.

Référence CSS

Le panneau Éléments sur Google Chrome ou Inspecteur sur Firefox vous permet de sélectionner, d'afficher ou de modifier le style d'un élément. Dans le panneau Styles, cliquez sur le lien en regard d'une règle CSS pour ouvrir la feuille de style externe qui définit les règles. Dans la page Google, tous les styles sont définis en ligne.

b2ap3 large css referenc 20180417 053044 1

Ceci est un exemple de référence CSS. Cette information devrait être utile à tous les développeurs pour rechercher et isoler des styles en conflit. Des corrections ou un style approprié peut également être appliqués au style en conflit.

b2ap3 large css reference2

Pour plus d'informations, veuillez consulter : Outils de développement.

Cet article est une libre traduction de Exploring Templates Hacks par Mohd Yasser pour StackIdeas.

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !


L'auteur : un expert à votre service
Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis l'avènement de la version 1.5 de Joomla! pour le marketing digital, je mets mon expertise au service des professionnels. A la recherche d'une stratégie digitale avec ou sans le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-moi via https://www.jeancharlesgautard.com

Articles qui devraient vous intéresser

Où trouver les meilleurs templates Joomla 3.8 gratuits ou Pro Où trouver les meilleurs templates Joomla 3.8 gratuits ou Pro
Il existe plusieurs type de template, du plus simple souvent gratuit, on parle alors de template Joomla gratuit ou...
Créer une nouvelle position dans votre template Joomla Créer une nouvelle position dans votre template Joomla
Il n'est pas rare que lors de l'élaboration d'un site Joomla, on se retrouve coincé à cause d'une position...

Ajouter un commentaire
  • Aucun commentaire trouvé
Assistance

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

×

 

Restez à l'affut de l'actualité NosyWeb ! :-)

×
Dernier article sur la même thématique
Comment masquer l'icône de lien externe SEF AdvanceComment masquer l'icône de lien externe SEF Advance
Certains webmasters se demandent comment masquer l'icône de lien externe SEF Advance. Rappelez-vous, c’est l’icône placée à côté de certains liens. Vous pouvez même en voir diffé...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok