Question

我正在尝试编写一个将@import语句转换为的脚本 <link>代码，我有两个问题：

@import语句和其他样式语句可以共存吗？一个<style>标签？ e.g：

<style type="text/css">
    @import url(http://www.example.com/style.css);
    body {
        background: #FFF;
    }
    ..NUI_ContentFrameHeader_l {
        clear: both;
        height: 50px;
        margin: 0;
        color: black;
        background: url(/vpn/images/NUI_box_l.png) no-repeat left top;
        border: solid 0px #BBC6D6;
        overflow: hidden;
        letter-spacing: 0;
        padding: 0 0 0 15px;
    }
</style>

如果@import标记的开头有多个<style>语句且这不是作用域样式标记，我们是否可以将@import语句转换为{{ 1}}语句并将它们移到<link>标记之上？像：

<style>

将成为：

<style type="text/css">
    @import url(http://www.example.com/style1.css);
    @import url(http://www.example.com/style2.css)
    body {
        background: #FFF;
    }
    ..NUI_ContentFrameHeader_l {
        clear: both;
        height: 50px;
        margin: 0;
        color: black;
        background: url(/images/NUI_box_l.png) no-repeat left top;
        border: solid 0px #BBC6D6;
        overflow: hidden;
        letter-spacing: 0;
        padding: 0 0 0 15px;
    }
</style>

Answer 1

@import语句和其他样式语句可以在标记内共存吗？

是

如果在标记的开头有多个@import语句并且这不是作用域样式标记，我们可以将@import语句转换为语句并将它们移动到标记上方吗？

是

由于@import阻止了文件加载，将@import语句转换为自己的样式表被视为best practices - 如果它们作为单独的工作表加载到自己的<style>中标签，它们可以由浏览器并行加载。

将import语句转换为内联样式标记中的链接标记

1 个答案: