Si un grand plaisir est toujours là quand je fais une intégration CSS (et heureusement, vu que j'en ai fait mon métier !), le précédent billet présentant cette nouvelle CSS ne montre que le résultat final.

Comme Jojo me l'a aimablement demandé, voici quelques écueils plus ou moins difficiles et divers choix qui se sont présentés à moi.

iPad et positionnement absolu

Pour positionner les liens d'évitement, j'ai coutume d'utiliser ce genre de positionnement :

position:absolute;
left:50%;
margin-left:-470px;

Ce qui consiste en clair à venir mettre le bloc au milieu de la page (50%), et à décaler vers la gauche de la moitié de la largeur du contenu. Cette technique a ses avantages et ses inconvénients. Un des principaux est sur les résolutions inférieures à la largeur du contenu, cela risque de faire disparaître le bloc en question, ce dernier sortant de la fenêtre.

Que ne fut ma surprise en voyant que sur l'iPad, le contenu est trop décalé à gauche, alors que la résolution de ledit engin est de 1024 pixels, ce qui est supérieur à la largeur du contenu.

Un problème de viewport ? Honnêtement, je n'ai pas encore trouvé de raison, j'ai été obligé de contourner le problème via un centrage plus classique avec margin-left:auto;margin-right:auto; et une bidouille sur le bloc suivant (le faire remonter).

CSS Compressor

Pour minifier la CSS, j'utilise CSS Compressor. L'utilitaire marche bien et permet de gagner quelques précieux Ko, notamment en compression maximale.

Toutefois, en utilisant Opera Dragonfly, l'excellent utilitaire inclus avec la dernière version d'Opera, j'ai constaté que quelques erreurs de rendu CSS étaient signalés. En bon perfectionniste, je commence à chercher à les résoudre.

Grosses surprises :

• @charset "UTF-8"; a été bouffé au passage (pas trop grave),
• les règles indiquant les liens externes (voir plus bas) ont également été bouffées,
• plus inquiétant, ma media-query a été rendue non fonctionnelle, des caractères utiles ont été enlevés !

Bug ? Bref : obligé de reprendre quelques notations, faites attention à certaines minifications, elles sont à contrôler avec beaucoup de soin !

Liens externes

Comme indiqué dans le billet précédent, les liens externes sont indiqués par une petite flèche. Cela se fait via :

a[href^="http://"]{
padding-right: 14px; 
background: url(data:image/gif;base64… no-repeat right;
/* je coupe pour des raisons de lisibilité */
}

Tout cela marcherait parfaitement… si des URL absolues (complètes) ne pointaient pas vers d'autres pages de mon site (obligatoire sur les news, le RSS prenant sa source dans ces contenus) : bref, des pages intérieures étaient signalées comme étant des pages externes.

Donc obligé de prévoir d' autres cas pour contourner ce petit problème :

a[href^="https://www.nicolas-hoffmann.net/source/"]{
padding-right:0;
background-image:none;
}

A noter, CSS Compressor a également tendance à être un peu trop agressif avec ce style de notations, surveillez bien vos minifications.

Filtres ou patches pour IE extrêmement lents

Il existe bien quelques filtres propriétaires ou diverses extensions HTC pour générer les box-shadow utilisés sur les images. J'ai bien fait quelques essais, l'effet est correct… toutefois, j'ai pu constater un temps inacceptablement long (plusieurs secondes) pour l'affichage des photos dans les galeries sous IE : comme un effet dispensable ne doit pas prendre le pas sur les performances et le confort de navigation : exit lesdits filtres !

Trouver la limite d'utilisation des media-queries

Au début, je comptais faire une version adaptée aux plus hautes résolutions via media-query, mais je suis vite revenu sur cette fausse bonne idée : cela aurait impliqué de surcharger les images et aurait nécessité quelques requêtes HTTP supplémentaires : en soi, ce n'est pas dramatique.

Comme l'idée était que les images utilisées pour les smartphones et la version classique soient les mêmes et comme je songeais sérieusement à mettre cette CSS par défaut, j'ai préféré éviter de trop complexifier. Bien m'en a pris, le poids d'une consultation d'une page a diminué de moitié, et c'est confirmé par Web page Test et Yottaa, qui me gratifie d'un Yottaarific sur certaines pages…