css组合器有问题吗?

发布于 2024-10-19 11:52:34 字数 1468 浏览 1 评论 0原文

我正在使用自定义框架。

当我设计我的网站时,我将CSS规则分成几个文件,例如

  • typography.css
  • links.css
  • master.css
  • table.css
  • 等。

现在,明显的问题是它意味着多个http请求。

正如我提到的,我正在使用自定义框架。
在这个框架中包含一个 css 文件,您只需调用

echo load::css('name');  
echo load::css('another');

它就会吐出

<link rel="stylesheet" type="text/css" href="http://site.com/name.css">
<link rel="stylesheet" type="text/css" href="http://site.com/another.css">

现在我正在考虑做的是调用,

load::css('name');
echo load::css('another');

正如您所看到的,我只在最后一个上调用 echo, 这将输出

<link rel="stylesheet" type="text/css" href="http://site.com/combined/0df4899f90fe7be26f4893b1a4a30eb6.css">

0df4899f90fe7be26f4893b1a4a30eb6 == '命名另一个'

所以基本上,

当你调用 load:css('something') 时,它会将名称存储在一个数组中,它将返回值为 的链接标记md5(implode(' ', $cssArray)) 在 php 脚本处理结束时,它将实际创建具有 md5 名称的组合文件(如果它不存在)。

这意味着对于所有 css 内容,仅向服务器发出一次请求。

任何人都可以看到这种方法的任何潜在问题吗?
我还计划对 javascript 文件实现此功能。
如果我还要实现 css/js 压缩器,我会遇到任何问题吗?


Google Minify?
After doing some research I have come across google minify.

是否可以更改此设置,以便您可以给它一个 css 文件路径数组并让它吐出内容,以便我可以调用类似

$css = minify::css($cssArray) 然后用缩小的内容做我想要的事情吗?

我看到的有用的事情之一是它能够重写路径?

I am working with a custom framework.

When I design my sites I split the CSS rules into several files eg

  • typography.css
  • links.css
  • master.css
  • tables.css
  • etc

Now the obvious issue with this is that it means several http requests.

As I mentioned I am working with a custom framework.
In this framework to include a css file you simply call

echo load::css('name');  
echo load::css('another');

which will spit out

<link rel="stylesheet" type="text/css" href="http://site.com/name.css">
<link rel="stylesheet" type="text/css" href="http://site.com/another.css">

Now what I am thinking of doing is calling

load::css('name');
echo load::css('another');

as you can see i only call echo on the last one,
this will output

<link rel="stylesheet" type="text/css" href="http://site.com/combined/0df4899f90fe7be26f4893b1a4a30eb6.css">

0df4899f90fe7be26f4893b1a4a30eb6 == 'name another'

So basically,

when you call load:css('something') it will store the name in an array, it will return the link tag with the value of md5(implode(' ', $cssArray)) at the end of the php scripts processing it will then actually create the combined file with the md5'd name (if it does not exist).

This means that only one request is made to the server for all the css content.

Can anyone see any potential issues with this approach?
I am also planning on implementing this for javascript files.
Could I run into any problems if I was to also implement a css/js compressor?


Google Minify?
After doing some research I have come across google minify.

Would it be possible to alter this so that you can just give it an array of css file paths and have it spit the contents out so that I could call something like

$css = minify::css($cssArray)
Then do what I want with the minified contents?

One of the useful things I saw is the ability for it to rewrite paths?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

韬韬不绝 2024-10-26 11:52:34

嗯,这可能取决于您如何组合样式表。我不确定你的框架如何组合 CSS 文件(按名称、按文件夹或手动),但浏览器(我不知道 IE)按字面解释每一行,即使它是多余的:

#foo
{
  color: red;
  color: green;
  color: blue; /* This one will be the actual color of #foo */
}

所有这些都被执行,所以最后一个要解释的就是渲染的。如果您在不同的样式表中重新定义样式(我通常使用 globals.cssheader.cssbody.css),最后一个一个将会生效,这可能会让您的网站看起来很时髦。

我认为同样的概念也适用于 JavaScript,但我还没有遇到过函数重新定义。

Well, it might depend on how you are combining the stylesheets. I'm not sure how your framework combines the CSS files (by name, by folder, or manually), but browsers (I dunno about IE) interpret every single line literally, even if it is redundant:

#foo
{
  color: red;
  color: green;
  color: blue; /* This one will be the actual color of #foo */
}

All of these are executed, so the last one to be interpreted is the one rendered. If you re-define styles within different stylesheets (I usually use globals.css, header.css, and body.css), the last one will take effect, which might make your site look funky.

I think this same concept applies to JavaScript, but I haven't encountered function re-definitions yet.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文