16 décembre 2014

CSS alternatifs aux pseudo-classes avec PHP et Modernizr

PHP paramètre JavaScrit qui charge le cas échéant des CSS alternatifs : eux-mêmes générés via PHP uniquement dans les cas nécessaires…
exemple
.

Il est difficile lors de l'exécution PHP, d'anticiper des particularités telles que la présence de JavaScript, l'interprétation de HTML5, le niveau de CSS supporté etc. Il faut en général générer une page qui s'adaptera aux contraintes du front une fois chargée par le navigateur.

Il reste possible de ne générer de solutions alternatives aux CSS avancés que dans les cas précis où cela soit nécessaire.
Palier l'absence de support des sélecteurs avancés de CSS 3 par exemple, uniquement pour les navigateurs concernés, IE 8… : et plus précisément, pour tous les navigateurs identifiés par Modernizr comme ne supportant pas cette techno.

S'appuyer sur PHP pour la structure de la page. S'appuyer sur JavaScript pour les capacités du navigateur, et ne solliciter ainsi PHP qu'à bon escient.

Exemple développé pour 'last-child' - dépôt sur Github.

Développement avec 'last-child'

Prenons un exemple où il s'agisse de compenser des sélections basées sur 'last-child'. Nous aurons besoin de http://modernizr.com/download/#-shiv-teststyles-css_lastchild (avec html5shiv pour assurer l'interprétation des nouvelles balises.)

Le dernier élément peut être le quatrième, le dixième… ou le sixième. Cette valeur est stockée dans une variable PHP :

<?php
$n = 6;
?>

Il s'agit en l'occurrence du dernier '<li' de menus de navigation tous en caractères gras sauf ce dernier.
Dans les CSS principaux :

nav li {
 font-weight: bold;
}
nav li:last-child {
 font-weight: normal;
}

- interprété par Internet Explorer à partir de la version 9.

Dans la page, avant l'appel des styles, charger Modernizr.

Après l'appel des styles principaux, n'appeler les styles alternatifs qu'en fonction de la détection effectuée par Modernizr :

<script>
if (! Modernizr.lastchild)
 document.write('<link rel="stylesheet" href="path/old.css.php?last=<?php echo $n; ?>">');
</script>

PHP paramètre ici JavaScrit qui charge le cas échéant les CSS alternatifs - eux mêmes générés en PHP, nous allons le voir.

Génération des styles alternatifs à 'last-child'

Voici pour générer les styles alternatifs, dans le fichier 'old.css.php' - retours à la ligne et commentaires compris :

<?php
header ("Content-type: text/css; charset=utf-8");
if (count($_GET) > 0 && ! empty($_GET["last"])) {
 $last = htmlentities($_GET["last"]);
 if ($last > 0 && $last < 25) { //limite
  echo PHP_EOL.'/* alternative à nav li:last-child  pour '.$last.' éléments */'.PHP_EOL;
  echo 'nav li';
  for ($i=1;$i<$last;++$i)
   echo ' + li ';
  echo ' {'.PHP_EOL.' font-weight: normal;';
  echo PHP_EOL.'}'.PHP_EOL;
} }
?>

Petite illustration des styles générés.

Ces styles alternatifs ne sollicitent donc PHP que lorsqu'il faut les générer vers des navigateurs techniquement obsolètes.
Nota bene : garder à l'esprit l'impact possible sur la cascade des styles.

1 commentaire:

interfaktor a dit…

Solution purement front avec http://selectivizr.com/