Technologie de l'information et de la communication
Un peu geek mais surtout un dinosaure, de ceux qui ont soudé les composants de leur première machine, flashé la mémoire et publié dans Hebdogiciel.
La citation du jour
Quand une parole est lâchée, même quatre chevaux seraient en peine pour la rattraper.  (Proverbe chinois )
La réflexion du jour
La science est le seul domaine où la preuve qui y règne souvent en maître peut-être remise en cause par la science elle-même.
Activités
geek - cycliste - généalogiste - Savoir - lecteur - collectionneur - Philosophe - citoyen - marcheur - scripteur - Photographe - instituteur - enseignant en sciences - enseignant formateur - journaliste local - bénévole
Les mots clés
doc TIC * SPIP * Wikipedia * web & internet * Php * OVH * informatique * Sql * Wamp * Qwant * Firefox * LibreOffice * Thunderbird * FOAD * Buttercup * Mastodon * PeerTube * Chatons * OpenStreetMap * IrfanView * E-learning
Lorand

Site personnel de Roland Bouat. Pour les curieux : Lorand est un anagramme de Roland.

Feuilles de style conditionnelles ou Hacks CSS ? Réponse : Ni l’une ni l’autre !

...ou... <html> classes conditionnelles

Mots clés : geek , SPIP , web & internet

lundi 20 octobre 2008


Traduction de la page "Conditional Stylesheets vs CSS Hacks ? Answer : Neither !" (ma totale absence de maîtrise de la langue est un handicap certain : ceci est une compensation).

De ce que j’ai vu un bon nombre de développeurs ces jours-ci sont partagés entre des feuilles de style conditionnelles et des hacks css.

Vous avez l’habitude de voir ceci :

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
  <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  />< ![endif]-->
  <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  />< ![endif]-->

Mais probablement aussi beaucoup de choses comme :

div.infoBox { float: left; margin-left: 10px; _margin-left: 5px; }

Les correctifs CSS pour cibler des navigateurs spécifiques restent là où se trouvent les autres styles, mais ils ne sont certainement pas validés. Depuis quelque temps, la communauté des normes s’est ralliée autour de feuilles de style conditionnelles pour résoudre le problème de validation.

Mais il y a quelques problèmes :

Les feuilles de style conditionnelles signifient 1 ou 2 demandes HTTP   supplémentaires à télécharger.
Comme elles se trouvent dans le <head>, le rendu de la page attend jusqu’à ce qu’ils soient complètement chargés.
De plus, "Yahoo’s internal coding best practices" ne recommandent pas les feuilles de style conditionnelles.
Il peut séparer une seule règle CSS en plusieurs fichiers. J’ai passé beaucoup de temps à me demander "D’où vient cette règle !?" quand il s’est avéré qu’elle était cachée dans une feuille de style conditionnelle.

Voici ma solution :

<!--[if lt IE 7]>      <html class="ie6"> <![endif]-->
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html>         <!--<![endif]-->

En utilisant les mêmes commentaires conditionnels, nous ajoutons simplement conditionnellement une classe supplémentaire sur la balise html. Cela nous permet de conserver notre fichier css spécifique au navigateur dans le même fichier :

div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }

De plus, il valide totalement et fonctionne dans tous les navigateurs.

(Chapeau bas à Paul Hammond et Adam McIntyre pour s-m-r-t.)

2010.05.07 : Patrick O’Neill a mis cette technique sur certains stéroïdes. J’aime plutôt ça. Voir ci-dessous :
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

Doug Avery de Viget soulignent qu’ils préfèrent utiliser cette technique sur la balise HTML, libérant ainsi la balise body pour les classes dynamiques. Ça marche très bien. Plus tard, j’ai changé tous mes sites pour l’utiliser sur HTML au lieu de body, en fait... De plus, c’est très bien combiné avec la technique Avoiding the FOUC v3.0 ainsi qu’avec Modernizr.

Quelque chose de différent ?

2010.05.07 : Oh, chéri, tu vas le faire. Mat Marquis a souligné que le code laisserait une page -less dans IE10, etc. (Eh bien pas vraiment parce qu’IE construirait automatiquement une étiquette de BODY, mais de toute façon...) Un peu de gt plus tard et nous sommes bons.

2010.05.20 : Il s’avère que les conditions IE autour des fichiers css pour IE6 peuvent ralentir le temps de chargement de votre page dans IE8 ! C’est fou, non ? La solution ici évite cela, tout comme le fait de forcer IE à rendre les bords.

2010.06.08 : Et puis... Rob Larsen souligne que lorsque ces classes conditionnelles sont appliquées à l’élément HTML, elles ne bloquent pas. Aucun commentaire vide n’est nécessaire. Je pense que c’est un nouveau gagnant.

2010.09.07 : La mise à jour suit !

A mettre dans la balise html

Voici la nouvelle recommandation, et celle qui est utilisée dans la boîte de dialogue HTML5.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Pourquoi ?

Ceci corrige un problème de blocage de fichiers découvert par Stoyan Stefanov et Markus Leptien.
Il évite un commentaire vide qui corrige aussi le problème ci-dessus.
Les CMS   comme Wordpress et Drupal utilisent la classe corporelle plus fortement. Cela simplifie l’intégration
Il ne validera pas en html4 mais il est correct en html5. Traitez-en.
Il joue bien avec une technique pour lancer votre JavaScript spécifique à la page en fonction de votre balisage.
Il utilise le même élément que Modernizr (et Dojo). Ça fait du bien.

J’ai laissé une classe vide là-dedans parce que vous allez probablement y mettre un no-js ou autre chose. Sinon, supprimez. Aussi, si les commentaires supplémentaires autour de cette dernière balise vous semblent bizarres, blâmez Dreamweaver, qui efface les commentaires conditionnels normaux !IE

2010.10.24 : Voici un rappel et une critique virulents de Louis Lazaris. Je lui ai demandé de résumer son point de vue qu’il a partagé dans son billet Ne pas utiliser les commentaires conditionnels pour créer des classes pour IE7+, parce que je pense que c’est un point très sage...
Cette solution tend à encourager les développeurs à ignorer IE en grande partie pendant le développement, et à le hacker pour le soumettre à la fin. C’est en fait la pire chose que vous puissiez faire quand vous écrivez votre CSS, parce qu’elle vous forcera à utiliser des hacks ou des remèdes qui ne sont pas nécessaires. De nombreux piratages et contournements peuvent être évités en codant simplement des choses pour fonctionner dans IE dès le début. Si vous testez IE au début du développement, vous devriez faire de votre mieux pour utiliser un code conforme aux normes qui est optimisé pour les performances et la maintenance future. La forge de style crée du code qui est moins optimisé dans ces deux domaines. Bien qu’IE puisse souvent être difficile à travailler avec, il est possible de le faire fonctionner dans la plupart des circonstances en utilisant un bon code - il suffit juste de prévoir.

C’est très intelligent.

En réponse à son billet, j’ai dit..

Lorsque vous vous attaquez aux incohérences d’IE, essayez d’abord de les corriger sans mettre en relief l’IE en particulier. Dans de nombreux cas, il s’agit d’ajouter une largeur ou une hauteur. ou un débordement:caché. En général, être plus explicite sur l’apparence de l’élément aide IE6 et IE7 grandement.

Quelque chose à garder à l’esprit. :)

2011.03.18 : Rachel Moore a laissé un commentaire vraiment sympa explorant les avantages et les inconvénients de cette technique

2011.04.11 : La communauté HTML5 Boilerplate a creusé ceci et a trouvé beaucoup plus de détails sur la syntaxe. Espérons que j’aurai l’occasion de mettre à jour ce billet avec ceux qui apprennent, mais jusqu’à ce moment-là.. cliquez sur !

2011.05.18 : Mise à jour de l’extrait principal pour correspondre aux astuces de syntaxe que nous avons utilisées dans h5bp. Voir le lien ci-dessus pour plus de détails fous.

2011.09.02 : Démarrage d’une liste de langues vers lesquelles cette technique a été portée

Classes conditionnelles, portées

2011.11 : Leif Halvard Silli, an awesome web standards hacker from Norway wrote in to say…
An earlier presentation of the idea that this page builds on, can be found at Big John’s classic IE hacking web site positioniseverything.net, in a guest article from February 2007 by Hiroki Chalfant entitled “#IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet”.
2012.01.17 : Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single .oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t fly. Anyway, our current version..
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

Publié par Paul Irish le 20 octobre 2008


Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?

Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Brèves
19 octobre – Correction des erreurs d’encodage terminée...

... peut-être !
La probabilité que l’encodage se soit emmêlé les pinceaux vient probablement d’une mise à jour de l’ensemble php/Mysql mais également, (...)

1er juin – Les "bizarreries" continuent...

Déjà un mois que je me bagarre avec elles ! Le progrès principal est la probable identification. Il s’agit des mises à jour Apache, MySql, PHP, qui (...)

1er mai – Bizarrerie sur mon site

Depuis que le site a été restauré, il semblerait qu’il y ait eu un bug lors de la restauration, bug ne concernant que certaines informations (dont, (...)