brad_mn1988 Posted December 30, 2005 Share Posted December 30, 2005 First post, so be gentle I have a great css block for a very cool scrolling table technique (http://cssplay.co.uk/menu/tablescroll.html) and part of the css is the width of the columns. So I have a php function to take db results and render a table, so I want to be able to dynamically render the css as I call this function so that column widths will be conmensurate with the data.(so why isn't this being posted on a php forum or among the css topics?)Well, it is because this is about the HTML of it all.Accoring to w3school tutorials and all, the <style> tags (where I can embed a bunch of css) belong within the <head> tags and can either be explicit or imported. However, if you are in the body, you need to use the style="" attibute at the tag level for css.It would make me feel terrible to place hundreds of "width" attributes in a table (althought I am sure it would work), so I was wondering whether I could just slap in a <style> block dynamically within the body.Well, it works.go here:http://www.w3schools.com/tags/tryit.asp?fi...e=tryhtml_styleand change the left pane to: <html><head><style>h1 {color: red}h3 {color: blue}</style></head><body><h1>This is header 1</h1><h3>This is header 3</h3><style>h1{color:purple}</style></body></html> and the h1 (even though the style tags appear after the usage) are is purple.Is this IE and FireFox being forgiving, or can I use a dynamic rendering of a <style> block to format the column widths of a particular table and depend upon it?ORIs it legal to have more than one <head> block? And if so should I have more than one <body> blocks and break "in and out" of these areas?like this:(this works, btw) <html><head><style>h1 {color: red}h3 {color: blue}</style></head><body><h1>This is header 1</h1><h3>This is header 3</h3></body><head><style>h1{color:purple}</style></head><body><h1>This is header 1</h1></body></html Thanks in advance! Link to comment Share on other sites More sharing options...
Chocolate570 Posted December 31, 2005 Share Posted December 31, 2005 Rawr! I will now eat you!(Just Kidding )Welcome to the forums, hope you have a great time.Now, to address your questions. Any tag you put in the head section you can put into the body section too. The only problem is the head section loads first, causing your page to look funny if the title tag doesn't take effect until the whole page is loaded. So you can put style tags into the body section with php. :)Also, you can have more than one head section or body section. I don't know if the validator will like it, but it sure will work. Link to comment Share on other sites More sharing options...
Skemcin Posted December 31, 2005 Share Posted December 31, 2005 Stylesheets over will always get applied at the end of the file being loaded. So, even though you start in the <head> with a red <h1> because you later redefine the <h1> to purple, it will (theoritically in a split second) change the <h1> from red to purple - again the HTML gets loaded, then the CSS gets applied, so moving down the page it reads and applies red, then purple.Personally, defining more than one <head> and <body> is not the way to go - code to standards, don't let Microsoft's mentality (making your own rules) get to you too much.As for a solution, it would help to understand a little more about why you would even need to redefine the <h1> tag half way through your document. If anything, you define <h1> classes for as many <h1> colors you wish to apply and then for each <h1> define with class to use.Copy the following code: <html><head><title>H1 test</title><style>h1.red {color: red}h1.purple {color: purple}h1.green{color: green}h3 {color: blue}</style></head><body><h1 class="red">This is header 1</h1><h3>This is header 3</h3><h1 class="purple">This is header 1</h1><h3>This is header 3</h3><h1 class="green">This is header 1</h1><h3>This is header 3</h3></body></html> Paste it here:http://www.w3schools.com/tags/tryit.asp?fi...e=tryhtml_styleIs this the effect you're looking for?Now, if you want to dynamically format the style attribute, then you might do something like this: <div style="width:#dynamicwidthvariable#px;">I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdgnieg. The phaonmneal pweor of the hmuan mnid. Aoccdrnig to a rscheearch sduty at Cmabrigde Uinervtisy, it deosn't mttaer inwaht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rghit pclae. The rset can be a taotl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.<br /></div>...(some code that ends up changing the variable's value for whatever reason)...<div style="width:#dynamicwidthvariable#px;">I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdgnieg. The phaonmneal pweor of the hmuan mnid. Aoccdrnig to a rscheearch sduty at Cmabrigde Uinervtisy, it deosn't mttaer inwaht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rghit pclae. The rset can be a taotl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.<br /></div> You could even define baseline <div> attributes in the main <style> stage that is in the <head> and let all the <div> tags inherit that but then have this set up to dynamically define the width. Link to comment Share on other sites More sharing options...
mpoer Posted January 2, 2006 Share Posted January 2, 2006 all I can say is that the browser will try it's hardest to render whatever you put into it, especially when there's no doctype declared.example: myspace.com/any_user_that_has_a_non_default_profilebut just because you can do it doesn't make it right. stick with standards and keep your <style> in the head section. if everyone cops out and uses crap code, then the standards will never be recognized and the web will ultimatly explode! ohz noz teh w3b eXpl0ded! Link to comment Share on other sites More sharing options...
TwoD Posted August 3, 2006 Share Posted August 3, 2006 Hello all, first post here too =)I've been using this "feature" to dynamically change the appearance of a large number of <div> tags by replacing their governing <style> tag with a new one generated by the server.Since this isn't exactly good practice according to the standards, I've been looking for alternative ways, and of course found none.The whole point of my application is the ability to change the appearance of all those <div> tags without having to regenerate them all from scratch.The different stylesheet collections are a mess to work with, even if they were standard compliant collections.And the easiest way to do that is to simply replace the relevant <style> tag with a new one, not to mention that it works in all major browsers.I don't see why this (or a similar method) isn't part of a standard....I say one should be redefining the standards to allow some things that are really useful and already supported by the major browsers, instead of just going "it's not supposed to be there so it's evil".The Web evolves, get used to it Link to comment Share on other sites More sharing options...
aspnetguy Posted August 3, 2006 Share Posted August 3, 2006 I am sorry I do not agree with you at all.That is how we a rrived at IE6...the worst browser on the planet. Developers are forced to write their standards compliant code for every browser then debug it for IE6 which makes a lot of extra work.You can just redefine the rules to suit your situation. 99% of the time there is a standards compliant way to acheive the same thing. Link to comment Share on other sites More sharing options...
TwoD Posted August 3, 2006 Share Posted August 3, 2006 But what about that last 1%?I now have an app that I know runs perfectly in IE, FF, NE and Opera for Windows. It's not been tested on other browsers yet so I don't know about them.The only "flaw" in it is the untilization of something which is suppported (with the exact same code) by all the browsers I've tested so far, and that just happens to not be a part of a standard.Still, I'm looking for standard-compliant ways of doing this, just in case somebody decides to run the generated markup through a validator and decides to judge the the whole application based on that.So, what to do when the standards don't support something useful?I could put the project on ice, sit down and wait for someone working with the standards to realize that a developer could possibly find it useful to have a standard way of modifying stylesheets, just like you can modify inline styles.Or I could deploy the app when it's finished, maybe create some buzz about a useful and working, but non-standard, approach. Maybe that'll atleast make someone react.Btw, I'm not trying to redefine it just for this situation, any solution allowing me to dynamically modify/replace the stylesheets would be great. (And possible allowing them to be placed in the <body>, but that is less important.) Link to comment Share on other sites More sharing options...
boen_robot Posted August 3, 2006 Share Posted August 3, 2006 So, what to do when the standards don't support something useful?Standarts do support useful things. What you're talking is "browser support", not "standarts support". There's a huge difference between the two and the only buggy browser is IE. That's why it's better to debug it's problems then to design per-browser stylesheets: all user agents (not only desktop browsers) will be able to see your application as they should and they won't be affected by the IE fixes, if you do them right (with conditional comments...). Link to comment Share on other sites More sharing options...
aspnetguy Posted August 3, 2006 Share Posted August 3, 2006 How about explaining hte situation and I am sure there is a standards compliant way of doing things. Maybe I should have used 99.999%.I have yet to incounter a situation that could not be done using a standards compliant method. The people that develop standards aren't idiots...they don't make decisions without devleopemnt situations in mind. Link to comment Share on other sites More sharing options...
TwoD Posted August 3, 2006 Share Posted August 3, 2006 Standarts do support useful things. What you're talking is "browser support", not "standarts support".I just meant that the standards doesn't "support", or "include," this particular thing, which would be stylesheet modification. All the browsers do exactly what I want, but the standards say it shouldn't be possible.Thanks to the browsers I can change stylesheets via the styleSheets collection or similar, but using it is horrible. (Details about it on QuirksMode if you haven't tried this.)But they also support using <style> tags in the <body> tag, which makes it a whole lot easier to replace them than to modify them.That's why it's better to debug it's problems then to design per-browser stylesheets:...Read my first post again, I'm dynamically changing the appearance of a large number of <div> tags at the same time, not changing stylesheets depending on the browser. The same stylesheets are used in all the browsers without problems because the style rules in them are simple.An overview of the application where stylesheet modification is needed:In this case, a whole bunch of <div> tags are used to represent pixels in lines drawn by a vector graphics engine.The graphics are generated and stored by the server and can be redrawn and styled by the user to make figures or whatever they want, through queries to the server. To not have to regenerate the whole figure each time a line property, like the color, changes I simply ask the server for a new stylesheet to be applied to that line.There might be hundreds, if not thousands of <div> tags which all have the same stylesheet applied to them to minimize the amunt of inline styling that needs to go with the tags when the line is regenerated.This reduces the amount of transferred data and makes for a much cleaner and lighter code to work with. The actual <divs> are not stored on the server, but the server knows how to recreate them to update the client if the line shape changes.The only real problem with inserting a new stylesheet is that it won't have any effect unless I put atleast one character in front of the <style> tag. An invisible character like a space won't suffice, but a . (dot) will. So I use another <div> to hide that dot. I haven't bothered to check for other solutions for that specific problem yet.The standard alternative I've found would be to request new styling info from the server, travese the DOM, find each individual <div> that needs to be changed and update its inline style according to the parsed server response. Just the traversing/updating part takes alot longer than regenerating the whole line from the server!So yes, there is a standard "solution", but it's not useable in practice.Is there a standard way of dynamically modifying stylesheets? No.Would it be great to have it? Yes.Does it need to be in this exact way? Of course not, as long as it's possible. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 3, 2006 Share Posted August 3, 2006 You can modify styles using javascript, will that work for you? Link to comment Share on other sites More sharing options...
TwoD Posted August 3, 2006 Share Posted August 3, 2006 No, the only way of directly accessing a stylesheet is via the stylesheets collection. But according to W3C, it's not supported.Also, it's much more complicated than just replacing the <style> tag with a JavaScript since browsers can't agree on how to access the actual css rules. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 4, 2006 Share Posted August 4, 2006 The internet leaves a lot to be desired, starting with the fact that HTTP is a stateless protocol. You sort of just have to accept the fact that the internet protocols and specifications were not designed with something like a vector graphics engine in mind. Things like Java and Flash are typically used to do things that interactive. If it is not too much bandwidth to redraw the page when someone makes a change, I would say that is your best option, but then again if you are using divs to represent pixels, you are probably well aware that several bytes per pixel is too large to do anything practical. Trying to make an image out of a table with 1x1 cells proves that point pretty quickly.If you want to make a vector graphics engine available online, I would say your options are Java or Flash. Making a graphics engine through HTML is really nothing more than a proof-of-concept, where would you find a practical use for this that would not be better served with Java or Flash? Adobe claims 98% penetration of the Flash platform, which by the way is higher than the 89%-92% of people using javascript-enabled browsers that typically shows up on web stats, not to mention the legion of browsers that don't properly support CSS. And Flash is already vector-based, and obviously already includes a rendering engine. Link to comment Share on other sites More sharing options...
TwoD Posted August 4, 2006 Share Posted August 4, 2006 Yeah, but the company I'm developing this app for has as a goal that no plugins at all should be required to run "the big app" in which mine will be a small part. JavaScript/CSS support is not something I need to think about in this case, since "the big app" requires those anyway.This is by no means meant to replace Flash or Java and is, like you said, more of a proof-of-concept and a fun thing to play around with.Even if this wasn't about a vector graphics engine, it would still be nice to be able to modify stylesheets in a standard way. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 4, 2006 Share Posted August 4, 2006 I am lost...why can't you setup different classes in the stylesheet fromt he beginning and just change the class names of the elements?Or are the class attributes generated randomly and there is too many to do this? Sorry for the dumb questions. Link to comment Share on other sites More sharing options...
TwoD Posted August 4, 2006 Share Posted August 4, 2006 Because it changes dynamically based on what the user wants.It's basically a drawing app querying the server to get new data.And I can't pregenerate all the stylesheets neccessary to cover every combination they might come up with...I won't go into details about why it uses the server now, but it can run entierly on the client too, but that doesn't make a difference when it comes to the stylesheets. Link to comment Share on other sites More sharing options...
TwoD Posted March 26, 2007 Share Posted March 26, 2007 I'm sorry to bump an old thread like this, but I figured it'd be more proper to continue the discussion here rather than start a new one about the same thing.Even tho I'm no longer actively working on the drawing-app project, I'm still interested in finding out if someone has solved/encountered the problem with modifying/replacing stylesheets dynamically. In a fully standards compliant way that is.As it is now, the pages with the script are valid, but the dynamically generated content isn't. Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted March 26, 2007 Share Posted March 26, 2007 You can just put a class name in the <style> element in the head so make it something like:td.column1 {width:xx%} or td.column1 {width:'xx'px}then refer to them in your PHP code or whatever so that it generates hundreds or thousands of <td class="column1"> and so on. Link to comment Share on other sites More sharing options...
TwoD Posted March 29, 2007 Share Posted March 29, 2007 Eh? I think you misunderstood something here...Let's break it down to a really simple exampleThe client downloads a page which has a single stylesheet, designed to say set the background color of 10000 divs to red. It does this with a selector pointing first to a parent div of those 10k divs and then to all divs within it. That is to avoid having to do class="makeRed" on 10divs.The client then has a few options such as adding more divs or restyle the old ones.When restyling: To avoid having to send 10k divs to the client again, the server simply sends a new stylesheet.The question is how to get this stylesheet into the document in a standard way? Link to comment Share on other sites More sharing options...
justsomeguy Posted March 29, 2007 Share Posted March 29, 2007 I don't know what you've tried, so I don't know if you've already seen this, but this page looks pretty helpful:http://www.howtocreate.co.uk/tutorials/javascript/domcssSpecifically, the sections on "Rewriting Stylesheets", "Changing the href", and "Switching stylesheets". Link to comment Share on other sites More sharing options...
jesh Posted March 30, 2007 Share Posted March 30, 2007 I don't know what you've tried, so I don't know if you've already seen this, but this page looks pretty helpful:http://www.howtocreate.co.uk/tutorials/javascript/domcssSpecifically, the sections on "Rewriting Stylesheets", "Changing the href", and "Switching stylesheets".I tried to post this yesterday but the session timed out. (What's with this site being so slow sometimes???).Anyhow, in addition to the link above, you can check here as well:http://www.quirksmode.org/dom/changess.html Link to comment Share on other sites More sharing options...
TwoD Posted April 1, 2007 Share Posted April 1, 2007 I've looked at both those sites before, which is why I came here. As both sites say, each browser treats things differently, even those claiming to be fully standards compliant have quirks which need to be dealt with. Anyway, I'm in a bit of a hurry atm so I can't make a longer post, but thank you for taking your time reading this. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now