Load css without importing it

Question

I was wondering, is there any convention that would allow a style sheet of a page to be used witout using a link or import from that page?

What would be the benefit of this? The key negative being the fact that the CSS data wouldn't be cached as it would in a separate file and wouldn't even load until after the HTML was finished loading if you imported it via JavaScript. — John Parker, May 08 '13 at 21:20
@MarcelGwerder:I believe I saw such a page and can not figure out how it works.Unfortunately I don't have the page available at the moment — Jim, May 08 '13 at 21:21
Even the javascript solutions are just inserting `link` or `style` tags into the page. — Ben Lee, May 08 '13 at 21:25
So I'm tempted to agree that @MarcelGwerder is on the right track. What's the point? What problem are you *really* trying to solve? — Ben Lee, May 08 '13 at 21:26

score 5 · Answer 1 · answered May 08 '13 at 21:17

5

Yes, style tags in the page (preferably in the head):

<style>

    /* CSS declarations here */

</style>

answered May 08 '13 at 21:17

Kevin Boucher

16,426
3
48
55

HTML5 spec says ` – Leeish May 08 '13 at 21:18
I am asking about an external style sheet. Not internal. – Jim May 08 '13 at 21:20
Omitting the type is not permitted in HTML4.01 – david May 08 '13 at 21:21
@Jim Then no. You would have to either add a `link` tag via JavaScript or add the `style` tags as I mentioned (via JavaScript) – Kevin Boucher May 08 '13 at 21:23

score 0 · Answer 2 · answered May 08 '13 at 21:21

Ok, Here is the simplest thing I could came with:

var style = document.createElement('style');
    style.innerHTML = '#element{color:red}';
document.getElementsByTagName('head')[0].appendChild(style);

THis will dinamically create a style element and appendit to the head. Of course you could do better if you want to use the CSSOM methods like addRule.

http://jsfiddle.net/ekmyR/

score 0 · Answer 3 · answered May 08 '13 at 21:23

0

There is a way you would still use link but not directly from the page.

You could put this in an external javascript file that should be loaded with the page (using jQuery):

$('head').append($("<link rel='stylesheet' type='text/css' href='<FILE.CSS>'/>"));

Hope it helps!

answered May 08 '13 at 21:23

Toyo

314
3
7

This still ends up putting a tag into the code so it doesn't seem like this is what the questioner is asking. – RacerNerd May 08 '13 at 21:41

Load css without importing it

3 Answers3