Question to my fellow CSS gurus: is there a good way to get a stylesheet imported from somewhere other than the within head tag of the marked-up document?
Context: for a partject I’m working on, I need to use an external stylesheet to control the presentation of certain areas within the page. However, the CMS/templating system that is being used doesn’t allow me to (easily) modify the head of the pages. Thus, I’m unable to use a link or @import method, as they are only valid within the head (right?).
Any suggestions? Thanks in advance!
001 // Jeroen Coumans // 11.01.2004 // 3:39 PM
If there already is a stylesheet in place, you can @import other stylesheets from that one. Among other things, it’s also a good way to stop the FOUC (http://www.bluerobot.com/web/css/fouc.asp).
002 // Jeff Croft // 11.01.2004 // 3:41 PM
Thanks. I should have mentioned this in my original post. There is a stylesheet in place, but I don’t believe there is an easy (or supported) way for me to get at it. It’s being generated out of a database and while I could probably make it work if I had omnipotent powers, I don’t — at least not on this project.
003 // Jeff Croft // 11.01.2004 // 3:55 PM
Aside from using an inline style, is there anything inherently wrong with putting an @import statement into a inline style?
004 // Vinnie Garcia // 11.01.2004 // 4:03 PM
“Aside from using an inline style, is there anything inherently wrong with putting an @import statement into a inline style?”
Yeah, it doesn’t work in IE or Firefox. I just tried a body element with a style of “@import ‘mystyle.css’;” and it did nothing.
005 // Jeff Croft // 11.01.2004 // 4:21 PM
Well, I guess the fact that it doesn’t work is probably a good reason reason to explore other avenues. :)
Thanks, Vinnie.
006 // Chris Vincent // 11.01.2004 // 4:42 PM
You might try using a short JavaScript within the body that adds a link element to the head of the document. Yes, it’s JavaScript, but it might be your only practical option.
007 // Aaron Barker // 11.01.2004 // 5:12 PM
Chris beat me to it… but yeah, JavaScript is the only thing I could think of.
008 // Paul Connolley // 11.01.2004 // 5:24 PM
I also tested @import url(‘somestyle.css’) which doesn’t work either. I didn’t expect it to tbh but it was worth a look-see. I think perhaps that a javascript is the only answer but I don’t like the idea.What sort of system are you working upon? I see you are using apache, is this PHP output? You could possibly obstart and process the output string to add the style? <?php obstart(); … $output = strreplace(“</head>”,”<style…>\r\n</head>”,obget_contents()); ?>
009 // Jeff Croft // 11.01.2004 // 5:40 PM
Good suggestions, Paul. Unfortunately, this is for a project within OracleAS Portal (totally separate from this site or server). I believe it does use Apache, but is not PHP-enabled.
010 // Jeff // 11.01.2004 // 6:47 PM
In theory, but probably bad practice, you could create a cgi or something app that would edit the outputted files, whenever anything is changed.
Like, you could set it to automatically append it at the end of the head in a cgi file prompted by cron every minute or so.
This is probably a really bad idea though…
011 // Paul Connolley // 11.01.2004 // 6:54 PM
I’m totally stumped in that case. If it runs on Apache 2, you could create a secondary cgi module and ultimately pipe the OracleAS output through it. I have no real experience of doing this, however, so I can’t really offer any suggestions.
012 // Dustin // 11.02.2004 // 12:48 AM
Is there a reason why omnipotent powers are not in your reach? Sorry that this may be the first time I’ve posted on your site, so I really don’t know your php or database experience. If you’ve had a look at IPB, their whole stylesheet is all generated from the database. But even if you had a hard time finding that, it’s easy to find the board wrapped all up in one board wrapper file…thus you could write all the internal styles there…(at least it’s not inline).
Also, this is a client of yours, correct? Are they just not trusting you by not giving you full access to the part of the template (or server path -FTP-) that you need to get to.
Even if you did find some ghetto way to do it (such as the javascript), I would let your client know that to do what you need to do…you’ll need these supposive powers that you don’t have.
You could always go all professional on them and give them some totally whacked out excuse and not give up until they say “okay, we’ll give you access.” I mean, if they knew what they were doing, then they would do it themselves, right?
But yea…if worse comes to worse, I would go for inline style over javascript. Still, a horrible option…but nonetheless an option.
013 // Jeff Croft // 11.02.2004 // 1:17 AM
This is not for a client of mine. However, I really can’t disclose all the details of the project.
I’m not familiar with IPB, but I believe it’s a vBulletin-style forum package? If so, I don’t think it’s relevant here. The project is not a “blog” or “forum” or phpBB-style wannabe portal, or else anything of that nature. My level of database and php experience could probably be classified as “intermediate,” but I again don’t think it’s relevant here. This is a J2EE setup — there is no php on the server, and the databases are handled by dedicated DBAs, not me.
For the purpose of this exercise, please assume that we are completely unable to access the database’d stylesheet. This may or may not be true in my case — but let’s assume it is. Forget my individual project and just consider the general problem here: style information is not allowed in the body tag. Assuming you only have control over the body of a page, how do you style it?
Inline styles are a possibility, but are pretty unpractical if you have a lot of style rules to be added to a lot of pages. Javascript may be the best option. Any other suggestions?
Thanks!
014 // Maciej // 11.02.2004 // 8 AM
So you say, that you can edit all within the body? Why not inserting another head there? I made a simple document with two heads, one on top, the second one after the html closing tag. And it worked in Opera, IE 5/6. I have no Gecko based browser.
Then: you can put where ever you want. If you will use , Internet Explorer 5.0 will fail.
015 // Jeff Croft // 11.02.2004 // 8:36 AM
Maciej-
I don’t believe that would validate, and I’d like to stick with valid solutions if at all possible. However, I will keep that in mind, should I have to forgo validation to make this work.
Thanks.
016 // AkaXakA // 11.02.2004 // 4:23 PM
Placing the head after the closing html tag would probably work. It might even validate too. (it’s too late here though to test it)
Also, it’d probably work for more browsers than a JavaScript sollution, which’d be the only way to do it in a simple way that validates.
Another way which just occurd to me: You could take the (x)html, transform it into xml and then back again into xhtml with a new/added stylesheet in the header. Don’t know how much it’d stress the server though.
PS. I see that paragraphs aren’t visible in the comment preview. If you’d like it, try my site’s contact form. (this is the script file, it contains two functions, you’ll want the latter.)
017 // Dustin Diaz // 11.02.2004 // 6:13 PM
Confirmed: If you try placing the head outside the html element, you will get the following validation error:
document type does not allow element “head” here
018 // Dustin Diaz // 11.02.2004 // 6:48 PM
BUT, For the record: it still works.
019 // AkaXakA // 11.03.2004 // 7:04 AM
Ty Dustin, too bad it doesn’t validate, but, of course, the validator is a tool, not a goal.
020 // Dustin // 11.03.2004 // 11:04 AM
Right right, I know. I’d say that’s pretty much your best option. It will only cause two validation errors. It worked fine in IE6, FF .9, Opera 7, (but of course it would work in those). I’m not too sure how other devices would handle the extra code thrown at the bottom of the page. It was interesting though, unlike php, it was able to read styles from the bottom of the page. Meaning, if you define a variable, it must occur before you decide to print it to the browser (unless it’s a function).
So for now, I would go for this rather than the javascript just for plain simplicity.
021 // Scott Schiller // 11.08.2004 // 2:05 PM
I’d be all for the javascript, myself. Though not ideal having inline blocks of code, it would be trivial to write a function to handle adding CSS, eg. addStyleSheet(‘mycss.css’,’alternate’); or something like that (the latter argument specifying the REL etc., and the function being defined in an external script reference elsewhere)
You’d be limited to users with javascript enabled of course, but at least it wouldn’t break the markup / document structure.
022 // The Wolf // 11.17.2004 // 2:50 PM
If only this would work outside of xml documents: xml-stylesheet type=”text/css” href=”./main.css” media=”screen”
Oh well…
023 // The Wolf // 11.17.2004 // 2:51 PM
Erm, that again:
<?xml-stylesheet type=”text/css” href=”./main.css” media=”screen” ?>
024 // Jonathan // 12.19.2004 // 7:33 PM
If your CMS/templating system allows you to dynamically include other pages, perhaps you can embed the external styles within another page, then pull that page in to the one you want to apply the styles.
I use java and jsp for most of my web development so the file inclusion is straighforward. You can include the content at runtime or compile time.
Example Run Time <style type=”text/css”> <jsp:include page=”otherstyles.css” /> </style>
Example Compile Time <style type=”text/css”> <@ include file=”otherstyles.css” /> </style>
Of course the include mechanism will be different depending on the web appserver/platform you’re choosing.
My guess is that since you mentioned OracleAS/Portal, you might be building a portlet which is why you can’t tweak the header since a portlet can’t produce any head or body tags.
025 // David Eaton // 08.22.2006 // 1:07 PM
I had this same problem, I was writing a program which I would not have access to head tag for the styles.. but I needed the styles class defined for javascript.
What I did was declare the class then declare the inline style.. and it appears to work.
Example..
I had to have this using javascript to get the class information when it called headers it give it the correct style for the headers class..
See it here http://www.phprocket.com/work/expandpage/expandpage.php
I only tested it with IE and FireFox so far.
Thanks, David Eaton
026 // Jason Beck // 08.30.2006 // 8:58 AM
Sorry off topic but David - your page reminded me of a sample page I made to test some things out… http://www.talltree.us/projects/xml/reader.asp
On topic - have you ruled out javascript as an acceptable option?
Ha just realized we’re looking at a post originally from November 2004…
027 // Kat // 05.04.2009 // 10:49 PM
When I was creating the facebook app canvas page I ended up just doing an include ‘http://www.wheremycssfileis.com/file.css’ (php). Worked fine. Not sure if it validates though as it is facebook and that doesn’t validate anyway :P