Stylesheet_Link_Tag :All Versus :Media =>All

Stylesheet_link_tag :all versus :media = all

Using

<%= stylesheet_link_tag    "application", :media => "all" %>

will include the stylesheet named application.css, you can have files like application.css.sass or application.css.scss or any other extensions and rails will compile the css file with the right stylesheet engine and serve the application.css file.

The attribute "media=all" is actually a css attribute, which means that the css will be included for all the medias, like when browsing the website, when printing the screen, etc. You can find more information about the media attribute on this link.

By using

<%= stylesheet_link_tag    :all %>

you will include all the stylesheets that you have on your app/assets/stylesheets directory.

You can find more information on this link.

%= stylesheet_link_tag application , :media = all % ----- This piece of code is not allowing my ROR application to load locally

To temporarily get around the problem and remove the error your could create an empty file at

C:/Sites/cardMS/app/assets/stylesheets/ 

called

/bootstrap_and_overrides.css.less

However you should look further for the root cause which might be that you have not correctly followed the process that copies the bootstrap files as indicated by colinm

Difference Between HTML LINK Media and CSS Media Queries

Regarding the stylesheet download, here is what the current spec draft says:

User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.

This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.

For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting @media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.

How to use print styles in css with Rails 4?

If you do not specify the media type, rails will default to "screen" and hence, you're trying to use a print query on a screen type stylesheet, which doesn't work. To go avoid this problem, one thing you can do is specifying the media type when calling the stylesheet from your view. Eg :

= stylesheet_link_tag "application", media: "all"
= stylesheet_link_tag "application", media: "screen, projection"
= stylesheet_link_tag "application", media: "print"

I usually keep a simple call to the css application (including the manifest that requires the tree) and add a stylesheet link tag calling for a css I usually name 'print.scss' specifying the media type, but I also have to remember to add on the application manifest :

*= stub print

so this file is not called twice under two different media types.

What does appending ?v=1 to CSS and JavaScript URLs in link and script tags do?

These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:

/Resources/Combined.css?v=x.x.x.buildnumber

Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actually changes.

Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.

Is there no difference between No media and media= all in css link?

In HTML 4.01, the default value is screen.

In HTML5, the default value has been changed to all.

Therefore, it depends on the doctype declaration you use in your page. Never mind, user agents get confused about standards anyway; see Knu's comment. (I bet this is why they changed it to all in HTML5.)

Then again, this only really matters if you're supporting user agents that don't present pages on digital screens, or display any visual information for that matter.

---

Related Topics