New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

inline styles and vendor prefix for values #2020

Closed
ronag opened this Issue Aug 11, 2014 · 14 comments

Comments

Projects
None yet
@ronag
Copy link

ronag commented Aug 11, 2014

How would I write the following css using inline styles?

.page-wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 }

Wouldn't be nice if react could internally automatically handle vendor prefixes (similar to stylus + nib)?

@syranide

This comment has been minimized.

Copy link
Contributor

syranide commented Aug 11, 2014

Related #723, it's complicated because vendor-prefixes are there for a reason and simply acting as if they weren't there means disregarding at least a part of an intentional design decision. For run-time styles, for maximum performance, one should feature test the browser and only apply styles that are valid (and perhaps fall back to a different layout entirely sometimes). Only for server-rendered DOM would the full list of variations be output.

I have no practical advice/insight here for the time being though.

@zpao

This comment has been minimized.

Copy link
Member

zpao commented Aug 11, 2014

Right now the only way to do this exactly as you want is with regular CSS. Stylus/nib generate CSS so it works for them. We operate on the DOM node itself which doesn't allow you to specify multiple values like this.

You could do what @syranide said and feature/browser detect before specifying the style value. I actually think that's something a whole library could be built for to target React users, but I don't think React should do it itself.

@whodidthis

This comment has been minimized.

Copy link

whodidthis commented Feb 10, 2015

It seems impossible(?) to use inline flexbox with server-rendered DOMs.

dangerouslySetInnerHTML already exists so could be nice if there was a similar way to use a string with inline styles.

@appsforartists

This comment has been minimized.

Copy link

appsforartists commented Feb 24, 2015

Autoprefixing every style is probably out-of-scope for React (just the db for autoprefixer is 500KB), but especially with the push towards inline styles with React Native, it would be nice if foundational technologies like Flexbox and transform were autoprefixed by React. They're consensus APIs that are unprefixed by everyone but Safari.

To that end, I whipped this up last night. It solves the problem as long as you remember to litter your codebase with autoprefixStyleProp calls. I'd love to see a similar solution built-in to React.

@wmertens

This comment has been minimized.

Copy link
Contributor

wmertens commented Feb 26, 2015

@appsforartists https://github.com/cgarvis/react-vendor-prefix does this too but also handles animation properties...
This seems to be a common problem, and indeed broken for server-side rendering.

tomkp added a commit to tomkp/react-layout-pane that referenced this issue Mar 9, 2015

tomkp added a commit to tomkp/react-layout-pane that referenced this issue Mar 9, 2015

@elgerlambert

This comment has been minimized.

Copy link

elgerlambert commented Jul 21, 2015

Ran into this issue myself. Initially solved it by creating a 'display-flexbox' class as per the suggestions above. While tracking down an issue in material-ui, I noticed they had found/thought of an alternative.

Apparently you can add more display properties by specifying them as the value of your display key:

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

Bit of a hack, but doesn't seem too bad. It solves the issue I was having with Safari (8.0.7) and things are still working in Chrome and FF. I haven't checked IE or older browsers.

Kind regards

@wmertens

This comment has been minimized.

Copy link
Contributor

wmertens commented Jul 21, 2015

Wow, I am stunned that that works

On Tue, Jul 21, 2015 at 11:39 AM Elger Lambert notifications@github.com
wrote:

Ran into this issue myself. Initially solved it by creating a
'display-flexbox' class as per the suggestions above. While tracking down an
issue in material-ui
mui-org/material-ui#1212, I noticed they
had found/thought of an alternative.

Apparently you can add more display properties by specifying them as the
value of your display key:

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

Bit of a hack, but doesn't seem too bad. It solves the issue I was having
with Safari (8.0.7) and things are still working in Chrome and FF. I
haven't checked IE or older browsers.

Kind regards


Reply to this email directly or view it on GitHub
#2020 (comment).

Wout.
(typed on mobile, excuse terseness)

@zpao

This comment has been minimized.

Copy link
Member

zpao commented Jul 21, 2015

FWIW, that hack only works on initial render and only because we use innerHTML. Any updates to display will then break. If at some point we change to actually using createElement, there is no guarantee it will continue to work.

@elgerlambert

This comment has been minimized.

Copy link

elgerlambert commented Jul 22, 2015

Thanks for your comment @zpao! That's good to know/be aware of.

@yonatanmn

This comment has been minimized.

Copy link

yonatanmn commented Sep 10, 2015

@yuanalexwu

This comment has been minimized.

Copy link

yuanalexwu commented Oct 28, 2016

@zpao, @elgerlambert u guys are awsome, I was strugglling with this for a long time untill I find this issue.

@sassanh

This comment has been minimized.

Copy link
Contributor

sassanh commented Apr 3, 2017

Does React have a clean solution for vendor prefixing key/value of an inline style? A clear solution being something that works for server side rendering too, not hacky, works always (not only on first render) and all other things that clean solutions are supposed to have.
While all browsers accept css lines with same key and different values (fallback values), I wonder why shouldn't React support this, it's as simple as accepting and handling array as value of inline styles.
I understand React is better not automatically detect prefixes, but it should provide a way to have fallback values for an inline style key and I'm quite sure it won't add more than 1KB (if not 100bytes) to the compiled library.
I'm curious why this issue is closed while it's not resolved and no clean workaround (not even dirty workaround) is provided.

@killroy42

This comment has been minimized.

Copy link

killroy42 commented Apr 16, 2017

What about non-prefix related issues such as cursor: move; cursor: grab;?

@paranoidjk

This comment has been minimized.

Copy link

paranoidjk commented Jun 2, 2017

I think this problem should be listed at doc https://facebook.github.io/react/docs/dom-elements.html#style

corupta added a commit to corupta/react-split-pane that referenced this issue Dec 21, 2018

Due to facebook/react#2020 inline-styles with fallout values with the…
… hack specified in previous commit are not supported, so instead dont use display flex in prefix all and also merge the extra style prop after using prefixAll
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment