Prefixing Flexbox Stile für React

Question

Ich mag es wirklich, wie React Ereignisse für Sie reinigt, so dass ich überrascht war, dass sie nicht Ihre CSS-Stile für Sie auch Präfix!

Anyways, ich begann meine eigene Grund prefixer wie diese Umsetzung:

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

Aber dann habe ich realized a big problem, Reaktion verwendet ein Objekt für Stile und in geeigneter Weise die Flexbox Präfix, müssen Sie die Werte Präfix, nicht die Eigenschaften. So kann ich nicht alle der folgenden Arten zur gleichen Zeit ist:

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

Irgendwelche Ideen, wie dies zu umgehen?

Answer 1

Ich bevorzuge einfach meine Stile in separaten Dateien und verwenden Autoprefixer.

Es ist ziemlich einfach, mit grunt und anderen Aufgabenläufern einzurichten, und kann die spezifischen Browser ausrichten, die Sie unterstützen möchten. Es überprüft die Caniuse-Datenbank, um die Dinge auf dem neuesten Stand zu halten, und entfernt sogar unnötige Präfixe aus Ihrem CSS.

Es kann auch mit weniger und sass als Post-Compiler arbeiten.

Hoffe, dass hilft!

Answer 2

Nun, eigentlich mit wirklich kleinen XSS-Trick können Sie leicht erreichen, was Sie wollen. Gehen Sie keine Angst, wir werden nicht auf die „dunkle Seite“;)

Nur durch kleine Funktion Hinzufügen Sie Ihre CSS wie diese

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

Alle Objekte im selben gelten Reagieren schreiben Reihenfolge, wie sie in Array dargestellt. Cool ist es nicht? :)

Die Funktion selbst ist recht einfach

// 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: Ereignis du wir XSS Technik verwenden - wir einführen keine neuen Sicherheitsproblem. Der Standard-XSS-Schutz funktioniert auch hier.

Answer 3

Die automatische Lieferantenpräfixierung wurde als etwas festgelegt, das das React-Team nicht beibehalten möchte. Was wirklich Sinn macht, hat jede App unterschiedliche Anforderungen, welche Browser unterstützt werden sollen. Abhängig davon, wie weit die Unterstützung zurückgeht, wächst das Problem exponentiell.

Do denkt Reagieren aus der Box sollte Unterstützung hat für Anbieter Werte Präfix, wie es ist, mit Inline-Styling allein nicht Flexbox (Hallo modernes Web !?) verwenden kann.

Denken Sie, dass die literale Syntax des Objekts wenig Wert hat, die anderswo nicht zu haben ist, und das Frischen zum Styling meist beiträgt. Vermutlich hat das etwas mit Rückwärtskompatibilitätsunterstützung zu tun und CSS-Objekte als Requisiten übergeben zu können und keine Leute auf ES5/ES6 zwingen zu wollen, wo Template-Strings (``) -Syntax verwendet werden kann. Wäre ziemlich hässlich, wenn wir Zeichenketten zusammen mit + Operatoren hinzufügen würden, um unsere Variablen in ... zu stecken, aber das ist nicht mehr notwendig mit Vorlagenliteralen!(siehe mdn)

War unzufrieden mit allen anderen Paketen, die dieses Problem angriffen, so machte die einfachste, um sie alle zu regieren. Paket namens Style It, mit dem Sie einfach CSS schreiben können. Auch automatisch untergeordnete Bereiche, so dass Sie mit Ihrem CSS nicht im globalen Namensraum sind (ähnlich wie inline, aber nicht so hochspezifisch). Ähnlich wie Inline-Styles ist es auch standardmäßig XSS-sicher (es entkoppelt Ihr CSS mit der gleichen Lib, die React verwendet), ist isomorph und winzig bei 1.8kb gziped. Oh und kein Buildschritt.

npm install style-it --save

Funktions Syntax (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 Syntax (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 gezogen von Chris A Complete Guide to Flexbox Post Coyier.