Multi
Multi
Vector Series - [Tip] Edit CSS Without Reloading The Page
Topic Started: Thursday, 24. November 2011, 11:35 (438 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
Quote:
 

Edit CSS Without Reloading The Page
Time: 5 Minutes
Difficulty: Easy



This is just a little trick I picked up. Using some HTML5 and some CSS that you probably didn't know you could apply you can make a CSS box that updates the page's CSS in real time.
Code: HTML
 
<style>
style {
display: block;
height: 200px;
}
</style>
<body>
<style contenteditable>
html, body {
color: green;
}
</style>
</body>


That's it, just apply a display: block property to the CSS tag and you'll be able to see the CSS within those tags. Add in the HTML5 contentEditable element attribute and you'll be able to edit the contents of the block. Best of all, it's real time.


Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Would this be placed in the Javascript of the Board Template?
Off
Profile
Quote
Top
 
Andrew
Member Avatar
ぼくたちがすべてはばか。
This can be placed anywhere you want as long as it's not in the head tag.
Posted Image

Professional web design/development services.http://wildandrewlee.com/
Off
Profile
Quote
Top
 
Dakota
No Avatar
Level 4
PERFECT. Thank you.
Off
Profile
Quote
Top
 
Maddy
Member Avatar
BAMMMMM!
Outline Documentations
G E N E R A L

Documentation accepted in to the General database
Posted Image
This is a work in progress ^^

"You still talk about it? You still care about it."


Tumblr - WeHeartIt - My Things - Twitter

The List
Life
<3
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..