L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Outils de développement basés sur un navigateur –
L’introduction suivante aux outils de qualité de code CSS est un extrait du livre à paraître de Tiffany, CSS Master, 2e édition qui sera disponible sous peu.
En route pour devenir un maître CSS, vous aurez besoin de savoir comment dépanner et optimiser votre CSS. Comment diagnostiquez-vous et corrigez-vous les problèmes de rendu? Comment vous assurez-vous que votre CSS ne crée aucun retard de performance pour les utilisateurs finaux? Et comment assurez-vous la qualité du code?
Savoir quels outils utiliser vous aidera à vous assurer que votre interface fonctionne correctement.
Dans cet article, nous allons explorer les outils de développement basés sur le navigateur pour Chrome, Safari, Firefox et Microsoft Edge.
La plupart des navigateurs de bureau incluent une fonction d'inspecteur d'élément que vous pouvez utiliser pour dépanner votre CSS. Commencez à utiliser cette fonction en cliquant avec le bouton droit de la souris et en sélectionnant Inspect Element dans le menu. Les utilisateurs de Mac peuvent également inspecter un élément en cliquant dessus tout en appuyant sur la touche Ctrl . L'image ci-dessous indique ce que vous pouvez vous attendre à voir dans Firefox Developer Edition.
Les outils de développement de Firefox Developer Edition Dans Firefox, Chrome et Safari, vous pouvez également appuyer sur Ctrl + Shift + I (Windows / Linux) ou Cmd + Option + I (macOS) pour ouvrir le panneau des outils de développement. L'image ci-dessous montre les outils de développement Chrome.
Outils de développement Chrome Dans Microsoft Edge, ouvrez les outils de développement en appuyant sur la touche F12 comme indiqué ci-dessous. 19659012] Outils de développement Microsoft Edge » width= »1000″ height= »598″ class= »aligncenter size-full wp-image-169239″/> Outils de développement Microsoft Edge
Vous pouvez également ouvrir les outils de développement de chaque navigateur à l'aide du menu de l'application:
- Microsoft Edge: Outils> Outils de développement
- Firefox: Outils> Développeur Web
- Chrome: Voir> Développeur
- Safari: Développer> Afficher l'inspecteur Web
Dans Safari, vous devrez peut-être activer le menu Develop par allez dans Safari> Préférences…> Avancé et cochez la case en regard de Afficher le menu Développer dans la barre de menu . La vue des outils de développement Safari est illustrée ci-dessous.
Outils de développement Safari 11 Après avoir ouvert l'interface des outils de développement, vous devrez peut-être sélectionner le panneau approprié:
- Microsoft Edge: DOM Explorer
- Firefox: Inspecteur
- Chrome: Eléments
- Safari: Eléments
Vous saurez que vous êtes au bon endroit quand vous voyez HTML d'un côté du panneau et les règles CSS de l'autre.
Remarque: Le balisage que vous verrez dans le panneau HTML est une représentation du DOM. Il est généré lorsque le navigateur a fini d’analyser le document et peut différer de votre balise originale. L'utilisation de View Source révèle le balisage d'origine, mais gardez à l'esprit que, pour les applications JavaScript, il peut ne pas afficher de balisage à afficher.
Utilisation du panneau Styles
Parfois, un élément n'est pas stylisé comme prévu. . Peut-être un changement typographique a-t-il échoué, ou il y a moins de marge dans un paragraphe que vous ne le souhaitiez. Vous pouvez déterminer les règles qui affectent un élément en utilisant le panneau Styles de l'inspecteur Web.
Les navigateurs sont relativement cohérents dans leur organisation du panneau Styles . Les styles en ligne, le cas échéant, sont généralement répertoriés en premier. Ces styles sont définis à l'aide de l'attribut HTML style que ce soit par l'auteur du code CSS ou par programme via un script.
Les styles en ligne sont suivis d'une liste de règles de style appliquées par des feuilles de style d'auteur, écrites par vous ou par tes collègues. Les styles de cette liste sont regroupés par requête multimédia et / ou par nom de fichier.
Les règles de style créées précèdent les styles d'agent d'utilisateur. Les styles d’agent d’utilisateur sont les styles par défaut du navigateur. Ils ont également un impact sur l'apparence de votre site. (Dans Firefox, vous devrez peut-être sélectionner l'option Afficher les styles de navigateur pour afficher les styles d'agent d'utilisateur. Vous trouverez ce paramètre dans le panneau Options de la boîte à outils .)
Propriétés et les valeurs sont regroupées par sélecteur. Une case à cocher se trouve à côté de chaque propriété, vous permettant d'activer et de désactiver des règles spécifiques. En cliquant sur une propriété ou une valeur, vous pouvez la modifier et vous éviter ainsi de modifier, d'enregistrer et de recharger.
Identification des problèmes de cascade et d'héritage
Lors de l'inspection de styles, vous remarquerez peut-être que certaines propriétés apparaissent barrées. Ces propriétés ont été remplacées par une règle en cascade, une règle en conflit ou un sélecteur plus spécifique, comme illustré ci-dessous.
Identification des paires de propriétés et de valeurs ayant été remplacé par une autre déclaration Dans l'image ci-dessus, les déclarations de fond frontière et de taille de police du bloc [type=button] sont affichées avec une ligne à travers eux. Celles-ci ont été écrasées par celles du bloc .close qui succède à [type=button] de notre code CSS.
Détection des propriétés et valeurs non valides
Vous pouvez également utiliser l'inspecteur d'éléments pour détecter les valeurs non valides ou propriétés non prises en charge et valeurs de propriété. Dans les navigateurs basés sur Chromium, les règles CSS non valides sont traversées par une ligne et par une icône d'avertissement adjacente, comme indiqué ci-dessous.
Détection d'une valeur de propriété CSS non valide à l'aide de Chrome [19659008] Firefox utilise également des propriétés et des valeurs non valides ou non prises en charge. Firefox Developer Edition utilise également une icône d'avertissement, comme indiqué ci-dessous. Firefox standard affiche les erreurs de la même manière, mais n'inclut pas l'icône d'avertissement.
Définition des propriétés et des valeurs non valides dans Firefox Developer Edition Dans la capture d'écran ci-dessous, Safari passe à travers. Règles non supportées avec une ligne rouge et les surlignant avec un fond jaune et une icône d'avertissement.
Valeur de propriété CSS non valide dans Safari Microsoft Edge utilise à la place un soulignement ondulé pour indiquer propriétés ou valeurs non prises en charge.
Valeur de propriété CSS non prise en charge dans Microsoft Edge Lorsqu'il s'agit de débogage de base et de conflits d'héritage, le navigateur choisi n'a pas d'importance. Familiarisez-vous avec chacun d'eux, cependant, pour les rares occasions où vous devez diagnostiquer un problème spécifique à un navigateur.
Débogage de présentations réactives
Le test sur périphérique est toujours préférable. Lors du développement, cependant, il est utile de simuler des appareils mobiles avec votre navigateur de bureau. Tous les principaux navigateurs de bureau incluent un mode de débogage réactif.
Chrome
Chrome propose une fonction de barre d’outils dans le kit de développement. Pour l'utiliser, cliquez sur l'icône du périphérique (photo ci-dessous) dans le coin supérieur gauche, à côté de l'icône Sélectionner un élément .
Icône du mode de conception réactif de Chrome [[19659008] Le mode Appareil vous permet d'imiter plusieurs types d'appareils Android et iOS, y compris des appareils plus anciens tels que l'iPhone 5 et le Galaxy S5. Le mode Appareil comprend également une fonction de limitation du réseau permettant de calculer différentes vitesses du réseau et la possibilité de simuler le mode hors connexion.Firefox
Dans Firefox, le mode équivalent est appelé Responsive Design Mode . Son icône ressemble aux premiers iPod. Vous le trouverez à droite de l'écran, dans le panneau des outils de développement, comme indiqué ci-dessous.
Icône du mode de conception réactif de Firefox En mode réactif, vous pouvez basculer entre les options suivantes: orientations portrait et paysage, simuler des événements tactiles et capturer des captures d'écran. Comme Chrome, Firefox permet également aux développeurs de simuler des connexions lentes via une limitation.
Microsoft Edge
Microsoft Edge permet de reproduire des appareils Windows mobiles, tels que Surface, avec l'onglet Emulation . Sélectionnez Windows Phone dans le menu du navigateur comme indiqué ci-dessous.
SitePoint.com utilisant le mode d'émulation de périphérique de Microsoft Edge » width= »1000″ height= »629″ class= »aligncenter size-full wp-image-169250″/> 19659008] En plus d'imiter l'orientation et la résolution, le mode d'émulation vous permet de tester les fonctionnalités de géolocalisation. Toutefois, vous ne pouvez pas utiliser son mode d’émulation pour simuler les conditions du réseau.Safari
Le mode Responsive Design Mode de Safari se trouve dans sa boîte à outils pour développeurs. Il ressemble au mode d'émulation de Firefox, mais ajoute la possibilité d'imiter les périphériques iOS, comme illustré ci-dessous.
SitePoint.com tel que visualisé à l'aide du mode de conception réactif de Safari Pour accéder au mode de conception réactif de Safari, sélectionnez Développement> Entrer en mode de conception réactif ou Cmd + Ctrl + R .
. Le livre de Tiffany aborde ensuite le débogage pour la réactivité de l'interface utilisateur, ainsi que les outils de performances basés sur le navigateur, tels que le travail avec l'outil Timeline de chaque navigateur.
Pour en savoir plus sur le débogage CSS optimisation, consultez le livre de Tiffany, CSS Master, 2e édition .
Articles associés:
Tiffany B. Brown est un développeur web et rédacteur technique indépendant basé à Los Angeles. Brown offre des services de développement Web et de consultation aux grandes agences et aux petites entreprises. Ancien membre de l'équipe des relations avec les développeurs d'Opera Software, Brown est également co-auteur du livre JumpStart HTML5 de SitePoint. Elle écrit sporadiquement sur la technologie de développement Web sur son blog . Vous pouvez la suivre sur Twitter à l'adresse @webinista .
Source link