我正在使用LifeRay。
在标题部分中有一些css文件通过LifeRay标头模板(所有portlet通用),
和portlet中的另一个css文件(特定于一个portlet)。
portlet代码位于portlet内部 - view.JSP。
生成的HTML输出如下:
<html..>
<head>
...
...
<link href="base.css" ../>
<link id="custom" href="custom.css" />
...
...
</head>
<body>
...
...
<div class='portlet...'>
...
...
<link href="port.css" ../>
..
...
</div>
..
..
</body>
</html>
这里,问题是我想要最后加载“custom.css”,但是由于liferay结构,port.css在liferay-header模板之后的最后一个加载。
一个解决方案是,我可以简单地将custom.css包含在liferay模板的底部(或者说,页脚模板)附近,以便它最后加载(在portlet的port.css之后),但它反对W3C建议 - 将所有CSS放在头部。
现在,我在我的portlet .jsp中编写了一个小脚本,它将使用jquery在custom.css之前动态加载port.css。
portlet - view.jsp -
$("<link href='port.css' ../>").insertBefore( $("#custom") );
.. ..
现在,使用这种方法,在FireBug中,我可以看到port.css“在”custom.css之前列出 - 正如预期的那样。 我甚至观察到这些样式都应用了来自css的正确序列/优先级。
我的疑问是:
- 这种做法有多好/正确?
- 对此有任何限制/约束吗?
- 任何浏览器问题??
对此有何想法?