A ce jour, 98% des sites web publics européens sont inaccessibles et de nombreuses personnes ne peuvent accéder aux informations et aux services diffusés sur ces sites.

Pour permettre une sortie plus rapide du décret tant attendu, une pétition pour l'accessibilité numérique vient d'être mise en ligne. Si vous vous sentez concernés, n'hésitez pas à signer la pétition, ça ne coûte rien et ça peut rapporter beaucoup !

http://www.web-pour-tous.org/spip.php?page=petition-accessibilite

Ces tutoriels ont pour but de servir de feuille de route à la mise en place d'un serveur web sous Apache assorti de PHP et MySQL, ainsi que de services mail et ftp. Des conseils en matière de monitoring, de sauvegarde et de sécurité complètent le tour d'horizon.

Deux d'entre eux abordent également de façon rapide l'installation du webmail Roundcube et du panel de gestion DTC pour contrôler plus efficacement les services évoqués précédemment dans le cas d'un hébergement multi-domaines.

Au sommaire :

1. Première connexion : SSH, accès root...
2. Apache et PHP : serveur web
3. MySQL : bases de données
4. Proftpd : serveur FTP
5. Postfix : serveur mail POP3 et SMTP
6. Sauvegarde automatique : backup-manager et export FTP
7. Sécurisation : règles de base, firewall iptables, fail2ban...
8. Bind : serveur DNS
9. Monitoring : monit et logwatch
10. Roundcube (webmail)

Il est possible de les consulter un par un, ou de suivre l'ensemble chronologiquement via Configuration d'un serveur dédié de A à Z pour aboutir à l'installation complète.

Une nouvelle rubrique a été créée sur le forum pour l'occasion : Hébergement et administration serveur. N'hésitez pas à intervenir dans le sujet relatif à cette annonce pour faire part de votre opinion, de vos suggestions ou remarques.

Un énorme merci à Dew pour l'ensemble de ces tutoriels !

Le chantier aura duré six mois et le résultat est plutôt à la hauteur du temps consacré.

Jugez par vous-même la liste des modifications dévoilée par la lettre d'information :

A tous les abonnés :

• Nouvelle interface
• Pilotage de plusieurs projets
• Lancement de tests automatiques et enregistrement direct dans les feuilles d'évaluation
• 25 tests automatiques pour les bonnes pratiques Opquast
• 25 tests automatiques pour les tests du RGAA
• Inviter autant d'utilisateurs que vous voulez sur chaque projet
• Mise à disposition de la liste des tests du RGAA (avec quelques réserves en attendant la publication officielle du référentiel)
• Définition de tâches et mesure des temps cumulés
• Affecter des tâches à vos équipes
• Choisir sa langue de travail (français anglais)

Pour les abonnés professionnels :

• Accès à un validateur automatique par lot (multicritères, multipages)
• Lancement de validations sur n'importe quelle adresse et enregistrement des résultats obtenus dans un nouveau projet ou dans un projet existant
• Test automatique de 1 à 30 pages
• Créer une équipe de collaborateurs société qui bénéficient des avantages de l'abonnement professionnel
• Fiche prestataire sur Opquast.com
• Accès à un module de statistiques complet et d'évaluation multisite
• Création de checklists personnalisées

Et n'oubliez pas le guide :)

Bien sûr, il n'existe pas une manière universelle de coder : chaque personne le fait en fonction de sa logique et de ses préférences. Néanmoins certaines clefs permettent d'obtenir une feuille de style propre et accessible à tous. Voici quelques unes d'entres elle :

Avertissement : il s'agit d'une méthodologie personnelle, reflet de la conception que j'ai d'un fichier CSS, en aucun cas d'une quelconque "règle à suivre" à tout prix.

Introduction, développement, conclusion

Bien hiérarchiser les blocs de déclarations fait partie de ces petits plus qui peuvent apparaître totalement futiles sur une feuille d'une cinquantaine de lignes... Mais qui peut se révéler terriblement utile lorsque l'on se frotte à des fichiers de 1500-2000 lignes. Là, on est vraiment content de savoir où chercher ! :)

La méthodologie est toute simple, c'est comme dans une dissertation.
Prêts pour un petit retour au lycée ?!?

