|
|
CSS: Embedding Styles Sheets outside the "head" tags
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
I am doing some work for my company where a vendor is asking us to drop CSS code outside the head tag. It sort of works but it's inconsistent, how should I do it so that it works? Is there any guidelines for implementing this?
Specifically, I want to embed something like this to change a parameter in a external sheet:
.something {
something: 10px;
}
thanks' y'all
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status:
Offline
|
|
I don't believe STYLE and LINK elements are allowed outside the HEAD tag. You could use inline styles (e.g., <div style="font-weight:bold">test</div>) if need be, but I kind of question this requirement. Why on earth would the vendor ask for it?
|
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
It's a part of a content management system where we want to style something but customizing the template is not an option. he told me that we can use embedded styles but I thought it would be in the head. It's not, so I don't know what to do. The template already has pre-defined selectors already in the divs.
Any advice?
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Aug 2001
Status:
Offline
|
|
You could include a <script> element that inserts a <style> into the head...
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
can a script be executed in just the body alone?
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Aug 2001
Status:
Offline
|
|
scripts are run as they're encountered on the page; as far as I know they're valid in head and body.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Oct 2001
Location: San Diego, CA, USA
Status:
Offline
|
|
Yep, you can include a script tag pretty much anywhere. It obviously won't work for people who don't have JavaScript turned on, though, so I don't know how that effects your decision.
|
Chuck
___
"Instead of either 'multi-talented' or 'multitalented' use 'bisexual'."
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Location: Seattle
Status:
Offline
|
|
you can put a style tag anywhere you want, head, css include, last thing on the page.... just try it.
< style >
.something {
something: 10px;
}
< /style >
You may get cross-browser inconsistencies, so you may have to fiddle with the doc type to compensate (if you can that is). The css and html validators at w3.org are a big help here.
|
You can take the dude out of So Cal, but you can't take the dude outta the dude, dude!
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Status:
Offline
|
|
It's a Bad Idea™, but knock yourself out:
<html>
<head>
<style type="text/css">
div { background: green }
</style>
</head>
<body>
<script type="text/javascript">
addStyles('div { background: red }');
function addStyles(styles) {
if (!document.createElement) return;
if (!document.createTextNode) return;
if (!document.getElementsByTagName) return;
if (!document.appendChild) return;
var stylesheet=document.createElement('style');
stylesheet.appendChild(document.createTextNode(sty les));
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
</script>
<div>Test</div>
</body>
</html>
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
Synotic, you da man!
Beyond using javascript, why is this a bad idea? Some inconsistencies may arrise between browsers I suppose but the other option is using very dated and knowingly bad templates. My back is against the wall.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
Gavin,
< style >
.something {
something: 10px;
}
< /style >
I tried adding my style tag in the only place it was allowed to me but I couldn't get any results. Am I doing something wrong?
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Status:
Offline
|
|
Originally Posted by Apple Pro Underwear
Synotic, you da man!
Beyond using javascript, why is this a bad idea? Some inconsistencies may arrise between browsers I suppose but the other option is using very dated and knowingly bad templates. My back is against the wall.
The reasons that it's bad are largely academic. Decoupling JavaScript from the markup, behavior from content, and all that.
In this particular case, the solution is simple enough and should work for your purposes. I put in a few checks to make sure that browsers that couldn't handle it didn't choke. I've only tested it in Safari and Firefox, and so I don't know how MSIE and others are going like it. No guarantees.
Let me know how it goes though, and good luck
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Aug 2001
Status:
Offline
|
|
Crud. I wasn't exactly expecting my script idea to be taken seriously...
meh, it'll work
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
I eventually tracked down somebody who knew something at the vendor and they told me how I can externally link to my own style sheet. It is actually pulling a external file using the link tag outside the head... it works but I know it's not exactly geniousness in action.
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
Also, THANK YOU ALL FOR HELPING.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Apr 2004
Status:
Offline
|
|
Originally Posted by Gavin
you can put a style tag anywhere you want, head, css include, last thing on the page.... just try it.
< style >
.something {
something: 10px;
}
< /style >
You may get cross-browser inconsistencies, so you may have to fiddle with the doc type to compensate (if you can that is). The css and html validators at w3.org are a big help here.
Um... NO. Go read the DTD, and then come back and tell me again that it doesn't *specifically state* that the style tag is allowed ONLY inside the head element.
Just thought I'd clarify...
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Originally Posted by Catfish_Man
You could include a <script> element that inserts a <style> into the head...
The problem with that approach is that Javascript is applied only at initial page render time, so if there was any Ajax stuff on the site Ajax calls (i.e. div block reloads) would not pick this up unless the Javascript function invoking the call also had the commands to inject the styes into the head tag.
I would go with simply embedding the styles into the actual HTML tags just like Chuckit described.
All sorts of inline Javascript functions and stylesheet stuff gets really sloppy. Look at some of the code for various pages on this forum, it's nearly incomprehensible. I'm very much a fan of storing this info in external files. However, embedding the styles as overrides to the defaults is, IMHO, the next best thing, as this way you can see at a glance what tags are getting what overrides without having to wade through style tags strewn about in random places.
(
Last edited by besson3c; Aug 5, 2007 at 02:34 AM.
)
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Originally Posted by Apple Pro Underwear
Gavin,
< style >
.something {
something: 10px;
}
< /style >
I tried adding my style tag in the only place it was allowed to me but I couldn't get any results. Am I doing something wrong?
Inheritance? If this is the same class or ID, the last one that is read will take precedent, but whatever is missing in the same declaration and present in the first one will be inherited from the first declaration. In other words, the second declaration would be considered as overrides for the first declaration.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Originally Posted by besson3c
The problem with that approach is that Javascript is applied only at initial page render time, so if there was any Ajax stuff on the site Ajax calls (i.e. div block reloads) would not pick this up unless the Javascript function invoking the call also had the commands to inject the styes into the head tag.
Disregard this.
What I wrote about Javascript only being picked up at initial page load time is indeed true, but any Ajax calls you make should pick up on this adjusted CSS as long as they didn't occur onload, in which case you might have a race condition.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Location: Seattle
Status:
Offline
|
|
Originally Posted by arcticmac
Um... NO. Go read the DTD, and then come back and tell me again that it doesn't *specifically state* that the style tag is allowed ONLY inside the head element. Just thought I'd clarify...
There's theory and then there's practice. The ground truth is what the browser will let you do. And if you don't get what you like, switch doc types.
Try it. I think you'll find that sophomorically memorizing a DTD only gets you half way.
|
You can take the dude out of So Cal, but you can't take the dude outta the dude, dude!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|