Returns a stylesheet link tag for the sources specified as arguments. If
you don’t specify an extension, .css
will be appended
automatically. You can modify the link attributes by passing a hash as the
last argument. For historical reasons, the ‘media’ attribute will always be
present and defaults to “screen”, so you must explicitely set it to “all”
for the stylesheet(s) to apply to all media types.
Examples
stylesheet_link_tag "style" # => <link href="/stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" /> stylesheet_link_tag "style.css" # => <link href="/stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" /> stylesheet_link_tag "http://www.example.com/style.css" # => <link href="http://www.example.com/style.css" media="screen" rel="stylesheet" type="text/css" /> stylesheet_link_tag "style", :media => "all" # => <link href="/stylesheets/style.css" media="all" rel="stylesheet" type="text/css" /> stylesheet_link_tag "style", :media => "print" # => <link href="/stylesheets/style.css" media="print" rel="stylesheet" type="text/css" /> stylesheet_link_tag "random.styles", "/css/stylish" # => <link href="/stylesheets/random.styles" media="screen" rel="stylesheet" type="text/css" /> <link href="/css/stylish.css" media="screen" rel="stylesheet" type="text/css" />
You can also include all styles in the stylesheets directory using
:all
as the source:
stylesheet_link_tag :all # => <link href="/stylesheets/style1.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/styleB.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/styleX2.css" media="screen" rel="stylesheet" type="text/css" />
If you want Rails to search in all the
subdirectories under stylesheets, you should explicitly set
:recursive
:
stylesheet_link_tag :all, :recursive => true
Caching multiple stylesheets into one
You can also cache multiple stylesheets into one file, which requires less HTTP connections and can better be compressed by gzip (leading to faster transfers). Caching will only happen if config.perform_caching is set to true (which is the case by default for the Rails production environment, but not for the development environment). Examples:
Examples
stylesheet_link_tag :all, :cache => true # when config.perform_caching is false => <link href="/stylesheets/style1.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/styleB.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/styleX2.css" media="screen" rel="stylesheet" type="text/css" /> stylesheet_link_tag :all, :cache => true # when config.perform_caching is true => <link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" /> stylesheet_link_tag "shop", "cart", "checkout", :cache => "payment" # when config.perform_caching is false => <link href="/stylesheets/shop.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/cart.css" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/checkout.css" media="screen" rel="stylesheet" type="text/css" /> stylesheet_link_tag "shop", "cart", "checkout", :cache => "payment" # when config.perform_caching is true => <link href="/stylesheets/payment.css" media="screen" rel="stylesheet" type="text/css" />
The :recursive
option is also available for caching:
stylesheet_link_tag :all, :cache => true, :recursive => true
To force concatenation (even in development mode) set :concat
to true. This is useful if you have too many stylesheets for IE to load.
stylesheet_link_tag :all, :concat => true
Computes the path to a stylesheet asset in the public stylesheets
directory. If the source
filename has no extension,
.css
will be appended (except for explicit URIs). Full paths
from the document root will be passed through. Used internally by
stylesheet_link_tag
to build the stylesheet path.
Examples
stylesheet_path "style" # => /stylesheets/style.css stylesheet_path "dir/style.css" # => /stylesheets/dir/style.css stylesheet_path "/dir/style.css" # => /dir/style.css stylesheet_path "http://www.example.com/css/style" # => http://www.example.com/css/style stylesheet_path "http://www.example.com/css/style.css" # => http://www.example.com/css/style.css