Posts from Friday, March 4th, 2011

Edit Your Head (Styles)

Published 13 years, 3 weeks past

When I saw Ian Lloyd tweet the words “Cunning. Like a fox. Neat little trick!” I knew I had to check it out, because Ian’s a sharp one.  So I popped over to the linked CSS-Tricks article, Show and Edit Style Element, and checked it out.  Cunning indeed!  And yet, it immediately bothered me.

See, the trick as posted involves editing style elements that have been embedded into the body.  That is of course valid in HTML5 when you scope the style element, but scoping wasn’t the point of the proffered demo.  And I’ve long known that it’s simple to display style elements from within the head; it’s what I did for the CSS3 tests I recently published, used in demos of diagnostic styles, and so on.  Why not do the same thing here and avoid the invalidity of an unscoped body-embedded style element?

Accordingly, I created my own variant demo, where you can edit the head-embedded styles directly.  While I was at it, I used another favorite trick of mine: I took the CSS used to make the styles appear in the browser and put them in their own style sheet that doesn’t get shown.  Usually I id the style sheet to be displayed and style based on that.  This time I had a better hook, in that the style element to be edited already had a contenteditable attribute.  So:

head, style[contenteditable] {display: block;}
style[contenteditable] {
  font-family: monospace; white-space: pre; padding: 0.5em;
  border: 1px dotted red; background: white;}

Yay attribute selection!

Feel free to have fun editing the styles embedded in the document from within the document.  As usual, do so at your own risk, no warranty is expressed or implied, not liable for damages arising from your use or failure to use, not a flying toy, blah blah blah.  Share and enjoy!

(Incidentally, if anyone knows a markup- or CSS-based way to get around the Shift-Return-for-newline requirement in Gecko browsers, I’d love to hear about it.)


Browse the Archive