0

I have page that contain list with alphabetical order. Its obvious that in each language this order will be different (same word looks different in each language so the position on the list need to be different).

Im using position: flex for <ul> which allows me to put manualy all <li> in alphabetical order.

I would like to have this order list for each language in different CSS file and change them while <html lang="en"> is changing. So if I have <html lang="en"> then I'm using en.css but for <html lang="de"> I'll load de.css.

I thought about two methods, but I don't know how to use both of them:

  1. Puting in a global style.css some rule that will @import proper file using some :lang(en) definition or
  2. Using some JS/Jquery script that will detect <html lang="en"> and put proper link to my <head> area.

There is also third method - to put all this definitions into one global style.css - it will increase file weight but will eliminate need of downloading additional .css file.

Marcin W
  • 57
  • 7

1 Answers1

0

First get the document's language with document.documentElement.lang, it'll return whatever you put on the lang attribute.

Here's how to set the CSS file to the document with JavaScript, just wanna let the original source explain it: How to load up CSS files using Javascript?

MarksASP
  • 494
  • 6
  • 15