I think I’m diagonally parked in a parallel universe.
CSS Debugger, ReduxI tried to use the I added a section for tables that use ID/CLASS (some places still do this) and shuffled the colors so that the red color is assigned to SPAN/ID which is the most unlikely item to show up and I took that item’s orange color and used it for DIV/ID instead. That should make the “light red is pink is uncomfortably non-masculine” men out there a little more comfortable. Named anchors are out in XHTML, so I opened up the NAME hook to any element. Catches a lot more items. This time it’s a bookmarklet as well. If you want to use the latest version of this second version, use this bookmarklet: CSS Debug. If you want to keep a copy on your local machine, download a copy and then use it like the other one or edit the URL in the bookmarklet to point to your local copy. Enjoy! Update: Gecko uses Second Update: Thanks to Kevin there is now a sweet bookmarklet to toggle the stylesheet: CSS Debug Toggle 
|
|
Quotes
“The true soldier fights not because he hates what is in front of him, but because he loves what is behind him.” — ILN, 1/14/11 – G. K. Chesterton
The improvements are nice, but there has to be some way of sorting that border issue out. The problem is that for very precise work (like the menu system on my site) that has to be acurate to the pixel, it pushes things over and out of line as I’m sure you know. Is Outline the only other way? Scratching my head I can’t think of anything right now but there must be a way to crack this issue. It’s the only thing holding it back from being absolutely perfect.
Perhaps you could provide 2 versions of the stylesheet, one with border, and one with outline? Then Safari users could use the outline one, and other users could use the border one?
Gecko bastards!
outlineismoz-outlinein Gecko! ARGH! It’s been updated withoutlinenow.D’OH! I just made some modifications so that running the function again would remove the stylesheet, but it doesn’t work! Sure, the stylesheet is removed (as is shown by the Show DOM Tree debug menuitem), but the display isn’t changed!
If you want to try it yourself, paste the following into the URL bar (since Textile refuses to let me do a javascript URL):
javascript:(function()%7Bvar%20newSS;newSS=document.getElementById('codepoetry-debug-stylesheet');if(newSS)%7Bdocument.documentElement.childNodes%5B0%5D.removeChild(newSS);%7Delse%7BnewSS=document.createElement('link');newSS.rel='stylesheet';newSS.type='text/css';newSS.href='http://www.codepoetry.net/stuff/css-debug-2.css';newSS.id='codepoetry-debug-stylesheet';document.documentElement.childNodes%5B0%5D.appendChild(newSS);%7D%7D)()
Just set the HREF to NULL before removing it. Thanks for the idea, I’ll add it to the above.
Great idea! I’ll definitely be using this for debugging style sheets I’m working on. It may be an idea to specify the selectors in lowercase, as XHTML served with the correct MIME type is case sensitive. The style sheet works on all sites I’ve tried it on, apart from those delivered with the correct MIME type. I changed the case of the selectors and it works great.
Good work.
Has anyone got this to work on IE (PC) yet? Even including the CSS in a doc doesn’t seem to work for me. Am I missing something?
WinIE doesn’t support CSS selectors in any useful way.
You mention IDs & CLASSes on TABLEs like they’re a bad thing…
When used for layout, yes.
For some reason, neither of these bookmarklets work in Opera(7.2), although the previous version does. btw… thanks!
This is fantastic. Even if it’s not picture-pixel-perfect it is going to save me hours of time turning borders on and off in elements to isolate problem objects and parameters.
Can’t wait to share this with the guys at the office.
Thanks!
Here’s an addition to the stylesheet someone else may find useful. When developing using forms it can be a nightmare looking through code to find the form field names for your backend script. As long as you have used labels with your form elements then this will nicely display them in your browser.
label[for]:before
{ content: ‘NAME: \’‘ attr(for) ‘\’‘; outline: 1px solid black; -moz-outline: 1px solid black; background: rgba(255,255,255,0.1); color: black; text-align: left; text-transform: none; text-decoration: none; white-space: normal; font-family: sans-serif; font-size: small; font-style: normal; font-variant: normal; font-weight: normal;
}
I lust copied a slab from the existing sheet so you may want to change the colouring.
Trackback from but she’s a girl…:
Trackback from ibry.net:
Trackback from CRISTIAN VIDMAR: My Public Weblog:
Trackback from Nebosuker.net:
Trackback from 個人的テスト用(仮):
Trackback from Marcus: