How to use css3 variables, without problems of compatibility with Internet Explorer or other old browsers?

1

Good morning. What I am asking is if there is a library of the type "prefix-free" or "autoprefixer", but for the variables of css3: var (- variable) .

Please do not answer that using X preprocessor I will not have that problem, I look for something that allows me to use css3 native without these retrocompatibility problems , which I will not always have, but there will be cases and clients in the future, so I want to prevent instead of regret.

Edit: What I meant by using native css3, was to be able to continue working with native css3 only in current browsers and that the library or postprocessor that I recommend would be responsible for changing these css variables to its respective value in old browsers and not worry in case you make an absurd request.

Edit2 I'm not a developer, I'm more a designer / layout designer, so I could not "do" this post-processor myself, I was hoping they would recommend something to me already exists. Thank you.

Thanks.

    
asked by Edgar Gutiérrez 19.12.2017 в 01:37
source

1 answer

1

What you want to do is impossible. Old browsers simply do not understand the CSS code that did not exist at that time. In this case, they will not understand the variables.

By the way, the libraries you mention (prefix-free, autoprefixer) ARE processors (not only preprocessors exist, but also postprocessors, like those). You can read it easily in the documentation of these tools:

  

Because Autoprefixer is a postprocessor for CSS, you can also use it   with preprocessors such as Sass, Stylus or LESS.

What the processors do is, precisely, take code that will not work natively and convert it into native code. In this case, a processor could take your CSS variables and replace them directly in the CSS, leaving it without variables but equivalent to your code with variables (which is very different from the old browser understanding your variables natively).

EDITED: As I see it, you have edited your question requesting a preprocessor recommendation to help you with the variables.

My recommendation would be that you use SASS. It does not use CSS variables, but implements its own type of variable, and works supremely well. The disadvantage is that you do not take advantage of the CSS variables, but the advantage is that it is compatible with all browsers, new or old. Suggested reading: link

By the way: if you're thinking about it, I would not recommend, at least still, mixing CSS variables with preprocessed variables like SASS variables. That probably makes it more difficult to keep the stylesheets organized. I understand that what you would like is for the browser to use a style sheet with CSS variables or one with the preprocessed variables depending on whether it is able to read them or not, but that would mean a lot more work for you because you would have to dispatch the style sheets dynamically according to the browser. In general, if you want to support old browsers, you must make sacrifices in the amount of work to be done and / or the cleaning of your CSS. In this case, I would think that the least hard sacrifice is not to use native CSS variables, but preprocessed ones.

    
answered by 19.12.2017 в 02:58