SnappySnippet

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

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...]

Really helpful extension. Thank you!