Comment copier sélectivement HTML, CSS et JS à partir d'un élément DOM spécifique ?

Outils pour copier sélectivement HTML CSS JS à partir d'un élément spécifique du DOM

L'inspection de la source d'une page Web est une pratique courante pour les développeurs Web, mais copier des sections spécifiques pour le bricolage local peut être fastidieux. Cet article explore les outils et techniques permettant de copier sélectivement du HTML CSS JS à partir d'un élément souhaité dans le DOM.

SnappySnippet : une solution personnalisée

L'auteur de cet article a créé SnappySnippet , une extension Chrome qui fournit la fonctionnalité permettant d'extraire HTML CSS JS du dernier nœud DOM inspecté. Cet outil offre des fonctionnalités supplémentaires telles que l'optimisation CSS, le nettoyage de code et le partage direct de code vers CodePen et JSFiddle.

Autres fonctionnalités

SnappySnippet inclut les fonctionnalités suivantes :

• Nettoyage et indentation HTML
• Optimisation CSS pour la lisibilité
• Options de personnalisation et de filtrage
• Gestion des pseudo-éléments (::before, ::after )
• Interface utilisateur intuitive

Détails de mise en œuvre

La mise en œuvre de SnappySnippet impliquait plusieurs défis et solutions :

Problème 1 : Séparer le CSS du HTML

Pour isoler le CSS, l'auteur a attribué des identifiants aux nœuds du sous-arbre sélectionné et a utilisé ces identifiants pour créer les règles CSS correspondantes.

Problème 2 : Suppression des valeurs par défaut

L'utilisation de getComputedStyle() a entraîné un grand nombre de propriétés CSS vides ou avec des valeurs par défaut. Pour résoudre ce problème, l'auteur a comparé les styles d'éléments dans le contexte d'un site Web avec ceux d'une iframe vide, où les styles de navigateur par défaut sont appliqués.

Problème 3 : conserver uniquement les propriétés abrégées

Les propriétés abrégées (par exemple, border-color) ont été dupliquées dans la sortie. L'auteur les a filtrés à l'aide d'une liste de propriétés avec des équivalents abrégés.

Problème 4 : Suppression des propriétés préfixées

Propriétés préfixées (par exemple, -webkit-transform-origin) ont été jugés inutiles pour un usage général. L'auteur les a tous supprimés par souci de simplicité.

Problème 5 : Combiner les mêmes règles CSS

Plusieurs règles CSS avec des propriétés et des valeurs identiques étaient présentes dans la sortie. La combinaison de ces règles a considérablement réduit leur nombre.

Problème 6 : Nettoyer le HTML

La propriété externalHTML a renvoyé du contenu HTML non formaté. L'auteur a incorporé une bibliothèque JavaScript (jquery-clean) pour le reformatage du code et la suppression des attributs inutiles.

Problème 7 : les filtres cassent le CSS

Des filtres facultatifs ont été ajoutés à SnappySnippet pour empêcher la casse CSS. Les utilisateurs peuvent désactiver ces filtres dans le menu Paramètres.

Le code de SnappySnippet est disponible publiquement sur GitHub pour une exploration et une personnalisation plus approfondies.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!