解析CSS背景快捷方式的类
这个类可以解析几乎任何顺序的背景快捷属性,包括那些根据规范无效的属性。例如,background: top top
被视为background-position: center top
。
所有颜色值都得到了充分支持,包括:rgb、rgba、hls、hlsa、大小写不敏感的短形式十六进制(例如 #fff)、大小写不敏感的长形式十六进制(例如 #123Abc)和大小写不敏感的颜色名称。
!important
现在也得到了支持。
inherit
似乎是最具挑战性的问题,但结果证明它是最简单的。对于这个属性,我参考了http://reference.sitepoint.com/css/inheritvalue,其中指出:
When you’re using shorthand notation such as background, you can’t mix
inherit with other values. For example, the following background
declaration is wrong:
p {
background: #fff inherit left top;
}
... inherit must be the only value in the declaration, because there’s
simply no way of identifying the subproperty to which the value
inherit refers—after all, it’s not unique within the sequence. In the
example above, inherit becomes ambiguous.
为了应对不确定性,这个类简单地忽略了所有其他东西(除了 !important),并将 inherit 应用于所有属性,就像你使用了
background: inherit
一样。
代码
<?php
class CSSBackground
{
private $color_names = array(
'AliceBlue', 'AntiqueWhite', 'Aqua', 'Aquamarine', 'Azure',
'Beige', 'Bisque', 'Black', 'BlanchedAlmond', 'Blue',
'BlueViolet', 'Brown', 'BurlyWood', 'CadetBlue', 'Chartreuse',
'Chocolate', 'Coral', 'CornflowerBlue', 'Cornsilk', 'Crimson',
'Cyan', 'DarkBlue', 'DarkCyan', 'DarkGoldenRod', 'DarkGray',
'DarkGrey', 'DarkGreen', 'DarkKhaki', 'DarkMagenta',
'DarkOliveGreen', 'Darkorange', 'DarkOrchid', 'DarkRed',
'DarkSalmon', 'DarkSeaGreen', 'DarkSlateBlue', 'DarkSlateGray',
'DarkSlateGrey', 'DarkTurquoise', 'DarkViolet', 'DeepPink',
'DeepSkyBlue', 'DimGray', 'DimGrey', 'DodgerBlue', 'FireBrick',
'FloralWhite', 'ForestGreen', 'Fuchsia', 'Gainsboro',
'GhostWhite', 'Gold', 'GoldenRod', 'Gray', 'Grey', 'Green',
'GreenYellow', 'HoneyDew', 'HotPink', 'IndianRed', 'Indigo',
'Ivory', 'Khaki', 'Lavender', 'LavenderBlush', 'LawnGreen',
'LemonChiffon', 'LightBlue', 'LightCoral', 'LightCyan',
'LightGoldenRodYellow', 'LightGray', 'LightGrey', 'LightGreen',
'LightPink', 'LightSalmon', 'LightSeaGreen', 'LightSkyBlue',
'LightSlateGray', 'LightSlateGrey', 'LightSteelBlue', 'LightYellow',
'Lime', 'LimeGreen', 'Linen', 'Magenta', 'Maroon',
'MediumAquaMarine', 'MediumBlue', 'MediumOrchid', 'MediumPurple',
'MediumSeaGreen', 'MediumSlateBlue', 'MediumSpringGreen',
'MediumTurquoise', 'MediumVioletRed', 'MidnightBlue', 'MintCream',
'MistyRose', 'Moccasin', 'NavajoWhite', 'Navy', 'OldLace', 'Olive',
'OliveDrab', 'Orange', 'OrangeRed', 'Orchid', 'PaleGoldenRod',
'PaleGreen', 'PaleTurquoise', 'PaleVioletRed', 'PapayaWhip',
'PeachPuff', 'Peru', 'Pink', 'Plum', 'PowderBlue', 'Purple', 'Red',
'RosyBrown', 'RoyalBlue', 'SaddleBrown', 'Salmon', 'SandyBrown',
'SeaGreen', 'SeaShell', 'Sienna', 'Silver', 'SkyBlue', 'SlateBlue',
'SlateGray', 'SlateGrey', 'Snow', 'SpringGreen', 'SteelBlue', 'Tan',
'Teal', 'Thistle', 'Tomato', 'Turquoise', 'Violet', 'Wheat', 'White',
'WhiteSmoke', 'Yellow', 'YellowGreen'
);
private $m_bgcolor = 'transparent';
private $m_bgimage = 'none';
private $m_bgrepeat = 'repeat';
private $m_bgattachment = 'scroll';
private $m_bgposition = '0% 0%';
private $m_bgimportant = false;
private $m_bg;
public function __construct($bg)
{
$this->color_names = '/\b('.implode('|',$this->color_names).')\b/i';
$this->m_bg = $bg;
$bg = $this->parse_important($bg);
$bg = $this->parse_inherit($bg);
$bg = $this->parse_color($bg);
$bg = $this->parse_image($bg);
$bg = $this->parse_repeat($bg);
$bg = $this->parse_attachment($bg);
$bg = $this->parse_position($bg);
}
public function original()
{
return $this->m_bg;
}
public function color()
{
return $this->m_bgcolor;
}
public function image()
{
return $this->m_bgimage;
}
public function repeat()
{
return $this->m_bgrepeat;
}
public function attachment()
{
return $this->m_bgattachment;
}
public function position()
{
return $this->m_bgposition;
}
public function important()
{
return $this->m_bgimportant;
}
private function parse_important($c)
{
if (preg_match('/!important/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgimportant = true ;
}
return $c;
}
private function parse_inherit($c)
{
if (preg_match('/inherit/i', $c, $m))
{
$this->m_bgcolor = $this->apply_important('inherit');
$this->m_bgimage = $this->apply_important('inherit');
$this->m_bgrepeat = $this->apply_important('inherit');
$this->m_bgattachment = $this->apply_important('inherit');
$this->m_bgposition = $this->apply_important('inherit');
$c = '';
}
return $c;
}
private function parse_color($c)
{
if (preg_match('/#([[:xdigit:]]{3}){1,2}/', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important($m[0]);
}
elseif (preg_match('/rgb\(\d{0,3}\,\d{0,3},\d{0,3}\)/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important($m[0]);
}
elseif (preg_match('/rgba\(\d{0,3}%?\,\d{0,3}%?,\d{0,3}%?\,\d(\.\d)?\)/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important($m[0]);
}
elseif (preg_match('/hls\(\d{0,3}\,\d{0,3}%,\d{0,3}%\)/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important($m[0]);
}
elseif (preg_match('/hlsa\(\d{0,3}\,\d{0,3}%,\d{0,3}%\,\d(\.\d)?\)/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important($m[0]);
}
elseif (preg_match('/transparent/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important('transparent');
}
elseif (preg_match($this->color_names, $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important($m[0]);
}
return $c;
}
private function parse_image($c)
{
if (preg_match('/url\((.*?)\)|none/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
if (isset($m[1]))
{
$m[0] = str_replace($m[1], urlencode($m[1]), $m[0]);
}
$this->m_bgimage = $this->apply_important($m[0]);
}
return $c;
}
private function parse_repeat($c)
{
if (preg_match('/\b(repeat-x|repeat-y|no-repeat|repeat)\b/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgrepeat = $this->apply_important($m[0]);
}
return $c;
}
private function parse_attachment($c)
{
if (preg_match('/scroll|fixed/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgattachment = $this->apply_important($m[0]);
}
return $c;
}
private function parse_position($c)
{
if (preg_match_all('/left|right|center|top|bottom|-?\d+([a-zA-Z]{2}|%?)/i', $c, $m))
{
$horz = '0%';
$vert = '0%';
if (!isset($m[0][1]))
{
$x = strtolower($m[0][0]);
switch ($x)
{
case 'top':
case 'bottom':
$horz = 'center';
$vert = $x;
break;
case 'left':
case 'right':
case 'center':
$horz = $x;
$vert = 'center';
break;
default:
$horz = is_numeric($x) ? "{$x}px" : $x;
$vert = 'center';
}
}
else
{
$horz = strtolower($m[0][0]);
$vert = strtolower($m[0][1]);
if (($horz === $vert) && in_array($horz, array('left','right')))
{
$vert = 'center';
}
if (($horz === $vert) && in_array($horz, array('top','bottom')))
{
$horz = 'center';
}
if ($horz === 'top' || $horz === 'bottom')
{
list($horz,$vert) = array($vert,$horz);
}
if ($vert === 'left' || $vert === 'right')
{
list($horz,$vert) = array($vert,$horz);
}
}
$this->m_bgposition = $this->apply_important("$horz $vert");
}
return $c;
}
private function apply_important($prop)
{
return $prop . ($this->m_bgimportant ? ' !important' : '');
}
}
?>
使用示例
<?php
header('Content-type: text/plain');
$bg = 'url("chess.png") gray 50% repeat fixed';
$cssbg = new CSSBackground($bg);
echo "background: ", $cssbg->original(), "\n\n";
echo "background-color: ", $cssbg->color(), "\n";
echo "background-image: ", $cssbg->image(), "\n";
echo "background-repeat: ", $cssbg->repeat(), "\n";
echo "background-attachment: ", $cssbg->attachment(), "\n";
echo "background-position: ", $cssbg->position(), "\n\n";
echo "!important applied: ", $cssbg->important() ? 'true' : 'false', "\n";
?>
这个类是通过对CSS background属性的w3c规范进行广泛分析而开发的。其他CSS属性也需要进行同样的分析处理。