Le site GPaley.ch a été l'occasion pour moi de gérer un site multilingue via une CSS générée dynamiquement.
Les postulats étaient les suivants :
- Hors de question d'utiliser plusieurs fichiers CSS, tout doit être dans un unique fichier, et le système doit être aussi simple que possible à mettre en place et à maintenir, donc exit les LESS et autres SASS !
- Hors de question de sacrifier les performances (la mise en cache doit être possible sans pour autant bugger).
- Les images du bandeau dans chaque langue utiliseront les sprites CSS.
- La CSS utilisera PHP pour gérer la langue.
Ce n'est pas compliqué, toutefois quelques léger écueils se sont montrés :
- le bandeau peut avoir des dimensions différentes pour chacun de ses liens : par exemple, là où les textes de la navigation sont très courts en chinois, ils peuvent être très longs en allemand et nécessiter des adaptations.
- les liens d'évitement qui peuvent être par exemple longs uniquement en russe et également nécessiter une adaptation, etc.
Le fonctionnement est assez simple, la CSS s'appelle donc styles.php, en voici le début :
<?php
header('content-type: text/css');
ob_start('ob_gzhandler');
header('Cache-Control: max-age=31536000, must-revalidate');
// etc.
L'entête (headers) indique que le fichier PHP est bien de type CSS, et les autres permettent la mise en cache, la compression afin que les performances ne soient pas oubliées (en supposant que les fichiers PHP soient paramétrés pour ne pas être mis en cache).
L'appel à la CSS se fera ainsi :<link href="../layout/css/styles_new.php?lang=cn" rel="stylesheet" type="text/css" media="all" />
La mise en cache se fait sur le querystring, ainsi la CSS mise en cache pour la version chinoise ne viendra pas interférer avec celle de la version anglaise par exemple.
La gestion multilingue dans la CSS s'effectue par exemple ainsi :styles.php, en voici le début :
<?php
if (!empty($_GET['lang'])){
$lang=$_GET['lang'];
}
else $lang='fr';
?>
#navigation{
height:60px;
<?php
echo ' background:#262223 url(../images/menu-' . $lang . '.jpg) 0 0 no-repeat;';
?>
width:713px;
/* ici les autres propriétés */
}
En supposant que vos images soient bien nommées selon la même logique. Autre cas :
<?php
if ($lang=='en'){
?>
/* ici les coordonnées des sprites CSS pour la version EN */
<?php
}
elseif ($lang=='de'){
?>
/* ici les coordonnées des sprites CSS pour la version DE */
/* etc. */
Ainsi, cela permet d'adapter très simplement les blocs selon chaque langue. Comme la disposition reste sensiblement la même pour chaque langue, les adaptations sont peu nombreuses et rapidement déployées. La possibilité d'utiliser d'autres variables PHP pour les couleurs par exemple est tout à fait envisageable, même si pour cet exemple, je n'en ai pas eu le besoin.
Au final, l'ajout de nouvelles langues est très aisé, et il reste possible de faire des adaptations pour une unique langue le nécessitant.
Le système reste extrêmement simple à maintenir, ne nécessite rien d'autre que des bases en PHP (pas de framework comme SASS).
Bref, soyez fainéant, et vive la simplicité !