如何转义动态 CSS 属性值答案

【问题标题】：How to escape dynamic CSS property value如何转义动态 CSS 属性值
【发布时间】：2017-11-27 19:02:07
【问题描述】：

我有 wp_add_inline_style() 包含的以下 redux 动态 css。

// redux dynamic css

global $x_redux_option;
$x_blogpost_overlay_switch = $ x_redux_option [' x_blogpost_overlay_switch];

$x_redux_dynamic_css = '
        .single_post:hover{
          background: ". if ($x_blogpost_overlay_switch == true): echo $x_blogpost_overlay; endif; ." ;
            -webkit-box-shadow: " . if($x_blogpost_overlay_switch == true): ." 0 1px 10px 0 rgba(251,252,252,0.8) " . endif; ." ; 
               -moz-box-shadow: " . if($x_blogpost_overlay_switch == true): . " 0 1px 10px 0 rgba(251,252,252,0.8) " . endif; . " ; 
                    box-shadow: " . if($x_blogpost_overlay_switch == true): . " 0 1px 10px 0 rgba(251,252,252,0.8) " . endif; . " ;
        }
        ';
wp_add_inline_style( 'x-main-style', $x_redux_dynamic_css );

Mentor Themeforest 插件显示以下错误：

所有动态数据都必须针对其呈现的上下文进行正确转义。在文件 inc/scripts-styles.php 的第 213 行：背景：“。如果 ($x_blogpost_overlay_switch == true): echo $x_blogpost_overlay; endif; 。” ;

我怎样才能逃避这个动态 ( $x_blogpost_overlay ) css 属性值？

提前致谢。

【问题讨论】：

标签： php css redux escaping

【解决方案1】：

试试这个方法。

global $x_redux_option;
$x_blogpost_overlay_switch = $x_redux_option['x_blogpost_overlay_switch'];

// You must specify this variable as a valid CSS style.
$x_blogpost_overlay = 'white';

$x_redux_dynamic_css = '
        .single_post:hover{
            ';
if ($x_blogpost_overlay_switch == true){
    $x_redux_dynamic_css = $x_redux_dynamic_css . 'background: '. $x_blogpost_overlay . ';' . 
    '-webkit-box-shadow: 0 1px 10px 0 rgba(251,252,252,0.8);
        -moz-box-shadow: 0 1px 10px 0 rgba(251,252,252,0.8); 
             box-shadow: 0 1px 10px 0 rgba(251,252,252,0.8);';
}
$x_redux_dynamic_css .= '}';
wp_add_inline_style( 'x-main-style', $x_redux_dynamic_css );

【讨论】：

非常感谢@Miron 您的代码运行良好。但是当 ($x_blogpost_overlay_switch == true) 出现 PHP 错误时：注意：未定义的变量：C:\xampp\htdocs\x\wp-content\themes\x\inc\scripts-styles.php 中的 x_blogpost_overlay 在第 216 行// /// 所以现在我使用了这个： $x_blogpost_overlay = $x_redux_option['x_blogpost_overlay'];但是现在错误是：注意：第 218 行 C:\xampp\htdocs\x\wp-content\themes\x\inc\scripts-styles.php 中的数组到字符串转换我不知道问题出在哪里。
这意味着$x_redux_option['x_blogpost_overlay'] 是一个数组。您必须选择数组的一个元素。尝试使用print_r() 查看数组中有哪些值并决定选择哪一个。例如，print_r($x_redux_option['x_blogpost_overlay']);
我找到了这个值： Array ( [color] => #666666 [alpha] => 0.25 ) 。现在我使用了这个： $x_redux_dynamic_css = $x_redux_dynamic_css 。 '背景： '。 $x_blogpost_overlay[color] [alpha] 。但它不起作用。然后我使用了这个： $x_redux_dynamic_css = $x_redux_dynamic_css 。 '背景： '。 $x_blogpost_overlay[0] [1]。它也不起作用。 PHP 错误在下一条评论中。
注意：使用未定义的常量颜色 - 在第 218 行的 C:\xampp\htdocs\x\wp-content\themes\x\inc\scripts-styles.php 中假定为“颜色” 注意：使用未定义的常量 alpha - 在第 218 行的 C:\xampp\htdocs\x\wp-content\themes\x\inc\scripts-styles.php 中假定为 'alpha' 警告：C:\ 中的非法字符串偏移量 'alpha' xampp\htdocs\x\wp-content\themes\x\inc\scripts-styles.php 在第 218 行
看！ $x_blogpost_overlay 从 redux 渲染 color_rgba 值。