• Tout d'abord il faut introduire le sujet (où, quand, comment) en définissant les propriétés générales de la page et des éléments principaux (html, body, #conteneur_principal, etc...).
• Ensuite on annonce la couleur en présentant le plan du développement et les principaux blocs composant la feuille de style : #header, #menu, #contenu, et autres #footer sont sommairement annoncés. Emplacement, dimensions et arrière-plan suffiront pour l'instant.
• Puis les choses sérieuses commencent avec le morceau du roi : le développement. Il va falloir être inspiré car dans cette partie vous allez reprendre les chapitres annoncés en introduction et... les développer un par un : Où placer le logo dans #header ? Quelle couleur définir pour les liens au rollover dans #menu ? Comment spécifier les puces de liste dans #contenu ? Dois-je aligner les mentions légales à gauche ou à droite dans #footer ?
• Enfin, on conclut en faisant preuve d'ouverture et d'initiative. En dissertation, c'est la partie qui sous-entends : j'ai déjà développé un gros morceau, mais je suis sûr(e) que d'autres éléments mériteraient qu'on s'y intéresse. En CSS, c'est pareil : on se concentre sur les pages spécifiques qui contiennent des éléments particuliers, comme par exemple la page de contact.

En rang deux par deux

Un couple par ligne, c'est bien suffisant !
La pratique démontre qu'il est plus facile de travailler avec une vision globale plutôt qu'avec une vision linéaire. Comprendre les interactions des propriétés les unes avec les autres lorsqu'on les a toutes sous les yeux, c'est quand même mieux..., non ?
Jugez plutôt :

body { margin: 0;  padding: 0 0 2em 0; font: normal 80%/1em "Trebuchet MS", Verdana, Arial, sans-serif; color: black;  text-align: center; background: #F1EFE2; }

body {
   margin: 0;
   padding: 0 0 2em 0;
   font: normal 80%/1em "Trebuchet MS", Verdana, Arial, sans-serif;
   color: black;
   text-align: center;
   background: #F1EFE2;
}

Hiérarchisez vos déclarations

Bien qu'aucun ordre ne soit clairement défini à l'intérieur d'un groupe de déclarations, la pratique m'a démontrée qu'un agencement récurrent facilitait la visualisation des comportements.
Pour ma part, j'utilise toujours le même schéma :

1. Le positionnement => display – visibility – position – top/right/bottom/left – z-index – float – clear
   Il est suivi des caractéristiques qui y sont directement liées.
2. Les marges et bordures => margin – padding – border
   Elles permettent de placer l'élément au sein de la page.
3. Les dimensions => width – height – min-width/max-width – min-height/max-height
   Elles sont calculées à partir des valeurs de marges internes et de bordures.
4. Les propriétés de texte => font – line-height – text-align – text-indent – text-decoration – text-transform – letter-spacing – word-spacing – color
   Elles découlent en partie des déclarations précédemment définies.
5. L'arrière-plan => background
   Placé en dernier, il n'influe sur aucun élément et permet de visualiser rapidement l'élément fautif en cas de problème de rendu.

Soyez Bavard

Un jour, un monsieur a écrit : Pensez à fermer vos balises... Soyez bavards ! :)
En CSS, c'est pareil : il ne faut pas avoir peur de commenter votre code, c'est même vivement conseillé ! Qu'il s'agisse d'annoncer les blocs principaux ou d'expliciter une déclaration, votre feuille gagnera en lisibilité et vous en temps de maintenance (ou de codage).

Par exemple le commentaire ci-dessous permet de retrouver rapidement au premier coup d'oeil la partie du code concernant le #footer parmi les nombreuses autres déclarations lors d'un survol rapide de la feuille de style.

/* -----------*/
/*    Footer  */
/* -----------*/
#footer {
  margin: 0 auto;
  padding-top: 0.5em;
  width: 807px;
  height: 3.5em;
  color: white;
  font-size: 0.95em;
  font-weight:bold;
  text-align: left;
  background: url(design/footer.png) left bottom no-repeat;
}

Ne soyez pas frileux et explicitez le pourquoi de vos déclarations. Cela évite à la relecture de se demander si la ligne incriminée est une erreur, un oubli ou un correctif intentionnel.

