Attention : iPad, CSS Compressor, filtres pour IE… quelques soucis

Attention : iPad, CSS Compressor, filtres pour IE… quelques soucis (le 11 juin 2011)

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…

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1398

2 commentaires

Posté par Jojo le 12/06/2011 à 9:02:58
Merci d'avoir satisfait ma curiosité !
Posté par Nico le 14/06/2011 à 8:32:01
A ton service ! (clin d’oeil)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.