`
ashchan
  • 浏览: 11987 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

stylesheet_link_tag :all, :cache => true的问题

阅读更多
Rails 2.0引入了css和javascript的合并缓存机制。比方说,使用下面的代码,可以将stylesheets下的所有css文件合并为名为all.css的样式文件,并缓存下来:

<%= stylesheet_link_tag :all, :cache => true %>
合并的好处是,只需一次HTTP请求,就把站点需要的css都下载至客户端了。

但由于css的就近覆盖原则,这种默认的合并会带来问题。假设stylesheets目录下有两个css文件,一个为style.css,另一个为rating.css,合并后rating.css的样式在前,style.css的样式在后(按文件名排列),这样就有可能会发生rating.css中的样式覆盖掉style.css中的样式的情况,而这可能不是设计师设想的效果。

解决这个问题的方法很简单:按设计需要显示指定要合并的css的文件名称,如:

<%= stylesheet_link_tag ’style’, ‘rating’, :cache => ‘recipe’ %>
合并后的文件名由:cache的参数值决定。上例中合并后的css文件名为recipe.css。

这样做还带来一个额外的好处:stylesheets下实际不使用的css文件不会被合并,减少浪费。

来源:http://blog.ashchan.com/archive/2007/12/15/problem-of-stylesheet_link_tag-all-cache-true/
分享到:
评论

相关推荐

    eclipse-testng 离线包下载

    &lt;xsl:when test="testng:isFilterSelected('FAIL') = 'true'"&gt; .testMethodStatusFAIL { background-color: #FFBBBB; } &lt;/xsl:when&gt; &lt;xsl:otherwise&gt; .testMethodStatusFAIL { background-color: #FFBBBB;...

    number_to_indian_currency:number_to_indian_currency帮助程序将给定的数字转换为印度货币格式(还显示卢比符号)

    安装gem install number_to_indian_currency使用捆绑器gem 'number_to_indian_currency'将以下行添加到布局stylesheet_link_tag 'rupees'用法示例number_to_indian_currency(2000) =&gt; "Rs.2,000"number_to_indian_...

    人事信息管理系统

    &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt; --&gt; &lt;style type="text/css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body &gt; &lt;div style="position:absolute; width:100%; height:100%; z-index:-1;background...

    css_stylesheet_preview_generator:CSS样式表预览生成器

    python3 css_stylesheet_preview_generator.py stylesheet.css -o preview.html # # verbose mode python3 css_stylesheet_preview_generator.py stylesheet.css -v -o preview.html 如果未指定输出文件,则将HTML...

    better_assets:Better_assets 是一个 Rails 2.3.2 插件,它增强了一些资产标签助手,使您的项目变得更加强大

    =javascript_include_tag("jquery-1.3.2", "foo", :cache =&gt; "all") {|text| Packr.pack(text, :base62 =&gt; true) } %&gt; 哇! 这块疯狂是什么? 为什么,这是允许您做任何您想做的事的扩展。 在这个例子中,我们使用来...

    PHP应用Flexigrid实例

    &lt;link href="css/flexigrid.css" rel="stylesheet" type="text/css"&gt; &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/flexigrid.js"&gt;&lt;/script&gt; &lt;table id="flex1" width="700px" height="300px" ...

    网络解析Httpery

    .then(response =&gt; response.json()) .then(responseJson =&gt; { this.setState({ arr: responseJson.RESULT.newsList }); }) .catch(error =&gt; { console.warn(error); }); } render() { return ( &lt;View&gt; ...

    mab:标记为Ruby; 快速,简洁,功能丰富

    html do head do link :rel =&gt; 'stylesheet' , :href =&gt; 'style.css' script :src =&gt; 'jquery.js' end body :id =&gt; :frontpage do h1 'Hello World' , :class =&gt; :main endend句法1.标签和属性有四种基本形式: ...

    Asp.NET新闻发布系统

    &lt;link rel="Stylesheet" href="master.css" type="text/css" /&gt; &lt;head runat="server"&gt; &lt;title&gt;无标题页&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;div&gt; &lt;div class="admindiv"&gt;管理员登录...

    个人简历xml+xsl.zip

    针对于xml个人简历,附有xsl文档代码:&lt;?xml version="1.0" encoding="gb2312"?&gt; &lt;xsl:stylesheet version="1.0" xmlns:xsl=...&lt;title&gt;&lt;xsl:value-of select="简历/个人简历/基本信息/姓名"/&gt;XX的个人简历&lt;/title&gt;

    一款漂亮的返回顶部代码

    摘要: 此代码效果:超出首屏范围,即会出现TOP按钮,否则自动隐藏。 下载附件,放到网站的根目录,...3 &lt;LINK rel=stylesheet type=text/css href="css/lrtk.css"&gt; 4 &lt;SCRIPT type=text/javascript&gt;goTopEx();&lt;/SCRIPT&gt;

    react-native-portal::hollow_red_circle:React Native和Web:hollow_red_circle:的简化门户实现

    React本机门户 简化的门户实现 :hollow_red_circle: React本机 :hollow_red_circle: 。特征多门户处理。 多门户网站主机处理。...const BasicScreen = ( ) =&gt; { return ( &lt; View xss=removed&gt; &lt; View

    EasyGrid:EasyGrid-VanillaJS响应式网格

    :black_small_square: :black_small_square: :black_small_square: :black_small_square: :black_medium_square: 特征: ... link rel = "stylesheet" href = "path/to/easygrid.css" &gt; 4-设置H

    php+flexigrid 已全部配置好,可支持多表多数据

    &lt;link rel="stylesheet" type="text/css" href="css/flexigrid.css" /&gt; &lt;script type="text/javascript" src="jquery-1.2.3.pack.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="flexigrid.js"&gt;&lt;/script&gt; ...

    rpn_calc:用 Haskell 编写的简单 RPN 计算器

    readMay )import Calc ( calculate )stylesheet :: MonadWidget t m =&gt; String -&gt; m ()stylesheet s = elAttr " link " ( Map. fromList [( " rel " , " stylesheet " ), ( " href " , s)]) $ return ()scri

    xslt + xml 动态菜单

    &lt;a href="{link}"&gt; &lt;xsl:value-of select="name"/&gt; &lt;/a&gt; &lt;xsl:if test="subitem"&gt; &lt;ul class="submenu"&gt; &lt;xsl:apply-templates select="subitem"/&gt; &lt;/ul&gt; &lt;/xsl:if&gt; &lt;/li&gt; &lt;/xsl:template&gt; &lt;xsl:...

    html+css+div 笔记

    文档头部信息`&lt;head&gt;`中的`&lt;title&gt;`标签用于设置窗口标题,`&lt;link&gt;`标签则用于链接外部CSS文件,例如`&lt;link rel=”stylesheet” href=”mystyle01.css” type=”text/css”&gt;`。`&lt;style&gt;`标签则用于定义内部样式表,`...

    bug反馈系统-php源码

    &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript" charset="utf-8" src="includes/editer/kindeditor.js"&gt;&lt;/script&gt; &lt;script language="javascript"&gt; KE.show({...

    react_native_style_component_:样式组件

    this.setState(prevState =&gt; ({ isSelected: !prevState.isSelected })); }; render() { const { isSelected } = this.state; return ( onPress={this.toggleSelection} style={[ styles.button, is...

    网页全屏广告代码

    &lt;link rel="stylesheet" href="css/index.css" type="text/css" media="screen" /&gt; &lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/index.js"&gt;...

Global site tag (gtag.js) - Google Analytics