Read the content of CSS file

Question

I am getting a CSS file from the server, i want the content of that file and put that in a tag in my body before anything else loads. Is there a way to read the content of a css file using Jquery or JavaScript?

I want to get the css which is client specific from the server and append it to document. I want that to load after every other css is loaded. — mohsinali1317, May 12 '14 at 09:37
you should explain how you're getting that CSS from server. And also explain why you can't / don't want to load the CSS using standards (with ` — , May 12 '14 at 09:38
http://beta2.postify.com/public/clients/26/style.css is the css file I am getting from the server. For the question why I am not appending it to the head is that it doesn't work for all browsers. I just googled it and it was having some issue with some versions of FF. — mohsinali1317, May 12 '14 at 09:40
Get data from the Database. And bind it to page in server side — Sajitha Rathnayake, May 12 '14 at 09:42
That CSS file contains one simple rule that should work everywhere, and even if it doesn't it sure won't cause any problems ? — adeneo, May 12 '14 at 09:43
@adeneo I am not getting you what you are trying to say here. — mohsinali1317, May 12 '14 at 09:45
I'm trying to say you can just include the file normally, and if you still don't want to do that, just append a link tag, don't get the files content etc, — adeneo, May 12 '14 at 09:51

score 1 · Answer 1 · answered May 12 '14 at 09:33

1

If you want to read a file with Javascript, use the ajax methods. Here is the .get which allow you to read a file.

http://api.jquery.com/jquery.get/

answered May 12 '14 at 09:33

Superdrac

1,208
17
29

I get this error when I am using ajax to get the content "No 'Access-Control-Allow-Origin' header is present on the requested resource" – mohsinali1317 May 12 '14 at 09:36
There is a lot of topics about this error: http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w – Superdrac May 12 '14 at 09:37

score 0 · Accepted Answer · edited May 23 '17 at 12:13

The only way is to read this via AJAX, as said by Superdrac. Use the jQuery function $.get() to achieve what you want.

$.get("path/to/stylesheet.css");

But, if you are getting the file from elsewhere, where there's no Access-Control-Allow-Origin header set, you need to build a little proxy to access the file. So, you can do something in PHP like:

<?php
    die(file_get_contents($_GET["url"]));
?>

And you save this as proxy.php and you have to change your $.get() function this way:

$.get("proxy.php?url=http://another.domain/path/to/stylesheet.css");

And the function gives you the contents of the external stylesheet file. If you want to load that inside a tag, for eg., a <div id="ext-css"> tag, you can do this way:

$("#ext-css").load("proxy.php?url=http://another.domain/path/to/stylesheet.css");

Hope this helps you a bit to get started. But still I am confused, why do you want to do such a thing. Are you flicking the stylesheet from somewhere you should not do? ;)

Read the content of CSS file

2 Answers2