Pure CSS website translate
Question
I have found solution for pure css translation on stackoverflow. Here.
In css I have:
.en, .sl { display:none; } /* hide all elements with a language class */
.en:lang(en), .sl:lang(sl) { display:block; } /* show those elements that match their language class */
In HTML:
<html lang="sl">
and
<div class="sl">Pozdravljeni</div>
<div class="en">Hello</div>
For change of lang attribute I use js:
function setLang(lang) {
document.getElementsByTagName('html')[0].setAttribute('lang',lang);
}
It works ok on my computer in Chrome. It work on my iphone. On ipad mini. But it does NOT work on my girlfriends computer in Chrome. And not in IE.
And it seems it does NOT work on my computer on IE.
Problem is in css. This code:
.en, .sl { display:none; }
works, and this not:
.en:lang(en), .sl:lang(sl) { display:block; }
I can't figure it out what is wrong.
4 answers
solution1
1 2014-12-14 10:02:59
You're targeting a <div> with the class "de" in .de:lang(sl) , but you don't have any <div> s with the class "de".
Therefore, if you change .de:lang(sl) to .sl:lang(sl) , it should work.
solution2
0 2014-12-14 10:05:14
The ".en" and ".de" refer to the class names, and the ":lang(en)" and ":lang(sl)" refer to the lang attributes.
.en:lang(en), .de:lang(sl) { display:block; }
means "enable block display for any items with class 'en' and lang='en', and any items with class 'de' and lang='sl'"
solution3
0 2014-12-14 10:19:41
html[lang="en"] .de,
html[lang="en"] .sl {
display: none;
}
html[lang="de"] .en,
html[lang="de"] .sl {
display: none;
}
html[lang="sl"] .de,
html[lang="sl"] .en {
display: none;
}
solution4
0 2014-12-14 12:15:25
It was error in my usage of setLang. Missing ' '...
wrong:
<body onload="setLang(<?echo substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);?>);">
right:
<body onload="setLang('<?echo substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);?>');">
Tnx, Rick Hitchcock, your comment give me a hint.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.