0

I have a php variable called MULTILANGUEwith a value define as true if the website has many languages and false if not.

The thing is I am using css files where I have some links like this

.fabricant .scroll:before {
  content: "";
  display: block;
  width: 30px;
  height: 18px;
  background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
  background-size: contain;
}

But the link is not the same depending if multilangue is true or false.

So I would like to make a condition for the url inside this css but I don't know how I can do that.

The obvious solution would be having a css file for both cases... but this would be redundant with a lot of duplicated code which is really bad.

Improve this question
2
  • why would have a lot of dupe code? You have one main.css file and then something like main.en.css which contains one line: .fabricant {background: url(); } ? Commented Aug 7, 2018 at 12:36
  • 2
    why dont just add custom css class to generated html? i mean if MULTILANAGUE is true you render you html with something like <body class="multi"> Commented Aug 7, 2018 at 12:37

3 Answers 3

Reset to default
5

The obvious solution is to have two CSS rules for the different backgrounds, and adding the appropriate class to elements dynamically in PHP. I repeat: you don't want dynamically generated CSS files.

.fabricant .scroll:before {
  ...
  background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
}

.fabricant.multilang .scroll:before {
  background-image: url("../assets/img/picto/arrow-up.svg");
}

<div class="fabricant <?php if ($isMultiLang) echo 'multilang'; ?>">
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

This might be what I'm going to do. But it's not that good considering maintenance. Adding the css rule in the css file is fine. But that means swap all class to class-multilangue on many website; where a condition inside the css will prevent those modifications. But if you tell me it's not possible I guess I'm going to do this.
Well, it's possible, but it's insane. You will have to modify something about each file anyway, and this is the sanest way to do it. Note that you don't have to add the class to each individual element; you could just add it to the body and use a selector like body.multilang .fabricant .scroll:before.
You could also properly use HTML lang attributes and something like .fabricant:lang(es) ...: developer.mozilla.org/en-US/docs/Web/CSS/:lang
How should I do the trick for a rule like @font-face { src: url("../assets/fonts/google/MaterialIcons-Regular.woff2") } ?
Why would you conditionally import an entirely different icon set? Presumably you'd conditionally display different icons from that icon set, not switch out the icon set, no?
|
0

CSS doesn't has conditionals, you can use different classes so depending your variable you can call...

.fabricant.es .scroll:before {
...
}

or 

.fabricant.en .scroll:before {
...
}

and use different content in each class..

Improve this answer

Comments

-1

You could embed different css files depending on your MULTILANGUE variable:

 <link href="<?= MULTILANGUE?'multilangue.css':'non_multilangue.css' ?>" rel="stylesheet">

and in each css file you can put the url directive, changing it for multilanguage or not:

.fabricant .scroll:before {
  background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
}
Improve this answer

3 Comments

why -1 whitout explaining?
not from me by the way. But for your solution I wont do it because that means duplicate a lot of code from multi no non_multi where I should have only a few differences. Thanks anyway.
You shouldn't duplicate all code, but just the part interested by MULTILANGUE variable

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.