Css 为React添加flexbox样式前缀

我真的很喜欢React为您净化事件的方式，所以我惊讶地发现，它们也没有为您的CSS样式添加前缀

无论如何，我开始实现自己的基本前缀器，如下所示：

var prefixes = ["ms", "Moz", "Webkit", "O"];
var properties = [
  'userSelect',
  'transform',
  'transition',
  'transformOrigin',
  'transformStyle',
  'transitionProperty',
  'transitionDuration',
  'transitionTimingFunction',
  'transitionDelay',
  'borderImage',
  'borderImageSlice',
  'boxShadow',
  'backgroundClip',
  'backfaceVisibility',
  'perspective',
  'perspectiveOrigin',
  'animation',
  'animationDuration',
  'animationName',
  'animationDelay',
  'animationDirection',
  'animationIterationCount',
  'animationTimingFunction',
  'animationPlayState',
  'animationFillMode',
  'appearance',
  'flexGrow',
];


function vendorPrefix(property, value) {
  var result = {}
  result[property] = value

  if( properties.indexOf(property) == -1 ){
    return result;
  }

  property = property[0].toUpperCase() + property.slice(1);

  for (var i = 0; i < prefixes.length; i++) {
    result[prefixes[i] + property] = value;
  };

  return result;
}

React.prefix = function(obj) {
  var result = {};

  for(var key in obj){
    var prefixed = vendorPrefix(key, obj[key])
    for(var pre in prefixed){
      result[pre] = prefixed[pre]
    } 
  }
  return result;
};

---

有什么办法解决这个问题吗？

我更喜欢把我的风格放在不同的文件中并使用

使用grunt和其他任务运行程序进行设置非常容易，并且可以针对您想要支持的特定浏览器。它会检查caniuse数据库以保持最新，甚至会从css中删除任何不必要的前缀

它还可以作为后期编译器使用less和sass

---

希望有帮助

事实上，使用非常小的XSS技巧，您可以轻松实现您想要的。别害怕，我们不会去“黑暗面”；）

只需添加一个小函数，您就可以像这样编写您的React CSS

var divStyle = multipleValues({
  color: 'white',
  padding: '10px 20px',
  // if you want property to have multiple values
  // just write them all in the array
  display: [
    '-webkit-box',
    '-webkit-flex',
    '-ms-flexbox',
    'flex'
  ],
  background: ['red', 'blue'],

  extraStyles: {
    background: [ 'yellow', 'pink' ]
  }
});

所有属性将按照它们在数组中表示的顺序应用。很酷，不是吗？：）

它本身的功能非常简单

// function that will do a "magic" XSS-ish trick
function multipleValues(style) {
  var result = {};
  // feel free to replace for..in+hasOwnProperty with for..of
  for (var key in style) { 
    if (style.hasOwnProperty(key)) {
      var value = style[key];
      if (Array.isArray(value)) {
        // by adding semicolon at the begging we applying
        // a trick that ofthen used in XSS attacks
        result[key] = ';' + key + ':' + value.join(';' + key + ':');
      } else if (typeof value === "object" && value !== null) {
        // here we doing recursion
        result[key] = multipleValues(value);
      } else {
        // and here we simply copying everything else
        result[key] = value;
      }
    }
  }
  return result;
}

工作演示：

---

PS：如果我们使用XSS技术，我们不会引入任何新的安全问题。标准XSS保护也将在这里起作用。

自动供应商前缀已被声明为React团队不希望维护的内容。这很有道理，每个应用程序都有不同的浏览器支持要求。根据支持时间的长短，问题会呈指数增长

您认为开箱即用的React应该支持供应商的前缀值，因为只有内联样式，您不能使用flexbox（Hello modern web！？）

想想看，对象文字语法没有其他地方所没有的价值，主要是给样式设置增加了摩擦。猜测这与向后兼容性支持有关，并且能够将CSS对象作为道具传递，并且不想强迫人们使用ES5/ES6，在那里可以使用模板字符串（``）语法。如果我们将字符串与

+

运算符一起添加，以将变量粘贴到。。。但是，对于模板文本来说，这不再是必需的！（见上）

对攻击此问题的所有其他包都不满意，因此使用最简单的包来管理所有包。这个名为的包只允许您编写CSS。此外，还自动设置子树作用域，因此您的CSS不在全局名称空间中（类似于内联，但没有那么高的专用性）。与内联样式类似，默认情况下它也是XSS安全的（使用相同的lib React使用转义CSS），是同构的，并且大小为1.8kb gzip。哦，没有建造步骤

npm安装风格it--保存

函数语法（）

从“React”导入React；
从“样式it”导入样式；
类简介扩展了React.Component{
render（）{
回归风格(`
.柔性容器{
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
}
.flex项目{
背景：番茄；
填充物：5px；
宽度：200px；
高度：150像素；
边缘顶部：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}
`,

1
2
3
4
5
6

);
}
}
导出默认简介；

JSX语法（）

从“React”导入React；
从“样式it”导入样式；
类简介扩展了React.Component{
render（）{
返回(
{`
.柔性容器{
填充：0；
保证金：0；
列表样式：无；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit flex流：行换行；
证明内容：周围的空间；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：200px；
高度：150像素；
边缘顶部：10px；
线高：150px；
颜色：白色；
字体大小：粗体；
字号：3em；
文本对齐：居中；
}
`}

1
2
3
4
5
6

}
}
导出默认简介；

---

HTML/CSS来自Chris Coyier的帖子。

现在内联样式的功能是有限的。我建议在这些情况下只使用传统的类/

className

。或者你可以检测浏览器版本，但类可能是最好的选择。啊，我明白了。我希望最终废除CSS和CSS预处理器。我不这么认为k这将不再适用于当前版本的react。

// function that will do a "magic" XSS-ish trick
function multipleValues(style) {
  var result = {};
  // feel free to replace for..in+hasOwnProperty with for..of
  for (var key in style) { 
    if (style.hasOwnProperty(key)) {
      var value = style[key];
      if (Array.isArray(value)) {
        // by adding semicolon at the begging we applying
        // a trick that ofthen used in XSS attacks
        result[key] = ';' + key + ':' + value.join(';' + key + ':');
      } else if (typeof value === "object" && value !== null) {
        // here we doing recursion
        result[key] = multipleValues(value);
      } else {
        // and here we simply copying everything else
        result[key] = value;
      }
    }
  }
  return result;
}