how do I make stylesheet inline tag?

rubyonrails-talk
1

<%= stylesheet_link_tag "home" %>

this outputs

<link href="/stylesheets/home.css" media="screen" rel="Stylesheet" type="text/css" />

I was wondering how can I write a helper which will actually spit out the css in the page it self?

some thing like: <%= inline_stylesheet "home" %>

should output content of stylesheet?

<style type="text/css">

    body{         margin:10px;         padding:0;         text-align:center;         background-color:#E0E0E0;         font:17px Arial, Helvetica, sans-serif ;     }   </style>

Any idea on how I could write a helper?

thanks.

2

First off, why? inline css is bad because you can’t cache it at the browser level. The stylesheet_link_tag helper is there to make linking to the external css file easy. If you just plan to stick css into the page, you don’t need a helper for this - it’s over-engineering.

Unless there’s something I’m missing.

3

The browser, who caches the css, will also cache the html page, the page's dynamic but I am using rails caching mechanism.

I am assuming that one file(html+css) is better than two files (html and css) especially if its your home page. And using this I could inline small js files too. Making the home page load slightly faster :slight_smile:

Brian Hogan wrote:

4

I want to keep js/css files seperate from the html page, hence I need a mechanism to inline css/js files. I like to keep things separate, at least on the design level :slight_smile:

let me know if anyone knows how to achieve this. some pointers in righ direction will help too.

Jigar Gosar wrote:

5

When using the rails caching mechanism you cache *on the server* not on the browser (client). JS and CSS files are cached *on the client* as well as the server. As a result you'd be caching one huge file rather than a skinny file (html markup only) with very little benefit. Properly designed you can send down the css ONCE and use it for all the pages in your site... but the client only takes the hit one time. In your proposed setup, they'll pay the price with every page.

Should you still choose to do it, I'd assume you simply add a style tag and then use ERb to read a file from disk and join it's lines together with "\n" to put it's contents into the body of the style tag. Maybe something like:

content_tag :style, File.readlines(<filename>).join("\n"), :type=>'text/css'

6

I want to keep js/css files seperate from the html page, hence I need a

mechanism to inline css/js files. I like to keep things separate, at

least on the design level :slight_smile:

That’s why you use a separate css file and the link tag, using stylesheet_link_tag. If you’re saying you want a separate css file for each page, then you should use the stylesheet_link_tag anyway, and simply use a variable to determine which one to use.

In your layout, you can do

<%=stylesheet_link_tag @foo %>

And in your controller or before_filter or wherever, run logic to determine what css file to use

before_filter :get_css_file

def get_css_file @foo = #{params[:controller]}_#{params[:action]}"

will look for /stylesheets/projects_show.css for /projects/show

end

No need to get more complicated than that. The whole point of having the css in a separate file is to allow the browser to cache it even when the page changes. The only reason to use the tag is to embed styles that are specific to a single page. Even then I wouldn’t use it in your case. Keeping the amount of code in the html page small keeps the size small, meaning you save bandwidth.