Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Edit Your Head (Styles)

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.)

14 Responses»

    • #1
    • Comment
    • Fri 4 Mar 2011
    • 1149
    Gabriele Romanato wrote in to say...

    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
    • Comment
    • Fri 4 Mar 2011
    • 1218
    Chris Coyier wrote in to say...

    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:

    • #3
    • Comment
    • Fri 4 Mar 2011
    • 1227
    Raanan Avidor wrote in to say...

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

    • #4
    • Comment
    • Fri 4 Mar 2011
    • 1234
    Dave McFarland wrote in to say...

    @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
    • Comment
    • Fri 4 Mar 2011
    • 1420
    Eric Meyer wrote in to say...

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

    • #6
    • Comment
    • Fri 4 Mar 2011
    • 1442
    Alex Burr wrote in to say...

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

    • #7
    • Comment
    • Fri 4 Mar 2011
    • 1747
    Trevor Norris wrote in to say...

    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
    • Comment
    • Fri 4 Mar 2011
    • 2020
    onno De Jong wrote in to say...

    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
    • Comment
    • Sat 5 Mar 2011
    • 0446
    Stephen wrote in to say...

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

    • #10
    • Comment
    • Sat 5 Mar 2011
    • 0743
    Raanan Avidor wrote in to say...

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

    • #11
    • Comment
    • Sun 6 Mar 2011
    • 0647
    Michael C. wrote in to say...

    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
    • Mon 7 Mar 2011
    • 0523
    Received from Some links for light reading (7/3/11) | Max Design

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

    • #13
    • Comment
    • Mon 7 Mar 2011
    • 2218
    Thierry Koblentz wrote in to say...

    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
    • Comment
    • Tue 5 Apr 2011
    • 2230
    Janet Trevor wrote in to say...

    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!

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...

March 2011
February April