Easily extract CSS and HTML from selected element. Then send it to CodePen, jsFiddle or JS Bin with one click.
Total ratings
4.00
(Rating count:
9)
Upgrade to see all 15 reviews
User reviews
Recent rating average:
4.30
All time rating average:
4.00
Upgrade to see all 15 reviews
Rating filters
5 star 4 star
3 star
2 star
1 star
Date | Author | Rating | Lang | Comment |
---|---|---|---|---|
2024-04-11 | Natalie Grossman | en | It's really slow. Its stylesheets are huge. It obliterates the original CSS and scrubs the original IDs & classes from the HTML. It takes the "Cascading" out of CSS, creating one flat style for each element. It's buggy (try saving a snippet that includes a CSS counter e.g.), and because the classes are gone there's no easy way to fix those errors in the generated CSS. It sets height and width properties of every block element to what they were when the snippet was generated, so snippets won't reflow if you try to add them into another page. If you imagine creating a PDF of the web page and cropping it in Acrobat 0.0.1 beta you've pretty much got it. Well-intended, could be useful, but not as it's realized here. I expected the snippet HTML to be substantially the same as the original HTML, and the snippet CSS to be some subset of the original CSS rules, maybe with references to the "inspected element" replacing references to its ancestors (or some other magic) to "fix" descendant selectors that referenced elements outside the snippet. Kind of like I'd worked my way through the snippet in DevTools, copying CSS rules from the "Styles" panel as I went, then touched up rules that would break without the inspected element's ancestors. Not even close. SnappySnippet strips the original class and id attributes (and others? idk) and assigns each snippet element a new id. It creates a new CSS rule for each element with an id selector and the computed element style. It also adds property values to freeze block elements at the size they were when the snippet was created. So what is the use case for this thing anyway? Not for sharing HTML - it strips the identifiers you rely on to navigate the DOM. Not for sharing CSS - it burns the original style rules and substitutes its own. You can't easily merge the snippet into another web page because the block element dimensions are fixed. And omg the stylesheet is HUGE! A single multiple-choice question from an online quiz (137 elements)? 6 kb HTML, 150 kb CSS. Twenty questions? 120 kb HTML, 1000 kb CSS. If one paragraph is 5 lines high and a second is 4 lines high but otherwise identical then each will have its own CSS rule, duplicating all property values except the height (which wasn't set by the original stylesheets at all). That's a lot of unnecessary duplicates - welcome back to the 1990s. Oh, and it's really slow. I counted 10 Mississippis waiting for that 20-question snippet. [zzz...] PS: If you uncheck "Format and clean up HTML" you'll keep the original HTML (except IDs, which will still be replaced). See https://github.com/kdzwinel/SnappySnippet/issues/29 | |
2023-05-19 | Carlos Ulises Ochoa Villa (Shane) | Really helpful extension. Thank you! | ||
2023-05-19 | Carlos Ulises Ochoa Villa (Shane) | en | Really helpful extension. Thank you! | |
2023-05-17 | Vladan Colovic | Works perfectly! | ||
2023-05-17 | Vladan Colovic | en | Works perfectly! | |
2023-04-19 | Sheryar Khan | Works Fine for me. Although sometimes bugs but it's impossible to copy things the way this extension does. | ||
2023-04-19 | Sheryar Khan | en | Works Fine for me. Although sometimes bugs but it's impossible to copy things the way this extension does. | |
2023-01-15 | Mike S | Nice plugin, it works well. Would be nice to have the option to retain the original structure and class names | ||
2023-01-15 | Mike S | en | Nice plugin, it works well. Would be nice to have the option to retain the original structure and class names | |
2021-11-22 | Logy Tech | fake spam |
Upgrade to see all 15 reviews