Tools to Selectively Copy HTML CSS JS from a Specific Element of DOM
Inspecting web page source is a common practice for web developers, but copying specific sections for local tinkering can be cumbersome. This article explores tools and techniques to selectively copy HTML CSS JS from a desired element in the DOM.
SnappySnippet: A Custom Solution
The author of this article created SnappySnippet, a Chrome extension that provides the functionality to extract HTML CSS JS from the last inspected DOM node. This tool offers additional features such as CSS optimization, code cleanup, and direct code sharing to CodePen and JSFiddle.
Other Features
SnappySnippet includes the following capabilities:
Implementation Details
The implementation of SnappySnippet involved several challenges and solutions:
Problem 1: Separating CSS from HTML
To isolate CSS, the author assigned IDs to nodes in the selected subtree and used those IDs to create corresponding CSS rules.
Problem 2: Removing Default Values
The use of getComputedStyle() resulted in a large number of empty or default-valued CSS properties. To address this, the author compared element styles in a website context with those in an empty iframe, where default browser styles are applied.
Problem 3: Keeping Only Shorthand Properties
Shorthand properties (e.g., border-color) were duplicated in the output. The author filtered these out using a list of properties with shorthand equivalents.
Problem 4: Removing Prefixed Properties
Prefixed properties (e.g., -webkit-transform-origin) were considered unnecessary for general use. The author removed them all for simplicity.
Problem 5: Combining Same CSS Rules
Multiple CSS rules with identical properties and values were present in the output. Combining these rules significantly reduced their number.
Problem 6: Cleaning Up HTML
The outerHTML property returned unformatted HTML content. The author incorporated a JavaScript library (jquery-clean) for code reformatting and unnecessary attribute removal.
Problem 7: Filters Breaking CSS
Optional filters were added to SnappySnippet to prevent CSS breakage. Users can disable these filters in the Settings menu.
The code for SnappySnippet is publicly available on GitHub for further exploration and customization.
The above is the detailed content of How Do You Selectively Copy HTML, CSS, and JS from a Specific DOM Element?. For more information, please follow other related articles on the PHP Chinese website!