A tool to display current selected webpage's text css?

Discussion in 'HTML' started by John Dalberg, Apr 24, 2005.

  1. John Dalberg

    John Dalberg Guest

    Is there a tool or browser addon where if I select a text on a webpage, it
    displays the css attributes that made up its display?

    --

    John Dalberg
     
    John Dalberg, Apr 24, 2005
    #1
    1. Advertising

  2. John Dalberg

    Oli Filth Guest

    Oli Filth, Apr 24, 2005
    #2
    1. Advertising

  3. Oli Filth wrote:
    > John Dalberg wrote:
    >> Is there a tool or browser addon where if I select a text on a
    >> webpage, it displays the css attributes that made up its display?

    > The Web Developer's toolbar for Firefox.
    > https://addons.update.mozilla.org/extensions/moreinfo.php?id=60


    At the very least it does this. This and the google bar extensions are
    my favorite.

    --
    -=tn=-
     
    Travis Newbury, Apr 24, 2005
    #3
  4. John Dalberg

    Oli Filth Guest

    Travis Newbury wrote:
    > Oli Filth wrote:
    >
    >> The Web Developer's toolbar for Firefox.
    >> https://addons.update.mozilla.org/extensions/moreinfo.php?id=60

    >
    > At the very least it does this. This and the google bar extensions are
    > my favorite.


    The web developer plug-in is an amazing tool. CSS editing, HTML
    validation links, auto window-resizing, cookie inspector, header
    inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.

    --
    Oli
     
    Oli Filth, Apr 24, 2005
    #4
  5. Oli Filth wrote:

    > Travis Newbury wrote:


    >> Oli Filth wrote:


    >>> The Web Developer's toolbar for Firefox.
    >>> https://addons.update.mozilla.org/extensions/moreinfo.php?id=60


    >> At the very least it does this. This and the google bar extensions are
    >> my favorite.


    > The web developer plug-in is an amazing tool. CSS editing, HTML
    > validation links, auto window-resizing, cookie inspector, header
    > inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.


    Agreed. But I don't see where it does what OP asked for. It will show
    CSS without user having to dig it up from the link, but I don't know of
    a way to just show relevant styles for a bit of text, as requested.

    --
    Blinky Linux Registered User 297263
    Killing all Usenet posts from Google Groups
    Info: http://blinkynet.net/comp/uip5.html
     
    Blinky the Shark, Apr 25, 2005
    #5
  6. John Dalberg

    Oli Filth Guest

    Blinky the Shark wrote:
    > Oli Filth wrote:
    >
    >>The web developer plug-in is an amazing tool. CSS editing, HTML
    >>validation links, auto window-resizing, cookie inspector, header
    >>inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.

    >
    > Agreed. But I don't see where it does what OP asked for. It will show
    > CSS without user having to dig it up from the link, but I don't know of
    > a way to just show relevant styles for a bit of text, as requested.


    CSS->View Style Information option.

    You get a nice crosshair pointer, and when you hover it over an area on
    the page, it tells you what the relevant ID/Class is, e.g.

    html > body > div#container > p > span.special

    When you click, it brings up the relevant style info.



    --
    Oli
     
    Oli Filth, Apr 25, 2005
    #6
  7. Oli Filth wrote:
    > Blinky the Shark wrote:
    >> Oli Filth wrote:


    >>>The web developer plug-in is an amazing tool. CSS editing, HTML
    >>>validation links, auto window-resizing, cookie inspector, header
    >>>inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.


    >> Agreed. But I don't see where it does what OP asked for. It will show
    >> CSS without user having to dig it up from the link, but I don't know of
    >> a way to just show relevant styles for a bit of text, as requested.


    > CSS->View Style Information option.


    > You get a nice crosshair pointer, and when you hover it over an area on
    > the page, it tells you what the relevant ID/Class is, e.g.


    > html > body > div#container > p > span.special


    > When you click, it brings up the relevant style info.


    Too cool. I thought I'd hit all of the selections in all of the menus
    off the WebDev toolbar; must've missed that one. Thanks!

    Once more: what a bitchin' extension that is.

    --
    Blinky Linux Registered User 297263
    Killing all Usenet posts from Google Groups
    Info: http://blinkynet.net/comp/uip5.html
     
    Blinky the Shark, Apr 25, 2005
    #7
  8. John Dalberg

    John Dalberg Guest

    On Sun, 24 Apr 2005 23:12:57 GMT, Oli Filth wrote:

    > Blinky the Shark wrote:
    >> Oli Filth wrote:
    >>
    >>>The web developer plug-in is an amazing tool. CSS editing, HTML
    >>>validation links, auto window-resizing, cookie inspector, header
    >>>inspector, CSS cursor, div/img/frame/ highlighting, the list is endless.

    >>
    >> Agreed. But I don't see where it does what OP asked for. It will show
    >> CSS without user having to dig it up from the link, but I don't know of
    >> a way to just show relevant styles for a bit of text, as requested.

    >
    > CSS->View Style Information option.
    >
    > You get a nice crosshair pointer, and when you hover it over an area on
    > the page, it tells you what the relevant ID/Class is, e.g.
    >
    > html > body > div#container > p > span.special
    >
    > When you click, it brings up the relevant style info.


    Thanks. However I can't get it to display inline styles. See demo below. If
    you click "line 2" with the crosshair, it doesn't display the underline
    style. Am I missing something?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    td {
    font-family: Verdana, Arial, Helvetica, sans-serif;

    }
    -->
    </style>
    </head>

    <body>

    <table><tr><td style="text-decoration: underline; ">Hello World</td></tr>
    </table>
    <span style="text-decoration: underline;">Line 2</span>

    </body>
    </html>




    --

    John Dalberg
     
    John Dalberg, Apr 25, 2005
    #8
  9. John Dalberg

    Lachlan Hunt Guest

    John Dalberg wrote:
    > Is there a tool or browser addon where if I select a text on a webpage, it
    > displays the css attributes that made up its display?


    The DOM inspector (Tools > DOM Inspector) in Mozilla/Firefox will show
    you what you need, plus much more.

    --
    Lachlan Hunt
    http://lachy.id.au/
    http://GetFirefox.com/ Rediscover the Web
    http://GetThunderbird.com/ Reclaim your Inbox
     
    Lachlan Hunt, Apr 25, 2005
    #9
  10. John Dalberg

    John Dalberg Guest

    On Mon, 25 Apr 2005 04:28:17 GMT, Lachlan Hunt wrote:

    > John Dalberg wrote:
    >> Is there a tool or browser addon where if I select a text on a webpage, it
    >> displays the css attributes that made up its display?

    >
    > The DOM inspector (Tools > DOM Inspector) in Mozilla/Firefox will show
    > you what you need, plus much more.


    How? I am not able to display any css in the results and the treeview shows
    generic #text's which doesn't tell me which text exactly?


    --
    John Dalberg
     
    John Dalberg, Apr 25, 2005
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    445
  2. Paul
    Replies:
    14
    Views:
    869
    Alexey Smirnov
    Jun 19, 2008
  3. Corka
    Replies:
    2
    Views:
    726
    Corka
    Mar 5, 2009
  4. sifar
    Replies:
    5
    Views:
    445
  5. iMath
    Replies:
    10
    Views:
    260
    iMath
    Jan 10, 2013
Loading...

Share This Page