Kind of a classic little trick for ya’ll today. You know the <style>
blocks you can put in the <head>
of your HTML to do styling? You don’t actually have to put those in your head, they can be anywhere on the page.
What’s more? It’s just an element like any other. The default stylesheet of all browers makes it display: none;
.
If you move it down into the body and reset it to display: block;
you can see the very code which is applying style to that page. Might as well make it look nice and code-y to eh?
body style {
display: block;
background: #333;
color: white;
font: 13px/1.8 Monaco, Mono-Space;
padding: 20px;
white-space: pre;
}
What’s more? You can give it the HTML5 attribute of contenteditable
and you can literally edit the CSS right there and watch it effect the page.
<style scoped contenteditable>body {
background: green;
}</style>
That’s how all the code on The Shapes of CSS page is done. Not only is it just kinda neat, but it’s very useful on a page like that so you don’t have to maintain the CSS in two places.
I don’t think it’s a very good practice in general, outside of CSS demos. <style>
blocks in general I’d go so far as to say are bad practice unless it’s a really specific third-party scenario like where injecting styles is the most efficient way to styling newly injected third-party content.
Also for the record, it’s not invalid to use <style>
outside of the <head>
as long as you use the scoped attribute and it’s the first child of it’s parent. Otherwise it is invalid. The scoped attribute (although currently supported in no browsers) is supposed to imply that the styles within only apply to that parent element and nowhere else. Learn more about it.
Awesome trick
My first comment but I have been following the site for quite a while. Great tip!
Wonderful tip. In safari it seems to work only for the background property in your demo…. Does it works only for properties that have been previously declared!?
Editor’s Note: Truls Larsen wrote in (after the comments for this article had been closed) to let me know there is something about line breaks that make it stop working. You could use Shift+Enter to visually make a new line and have it still work.
in chrome, I found it only works when you put the new rules on the same line as the first rule. in other browsers it seems to work as expected.
linked image
I found the same issue in chrome on Mac OS X.
All statements had to be on the same line to become active…
Cool trick! I wonder if there would be some way to combine this with the HTML5 color picker?
Just add some JS magic and you will be able to combine these things together…
That awesome! Win!
Great trick thanks for the share!!
Wow this is a great trick! And like mluzitano said that color picker would be a nice feature.
Brilliant Idea, although I’ve got to agree with @Luciano Mammino, I could only get it to work on the body element, I tried setting the body to tranparent and the html to blue but it didn’t work.
Pretty neat, could prove to be a great learning tool for some!
Dude that is sick! nice work! A bona fide trick :)
Now that is a CSS trick, of course I would hope everyone knows you can put style elements in the body.
Great trick
1/ Validity issue: HTML5 defines attribute scoped for style element, defining, that particular style is applicable only for parent element subtree:
http://dev.w3.org/html5/spec/semantics.html#the-style-element
is valid HTML 5
2/ good practice issue: thou not a good one in general, can be extremely useful in mashups. When creating box you expect other pages will include, you can style it independently, regardless of the page. Which is great.
in that example, however, nothing should happen: there is no <body> element inside the <style>’s parent element subtree (i.e., inside that <section>).
(but in reality, it does work, even though it shouldn’t. see my comment a little further down).
Yes, it’s very nice, It helps me a lot during my work~
This is probably a question for another time, but I was playing with the live demo and added style { position: absolute; } to try to break it. When I did that, the box was outlined and a tab popped up above it, allowing me to drag and and drop the box at will.
Is this some HTML5 voodoo or some JavaScript/jQuery madness?
I noticed that too. couldn’t figure out what that was from?
It had resizing handles as well… hmm
It seems, if you use ‘display: inline-block’ rather then ‘block’, you can avoid the annoying generation when pressing enter in the edited style tag!
Actually you can make styles in the head visible:
Whats more, you can wrap this in a server side scripting if statement (PHP, Ruby, JSP, whatever your using) to only print this if ur on your staging server and not on your live server.
Really like it. Thanks CSS-tricks, I think I will adopt this. Whats more, Im gonna tell my friends who are web developers too.
Wow this is an amazing trick, never thought of that!
That is so cool, this is going to save me so much time!
I used this trick too, in my Front Trends slides. Anne Van Kesteren came up with it originally.
However, it’s a bit too limiting (you can’t just show the declarations, vendor prefixes are displayed) so I’m not using it any more.
even though “scoped” styles are supposed to apply only to the children and immediate parent, I’ve found that many browsers will still apply the rules to anything that matches that selector.
e.g.:
Both paragraphs are blue in Chrome 9, Firefox 3.6, and Opera 10. I’m not sure, exactly, where (or if) browser support starts for “scoped,” but it’s worth knowing that you shouldn’t rely on it to resolve rule conflicts.
(this was supposed to be in reply to Bronislav Klucka’s comment above)
No browser yet supports scoped styles, so there’s no reason for that to work. But it’s definitely an interesting new feature that could be quite useful in the future.
I wasn’t saying, it’s working now :). I was just referring to validity / good practice issues
@Louis: thanks, I didn’t think so, but I hadn’t tested in any browsers other than the ones I mentioned.
@Bronislav: Of course, I didn’t mean to imply that you were. I just thought it was worth mentioning, since “scope” is a pretty neat concept – and, since it’s not terribly obvious that it doesn’t actually work yet.
That final HTML 5 bit was pretty brilliant. This is exactly why I love this site — it never ceases to amaze me what CSS is capable of.
Excelente explicacion, muy didactico y con el demo mas aun queda todo claro. los felicito.
I noticed on the shapes of css page that after the DOM updates i have to re-click where i want to edit. And the backspace or delete commands didn’t work. there seemed to be a bunch of quirky things while editing anything in there. strange…
Win7
Firefox 3.6
“It’s not valid (or good practice) but it works. ”
Pretty much sums up this site…
Nice. This would be awesome for debugging, since I don’t link some things in Firebird (how it reformat original code, etc).
SIMPLEST/COOLEST!
Thanks. Dave
Thanks chris, that’s not css tricks its css magic. :) . Sadly creating new lines seems impossible (at least in ff 3.6 mac). But I suppose that it will not be very difficult to change that.
You can shift-return as a quick hacky fix.
Weird. I could have sworn that less than a month ago I tried putting a style tag in the body of a page (which worked for most browsers), only to have Safari throw an error and move it into the head…?
As Shut Pavel points out, you don’t have to jam
style
blocks into thebody
in order to make this work. Toss this in yourhead
element and you can do the same thing. You can even make the visible styles go away and have to reload to get them back. (Awesome!)Of course, you can get fancier with this and make it so the “show styles” CSS is in another, not-editable
style
element, but this serves as a decent proof of concept.Here, have an actual proof-of-concept with the styles that show the styles hidden from being shown. (Ooooo…)
http://meyerweb.com/eric/css/tests/edit-styles.html
haha Niiiicce, Bookmarked :D
Just a though on the possibilities of bad use:
If you coded the style tag without any properties or content and didn’t make it content editable but did make it display block and made it look all fancy for design purposes… is that a bad use of the style tag? Are we getting into the realm of misuse of a tag if we use the style tag to “STYLE” the page with fancy decorative design?
I see potentials here but don’t know the ramifications both positive and negative especially when pertaining to standards and accessibility ;)
Again just a thought…
Just came accross this , its really cool thanks I will be using it.
Awesome trick ..
holy crap, that was awesome
Nice!
so cool, thanks for the tip!
brent
@
mimoYmima.com
Thank you, author! Very useful article, it always was a problem for me to investigate all these tags, links, notes … To Bronislav Klucka: respect and gratefulness for his informative posts. I`ll use these recommendations in my work. And from blogger to bloggers: may be this link Greatiful can help my numerous colleges – bloggers to earn through blogging) Its easy to registrate, confirm your RSS channel, then sometimes enter and take your money. Enjoy!
Nice trick!
It seems editing/adding rules works best when the style block is in the head though.
This would be awesome for demo/tutorial pages.
Say you want to explain how css gradients work, you could set up a demo page using this trick, and the viewers can easily change the colors, direction, stops, etc.
And since its non-destructive editing, they just hit refresh and its back to the original demo.
@Miles – This is exactly why I did on css-101.org, you can see an example here (check the orange box).
As a side note, I noticed that webkit allows to use the enter/return key to create new lines, but then fails to apply the changes. So I believe the best is to use shift+return in all browsers.
Thanks to Chris for the inspiration.
its really work, cool trick
awesome, funny :)
The same goes for other hidden elements like
head
,script
,meta
et cetera. I wrote about this before: Displaying hidden elements likehead
using CSS.Don’t shoot yourself in the foot with “display:none;” =)
Neat. Really neat. Valuable? Maybe. Functional? Not really. If no extensions already existed in browsers that allow us to edit the content live for testing, then this would be great. I can see using it in IE so I can edit it directly. But past development I can’t think of an immediate use for it. I haven’t exactly been waiting something like this and I can’t think of any problems it’s going to solve. And validity. Oh man, validity.