0

我正在研究一个将多个 CSS 合二为一的脚本。这是脚本。

    $full_string = "";

    foreach($allfiles as $curfile => $file) {           
        $file = $PATH[$curfile] . $file;
        $file_open = fopen($file , 'r');
        $concat = "\n" . fread($file_open , filesize($file)) . "\n";
        $full_string .= $concat;
        fclose($file_open);
    }

    return $full_string;

在这里，我将所有 CSS 文件合并为一个。但现在的问题是我必须将当前的 CSS($file) 与另一个 css 进行比较（让我们将其视为overrider.css）。如果 $file 具有类似的样式，

h1 {
    color: white; 
    background: teal; 
    FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif; 
    FONT-SIZE: 18pt; 
    FONT-STYLE: normal; 
    FONT-VARIANT: normal;
}

body 
{
    font-family: arial;
    FONT-SIZE: 14px; 
}

如果 overrider.css 具有类似的样式，

body 
{
    font-family: Calibri;
    color: #3E83F1; 
}

那么最终生成的 CSS(output.css) 应该是，

h1 {
    color: white; 
    background: teal; 
    FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif; 
    FONT-SIZE: 18pt; 
    FONT-STYLE: normal; 
    FONT-VARIANT: normal;
}

body 
{
    font-family: Calibri;
    FONT-SIZE: 14px;
    color: #3E83F1;
}

在这里，由于 body 中的 style override.css，font-family它替换了原始 CSS 中的 font-family 属性，并且由于颜色是原始 CSS 文件 ($file) 中不存在的新属性，因此它应该将该属性添加到 original CSS 文件。那么如何在 PHP 中实现这一点，因为我对解析 CSS 没有任何想法。对此的任何想法将不胜感激。

请注意，我需要通过将输入作为 file1($file) 和 file2(override.css) 来生成一个新的 CSS 文件，并且我们需要生成 output.css 并覆盖样式。

提前致谢。

4

3 回答 3

1

有一些可用的 CSS 解析器（谷歌“php css 解析器”），比如我没有尝试过的这个，但看起来很有趣。但就我个人而言，我会自己进行解析 - 遵循那种伪 PHP 算法

  • 将所有文件读入一个字符串Str，将所有“\n”、“\r”和“\t”替换为空格（以使解析（有点）更容易）

然后，处理函数（选择器 => 规则）

func deal with selectors and rules:

rules = array()
do {
  S = string from current pos to next `{` excluded (selectors)
  R = string from '{' to next '}' (rules)
  r = explode(';', R) 
  lr = make array of rules from r trimmed elements
  s = explode (',', S)
  ls = make array of [selector => lr]

  // same sel: latest rule overwrite existing, added if not exist
  merge ls into rules 
} while (not '}' and not '@' and not EOF); // the '}' would be the closing media

return rules

处理媒体的main函数，然后调用上面的函数

medias = array();

func deal with Str
do {
  if (first non blank char is @) {
     media = array of listed medias
     eat fist '{'
  }
  else {
     media = array ('GLOBAL')
  }
  selectorsrules = deal with selectors and rules(rest of Str)

  foreach (media as m) {
    merge in medias(m) selectorsrules, same procedure as above
  }
} while (not EOF);

有趣的项目，但我没有时间完全实施它。结果在medias数组中。

于 2013-02-28T06:49:43.670 回答
0

如果您想font-family: arial;申请，请将其添加为font-family: arial !important;

您无需担心合并它们，因为浏览器会自动将颜色从第一个 css 中找到的第二个 css 颜色添加到 body 标签，然后它会用第二个 css 覆盖它。

于 2013-02-28T06:05:03.637 回答
0

您有 2 个选择：

  1. 简单的方法是更改​​您的 css 文件并添加 !important 在那里很重要的地方。例如，在 css 中有超过 1 次的“body”是正确的。每当您要覆盖的样式时，请离开它。当然，这种方法大多是手动的。您必须知道它将被覆盖的位置以及不会覆盖的位置。

  2. 第二种方法需要字符串解析、正则表达式，我的意思是你应该知道如何解析它们。您应该获取每个文件的内容，将它们保存为字符串，并且您应该使用正则表达式将它们与两者中是否存在标签进行比较，然后合并标签内容。这种方式说起来容易做起来难。

于 2013-02-28T06:13:55.563 回答