Phong cách flexbox tiền tố cho React

Question

Tôi thực sự thích cách React thanh lọc các sự kiện cho bạn vì vậy tôi đã rất ngạc nhiên khi thấy rằng họ không tiền tố kiểu CSS của bạn cho bạn!

Anyways, tôi bắt đầu thực hiện prefixer cơ bản của riêng tôi như thế này:

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

Nhưng sau đó tôi realized a big problem, Phản ứng sử dụng một đối tượng cho phong cách và phù hợp tiền tố flexbox, bạn cần phải thêm tiền tố giá trị, không phải là tính chất. Do đó, tôi không thể bao gồm tất cả các kiểu sau cùng một lúc:

.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+ */ 
} 

Bất kỳ ý tưởng nào để giải quyết vấn đề này?

Answer 1

Tôi thích chỉ đặt phong cách của mình vào các tệp riêng biệt và sử dụng Autoprefixer.

Thật dễ dàng để thiết lập với người chạy thử và người chạy nhiệm vụ khác và có thể nhắm mục tiêu các trình duyệt cụ thể mà bạn muốn hỗ trợ. Nó kiểm tra cơ sở dữ liệu caniuse để giữ cho mọi thứ cập nhật, và thậm chí sẽ loại bỏ bất kỳ tiền tố không cần thiết từ css của bạn.

Nó cũng có thể hoạt động kém hơn và sass như một trình biên dịch sau.

Hy vọng điều đó sẽ hữu ích!

Answer 2

Vâng, thực sự với mẹo XSS thực sự nhỏ, bạn có thể dễ dàng đạt được những gì bạn muốn. Đừng sợ hãi, chúng tôi sẽ không đi đến "mặt tối";)

Chỉ cần bằng cách thêm chức năng nhỏ, bạn có thể viết Phản ứng của bạn CSS như thế này

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' ] 
    } 
}); 

Tất cả các thuộc tính sẽ được áp dụng trong cùng một thứ tự khi chúng được biểu diễn trong mảng. Cool phải không? :)

Chức năng tự nó là khá đơn giản

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

Working Demo:

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

PS: sự kiện Chúa chúng ta sử dụng kĩ thuật XSS - chúng tôi không giới thiệu bất kỳ mới vấn đề an ninh. Bảo vệ XSS chuẩn cũng sẽ hoạt động ở đây.

Answer 3

Tiền tố nhà cung cấp tự động đã được ghi nhận là điều mà nhóm React không muốn duy trì. Điều này có ý nghĩa thực sự, mọi ứng dụng đều có các yêu cầu khác nhau xung quanh trình duyệt để hỗ trợ. Tùy thuộc vào cách hỗ trợ trở lại xa, vấn đề phát triển theo cấp số nhân.

Hãy nghĩ rằng React ra khỏi hộp phải có hỗ trợ cho nhà cung cấp có tiền tố giá trị, với kiểu dáng nội tuyến, bạn không thể sử dụng flexbox (Hello web hiện đại !?).

Hãy nghĩ rằng cú pháp ngữ pháp đối tượng có ít giá trị không thể có ở nơi khác và chủ yếu là thêm ma sát để tạo kiểu. Đoán nó có một cái gì đó để làm với hỗ trợ tương thích ngược và có thể vượt qua các đối tượng CSS như đạo cụ và không muốn ép buộc mọi người vào ES5/ES6, nơi cú pháp chuỗi (``) có thể được sử dụng. Sẽ khá xấu nếu chúng tôi đã thêm chuỗi cùng với các toán tử + để gắn các biến của chúng tôi vào ... nhưng điều đó không còn cần thiết nữa với các văn bản mẫu!(xem trên mdn)

Không hài lòng với tất cả các gói khác đã tấn công vấn đề này, vì vậy hãy thực hiện thao tác đơn giản nhất để loại trừ tất cả. Gói được gọi là Style It chỉ đơn giản cho phép bạn viết CSS. Ngoài ra phạm vi tự động subtree, do đó bạn không phải trong không gian tên toàn cầu với CSS của bạn (tương tự-ish để nội tuyến nhưng không phải là độ đặc hiệu cao). Tương tự như phong cách nội tuyến, nó cũng XSS an toàn theo mặc định (thoát CSS của bạn bằng cách sử dụng lib tương tự React sử dụng), isomorphic, và nhỏ ở 1.8kb gzipped. Oh và không có bước xây dựng.

npm install style-it --save

chức năng Cú pháp (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 Cú pháp (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 kéo từ A Complete Guide to Flexbox bài Chris Coyier của.