Analyser les codes d'un site Web avec l'extension CSS Dig Chrome
Vous pouvez faire beaucoup de choses avec Chrome DevTools en éditant des sites Web en direct et en étudiant des requêtes HTTP détaillées. Mais, la capacité d'analyser les modèles CSS n'est pas cuite dans la console.
Avec CSS Dig, vous pouvez analyser tous les sélecteurs CSS, la spécificité et les propriétés uniques de n'importe quelle page Web directement à partir de Chrome. Cette extension est totalement gratuite et offre beaucoup de puissance aux développeurs frontend.
Lorsque vous inspectez une feuille de style, vous obtenez beaucoup de données du panneau CSS Dig. Il peut vous montrer des sélecteurs individuels, y compris des doublons et des niveaux de spécificité inutiles .
Pour commencer, installez simplement le plugin et ouvrez la fenêtre de la console. Vous trouverez deux onglets dans la fenêtre CSS Dig: Propriétés et sélecteurs .
Vous pouvez parcourir les résultats organisés par propriétés (couleur, bordure, remplissage) ou par des sélecteurs (classes, ID). Je trouve la fenêtre Propriétés la plus précieuse, car elle vous permet d'étudier les polices et les couleurs que vous utilisez.
Cet outil fonctionne pour tous les sites Web, donc il est également pratique pour l'ingénierie inverse de n'importe qui. Vous pouvez copier / coller le CSS directement depuis cette fenêtre et le réutiliser dans vos propres projets.
Probablement le cas d'utilisation le plus commun pour CSS Dig est d' effacer les couleurs en double de votre palette de couleurs. Combien de nuances uniques de vert avez-vous vraiment besoin? Ou, combien de polices différentes sans-serif sont nécessaires pour une page?

Le code source du plugin est disponible gratuitement sur GitHub où vous trouverez également toutes les dernières mises à jour .

Tendances de conception Web: Comment décider de ce qui fonctionne
Les concepteurs adorent se plaindre des tendances de conception «superficielles» qui, selon eux, n'ont aucun pouvoir durable ou n'apportent rien de significatif à l'industrie. Mais ont-ils raison?Aujourd'hui, nous allons parler des tendances en matière de design et des nouveaux phénomènes qui attirent de nombreux designers, mais cela peut aussi attirer l'attention de ceux qui pensent que l'industrie du design est à la traîne.Les ten

Remplacer les boîtes d'alerte JavaScript par cette alternative réactive
Les pop-ups d'alerte JavaScript sont détestés par à peu près tout le monde. Ils forcent votre attention et dépassent le navigateur, vous devez donc les fermer avant de pouvoir interagir avec la page.À l'ère moderne, nous pouvons faire mieux que les boîtes d'alerte JavaScript . SweetAlert2 est probablement la meilleure solution.C'e