Skip to content

Instantly share code, notes, and snippets.

@DonnchaC

DonnchaC/css-private-language-selector.html

Last active December 13, 2017 19:54
Show Gist options
  • Save DonnchaC/3d6af98f2b9b72af0a9c941165352bcc to your computer and use it in GitHub Desktop.
Save DonnchaC/3d6af98f2b9b72af0a9c941165352bcc to your computer and use it in GitHub Desktop.
Download ZIP
Show a translated page using only CSS and without leaking the language choice to the webserver
Raw
css-private-language-selector.html
<!DOCTYPE html>
<html>
<head>
<style>
/* Hide the original text when a non-default language is selected */
#french:target ~ [data-i18n-fr],
#french:target ~ * [data-i18n-fr],
#french:target ~ * * [data-i18n-fr],
#french:target ~ * * * [data-i18n-fr] {
display: block;text-indent: -9999px;
line-height:0;
}
/* Replace text with the translated string from the attribute */
#french:target ~ [data-i18n-fr]:after,
#french:target ~ * [data-i18n-fr]:after,
#french:target ~ * * [data-i18n-fr]:after,
#french:target ~ * * * [data-i18n-fr]:after {
content: attr(data-i18n-fr);
display: block;
line-height: initial;
text-indent:0;
}
</style>
</head>
<body>
<span>Select language:</span>
<a id="english" href="#english">English</a>
<a id="french" href="#french">French</a>
<h2><span data-i18n-fr="French title">English title</span></h2>
<p><span data-i18n-fr="French lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget faucibus lorem, nec ornare</span></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment