11

Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:

a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or

b) View it "computed", which is all CSS rules and the values that this element has.

What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).

Basically I want to be able to:

  1. I see an element I'd like to replicate on a website (like a button) exactly in my own website.
  2. Use this tool to get a bunch of CSS applied to that element.
  3. Paste on my own CSS.
  4. Get the same looking element in my website. Yay!

Any ideas?

manuelflara
  • 457
  • 1
  • 6
  • 14

8 Answers8

6

Switch to Chrome default element inspector (press F12), it has all that you need. You'll find everything in the Computed Style panel, including a useful "Show inherited" checkbox

Caelea
  • 2,318
  • 15
  • 22
  • 1
    This seems like almost what I want. The only problem is they show you _all_ CSS rules and their values, instead of just what the element has applied to it from all CSS definitions in the page. I mean, it can have clip:auto, clip-path:none; etc. even if that hasn't been overriden from its default value for this element, so basically the computed CSS for the element that this tool provides has A LOT of unnecessary CSS code. – manuelflara Sep 17 '12 at 16:48
4

I know the question is almost 4 years old, but if there is someone looking for it today, there's a Chrome extension that handles it. https://github.com/kdzwinel/SnappySnippet

It adds a new tab in Chrome Inspector and you just need to click a button to get all html and css of the selected element and its children. Then you can export it to codepen, jsfiddle and jsbin, or copy and paste.

Ricardo Gonçalves
  • 4,344
  • 2
  • 20
  • 30
3

Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview

When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.

enter image description here

If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.

enter image description here

Mike Grace
  • 16,636
  • 8
  • 59
  • 79
2

You don't need any extensions for that, the built-in inspector in Firefox can do that. Right-click the element, choose "Inspect Element". Click the Style button in the bottom toolbar - and there it is, a sidebar with all the styles applied to that element.

Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
1

I have tried to calculate it via window.getComputedStyle and it is needed to be optimized to shake out unnecessary style properties. https://github.com/aleen42/DOM-mirror

PuiMan Cheui
  • 94
  • 1
  • 9
0

I've tried SnappySnippet and found CSSSteal to be much better. It will grab just the CSS, and will do so in the same format as the document has it, unlike SnappySnippet.

cjbarth
  • 4,189
  • 6
  • 43
  • 62
0

There's an API on window Object >> window.getComputedStyle(DOMElement). This is if we need to work with computed styles programmatically.

MDN Docs for window.getComputedStyle

Good Luck...

Aakash
  • 21,375
  • 7
  • 100
  • 81
0

You can try this extension https://getcssscan.com/?ref=beautifulcheckboxes_header but it is not free. I found this while I was finding a solution.

Ilyas karim
  • 4,592
  • 4
  • 33
  • 47