#colone_droite {
  float : right;
  margin-right : 38px;
  display : inline; /* Bug IE6 - double marge */
}

Voilà... :)
Je ne pense pas avoir trouvé la solution ultime pour coder des feuilles de styles parfaites, mais ces quelques règles de base fonctionnent pour moi.
Établissez les vôtres et vous verrez que ça vous simplifiera la vie !

--
Billet de Corinne Schillinger (Cygnus sur le forum).

Cependant, avec les grands espoirs placés dans le futur IE8 (annoncé courant 2009), et les mises à jour fréquentes des navigateurs devenus courants tels que Firefox, Safari ou Opera (pour ne citer qu'eux), il se peut que ces méthodes de positionnements soient utilisables en pratique dans des temps pas si lointains.

Son tutoriel, "Mise en page CSS avancée grâce à la propriété display" permet d'ouvrir son esprit à une partie du positionnement CSS de demain et se base sur les valeurs suivantes de la propriété display : inline-block, table-cell, run-in et compact.

Merci à Benjamin pour ce tutoriel, tu as bien mérité tes 30 kiwiz :)

Si des informations importantes nous ont échappé, n'hésitez pas à nous les signaler dans les commentaires. Nous essayerons de garder cet article plus ou moins à jour, et nous ajouterons les informations pertinentes apportées par les lecteurs.

Sommaire

1. Navigateurs multi-plateformes
2. Internet Explorer Windows, pour Windows et autres plateformes
   Informations pour les détenteurs de:
   • Windows 2000 et XP SP1,
   • Windows XP SP2,
   • Windows Vista,
   • OS X sur Mac-Intel,
   • OS X sur Mac PPC,
   • Linux.
3. Safari et le moteur de rendu Webkit
4. Les navigateurs décédés et les négligeables
5. À propos du dual boot

Navigateurs multi-plateformes

Certains navigateurs web sont disponibles pour les principaux systèmes d'exploitation (Windows, Mac OS X, Linux). Il s'agit principalement de Mozilla Firefox et du navigateur Opera.

• Télécharger Firefox (dernière version stable).
• Télécharger Opera (dernière version stable).
• Télécharger SeaMonkey (dernière version stable — SeaMonkey utilise Gecko, le moteur de rendu de Firefox).

Il peut parfois être utile de tester un site avec d'anciennes versions — ou bien des versions beta (futures versions) lorsqu'elles existent — de ces navigateurs. On pourra donc installer:

• Les anciennes versions de Firefox et de la suite Mozilla (explorer la liste des releases en choisissant la version, puis le système d'exploitation et la langue).
• Firefox 3 beta.
• Les anciennes versions d'Opera (là aussi, il faut partir à la chasse au bon fichier!).
• Des versions beta ou preview d'Opera (on retrouve également d'anciennes versions beta ou finales)
• Les anciennes versions de SeaMonkey.

Voilà donc pour les principaux navigateurs multi-plateformes.

Internet Explorer Windows, pour Windows et autres plateformes

Internet Explorer est le principal navigateur du marché, mais n'est théoriquement disponible que pour Windows (mais il y a des ruses possibles, voir plus loin). De plus, la version 7 (dernière en date) n'est disponible que pour Windows Vista et XP SP2.

Pour Windows 2000 et XP SP1

Mauvaise nouvelle: vous ne pourrez pas installer Internet Explorer 7. Si vous disposez de Windows XP SP1, il faudra le mettre à jour pour passer en SP2, ce qui vous permettra d'installer IE 7. Si vous avez Windows 2000... eh bien, pas d'IE 7.

Pour installer Internet Explorer 5.0 et 5.5 (car il est probable que vous ayez déjà la version 6), il est peut-être possible d'utiliser Multiple IE, mais Windows 2000 y est annoncé comme n'étant pas supporté (With a little bit of hacking it could run on Windows 2000 but this was not tested). L'installation devrait fonctionner avec Windows XP SP1.

Pour Windows XP SP2

