NetTalk Central

Author Topic: CSS hierarchy tool  (Read 5806 times)

tglomb

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
    • AObit Software
    • Email
CSS hierarchy tool
« on: March 03, 2014, 02:10:35 AM »
Does anyone know a tool which can show for a page the applying order of the CSS files and which classes ect. are affected ? I know about CSS and how to read it by myself, but it would be a lot faster to see it directly than to trial and error or to dig into a hierarchy depth of 8..
I mean i.e. let me point to a class .abc and then see the order of the CSS files in which this class gets overwritten.

Or do I need to wait vor NT8 and it's Visual Designer ? ;-)

TIA, Thomas

kevin plummer

  • Hero Member
  • *****
  • Posts: 1195
    • View Profile
    • Production Accounting and Software Payroll
Re: CSS hierarchy tool
« Reply #1 on: March 03, 2014, 02:16:23 AM »
have you watched Bruces clarion live web casts on CSS? He demonstrates a lot of useful tips and uses FireBug to do what you want.

tglomb

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
    • AObit Software
    • Email
Re: CSS hierarchy tool
« Reply #2 on: March 03, 2014, 03:33:44 AM »
Yup, I've seen it.. If FireBug can do what I want then it's time for me to install Firefox ;-)

tglomb

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
    • AObit Software
    • Email
Re: CSS hierarchy tool
« Reply #3 on: March 03, 2014, 03:41:57 AM »
BTW.. from your experiences what can FireBug more or better than F12 key in IE11 ?

kevin plummer

  • Hero Member
  • *****
  • Posts: 1195
    • View Profile
    • Production Accounting and Software Payroll
Re: CSS hierarchy tool
« Reply #4 on: March 03, 2014, 05:14:56 AM »
I don't use IE. For developing I think it is better to use Firefox and Chrome and then IE for testing if you need. IE has been somewhat lagging behind the other browsers in features, standards and security.

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: CSS hierarchy tool
« Reply #5 on: March 03, 2014, 07:24:14 AM »
Firebug in Firefox does this. The CSS in the CSS pane is listed in hierarchical order.

>> from your experiences what can FireBug more or better than F12 key in IE11 ?

from my experience Firebug is like an airplane, while IE is like a bicycle. If you like pedaling a lot then carry on using IE, but don't come crying to me that it's hard.

cheers
Bruce

tglomb

  • Jr. Member
  • **
  • Posts: 79
    • View Profile
    • AObit Software
    • Email
Re: CSS hierarchy tool
« Reply #6 on: March 03, 2014, 09:17:53 AM »
I really like mountain biking.. but in this case you've persuade me to take the airplane !
I'll install FF and if I have the time I'll also compare this part to IE..
Thanks Kevin and Bruce

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: CSS hierarchy tool
« Reply #7 on: March 03, 2014, 08:15:03 PM »
Firebug is a ff extension. www.getfirebug.com
Also - I use FirePicker a lot - that's a color picker for firebug.
« Last Edit: March 03, 2014, 10:20:20 PM by Bruce »

Devan

  • Full Member
  • ***
  • Posts: 230
    • View Profile
    • Email
Re: CSS hierarchy tool
« Reply #8 on: March 03, 2014, 10:02:17 PM »
I also use Chrome's Developer Tools option (F12 on the PC) for inspecting CSS.  Best thing ever for checking the hierarchy and also changing/removing/adding CSS code on the fly to see what will happen.

NOTE: It's all built into Chrome natively.  No need to install an extension.

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: CSS hierarchy tool
« Reply #9 on: March 03, 2014, 10:21:19 PM »
yes, the Chrome one is not bad. But I guess I've grown use to the Firebug one, so it's the one I prefer.