React的前綴flexbox樣式

Question

我真的很喜歡React如何爲您淨化事件，所以我驚訝地發現它們不會爲您的CSS前綴添加樣式！

不管怎麼說，我開始實施我自己的基本prefixer這樣的：

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; 
}; 

但後來我realized a big problem，陣營使用對象的風格和適當的前綴Flexbox的，你需要的前綴值，而不是屬性。因此，我不能同時包含以下所有樣式：

.page-wrap { 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
    display: -webkit-flex;  /* NEW - Chrome */ 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
} 

任何想法如何解決此問題？

Answer 1

我更喜歡將我的風格放在單獨的文件中，並使用Autoprefixer。

使用grunt和其他任務運行器進行設置非常簡單，並且可以定位您想要支持的特定瀏覽器。它會檢查caniuse數據庫以保持最新狀態，甚至會從您的css中刪除任何不必要的前綴。

它也可以用less和sass作爲後期編譯器。

希望有幫助！

Answer 2

那麼，實際上，與真正的小XSS技巧，你可以很容易地達到你想要的。不要害怕，我們不會去的「陰暗面」;）

只需通過添加少量的功能，你可以寫你的陣營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; 
} 

工作演示：

https://jsfiddle.net/z5r53tdh/1/

PS：你的事件，我們利用XSS工藝 - 我們不引入任何新安全問題。標準的XSS保護也可以在這裏使用。

Answer 3

自動供應商前綴已被聲明爲React團隊不想維護的內容。這真的很有意義，每個應用程序都有不同的需求，以支持哪些瀏覽器。取決於支持的程度，問題呈指數增長。

是否認爲反應開箱即用應支持前綴爲的供應商，因爲只有內聯樣式，您不能使用flexbox（Hello modern web !?）。

認爲對象文字的語法具有很小的價值，這在其他地方是無法實現的，並且通常會增加樣式的摩擦。猜測它與向後兼容性支持有關，並且能夠作爲道具傳遞CSS對象，並且不希望強迫人們使用模板字符串（``）語法可以使用的ES5/ES6。如果我們將字符串與+運算符一起添加來將我們的變量粘貼到...中，那麼會非常難看，但對於模板文字，這不再必要！（請參見mdn）

對所有其他攻擊此問題的軟件包感到不滿，因此使用最簡單的軟件包來管理它們。名爲Style It的軟件包可以讓您編寫CSS。同樣也是自動的子樹範圍，所以你不在CSS的全局名稱空間中（類似於內聯但不如特性高）。與內聯樣式類似，默認情況下它也是XSS安全的（使用相同的libReact使用來轉義您的CSS），是同構的，並且在1.8kb處很小。哦，沒有建設的一步。

npm install style-it --save

功能語法（JSFIDDLE）

import React from 'react'; 
import Style from 'style-it'; 

class Intro extends React.Component { 
    render() { 
    return Style.it(` 
     .flex-container { 
     padding: 0; 
     margin: 0; 
     list-style: none; 

     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 

     -webkit-flex-flow: row wrap; 
     justify-content: space-around; 
     } 

     .flex-item {    
     background: tomato; 
     padding: 5px; 
     width: 200px; 
     height: 150px; 
     margin-top: 10px; 

     line-height: 150px; 
     color: white; 
     font-weight: bold; 
     font-size: 3em; 
     text-align: center; 
     } 
    `, 
     <ul class="flex-container"> 
     <li class="flex-item">1</li> 
     <li class="flex-item">2</li> 
     <li class="flex-item">3</li> 
     <li class="flex-item">4</li> 
     <li class="flex-item">5</li> 
     <li class="flex-item">6</li> 
     </ul> 
    ); 
    } 
} 

export default Intro; 

JSX語法（JSFIDDLE）

import React from 'react'; 
import Style from 'style-it'; 

class Intro extends React.Component { 
    render() { 
    return (
     <Style> 
     {` 
     .flex-container { 
      padding: 0; 
      margin: 0; 
      list-style: none; 

      display: -webkit-box; 
      display: -moz-box; 
      display: -ms-flexbox; 
      display: -webkit-flex; 
      display: flex; 

      -webkit-flex-flow: row wrap; 
      justify-content: space-around; 
     } 

     .flex-item { 
      background: tomato; 
      padding: 5px; 
      width: 200px; 
      height: 150px; 
      margin-top: 10px; 

      line-height: 150px; 
      color: white; 
      font-weight: bold; 
      font-size: 3em; 
      text-align: center; 
     } 
     `} 

     <ul class="flex-container"> 
     <li class="flex-item">1</li> 
     <li class="flex-item">2</li> 
     <li class="flex-item">3</li> 
     <li class="flex-item">4</li> 
     <li class="flex-item">5</li> 
     <li class="flex-item">6</li> 
     </ul> 
    </Style> 
    } 
} 

export default Intro; 

HTML/CSS從克里斯Coyier的A Complete Guide to Flexbox後拉。