css - 将导入语句转换为内联样式标签中的链接标签

Question

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

1. 一个声明和其他样式声明可以在标签@import内共存吗？<style>例如：

   <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>
   

2. @import如果标签的开头有多个语句<style>并且这不是范围样式标签，我们可以将@import语句转换为语句并将它们移动到标签<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>
   

   会变成：

   <link type="text/css" media="screen" rel="stylesheet"
                           href="http://www.example.com/style1.css" />
   <link type="text/css" media="screen" rel="stylesheet"
                           href="http://www.example.com/style2.css" />
   <style type="text/css" media="screen">
       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<style>