Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Tool to copy an element of a website (HTML + CSS)

    I'm learning web development looking for a tool which lets me copy an element of a website (for example, say a menu) and copy both the HTML and CSS for that element for tinkering. Similar to when you inspect element in chrome except allowing you to save and or copy to clipboard easily. Does anyone have any experience with such a tool?

    Thanks in advance.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,304
    Thanks
    7
    Thanked 1,360 Times in 1,329 Posts
    The quickest way to save HTML and CSS (and JS and images) would be to just save a page (Ctrl/Cmd-S). You can then open it in your code editor and edit it however you desire.

    Alternatively, if you just need a specific set of elements you can copy the HTML and CSS easily with the web developer tools in your browser. Inspect the element and then in the code inspector, context click the element and select “copy outer HTML” or whatever it says. With the CSS you can do the same in the CSS panel of the code inspector, but you’ll probably have to do this for each ancestor level, too (i. e. in a list, you need to copy the CSS for the ul, the li, and whatever other elements are inside those). But then again, you could just save the entire stylesheet and copy/paste the styles you need into your testing environment.

  3. #3
    New to the CF scene
    Join Date
    Feb 2019
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Stephan, I think saving the page might be ok for small pages, but when you just need to fiddle with a small element of a large webpage there's a lot of sifting through code to make sure you don't delete the wrong code, it depends on the site. That said, I just tried it and it mostly works well except that I'm left with all the CSS for the entire website, which is a problem for my uses. It also makes it much harder to find the CSS for that specific element without going back to inspector.

    Chrome's inspector tool is OK but time consuming to get right, when I copy and paste the styles from inspector, it tries to also copy the "computed" styles from that column causing errors, and I have to track down JS separately. I'm hoping to track down a dedicated tool or a way to further streamline this process of copying an element.

    Assuming a dedicated tool doesn't exist -
    Anyone used Firebug? How does it compare to Chrome's inspector tool?
    Or is there a better way to save styles from Chrome inspector than copy and paste?

    Thanks again


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •