解析 CSS 背景快捷方式的类
此类将以任何顺序解析几乎任何一行背景快捷方式属性,包括根据specs 无效的那些。例如,background: top top 被视为background-position: center top。
完全支持所有颜色值,包括:rgb、rgba、hls、hlsa、不区分大小写的短格式十六进制(例如#fff)、不区分大小写的长格式十六进制(例如#123Abc)和不区分大小写颜色名称。
现在支持!important。
inherit 似乎是最具挑战性的问题,但结果却是最简单的。对于这个属性,我提到了http://reference.sitepoint.com/css/inheritvalue,它指出:
当您使用诸如背景之类的速记符号时,您不能混合使用
与其他值继承。比如下面的背景
声明错误:
p {
background: #fff inherit left top;
}
...inherit 必须是声明中的唯一值,因为有
根本无法识别价值所在的子属性
inherit 指代——毕竟,它在序列中不是唯一的。在里面
上面的例子,inherit 变得不明确。
为了处理歧义,这个类简单地忽略其他所有内容(除了 !important)并将继承应用于所有属性,就像您使用了 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)
{
// reformat array names for efficient pattern matching
$this->color_names = '/\b('.implode('|',$this->color_names).')\b/i';
$this->m_bg = $bg; // save original
$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)
{
// check for !important
if (preg_match('/!important/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgimportant = true ;
}
return $c;
}
private function parse_inherit($c)
{
// check for !important
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)
{
// check for hexit color value
if (preg_match('/#([[:xdigit:]]{3}){1,2}/', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important($m[0]);
}
// check for rgb color value
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]);
}
// check for rgba color value
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]);
}
// check for hls color value
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]);
}
// check for hlsa color value
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]);
}
// check for transparent
elseif (preg_match('/transparent/i', $c, $m))
{
$c = str_replace($m[0], '', $c);
$this->m_bgcolor = $this->apply_important('transparent');
}
// check for color names
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)
{
// check for double word positions
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)
{
// check for repeat values
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)
{
// check for repeat values
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)
{
// check for position values
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";
?>
这个类是通过对w3c specifications for the CSS background property 的广泛分析而开发的。其他 CSS 属性将需要相同的分析处理。