GrabCSS : Extraire du HTML et du CSS propres de tout élément web
GrabCSS, par Schneider Damien, est une extension Chrome pour extraire rapidement le code des composants à partir de pages web en direct. Elle copie du HTML et du CSS propres et formatés lorsque vous survolez un élément, résolvant les variables CSS et les règles héritées afin que la sortie fonctionne de manière autonome pour le prototypage, l'audit et l'apprentissage. Les capacités incluent le CSS Scoped, les styles en ligne, la sortie Tailwind, la capture d'animation et d'état pseudo, la navigation DOM au clavier et les vérifications de contraste WCAG. L'outil cible les développeurs front-end, les designers UI/UX, les auditeurs web et les étudiants ayant besoin de code de composant lisible rapidement.
Produit un CSS concis et lisible par l'homme en omettant le bruit calculé
GrabCSS extrait des règles ciblées plutôt que la longue liste de propriétés calculées affichées dans les panneaux d'inspection du navigateur. L'extension résout les variables CSS et les déclarations héritées afin que les extraits fonctionnent de manière autonome, et elle formate la sortie pour s'adapter aux flux de travail courants. Les variantes de sortie incluent une option CSS scoped qui utilise des noms de classe propres, une option de styles en ligne, et une option de classes Tailwind CSS, ce qui rend les composants collés plus faciles à adapter que les styles calculés bruts.
Supporte la sélection précise et la capture rapide de code grâce à des contrôles de survol et au clavier
Le sélecteur affiche un panneau flottant lorsqu'il est actif, vous permettant d'inspecter les éléments en survolant et de copier le code formaté d'un clic. La navigation DOM pilotée par le clavier utilise les flèches Haut et Bas pour se déplacer entre les éléments parents et enfants pour un ciblage précis. L'extracteur capture les animations, les transitions et les pseudo-états tels que :hover, et des vérifications de contraste WCAG sont effectuées sur les éléments de texte survolés pour aider à l'examen de l'accessibilité de base.
Traite localement, s'adapte aux flux de travail Chromium et agit comme une alternative légère aux DevTools
Tous les traitements se font dans le navigateur sans collecte de données externe et sans compte requis, donc les captures restent sur la machine. L'extension s'installe sur Chrome et d'autres navigateurs basés sur Chromium tels que Microsoft Edge et Brave, ce qui facilite son ajout aux configurations de développement existantes. Le développeur positionne l'outil comme une alternative légère à la fouille dans les DevTools, loué pour sa sortie rapide et propre. L'absence de synchronisation basée sur un compte signifie que le partage centralisé d'extraits nécessite des étapes séparées.
Un choix pratique pour les flux de travail individuels, avec des compromis pour le partage en équipe
GrabCSS est un choix pragmatique pour les praticiens front-end individuels et les étudiants qui ont besoin de snippets de composants compacts et modifiables sur une seule machine. Son design uniquement basé sur le navigateur favorise le contrôle local et l'extraction rapide, bien que ce même design signifie qu'il ne fournit pas de synchronisation basée sur un compte pour les bibliothèques d'équipe ou multi-appareils. Choisissez-le pour une capture rapide et manuelle ; comptez sur une bibliothèque partagée distincte lorsque la distribution collaborative est requise.
