动态 CSS 和 Javascript答案

【问题标题】：Dynamic CSS and Javascript动态 CSS 和 Javascript
【发布时间】：2009-09-13 20:15:58
【问题描述】：

如何创建动态 CSS 和 JavaScript On-The-Fly（使用 PHP）。这需要完成，因为不同的页面有时具有不同的元素集，因此每次包装和发送大型 CSS/JS 将是矫枉过正的。还有为什么很多网站都有这样的链接标签：

<link rel='stylesheet' type='text/css' href='css/style.css?pg_id=43&post=62'>

CSS 是如何知道 GET 参数的？

由于这可能涉及 URL 重写或使用标头功能，请提供简短示例

【问题讨论】：

我相信这不是真正的 css 文件，它可以是一个带有基于 GET 参数返回 css 的脚本的页面。扩展实际上在 Web 开发中没有任何意义。
所以这将涉及重写 CSS 文件的 URL？
不一定，它取决于 style.css 脚本，它可能会检查会话变量、cookie 等。但是是的，您必须重新加载当前页面才能更新样式表。跨度>
一个 CSS 文件怎么能做到这一切？
OrangeRind：同样，它不是真正的 css 文件。它是你的 php 脚本，它带有一些逻辑，可以检查数据库、文件、变量并根据它获得的信息打印出 css 数据。

标签： php javascript css dynamic-data

【解决方案1】：

因此，您可以在此处采用几种不同的方法。首先，如果您可以访问 apache 的虚拟主机文件，您可以将 CSS 设置为由 php 解释器读取。我从来没有这样做过，也不会完全推荐它，但一个例子是：

<VirtualHost *:80>
  AddType application/x-httpd-php .css
</VirtualHost>

这也可以在您的 .htaccess 文件中完成。

或者，您可以制作一个类似的链接

<link rel='stylesheet' type='text/css' href='css/style.php?pg_id=43&post=62'>

然后放

<?php header("Content-type: text/css"); ?>

作为第一行。

我从未考虑过维尼修斯的技术，但我不怀疑它也有自己的优点和缺点。

PS - 有时 GET 变量用于缓存目的（或者实际上是通过将当前的 unix 时间戳附加到带有 php 之类的 css 链接来防止缓存

<link href="style.css?<?php echo time()" type="text/css" rel="stylesheet" />

【讨论】：

header函数在style.php中？

【解决方案2】：

对 .css 或 .js 文件的请求可以使用例如 .htaccess（在 Apache 中）重定向到 PHP 脚本，因此即使 src 属性是“style.css”，它实际上也是一个 PHP响应用户的脚本。

【讨论】：

显然这就是我在问题的第一部分要问的内容。这是一个维基百科 CSS 的链接，我该怎么做，我如何使用 PHP 来放置 CSS，我只是 Echo 吗？ en.wikipedia.org/w/…;
您还需要指定内容类型标题。

【解决方案3】：

您的 CSS 和 Javascript 文件已缓存，我不建议提供不同的样式表/js 文件，除非它们的大小 >200KB 左右。

是的，您可以使用参数（.php 或任何扩展名）引用任何服务器端页面，只要它为该文件返回正确的 Content-Type。

旁注：通常如果您有参数并且以这种方式动态地提供文件，我相信它们不会被自动缓存，除非您设置它这样做。

简单示例：

<link rel="stylesheet" type="text/css" href="/css.php?color=wide-red">

<?php
header('Content-Type', 'text/css; charset=utf-8');
$colorScheme = (string)$_GET['color'];

switch ( $colorScheme ) {
    case 'wide-red':
       $bgColor = 'c0c0c0';
       $fgColor = 'ffffff';
       $width = '1280px';
    break;

    case 'normal-gray':
       $bgColor = '333333';
       $fgColor = 'ffffff';
       $width = '960px';
    }
    break;

}
?>
body { 
   background:<?php echo $bgColor;?>;
   color:<?php echo $fgColor;?>;
   width:<?php echo $width;?>;
}

你可以使用 echo，你可以使用模板系统，你可以使用 file_get_contents 来拉入其他 css 文件，关键是你需要发送正确的 Content-Type，获取正确的参数，如果没有参数，有一个默认的回退给了。

【讨论】：