Suppose I found an interestingly designed block (feedback form).
How can i copy html with all styles?

    1 answer 1

    There is an excellent extension for Chrome SnappySnippet ( source ).

    1. Select an item to copy
      enter image description here

    2. Select an item in the developer tools. enter image description here

    3. Go to the SnappySnippet tab in the developer tools
      and click on the button Create a snippet from inspected element enter image description here

    4. Copy the resulting markup and styles, and then enjoy the result:

      Left source, copied element to the right.

    enter image description here enter image description here

    Here is the code:

     #DIV_1 { color: rgb(34, 36, 38); height: 198px; overflow-wrap: break-word; text-align: left; width: 268px; word-wrap: break-word; perspective-origin: 150px 112.5px; transform-origin: 150px 112.5px; background: rgb(255, 248, 220) none repeat scroll 0% 0% / auto padding-box border-box; border: 1px solid rgb(224, 220, 191); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px 19.5px; outline: rgb(34, 36, 38) none 0px; padding: 15px 15px 10px; } /*#DIV_1*/ #DIV_2 { color: rgb(34, 36, 38); height: 190px; overflow-wrap: break-word; text-align: left; width: 268px; word-wrap: break-word; perspective-origin: 134px 95px; transform-origin: 134px 95px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#DIV_2*/ #DIV_3 { color: rgb(156, 152, 139); height: 14px; overflow-wrap: break-word; text-align: left; text-transform: uppercase; width: 268px; word-wrap: break-word; perspective-origin: 134px 7px; transform-origin: 134px 7px; border: 0px none rgb(156, 152, 139); font: normal normal bold normal 11px / 14.3px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(156, 152, 139) none 0px; } /*#DIV_3*/ #HR_4, #HR_20 { color: rgb(170, 170, 170); height: 1px; overflow-wrap: break-word; text-align: left; width: 268px; word-wrap: break-word; perspective-origin: 134px 0.5px; transform-origin: 134px 0.5px; background: rgba(0, 0, 0, 0.0980392) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(170, 170, 170); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 6.5px 0px 10px; outline: rgb(170, 170, 170) none 0px; } /*#HR_4, #HR_20*/ #DIV_5, #DIV_12 { color: rgb(34, 36, 38); height: 32px; overflow-wrap: break-word; text-align: left; width: 258px; word-wrap: break-word; perspective-origin: 134px 16px; transform-origin: 134px 16px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px 8px; outline: rgb(34, 36, 38) none 0px; padding: 0px 5px; } /*#DIV_5, #DIV_12*/ #DIV_6, #DIV_13 { color: rgb(130, 130, 130); float: left; height: 20px; overflow-wrap: break-word; text-align: left; width: 30.9531px; word-wrap: break-word; perspective-origin: 15.4688px 10px; transform-origin: 15.4688px 10px; border: 0px none rgb(130, 130, 130); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(130, 130, 130) none 0px; } /*#DIV_6, #DIV_13*/ #A_7, #A_14 { color: rgb(0, 119, 204); cursor: pointer; display: block; height: 20px; overflow-wrap: break-word; text-align: left; text-decoration: none; width: 30.9531px; word-wrap: break-word; perspective-origin: 15.4688px 10.5px; transform-origin: 15.4688px 10.5px; border-top: 0px none rgb(0, 119, 204); border-right: 0px none rgb(0, 119, 204); border-bottom: 1px solid rgba(0, 0, 0, 0); border-left: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px -1px; outline: rgb(0, 119, 204) none 0px; } /*#A_7, #A_14*/ #DIV_8, #DIV_15 { background-position: 0px -4554px; color: rgb(0, 119, 204); cursor: pointer; display: inline-block; height: 16px; overflow-wrap: break-word; text-align: left; width: 16px; word-wrap: break-word; perspective-origin: 8px 8px; transform-origin: 8px 8px; background: rgba(0, 0, 0, 0) url("http://cdn.sstatic.net/img/favicons-sprite16.png?v=65046080049f82845023d54a3c2662c1") no-repeat scroll 0px -4554px / auto padding-box border-box; border: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(0, 119, 204) none 0px; } /*#DIV_8, #DIV_15*/ #DIV_9, #DIV_16 { color: rgb(34, 36, 38); float: left; height: 32px; overflow-wrap: break-word; text-align: left; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 16px; transform-origin: 113.516px 16px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#DIV_9, #DIV_16*/ #A_10, #A_17 { color: rgb(0, 119, 204); cursor: pointer; display: block; height: 32px; overflow-wrap: break-word; text-align: left; text-decoration: none; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 16.5px; transform-origin: 113.516px 16.5px; border-top: 0px none rgb(0, 119, 204); border-right: 0px none rgb(0, 119, 204); border-bottom: 1px solid rgba(0, 0, 0, 0); border-left: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px -1px; outline: rgb(0, 119, 204) none 0px; } /*#A_10, #A_17*/ #BR_11, #BR_18, #BR_26, #BR_32 { clear: both; color: rgb(34, 36, 38); overflow-wrap: break-word; text-align: left; word-wrap: break-word; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#BR_11, #BR_18, #BR_26, #BR_32*/ #DIV_19 { color: rgb(156, 152, 139); height: 14px; overflow-wrap: break-word; text-align: left; text-transform: uppercase; width: 268px; word-wrap: break-word; perspective-origin: 134px 7px; transform-origin: 134px 7px; border: 0px none rgb(156, 152, 139); font: normal normal bold normal 11px / 14.3px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 15px 0px 0px; outline: rgb(156, 152, 139) none 0px; } /*#DIV_19*/ #DIV_21, #DIV_27 { color: rgb(34, 36, 38); height: 16px; overflow-wrap: break-word; text-align: left; width: 258px; word-wrap: break-word; perspective-origin: 134px 8px; transform-origin: 134px 8px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px 8px; outline: rgb(34, 36, 38) none 0px; padding: 0px 5px; } /*#DIV_21, #DIV_27*/ #DIV_22, #DIV_28 { color: rgb(130, 130, 130); float: left; height: 16px; overflow-wrap: break-word; text-align: left; width: 30.9531px; word-wrap: break-word; perspective-origin: 15.4688px 8px; transform-origin: 15.4688px 8px; border: 0px none rgb(130, 130, 130); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(130, 130, 130) none 0px; } /*#DIV_22, #DIV_28*/ #SPAN_23, #SPAN_29 { color: rgb(130, 130, 130); overflow-wrap: break-word; text-align: left; word-wrap: break-word; border: 0px none rgb(130, 130, 130); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(130, 130, 130) none 0px; } /*#SPAN_23, #SPAN_29*/ #DIV_24, #DIV_30 { color: rgb(34, 36, 38); float: left; height: 16px; overflow-wrap: break-word; text-align: left; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 8px; transform-origin: 113.516px 8px; border: 0px none rgb(34, 36, 38); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; outline: rgb(34, 36, 38) none 0px; } /*#DIV_24, #DIV_30*/ #A_25, #A_31 { color: rgb(0, 119, 204); cursor: pointer; display: block; height: 16px; overflow-wrap: break-word; text-align: left; text-decoration: none; width: 227.031px; word-wrap: break-word; perspective-origin: 113.516px 8.5px; transform-origin: 113.516px 8.5px; border-top: 0px none rgb(0, 119, 204); border-right: 0px none rgb(0, 119, 204); border-bottom: 1px solid rgba(0, 0, 0, 0); border-left: 0px none rgb(0, 119, 204); font: normal normal normal normal 13px / 16.9px Arial, 'Helvetica Neue', Helvetica, sans-serif; margin: 0px 0px -1px; outline: rgb(0, 119, 204) none 0px; } /*#A_25, #A_31*/ 
     <div id="DIV_1"> <div id="DIV_2"> <div id="DIV_3"> Важное на Мете </div> <hr id="HR_4" /> <div id="DIV_5"> <div id="DIV_6"> <a href="http://meta.ru.stackoverflow.com/questions/2603/%d0%96%d0%b8%d0%b7%d0%bd%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%86%d0%b8%d0%ba%d0%bb-%d0%b2%d0%be%d0%bf%d1%80%d0%be%d1%81%d0%b0-%d0%bd%d0%b0-stack-overflow?cb=1" id="A_7"></a> <div id="DIV_8"> </div> </div> <div id="DIV_9"> <a href="http://meta.ru.stackoverflow.com/questions/2603/%d0%96%d0%b8%d0%b7%d0%bd%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%86%d0%b8%d0%ba%d0%bb-%d0%b2%d0%be%d0%bf%d1%80%d0%be%d1%81%d0%b0-%d0%bd%d0%b0-stack-overflow?cb=1" id="A_10">Жизненный цикл вопроса на Stack Overflow</a> </div> <br id="BR_11" /> </div> <div id="DIV_12"> <div id="DIV_13"> <a href="http://meta.ru.stackoverflow.com/questions/2539/%d0%9f%d0%be%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%ba%d0%be%d0%bb%d0%bb%d0%b5%d0%b3%d0%b0%d0%bc-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d0%bf%d0%b5%d1%80%d0%b2%d1%8b%d0%b9-%d1%88%d0%b0%d0%b3-%d0%ba-%d0%bf%d1%80%d0%be%d1%84%d0%b5%d1%81%d1%81%d0%b8%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d0%be%d1%81%d1%82%d1%83?cb=1" id="A_14"></a> <div id="DIV_15"> </div> </div> <div id="DIV_16"> <a href="http://meta.ru.stackoverflow.com/questions/2539/%d0%9f%d0%be%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%ba%d0%be%d0%bb%d0%bb%d0%b5%d0%b3%d0%b0%d0%bc-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d0%bf%d0%b5%d1%80%d0%b2%d1%8b%d0%b9-%d1%88%d0%b0%d0%b3-%d0%ba-%d0%bf%d1%80%d0%be%d1%84%d0%b5%d1%81%d1%81%d0%b8%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d0%be%d1%81%d1%82%d1%83?cb=1" id="A_17">Поможем коллегам сделать первый шаг к профессиональному росту</a> </div> <br id="BR_18" /> </div> <div id="DIV_19"> Обсуждаемое на Мете </div> <hr id="HR_20" /> <div id="DIV_21"> <div id="DIV_22"> <span id="SPAN_23">4</span> </div> <div id="DIV_24"> <a href="http://meta.ru.stackoverflow.com/questions/2515/%d0%9f%d0%be%d1%87%d0%b5%d0%bc%d1%83-%d0%be%d1%82%d0%ba%d0%bb%d0%be%d0%bd%d1%91%d0%bd%d0%bd%d0%b0%d1%8f-%d0%bf%d1%80%d0%b0%d0%b2%d0%ba%d0%b0?cb=1" id="A_25">Почему отклонённая правка?</a> </div> <br id="BR_26" /> </div> <div id="DIV_27"> <div id="DIV_28"> <span id="SPAN_29">6</span> </div> <div id="DIV_30"> <a href="http://meta.ru.stackoverflow.com/questions/2560/%d0%9a%d0%b0%d0%ba-%d1%80%d0%b5%d0%b0%d0%b1%d0%b8%d0%bb%d0%b8%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c%d1%81%d1%8f-%d0%bf%d0%be%d1%81%d0%bb%d0%b5-%d0%b1%d0%b0%d0%bd%d0%b0?cb=1" id="A_31">Как реабилитироваться после бана?</a> </div> <br id="BR_32" /> </div> </div> </div>

    The resulting code can be immediately sent to jsFiddle, CodePen or JS Bin.
    Accuracy is not 100%, but the result is still good.

    Update:

    Surprisingly, IE bypassed other browsers in this regard.
    Copied styles do not contain anything extra.
    Here's how it is done in IE11 +:

    1. Opening Developer Tools
    2. Click the right mouse button on the desired item.
    3. Choose item Скопировать элемент со стилями
    4. Paste into any editor.

    enter image description here

    Here is the result:

     html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; } .module { margin-bottom: 1.5em; } .module { word-wrap: break-word; } .community-bulletin.module { padding: 15px 15px 10px 15px; background-color: #FFF8DC; border: 1px solid #E0DCBF; } #sidebar { position: relative; } #sidebar, .sidebar { float: right; overflow: hidden; width: 300px; margin: 0; margin: 0 0 15px 0; } #content { min-height: 450px; margin: 0 auto; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 1060px; padding: 15px; background-color: #fff; } #content::after { display: table; content: " "; clear: both; } #content::after { display: table; content: " "; clear: both; } .container { margin: 0 auto; text-align: left; width: 100%; } body { font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-size: 13px; line-height: 1.3em; color: #222426; background: #FFFFFF; min-width: 1075px; } html { min-width: 1060px; } .related { line-height: 1.3; font-size: 12px; } #sidebar .related, #sidebar .linked { font-size: 13px; } .community-bulletin.module .bulletin-title { color: #777; font-weight: bold; font-size: 11px; color: #9c988b; text-transform: uppercase; margin-top: 15px; } .community-bulletin.module :first-child.bulletin-title { margin-top: 0px; } hr { border: 0; color: #aaa; background-color: #aaa; height: 1px; margin-bottom: 20px; } .community-bulletin.module hr { margin-bottom: 10px; background-color: rgba(0,0,0,0.1); } .module .spacer { margin-bottom: 8px; } .community-bulletin.module .spacer { padding: 0 5px; } .bulletin-item-type { float: left; width: 12%; } .community-bulletin.module .bulletin-item-type { color: #828282; } .bulletin-item-content { float: left; width: 88%; } .cbt { clear: both; } a { text-decoration: none; cursor: pointer; } a { color: #0077cc; text-decoration: none; } .question-hyperlink { font-size: 16px; font-weight: 400; } .answer-hyperlink, .question-hyperlink { color: #0077cc; line-height: 1.3; margin-bottom: 1.2em; } .related a { font-size: 12px; font-weight: normal; } .community-bulletin.module .question-hyperlink { font-weight: normal; } #sidebar .related a, #sidebar .linked a { font-size: 13px; } .favicon { width: 16px; height: 16px; } .favicon { background-color: transparent; background-repeat: no-repeat; background-image: url('../img/favicons-sprite16.png?v=65046080049f82845023d54a3c2662c1'); } .favicon-rumeta { background-position: 0 -4554px; } div.favicon { display: inline-block; } 
     <body class="question-page new-topbar"> <div class="container"> <div class="snippet-hidden" id="content"> <div itemtype="http://schema.org/Question" itemscope=""> <div class="show-votes" id="sidebar"> <div class="module community-bulletin" data-tracker="cb=1"> <div class="related"> <div class="bulletin-title"> Важное на Мете </div> <hr> <div class="spacer"> <div class="bulletin-item-type"> <a class="question-hyperlink" href="http://meta.ru.stackoverflow.com/questions/2603/%d0%96%d0%b8%d0%b7%d0%bd%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%86%d0%b8%d0%ba%d0%bb-%d0%b2%d0%be%d0%bf%d1%80%d0%be%d1%81%d0%b0-%d0%bd%d0%b0-stack-overflow?cb=1"> <div title="Stack Overflow на русском Meta" class="favicon favicon-rumeta"></div> </a> </div> <div class="bulletin-item-content"> <a class="question-hyperlink" href="http://meta.ru.stackoverflow.com/questions/2603/%d0%96%d0%b8%d0%b7%d0%bd%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d1%86%d0%b8%d0%ba%d0%bb-%d0%b2%d0%be%d0%bf%d1%80%d0%be%d1%81%d0%b0-%d0%bd%d0%b0-stack-overflow?cb=1">Жизненный цикл вопроса на Stack Overflow</a> </div> <br class="cbt"> </div> <div class="spacer"> <div class="bulletin-item-type"> <a class="question-hyperlink" href="http://meta.ru.stackoverflow.com/questions/2539/%d0%9f%d0%be%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%ba%d0%be%d0%bb%d0%bb%d0%b5%d0%b3%d0%b0%d0%bc-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d0%bf%d0%b5%d1%80%d0%b2%d1%8b%d0%b9-%d1%88%d0%b0%d0%b3-%d0%ba-%d0%bf%d1%80%d0%be%d1%84%d0%b5%d1%81%d1%81%d0%b8%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d0%be%d1%81%d1%82%d1%83?cb=1"> <div title="Stack Overflow на русском Meta" class="favicon favicon-rumeta"></div> </a> </div> <div class="bulletin-item-content"> <a class="question-hyperlink" href="http://meta.ru.stackoverflow.com/questions/2539/%d0%9f%d0%be%d0%bc%d0%be%d0%b6%d0%b5%d0%bc-%d0%ba%d0%be%d0%bb%d0%bb%d0%b5%d0%b3%d0%b0%d0%bc-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d0%bf%d0%b5%d1%80%d0%b2%d1%8b%d0%b9-%d1%88%d0%b0%d0%b3-%d0%ba-%d0%bf%d1%80%d0%be%d1%84%d0%b5%d1%81%d1%81%d0%b8%d0%be%d0%bd%d0%b0%d0%bb%d1%8c%d0%bd%d0%be%d0%bc%d1%83-%d1%80%d0%be%d1%81%d1%82%d1%83?cb=1">Поможем коллегам сделать первый шаг к профессиональному росту</a> </div> <br class="cbt"> </div> <div class="bulletin-title"> Обсуждаемое на Мете </div> <hr> <div class="spacer"> <div class="bulletin-item-type"> <span title="Vote score (upvotes - downvotes)">4</span> </div> <div class="bulletin-item-content"> <a class="question-hyperlink" href="http://meta.ru.stackoverflow.com/questions/2515/%d0%9f%d0%be%d1%87%d0%b5%d0%bc%d1%83-%d0%be%d1%82%d0%ba%d0%bb%d0%be%d0%bd%d1%91%d0%bd%d0%bd%d0%b0%d1%8f-%d0%bf%d1%80%d0%b0%d0%b2%d0%ba%d0%b0?cb=1">Почему отклонённая правка?</a> </div> <br class="cbt"> </div> <div class="spacer"> <div class="bulletin-item-type"> <span title="Vote score (upvotes - downvotes)">6</span> </div> <div class="bulletin-item-content"> <a class="question-hyperlink" href="http://meta.ru.stackoverflow.com/questions/2560/%d0%9a%d0%b0%d0%ba-%d1%80%d0%b5%d0%b0%d0%b1%d0%b8%d0%bb%d0%b8%d1%82%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c%d1%81%d1%8f-%d0%bf%d0%be%d1%81%d0%bb%d0%b5-%d0%b1%d0%b0%d0%bd%d0%b0?cb=1">Как реабилитироваться после бана?</a> </div> <br class="cbt"> </div> </div> </div> </div> </div> </div> </div> </body>

    To see the result in a snippet, it must be scrolled to the right until it stops.
    The only problem: the path to the picture. If you fix it, you get the following:

    Left source, copied element to the right.

    enter image description here enter image description here

    Additionally, read this question on SO:
    Tools to selectively copy HTML + CSS + JS from existing sites

    • I'm shocked by this expansion. Thank. Can you still write what extensions use in web development? - duddeniska
    • @duddeniska, I added an option with pure copying of styles through IE. It is preferable to use it. As for the extensions, I practically don't use anything in web development. Occasionally only: Visual Event , CSS Digg and CSSViewer . - VenZell

    Protected by member PashaPash ♦ Jan 18 at 16:51 .

    Thank you for your interest in this issue. Since he collected a large number of low-quality and spam responses, which had to be deleted, now it’s necessary to have 10 reputation points on the site (the bonus for account association is not counted ).

    Maybe you want to answer one of the unanswered questions ?