À l'heure actuelle, Windows XP SP2 est sans doute le système qui permet de faire tourner le plus de navigateurs, et surtout le plus de versions d'Internet Explorer. A priori, vous voudrez disposer au moins d'IE 6 et IE 7, et peut-être aussi d'IE 5.0 et 5.5. La marche à suivre est la suivante:

1. Installer Internet Explorer 7 si ça n'est pas déjà fait.
2. Installer Multiple IE, et choisir les versions souhaitées (par exemple: versions 5.0, 5.5 et 6.0).

Les versions indépendantes d'Internet Explorer installées par Multiple IE reconnaissent correctement les commentaires conditionnels (très utiles si on doit assurer le support d'IE 5.5 par exemple... voire d'IE 6), contrairement à d'autres solutions que l'on peut croiser sur le Web.
Alternativement, on peut conserver Internet Explorer 6 avec Windows XP SP2 (si on n'a pas fait la mise à jour vers IE 7), et installer une version standalone d'IE 7. Attention, si vous tenez vraiment à conserver cette solution, au 12 février 2008 le service de mise à jour Windows Update risque d'installer IE7 comme une mise à jour critique à moins que vous ne désactiviez la chose. Si IE7 s'installe, la solution Multiple IE est toujours là pour vous permettre de retrouver IE 6 et moins.

Nouveau: depuis février 2008, la société Core Services propose le logiciel IETester permettant d'utiliser les moteurs de rendu d'Internet Explorer 6 et 5.5 sous Windows XP. Il est recommandé de mettre à jour Internet Explorer (donc le passer en version 7) avant d'installer IETester. Ce logiciel est pour l'instant en version alpha (instable).

Pour Windows Vista

On pourra lire l'article suivant: Internet Explorer 6 in Windows Vista (IE6) - part 1 (toujours chez TredoSoft). Mais pour l'instant, la conclusion est la suivante: il n'y a pas de moyen raisonnablement simple de faire tourner IE 6 sous Vista. Par conséquent, j'estime que Windows Vista n'est pas à l'heure actuelle (et ne sera peut-être jamais) un environnement de test complet pour l'intégration web.

Une solution possible consisterait à utiliser un logiciel de virtualisation pour installer une version de Windows pouvant faire tourner Internet Explorer 6 (si vous en avez une sous la main!).

Nouveau: depuis février 2008, la société Core Services propose le logiciel IETester permettant d'utiliser les moteurs de rendu d'Internet Explorer 6 et 5.5 sous Windows Vista. Ce logiciel est pour l'instant en version alpha (instable).

Pour Mac OS X, architecture Mac-Intel

La seule solution jusqu'à récemment était de disposer d'un logiciel de virtualisation tel que Parallels, VMWare, QEmu, etc., pour faire tourner une version de Windows directement (là encore, il faut disposer d'un CD d'installation d'une version valide de Windows).

Très récemment est apparu ies4osx, une solution utilisant l'émulateur Wine (dans sa version portée pour OS X, nommée Darwine) et basée sur IEs4Linux. Si le résultat est semblable à celui obtenu avec IEs4Linux, c'est une solution intéressante mais qui a ses limites (notamment pour faire tourner IE 7 — possible mais pas toujours probant —, ou pour les performances du moteur de rendu et du moteur Javascript).

Pour Mac OS X, architecture Power PC

La seule solution à ma connaissance est d'utiliser le logiciel Virtual PC for Mac de Microsoft. Il serait disponible en package avec des licences Windows qui vont bien. Je ne sais pas si cette technologie permet de faire tourner correctement différentes versions d'Internet Explorer (via Multiple IE par exemple).

Pour Linux (architecture i86 uniquement)

Déjà évoquée plus haut, il y a la solution IEs4Linux. Je n'ai pas testé la version 2.99 sortie fin novembre 2007. Comme dit plus haut, c'est une solution intéressante mais pas parfaite. Avec la version précédente, sous Ubuntu 7.10, Internet Explorer 7 était inutilisable ou presque (lenteur extrême), et il semblerait que certaines personnes rencontrent le même problème avec la version 2.99. Ce n'est pas le cas pour d'autres utilisateurs avec sans doute d'autres configurations, et j'ai moi-même installé la version de début 2007 d'IEs4Linux sous Ubuntu 7.04 et obtenu un IE7 tout à fait utilisable. Le résultat est donc variable.

L'autre solution consiste à faire tourner Windows dans une machine virtualisée, avec une solution de virtualisation telle que VMWare (partiellement open source il me semble) ou VirtualBox (open source). La documentation d'Ubuntu-fr recommande VirtualBox. Pour ma part, en utilisant VMWare Server (gratuit, contrairement à VMWare Workstation), j'ai réussi à démarrer le Windows XP SP2 installé sur une autre partition de mon disque dur. J'y ai accès à Internet Explorer 7 (installé via une mise à jour du sytème), 6.0, 5.5 et 5.0 (installés via Multiple IE), et tous les autres logiciels installés sur ce Windows.

Safari et le moteur de rendu Webkit

Le navigateur Safari n'était au départ disponible que pour Mac OS X, dont il est le navigateur par défaut. Depuis sa récente version 3, il est également disponible sous Windows (pour l'instant en version beta). Je ne connais pas de moyen de le faire tourner sous Linux, ou de faire tourner la version 2 sous Windows.

Le moteur de rendu de Safari est Webkit, dérivé de KHTML (moteur de rendu du navigateur Konqueror sous Linux). C'est un moteur de rendu open source, qui sera prochainement utilisé par Konqueror à la place de KHTML. À version égale du moteur de rendu Webkit utilisé, le rendu dans Konqueror et dans Safari devrait être très proche.

Pour information, le projet KDE, dont Konqueror fait partie, travaille à porter certains de ses principaux logiciels pour Windows. Je ne sais pas si Konqueror est déjà installable sous Windows par ce biais, mais dans tous les cas il s'agit d'un projet au stade alpha, c'est à dire expérimental, incomplet et bugué. Pour courageux et bidouilleurs uniquement!

Enfin, le navigateur-en-construction Swift pour Windows utilise le moteur de rendu Webkit. Là encore, c'est un projet au stade alpha, donc à surveiller mais pas à utiliser tout de suite ou même prochainement.

Les navigateurs décédés et les négligeables

Au rang des navigateurs décédés, on compte notamment Netscape (support arrêté au 1er février 2008) et Internet Explorer pour Mac (plus développé depuis 2003, support arrêté en 2005 et plus distribué par Microsoft depuis le 31 janvier 2006). Les parts de marché des deux navigateurs sont très basses, pour ne pas dire négligeables. Sauf peut-être si on cible un public d'utilisateurs de vieux Mac.

En ce qui concerne les navigateurs négligeables, on distinguera:

• les navigateurs pas insignifiants, mais qui utilisent le moteur de rendu d'un navigateur plus répandu et déjà cité (Maxthon et les différentes surcouches d'Internet Explorer sous Windows, Camino sous OS X qui utilise le moteur de rendu Gecko de Firefox),
• les navigateurs que l'on a du mal à lister parce qu'on ne savait pas qu'ils existaient, ou alors on avait oublié.

