384400/-multilingual-content-with-only-css.md

## -multilingual-content-with-only-css.md

      
    Raw
  

              -multilingual-content-with-only-css.md
            
          
    En identifiant la langue utilisée par le navigateur, il est fort simple d'afficher une page dans différentes langues grâce à Cascading Style Sheets (Css, c'est-dire les feuilles de style en cascade).
Cette solution utilise un code réduit en JavaScript.
En Php, côté serveur, nous aurions pu recourir à $_SERVER['HTTP_ACCEPT_LANGUAGE'] ou, mieux, à la fonction locale_accept_from_http et internationaliser nos chaînes de caractères avec la bibliothèque gettext mais ce travail est fastidieux.
Nota.

Il est déconseillé de représenter une langue avec un drapeau. Tous les francophones ne sont pas français, par exemple.
À l'usage, il nous paraît plus simple d'appeler les fonctions JavaScript directement dans le code Html, et cette pratique est validée par le W3C : la syntaxe est réduite et nous n'avons pas ainsi à nous occuper des gestionnaires d'évènements gérés différement selon les navigateurs.
L'identification de la langue en JavaScript avec navigator.language est loin d'être parfaite, car il existe des différences entre les navigateurs, voire entre utilisateurs. Aussi, dans le code en JavaScript, appliquons-nous la langue française si nous ne pouvons pas identifier correctement l'information. (Les codes des langues et des pays respectent la norme Iso 639-1 ou 3166-1, c'est-à-dire qu'ils comportent deux - voire trois ? - lettres.) Si la langue ne correspond pas à celle de l'utilisateur, il pourra cliquer sur le bouton ad hoc et le script fonctionnera normalement.


## multilingual-content-with-only-css.html
<!DOCTYPE html>
<html lang="fr-FR">
	<head>
		<meta charset="utf-8">
		<title>Calendrier</title>
		<style>
			body {
				font-family: sans-serif;
				margin: 0 auto;
				padding: 1em;
				width: 1024px;
			}
			.french {
				display: block;
			}
			.userlang-fr .english {
				display: none;
			}
			.userlang-fr .spanish {
				display: none;
			}
			.userlang-en .english {
				display: block;
			}
			.userlang-en .french, .userlang-en .spanish {
				display: none;
			}
			.userlang-es .spanish {
				display: block;
			}
			.userlang-es .french, .userlang-es .english {
				display: none;
			}
			.switch {
				align-content: space-between;
				display: flex;
				justify-content: space-around;
			}
			.btn {
				border: none;
				color: white;
				cursor: pointer;
				font-size: 1em;
				padding: 1em 2em;
				text-align: center;
				text-decoration: none;
			}
			.btn-french {
				background-color: #4caf50;
			}
			.btn-english {
				background-color: #008cba;
			}
			.btn-spanish {
				background-color: #f44336;
			}
		</style>
	</head>
	<body>
		<div class="switch">
			<button id="target-fr" class="btn btn-french" onclick="selectLang(this.id)">Français</button>
			<button id="target-en" class="btn btn-english" onclick="selectLang(this.id)">English</button>
			<button id="target-es" class="btn btn-spanish" onclick="selectLang(this.id)">Español</button>
		</div>
		<h1 class="french">Calendrier</h1>
		<h1 class="english">Calendar</h1>
		<h1 class="spanish">Calendario</h1>
		<p class="french">Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi</p>
		<p class="english">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
		<p class="spanish">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>
		<p class="french">Janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre</p>
		<p class="english">January, February, March, April, May, June, July, August, September, October, November, December</p>
		<p class="spanish">Enero, Febrero, Marzo, Abril, Mayo, Junio, Julio, Agosto, Septiembre, Octubre, Noviembre, Diciembre</p>
		<script>
			var targetLang = navigator.language;
			if (targetLang.length < 2 || targetLang.length > 3) {
				document.querySelector('html').classList.add('userlang-fr');
			} else {
				document.querySelector('html').classList.add('userlang-' + targetLang);
			}
			function selectLang(id) {
				document.querySelector('html').classList.remove('userlang-' + targetLang);
				targetLang = id.substr(7);
				document.querySelector('html').classList.add('userlang-' + targetLang);
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="fr-FR">
	<head>
	<meta charset="utf-8">
	<title>Calendrier</title>
	<style>
	body {
	font-family: sans-serif;
	margin: 0 auto;
	padding: 1em;
	width: 1024px;
	}
	.french {
	display: block;
	}
	.userlang-fr .english {
	display: none;
	}
	.userlang-fr .spanish {
	display: none;
	}
	.userlang-en .english {
	display: block;
	}
	.userlang-en .french, .userlang-en .spanish {
	display: none;
	}
	.userlang-es .spanish {
	display: block;
	}
	.userlang-es .french, .userlang-es .english {
	display: none;
	}
	.switch {
	align-content: space-between;
	display: flex;
	justify-content: space-around;
	}
	.btn {
	border: none;
	color: white;
	cursor: pointer;
	font-size: 1em;
	padding: 1em 2em;
	text-align: center;
	text-decoration: none;
	}
	.btn-french {
	background-color: #4caf50;
	}
	.btn-english {
	background-color: #008cba;
	}
	.btn-spanish {
	background-color: #f44336;
	}
	</style>
	</head>
	<body>
	<div class="switch">
	<button id="target-fr" class="btn btn-french" onclick="selectLang(this.id)">Français</button>
	<button id="target-en" class="btn btn-english" onclick="selectLang(this.id)">English</button>
	<button id="target-es" class="btn btn-spanish" onclick="selectLang(this.id)">Español</button>
	</div>
	<h1 class="french">Calendrier</h1>
	<h1 class="english">Calendar</h1>
	<h1 class="spanish">Calendario</h1>
	<p class="french">Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi</p>
	<p class="english">Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</p>
	<p class="spanish">Domingo, Lunes, Martes, Miércoles, Jueves, Viernes, Sábado</p>
	<p class="french">Janvier, février, mars, avril, mai, juin, juillet, août, septembre, octobre, novembre, décembre</p>
	<p class="english">January, February, March, April, May, June, July, August, September, October, November, December</p>
	<p class="spanish">Enero, Febrero, Marzo, Abril, Mayo, Junio, Julio, Agosto, Septiembre, Octubre, Noviembre, Diciembre</p>
	<script>
	var targetLang = navigator.language;
	if (targetLang.length < 2 \|\| targetLang.length > 3) {
	document.querySelector('html').classList.add('userlang-fr');
	} else {
	document.querySelector('html').classList.add('userlang-' + targetLang);
	}
	function selectLang(id) {
	document.querySelector('html').classList.remove('userlang-' + targetLang);
	targetLang = id.substr(7);
	document.querySelector('html').classList.add('userlang-' + targetLang);
	}
	</script>
	</body>
	</html>