为什么我们不使用动态(服务器端生成的)CSS?


15

由于服务器端生成的HTML是微不足道的(并且是在AJAX之前制作动态网页的唯一方法),因此服务器端生成的CSS并非如此。实际上,我从未见过。有CSS编译器,但是它们会生成可用作静态文件的CSS文件。

从技术上讲,它不需要特殊的库,HTML 样式标记应引用PHP(/ ASP / whatever)模板脚本而不是静态CSS文件,并且脚本应发出CSS 内容类型标头-仅此而已。

它有缓存问题吗?我不这么认为。该脚本应发出no-cache等标头。对设计师来说有问题吗?不,他们应该编辑CSS模板(就像他们编辑HTML模板一样)。

为什么我们不使用动态CSS生成器?或者,如果有的话,请告诉我。


3
少,萨斯,SCSS等
赖因Henrichs

Answers:


13

css很少动态生成的主要原因(JavaScript也是如此)是因为它们是缓存的良好候选者。CSS是一种非常灵活的页面样式设置方法,通过正确的类组合,您可以根据各种提示对所有不同页面的所有不同部分进行样式设置,而无需在CSS中进行任何设置本身就实际发生在此综合浏览量中。

仅仅因为CSS 不需要在每个页面上都不同就导致了一种非常普遍的做法,即可以优化下载成本。大多数站点将整个站点的所有CSS都塞入一个下载文件中,因此,适用于不同页面浏览量的部分仅存在于一个下载文件中。使用缓存,您的客户不必等待第二次下载。也许更重要的是,作为内容提供者,您不必支付多次上传内容的费用;您甚至可以将静态CSS放置在更适合提供静态内容的服务器上,这样可以释放资源以用于应用程序服务器上的实际动态内容。

这种做法非常普遍,以至于许多浏览器只是假设 CSS是静态的。并且非常不愿意下载他们已经拥有的CSS;即使用户重新加载页面。这种特殊待遇仅适用于CSS;其他内容类型将按预期重新加载。


7

我相信您的假设是错误的:在我的上一个项目中,该应用程序使用了由ajax加载的服务器生成的CSS(因为根据所查看地图的位置,该页面的样式完全不同)。

但是,用ajax检索额外的CSS可以解决问题的用例很少见,这也许就是您从未遇到过的原因:维护一组在部署时进行了预处理(最小化+最小化)并且可缓存的样式表通常更容易(例如,下一页将能够重用之前缓存的样式表,因此初始时间较短。


您的观点是有用的,但我认为情况视情况而定,因此good_computer描述简短且全局有用。
QMaster 2014年

7

实际上,动态CSS有一些用例。我使用三种不同的方法:

  1. 更少 -更少CSS本质上是一种CSS语言扩展,它添加了“动态行为,例如变量,mixin,操作和函数”。它还允许“嵌套规则”,这非常方便。我使用Less主要是通过消除一些重复来使CSS的编写变得不太冗长。

  2. URL重写 —作为证明您没有缓存问题的证明,我很长时间以来一直使用PHP将脚本作为CSS文件提供,带有正确的缓存头。我主要是为了从不在Web根目录内的库提供CSS文件。

  3. 动态报告 —在我从事的一个项目中,我们有一个针对系统中各种数据的报告生成器。我们输出(在style标签内,如您所提到的)动态样式规则,主要用于用户在报告构建器中选择的颜色。

注意:如果将CSS直接输出到URL(如12),而不是将其嵌入脚本已生成的页面中,则通过提供静态内容会给服务器增加相当大的负担。所以,如果你有相当大的流量,即使你做到这一点动态的每一次,你希望缓存它作为一个静态文件,如果你使用的情况下允许。


但是为什么它不更普遍?我认为有一个主要原因-CSS并不是真正为输出内容而构建的。因此,根本没有很大的需求。除了输出用户选择的动态颜色(如我们所做的那样)或可能输出背景图像(尽管如果图像是内容,那么使用img标记可能是一个很好的论据),您还需要动态执行其他操作吗?

大多数动态样式更改可以通过引用不同的静态 CSS文档来产生。

因此,正如您所想,当然有可能,但是没有太多理由这样做。


4

动态加载CSS有两个方面...

  1. 在服务器上动态生成CSS文件

    这非常简单,很多网站都这样做。如果您根据某些条件更改CSS,这将很有用。例如,如果您根据用户的地理位置选择站点的主题。

  2. 通过JS脚本加载器按需加载CSS文件

    如果您动态创建DOM的很大一部分然后加载所需的样式,则这可能会派上用场。但 正如LABjs的作者所说...

    真正确定动态加载的CSS文件是否已完成加载实际上是非常复杂且具有跨浏览器难度的。“负载”事件不会像希望/期望的那样触发。因此添加这种支持会给LABjs增加不小的大小


3
  1. 我们做到这一点。每时每刻。特别是对于诸如SaaS应用程序中客户特定的品牌之类的事情,其中​​颜色等来自数据库。
  2. (从用户的角度来看)在部署之前或期间或在应用程序引导期间(如果应用程序具有引导阶段)预先生成CSS会更快。通常,我们通常希望尽可能地预先生成静态CSS文件。
  3. 为了达到最大速度(从用户的角度来看),最好将静态CSS文件传送到CDN,并使浏览器从CDN而不是从应用程序服务器获取它们。通常只有在可以在部署之前或部署过程中预生成CSS文件,并且部分部署将预生成的静态CSS文件交付给CDN时,才可能这样做。CDN现在非常便宜且易于使用-请查看Amazon的CloudFront和Rackspace的Cloud Files。

1

它有缓存问题吗?我不这么认为。该脚本应发送无缓存等

很好,但这是一条重要的静态信息,您要求用户每次加载页面时都下载这些信息。因此,您最好有充分的理由。

现在那可能是什么原因?

如果要基于各种参数更改样式,则可以通过使用多个样式表并生成HTML来下载正确的样式表来实现。


例如,如果您拥有三种颜色的组合,并且每种颜色都是从256种调色板中选择的,则基于参数生成不同的样式表可能变得难以管理。您不想保留1600万个样式表来覆盖所有这些,是吗?
tdammers

@tdammers:用例是什么?听起来,使用javascript会更好。
pdr

用户可以自定义外观的某种系统?您不能只给他们一个CSS编辑器,因为那样会暴露出许多安全漏洞,但是能够选择字体和几种颜色来个性化用户体验并不是完全不合常规的要求,如果您这样做, ,实际上256种颜色通常不是很低-请尝试在整个24位范围内使用颜色选择器。Javascript不能像动态CSS那样很好地解决这个问题。
tdammers 2011年

1

动态CSS相当琐碎,即使其应用程序受到限制(查看带有静态样式表的动态生成的HTML如何解决大多数日常需求,而CSS本身也包含一些实现半动态的机制),我已经看过它在很多场合使用过,并且在需要时我自己使用它们。

通常,“动态”部分除了将多个样式表组合成一个样式表(以减少HTTP请求的数量)并最小化它们(以减少带宽使用量)外,只是做一些简单的事情,例如变量替换(例如,将变量用于整个颜色)。样式表)可以使您的生活更加轻松。但是,由于CSS具有相当简单的语法,没有什么警告,因此通常使用通用文本处理系统或类似PHP的脚本语言就足够了,这就是为什么看不到许多现成的CSS处理系统的原因。

也许您在野外看到了它们,却没有意识到它们。发送动态脚本的服务器通常使用URL重写,以使URL与静态提供的内容无法区分。这是必要的,因为某些浏览器(最著名的是IE)在某些情况下依赖扩展来正确检测MIME类型,而忽略(或丢弃)您可能已发送的任何Content-Type标头。

关于缓存:样式表与GET请求一起使用,使其可缓存对于体面的用户体验绝对重要。您不希望看到页面重排,因为它会根据每个请求重新下载样式表。相反,您应该将所有更改样式表处理输出的参数都放入查询字符串中。不同的查询字符串会产生不同的URL,从而导致缓存未命中,因此,只要更改了参数,即使客户端缓存了所有内容,样式表也会重新下载。如果您确实需要针对每个请求可能有所不同并且取决于副作用的CSS,请考虑将非动态部分放入静态服务的样式表中,并仅动态地提供那些绝对必须动态的内容。


1

在某些情况下,我很想使用动态CSS,但更多的是,我坚持使用需要一些帮助来了解CSS基础知识的设计师。在混合中添加动态语言实际上可能会使人头大开。

另一种看待这种情况的方式是“其他人正在继续所有痛苦的体力劳动,不是我的问题,而是继续……”

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.