如何解决IE浏览器CSS选择器4096限制？dlundgren/css-splitter助你轻松拆分样式表

<code class="bash">composer require dlundgren/css-splitter</code>

<pre class="brush:php;toolbar:false;"><?php

require 'vendor/autoload.php'; // 引入Composer自动加载

use CssSplitter\Splitter;

// 假设你的CSS文件名为 styles.css
$cssFilePath = 'styles.css';

// 检查文件是否存在
if (!file_exists($cssFilePath)) {
    die("Error: styles.css not found!");
}

// 实例化CSS拆分器，默认最大选择器数量是4095
$splitter = new Splitter();

// 加载你的CSS文件内容
$css = file_get_contents($cssFilePath);

// 统计原始CSS中的选择器总数
$total_selector_count = $splitter-&gt;countSelectors($css);

echo "原始CSS文件选择器总数: " . $total_selector_count . "\n";

// IE限制是4096，所以我们从第4096个选择器开始计算需要拆分的部分
// 假设第一个文件（styles.css）已经包含了4095个选择器
$selectors_beyond_limit = $total_selector_count - 4095;

// 计算需要额外创建多少个CSS文件来承载超出的选择器
// 每个额外文件最多可以包含4095个选择器
$additional_part_count = ceil($selectors_beyond_limit / 4095);

echo "超出IE限制的选择器数量: " . $selectors_beyond_limit . "\n";
echo "需要额外创建的CSS文件数量: " . $additional_part_count . "\n";

// 如果需要额外拆分文件
if ($additional_part_count > 0) {
    // 循环创建额外的CSS文件
    // part从2开始，对应 styles_2.css, styles_3.css 等
    for ($part = 2; $part <= $additional_part_count + 1; $part++) {
        $outputFileName = 'styles_' . $part . '.css';
        // 使用split方法获取指定部分的CSS内容
        $partCssContent = $splitter->split($css, $part);
        file_put_contents($outputFileName, $partCssContent);
        echo "已生成文件: " . $outputFileName . "\n";
    }
} else {
    echo "CSS选择器未超出IE限制，无需拆分。\n";
}

echo "CSS拆分处理完成。\n";

// 在HTML中，你需要像这样引入这些CSS文件：
// <link rel="stylesheet" href="styles.css">
// <!--[if IE]>
// <link rel="stylesheet" href="styles_2.css">
// <link rel="stylesheet" href="styles_3.css">
// <![endif]-->
// 注意：条件注释仅在IE浏览器中生效
?>