hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Inspecter le modèle de boîte d'un élément facilement avec XRAY

Avez-vous déjà voulu connaître la taille exacte d'un certain élément dans une page Web comme le remplissage, la marge, la position et ainsi de suite? Habituellement, vous pouvez obtenir l'information en utilisant un outil d'inspection Web; la plupart des navigateurs ont des outils intégrés pour vous aider à le faire. Alternativement, vous pouvez utiliser Firebug, qui est également un outil web très populaire. Lorsque les choses se compliquent cependant, peut-être que vous avez besoin de se rabattre sur un outil comme XRAY.

XRAY est un outil gratuit multi-navigateur qui vous permet de voir le modèle de boîte pour n'importe quel élément d'une page Web directement dans votre navigateur. Contrairement à d'autres outils d'inspection Web complexes, XRAY se concentre sur vous donner des informations complètes sur le modèle de boîte de l'élément.

Commencer

XRAY est un bookmarklet. Pour l'utiliser, faites glisser XRAY dans la barre de favoris de votre navigateur préféré. XRAY est disponible pour les navigateurs IE6 +, Webkit et Mozilla comme Safari et Firefox.

Tout comme les autres bookmarklets, XRAY ne peut pas fonctionner si le protocole SSL (HTTPS) est appliqué .

Inspection des éléments

Pour commencer l'inspection, ouvrez une page Web que vous souhaitez inspecter, assurez-vous qu'elle est complètement chargée et appuyez sur le signet XRAY. Vous obtiendrez une nouvelle fenêtre contextuelle dans votre navigateur. Cette boîte affichera toutes les informations sur l'élément que vous avez sélectionné.

Utilisons mon inspection de la page d'accueil XRAY comme exemple. Dites que je veux connaître les informations du modèle de boîte de l'élément suivant.

Je clique sur XRAY dans la barre de favoris, et sélectionne l'élément. Cela me donne le nom, l'identifiant, la classe, la hiérarchie, la position, le remplissage, la bordure et la marge de l' élément .

Pour fermer la boîte, appuyez simplement sur le bouton X dans le coin supérieur droit de la boîte ou rafraîchissez votre page pour quitter l'outil.

Pensée finale

Mis à part sa fonction d'inspection de modèle de boîte avancée, XRAY ne vous fournit pas les informations généralement disponibles dans d'autres outils d'inspection Web, comme le style ou DOM . Quoi qu'il en soit, c'est toujours un outil très utile et facile à utiliser pour une utilisation quotidienne.

Comment gérer et utiliser des extraits de code dans WordPress

Comment gérer et utiliser des extraits de code dans WordPress

Dans les articles précédents, nous avons vécu une certaine personnalisation de WordPress qui implique l'ajout de code dans functions.php . Ces ajouts améliorent la fonctionnalité de notre thème.Prenez notre tutoriel WordPress Login Page par exemple, nous sommes en mesure de rediriger les utilisateurs de la page de connexion WordPress par défaut, wp-login.php, à

(Conseils techniques et de conception)

40 outils et applications pour optimiser votre compte Instagram

40 outils et applications pour optimiser votre compte Instagram

Nous avons eu du plaisir avec le dernier post sur 80 Twitter Tools à faire presque tout, alors nous avons pensé à revisiter le format avec Instagram à la place. La liste a mis en place une variété d'outils qui peuvent ajouter plus de plaisir pour les utilisateurs puissants et instagrammers avides, allant de la planification régulière des messages à l'impression de vos photos Instagram dans des livres et autres médiums surprenants.Dans cett

(Conseils techniques et de conception)