Edit Your Head (Styles)

Published 13 years, 8 months 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.)

Comments (14)

  1. This is definitely a good thing. Another thing you can do following your ideas is making the entire style area active by using scripts, for example for an inline CSS editor on WordPress when you can drag and paste your styles. Imagine this: you have a WordPress plugin that fetches some famous CSS snippets, including your reset CSS. You drag the name of the file from a widget area, an AJAX call takes place by using a remote PHP script that returns the entire content of a CSS file in your editable are or, even better, let the user to decide if he/she wants to use an @import rule. I’ll let you know when I actually make such tests. :-)

  2. The idea behind putting it in the body was the same in spirt as your excellent style[contenteditable] idea: keep some styles hidden while specifically showing others. Head = hidden / Body = shown.

    If a case can be made for the practicality of this, I think it’s for instructional/demo pages like this, where tidbits of relevant CSS are shown and able to be manipulated easily.

    There are more bugs as a part of this that are pretty interesting too, like adding new styles don’t seem to cascade as expected. See: http://cl.ly/50Xp

  3. I’ve missed something… why is it any better then editing the CSS in firebug or its equivalent in your favorite browser?

  4. @chris The cascade problem you mention doesn’t show up in Firefox or Opera 11. Webkit (Safari and Chrome) doesn’t seem to be able handle adding new rules to the editable tag, but Firefox and Opera 11 do.

  5. Nobody claimed it was better, Raanan. Why is that even an issue?

  6. In your demo, I cannot seem to style the table (XP/Chrome). Is there something sinister going on with tables in default stylesheets?

  7. Eric, this is a beautiful thing. Beyond any of it’s actual utility, the ability to change styles this way without the use of javascript is pure awesomeness.

  8. Why isn’t Chris’ example scoped to the body tag? Isn’t it just sharing the scope with the embedded header styles? Or is it that the body tag is not a flow content. I’ve been adding styles in the body before HTML5, as its very useful in CMS’s even if it wasn’t legit, but to show them and make them editable, that’s Chris’ genius.

  9. It seems you need to use Control-Return in Safari to get a newline, rather than a wrapped around new lines.

  10. There is no issue, I really thought I missed something. It is really a neat little trick.

  11. Awesome! Now where’s the jQuery library to take the contents of the style tag when you hit a “Save” button and write it back into the original HTML? :D

  12. Pingback ::

    Some links for light reading (7/3/11) | Max Design

    […] Edit Your Head (Styles) […]

  13. May be worth styling the style block with position:fixed and creating some offset for it. That way one can edit elements toward the bottom of the document while keeping the editable region in sight.

  14. Whoa! This is really nice. Saves a lot of time especially for my projects in my graphic design course, though yeah, it seems like it’s not really compatible with Chrome. But anyway, thanks for the share!

Add Your Thoughts

Meyerweb dot com reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand.

HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>

if you’re satisfied with it.

Comment Preview