Voilà, je crois que nous arrivons à la fin de notre panorama. N'hésitez pas à me contredire si je dis des bêtises, à apporter des précisions, etc. Les commentaires sont faits pour ça. :)

À propos du dual boot

Dans cet article, je me suis concentré sur les moyens de faire tourner les différentes versions des navigateurs sous les différents systèmes d'exploitation. Je me suis permis quelques écarts du côté des émulateurs (Wine/Darwine, utilisé par IEs4Linux et ies4osx) et des solutions de virtualisation. On aurait pu citer le dual boot comme solution possible.

Qu'est-ce que le dual boot? Il s'agit d'installer, sur des disques ou des partitions différentes, plusieurs systèmes d'exploitation. Par exemple une version de Windows et une distribution de Linux. En démarrant l'ordinateur, vous avez le choix du système d'exploitation à lancer. Bien entendu, vous devez avoir une licence valide pour chaque système installé, et il faut bien sûr que chaque système soit compatible avec votre matériel. Ainsi, seuls les possesseurs d'un ordinateur Mac-Intel peuvent disposer d'un triple-boot OS X + Windows + Linux.

Le problème du dual boot (ou du triple ou quadruple ou quintuple boot, suivant le nombre de systèmes que vous installez), c'est que pour utiliser un système différent il vous faut rebooter l'ordinateur. Pas très pratique pour effectuer des tests rapidement!

