Avec l’apparition des anti-popups dans nos navigateurs, les vrais-faux popups ou fenêtres modales connaissent un très grand succès.
Scriptaculous a connu son essor grâce à cette technique, puis Lightbox (quasi en même temps que la thickbox, greybox et autre modalbox) a su alléger la sauce avec jQuery en ne gardant que le framework Prototype. Videobox est son équivalent pour les vidéos via les Mootools et le SwfObject. Et c’est là que iBox reprend le système en autorisant divers media et n’oublie pas de proposer une astuce pour les navigateurs sans javascript – accessibilité donc…

Il existe aujourd’hui une foule de scripts souvent basés sur Prototype.js. D’expérience, il faut toujours un peu trituré le CSS ou le javascript pour être sûr d’être crossbrowser et d’obtenir le résultat voulu (positionnement, animation…) surtout quand il s’agit d’y ajouter du Flash ou de faire dialoguer la modale avec son parent… bref pour les plus techniques d’entre nous allez donc jetez un œil sur ce comparatif très exhaustif :

Au passage notons deux excellents plugins wordpress qui utilisent le système lightbox : la version Wordpress de iBox et le gestionnaire de formulaires des plus poussés j’ai nommé cForms II.

Enfin, le framework ASP.NET AJAX a encore … à faire à ce sujet.

Bravo si vous avez cliqué et lu tous les liens de cet article…

On se souvient de la stéganographie, tristement connue pour les ordres qu’auraient dissimulés des terroristes dans des images banales… Voici une variante, en utilisant la propriété pseudo-element de CSS3 (comprenez : ça ne marche que sous Firefox…) : il est possible de cacher une image dans un texte.

Il suffit d’écrire un texte, d’indiquer l’URL d’une image, puis de surligner les texte une fois généré…

Introduction : De l’utilité du Doctype.

Choisir un bon doctype influera énormément sur votre perte de cheveux en venir, lorsque vous essaierez d’aligner une image de fond à droite sur IE5/Win alors qu’elle part de 2 pixels à gauche sur Firefox et qu’elle n’apparaît qu’à moitié dans IE/MAC…
Il y a tout un tas d’articles sur le Web traitant de la définition du doctype et de leur écriture.
Le meilleur (compromis) actuellement semble être :

DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »

Il permet assez de souplesse tout en obligeant une certaine rigueur dans la structure et il me semble que c’est celui qui donne le résultat le moins hétéroclite d’un navigateur à l’autre.

» De l’utilité du doctype
» Les différents doctypes

La problématique : les standards ne sont pas standardisés.
Sous ce titre barbare se cache une réalité : IE5, IE6 et IE7 windows (bravo), IE5 MAC, Firefox, Opera ne réagisse pas de la même façon lorsque l’on pousse dans leur derniers retranchements le XHTML et/ou CSS. Suis-je obligé d’évoquer Safari ?…

Lire la suite »

Pour parer à un certain manque de compatibilité, malgré les standards, entre navigateurs (cross-browsers), on utilise des filtres (hacks) qui permettent d’utiliser un attribut selon le navigateur. Par exemple, pour qu’un attribut ‘width:2px’ soit lisible uniquement par IE, on écrira ‘_width:2px’.
» IE7 est une librairie JavaScript qui fournit une couche d’abstraction des standards W3C pour Microsoft Internet Explorer 5+. Les propriétés et sélecteurs CSS2/3 sont supportées et de nombreux bugs de rendu sont fixés.
/!\ Quelque soit le navigateur, il est certain que les versions futures n’autoriseront plus ce genre de rafistolage…
» Entre standards et hack, Microsoft trouve une parade… histoire de ne pas respecter les standards: ici …
» Une alternative aux hacks.

» À utiliser avec parcimonie…

» Les filtres CSS.

» Opacity et transparence.

» Apparition de l’image en fade.

» Un faux loader… par exemple pour le chargement d’une image.

» Rendre les liens ‘visited’ plus sexy.

» Des info-bulles

» Effet sur un logo.

» De l’ombrage, aussi chez sixApart

» un rollover sur une partie d’une image.

» Généré des dégradés php et css.

» Un rating… très en vogue.

» Des ‘must have‘ de développeur.

» Excellent article sur le drag’n drop en DHTML.

» Puis la notion de tri arriva.

» Puis on en fit des frameworks JavaScript intégrant AJAX : rico et script.aculo.us.

» Moo fx : sans ajax donc plus léger

» Mobile Web Design.

» Rendre son site visible par les mobiles.

Tout ce qu’il faut prendre en considération pour la conception et l’intégration sous PDA et autres. L’auteur dévoile un argument pour développer avec Opera auquel je n’aurais pas pensé…

Si depuis le XHTML la réduction du poids des pages est manifete, les feuilles de style se retrouvent rapidement longuent et peuvent devenir illisibles, voir être appeler sans que l’utilisateur en est l’utilité – pourquoi des styles sur un formulaire s’il n’en existe pas dans la page ?
Il est alors important de prendre de bonnes habitudes, de commenter, d’indenter son code et de le répartir en plusieurs fichier.

» Créer des templates de développement.

» Comment organiser ses feuilles de style.

» Stratégie de cross-browser.

» Organisation par flags.

» S’organiser pour rester accessible.

» Favoriser la maintenance des feuilles de style.

» Le positionnement par z-index.

» Un annuaire de feuille de styles.

» 20 tips.

» 10 tips.