使用序列和优先级动态加载CSS

时间:2014-12-03 13:18:26

标签: javascript jquery css jsp liferay

我正在使用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的正确序列/优先级。

我的疑问是:
- 这种做法有多好/正确?
- 对此有任何限制/约束吗? - 任何浏览器问题??

对此有何想法?

0 个答案:

没有答案