La virtualisation permet de s'affranchir de cette limite. On lance un système donné (celui qu'on utilise couramment), et par-dessus ce système on lance une machine virtuelle avec un autre système. Cela demande par contre d'avoir une quantité de RAM suffisante.

—
Billet compilé par Florent Verschelde

Son article, "XML en quelques mots" est une excellente base pour comprendre et débuter dans ce langage. Il répond aux principales questions habituelles :

• Qu'est-ce que XML ?
• À quoi ça ressemble ?
• Comment définir le contenu d'un document XML ?
• Comment transformer un document XML en... quelque chose d'autre avec XSL ?

Merci à Gilles pour cette introduction, qui appellera peut-être d'autres articles et tutoriels au sujet de XML.

Pour ceux qui n'ont pas tout suivi, voici quelques détails.

Le test Acid2

Qu'est-ce que c'est?

Il s'agit d'une page web utilisant copieusement diverses propriétés CSS et autres technologies standard afin de tester le support de ces technologies par les différents navigateurs. Le résultat attendu est le suivant:

Ça marche dans quels navigateurs?

À l'heure actuelle, seuls deux navigateurs parviennent à afficher correctement ce test: Opera 9 et Safari 3. Mais les premières annonces du type «ça y est, on réussit le test!» datent de 2006, et les versions à venir de Firefox (version 3), et de Safari 3 pour Windows, réussiront le test. On peut d'ailleurs déjà le vérifier grâce aux beta publiques de ces navigateurs.

Dans cette histoire, Internet Explorer était le seul des principaux navigateurs web à être un peu (voire beaucoup) à la traîne. Mais apparemment, le retard est en train d'être comblé, du moins sur les points testés par Acid2. Nous avons donc cette annonce («ça y est, on réussit le test!»), et nous aurons sans doute, quelque part en 2008, des premières versions alpha ou beta publiques permettant de constater cela directement.

À quoi est-ce que ça sert de réussir ce test?

Acid2 ne fait pas partie des recommandations du W3C. C'est un test écrit par certaines personnes au sein du Web Standards Project, et il reflète forcément leur opinion sur ce qu'il faut implémenter le plus tôt possible dans les navigateurs, et le reste.

En étant un peu cynique, on peut dire que l'intérêt de réussir ce test est essentiellement marketing. Depuis les annonces rapprochées d'Opera et d'Apple (Safari) en 2006, suivies par celle de Mozilla (Firefox), ce test a tendance à être vu comme un objectif absolu. Ne pas le réussir, c'est s'exposer à la critique facile de nombreux «connaisseurs mais pas experts», notamment les journalistes de la presse informatique.

En étant moins cynique, on peut dire que cette annonce de Microsoft est une très bonne chose. Même si Acid2 est un test et non pas une garantie du bon support global de CSS, réussir le test demande d'avoir une bonne implémentation de CSS pour de nombreux points essentiels. Bref: Internet Explorer 8 n'aura probablement pas un support parfait de CSS 2.1 (ça n'est le cas d'aucun navigateur!), mais il est certain que l'équipe d'IE8 a fait des progrès très importants pour en arriver là. (Parmi les plus importants pour la mise en page, je citerais le support de display: table et display: table-cell.)

On a donc le droit d'être (raisonnablement) enthousiaste. ;)

Quelles autres nouvelles pour Internet Explorer 8?

