检测哪个webkit / moz /等。要显示的前缀

时间:2012-07-23 07:12:55

标签: php css css3 user-agent vendor-prefix

我一直在为PHP做一个CSS minifier,除了一件事:

我想让它检测用户的浏览器,并确定用户是否需要border-radius,-webkit-border-radius,-moz-border-radius等。所以我不必使用很长时间和烦人的团体。

这将检测-webkit,-moz等所有实例的border-radius并合并它们或者我将{vendor} border-radius放入CSS文件中,然后将其替换为-webkit-, - moz-或什么也没有。第一个是理想的,因为我希望它可以扩展到其他项目。

对于我的生活,我无法找出一个正常工作的PHP实现,它可以准确地检测出要使用的前缀(并且我已经用Google搜索/搜索了我能想到的任何地方)。

非常感谢任何帮助!

3 个答案:

答案 0 :(得分:5)

这里的主要问题是PHP(服务器)不会知道您的浏览器的CSS功能(客户端)。远程接近识别将被发送到PHP的浏览器的唯一信息是用户代理字符串。即使这样,您仍然需要根据您通过解析用户代理字符串找到的内容来研究特定版本的特定浏览器或引擎的CSS功能,并根据该信息对某些决策代码进行硬编码。

我认为这是尝试使用服务器端代码来确定客户端的CSS功能的主要责任。可能还有其他人,但不幸的是,这似乎是最大的障碍。

在客户端,存在像-prefix-free这样的脚本,这使得添加前缀成为一项微不足道的工作;只使用未加前缀的属性和规则来提供缩小的CSS,并让脚本根据它对浏览器的了解(服务器没有)为你添加前缀。

此条目中FAQ的第一段似乎也值得一读:

  

“这样的东西属于服务器端”

     

服务器端脚本需要添加所有前缀,使CSS文件的大小相当大。 此外,它应该维护一个需要前缀的功能列表,或者将它们全部添加并不必要地使样式表膨胀。 -prefix-free会自动检测需要前缀和不需要的内容。

以及链接到的interview with its author

  

“这是在服务器上做得更好的事情。做一次而不是每次页面加载”

     

什么-prefix-free完全没有,在服务器中是不可能的。 -prefix-free检测哪些功能需要前缀,只在需要时添加。此外,它会自动检测哪些属性可用,需要前缀。它不必保留为哪些功能添加哪些前缀的列表,所有内容都可以检测到功能,因此非常适合未来。 使用预处理器,需要维护有关此类内容的列表。这些清单注定是不完整的,很快就会过时。我尝试过的每个服务器端前缀都会在很多情况下失败。

(强调我的。)

答案 1 :(得分:1)

嗅探浏览器的用户代理,然后设置php条件语句。我已经快速粘贴了我用于webapp的脚本,因为我有点忙,所以不能为你重写它,但你可以谷歌不同浏览器的用户代理并根据需要修改它。

<?php
    $iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
    $iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
    $Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
    $Blackberry = stripos($_SERVER['HTTP_USER_AGENT'],"Blackberry");
    $Playbook = stripos($_SERVER['HTTP_USER_AGENT'],"Playbook");
    $Mango = stripos($_SERVER['HTTP_USER_AGENT'],"Mango");
    $webOS = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");
?>

或者,在css中只设置一个使用全部三个的类,并将该类设置为您需要的任何元素。无论如何,这是最简单,最实用的解决方案。再次,根据需要进行修改。

.border-radius{
    -moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}

答案 2 :(得分:0)

这不是您问题的答案,但您可以使用PrefixFree而不是重新发明轮子。

在这里查看详细信息:

http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/

关于你的问题:

您可以使用php get_browser()来确定用户浏览器并按需要执行。

根据我的经验,避免使用前缀不会减少css的大小。你可以改为GZIP文件,它会影响css文件,减少所有前缀或一个前缀之间的差异。