C'est là que le bât blesse: la politique de Microsoft semble être «on ne communique sur rien tant que ça n'est pas définitif». C'est à dire que cette information sur le test Acid2 est la première information officielle sur IE8 depuis plus d'un an (mis à part le fait que la nouvelle version s'appellera «Internet Explorer 8»)!

Il y a juste une autre information peut-être capitale (mais pas vraiment confirmée officiellement): le moteur de rendu d'Internet Explorer serait en train d'être refondu (et pas simplement «amélioré» ou «patché»). Pour rappel, le moteur de rendu (rendering engine, parfois appelé aussi layout engine) est la partie du navigateur qui gère l'affichage des pages. Et celui d'Internet Explorer, surnommé «Trident», est une catastrophe.

Le principal problème d'Internet Explorer 7, pour ce qui est du support CSS, vient d'un mécanisme de ce moteur de rendu, mécanisme nommé le «HasLayout». Pour faire bref: il s'agit d'une rustine appliquée à ce moteur de rendu, qui améliore certaines choses mais cause aussi des bugs de rendu plus ou moins aléatoires.

On espère donc que la prochaine annonce officielle concernant le support de CSS sera la suivante: HasLayout is dead.

Mais c'est peut-être se montrer un peu trop optimiste...

Edit: le HasLayout serait effectivement mort et enterré dans IE8, d'après Markus Mielke de Microsoft (merci à Jacques Pyrat pour l'information). Champagne!

--
Billet de Florent Verschelde

Et justement, l'une de ces périodes touche à sa fin...
Et vous, avez-vous suffisamment de Kiwiz pour en profiter ?

Jusqu'à présent, peu de personnes ont profité de l'aubaine.
Pour tout dire, elles se comptent sur les doigts de la main (de Mickey, me précise Raphaël dans l'oreillette) et ... sont toutes Modos. :o'

• Florent V.
• Igor
• Cygnus

Alors, n'oubliez pas que vous aussi avez la possibilité de gagner des Kiwiz et de les échanger contre de beaux lots !
Et si jamais vous êtes déjà un(e) heureux(se) détenteur(trice) de Kiwiz, dépêchez-vous de passer commande !

Car l'opération prend fin le 20 décembre. ;o)

Il ne faut cependant pas voir dans cet article une «bible» du positionnement CSS. Il n'est pas exhaustif et ne cherche pas à l'être. Il s'agit essentiellement d'illustrer une démarche qui consiste à faire des choix rationnels en matière de positionnement CSS. Quelle option de positionnement choisir parmi les différentes possibilités? Benjamin propose la logique suivante:

1. Tant que cela est possible, on gardera les éléments dans le flux (position: static; float: none;).
2. Si le positionnement en flux ne suffit pas (par exemple lorsqu'il faut mettre côte à côte deux blocs), on utilisera la propriété position et notamment le positionnement absolu, sauf lorsque les conséquences de ce positionnement ne sont pas gérables.
3. Enfin, si l'utilisation de position ne convient pas, on pourra utiliser la propriété float, en se rappelant qu'elle n'est pas initialement prévue pour les usages qu'on en fait (ce qui explique quelques difficultés connues de ceux qui sont coutumiers des flottants).

Ça se discute...

Comme tout parti-pris, celui-ci ne fera sans doute pas l'unanimité. Comme l'indique une première réaction que je me permet de citer:

(...) les solutions proposées en utilisant le positionnement absolu prennent des hypothèses très fortes qui sont en contradiction avec un site dynamique ou le contenu n'est pas maitrisé. (...)

Ces contraintes me semble également difficilement gérables dans un contexte de réutilisation des CSS.

Une observation qui me semble très juste. Nul doute que Benjamin apportera quelques précisions sur ces points. :)

On aurait pu rajouter que...

La propriété position a beau être davantage prévue pour positionner les principaux blocs d'une page que la propriété float, elle ne représente pas forcément la meilleure solution offerte par la spécification CSS 2 pour juxtaposer des blocs^[1]. Dans l'absolu, on devrait plutôt utiliser en priorité:

• display: inline-block;
• display: table-cell;

Nous ne les utilisons pas ou peu car ces valeurs de la propriété display^[2] sont mal supportées par les navigateurs. La valeur inline-block n'est pas supportée par Firefox jusqu'à la version 2 (la version 3, actuellement en beta, corrige enfin le tir!) et partiellement supportée par Internet Explorer (version 7 incluse)^[3]. Les valeurs table, table-row et surtout table-cell ne sont pas supportées par Internet Explorer (version 7 incluse).

On gardera toutefois ces options en tête. Il se pourrait qu'elles soient, d'ici quelques années, des solutions de choix largement utilisables, tandis que l'utilisation extensive des flottants sera considérée comme une relique du passé. ;)

--
Florent V.