Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - Balise - css

Des nouvelles d'IE8

Hadrien — Sat, 20 Sep 2008 08:43:00 +0200

L'équipe de développement d'IE8 nous annonce une petite fonctionnalité fort amusante dans IE 8. Mais il faut d'abord expliquer quelques points.

Quand un serveur web envoi un document (html, ou autre), il passe des informations dans l'entête du fichier, informations qui ne sont pas affichées à l'utilisateur et qui sont destinées au logiciel client. Parmi ces information, est envoyé le "content-type", le type de contenu du fichier. Il s'agit d'indiquer au logiciel client de quel type est le document envoyé qui est souvent un fichier texte.
Par exemple, un fichier html est un fichier texte. Il faut donc spécifier au navigateur que ce texte est du html grâce au content-type 'text/html'. Si je veux que mon fichier html soit affiché en tant que texte, donc, non rendu, je le spécifie comme type "text/plain".

Bon, alors ça c'est pour la théorie. C'est à dire que c'est ainsi que fonctionnent tout les navigateurs et qu'ils doivent procéder. Maintenant, occupons nous d'Internet Explorer. IE 6 et IE 7 ont l'excellente idée de se foutre royalement du content-type et d'essayer de le deviner par lui même. Si on lui envoie un fichier texte défini comme texte brut (text/plain) mais contenant du code html, IE6/7, eux, vont quand même rendre la page html. Les développeurs de IE 8 tentent de résoudre ce problème pour rentrer dans la norme. Dorénavant, IE 8 rendra ce fichier servi en tant que text/plain en texte …à condition d'avoir indiqué un autre paramètre en header : X-Content-Type-Options: nosniff !!

On est donc obligé de rajouter un header propriétaire et non standard à tous nos fichiers web pour indiquer uniquement à IE8 qu'il doit se comporter comme tout les navigateurs. C'est absolument génial, personne à part Microsoft n'aurait osé faire ça.

En pratique, on comprends qu'ils soient "obligés" de procéder de la sorte pour ne pas rendre tout les intranet incompatibles avec IE8. Ils sont piégés dans leurs propres bugs. En corrigeant ce dysfonctionnement, les entreprises seraient forcées de mettre à jour leurs intranets, qui ont été codé il y a plus de dix ans, pour le navigateur de l'époque : IE6, bourré des bugs qu'on connaît tous aujourd'hui, dont celui dont on parle dans ce billet. Si leurs pages html servies en text/plain s'affichent correctement aujourd'hui sur IE6/7, elles ne s'afficheraient plus du tout sur IE8. Et bien sur, ça serait la faute à Microsoft, donc on laisse le bug. Ben pour une fois, non !

Source : IEBlog

Coder sur iPhone… encore :p

Hadrien — Fri, 08 Aug 2008 18:13:00 +0200

Regardez ce genre de design :

Pour un navigateur "ancien" (c'est à dire qui ne connaît pas CSS3), réaliser un cadre de ce genre, avec coins arrondis, dégradés, etc, est un très dur labeur. Ça se joue à coup de multiples <div /> imbriqués dont les background sont les coins de l'image savamment découpée, le tout en deux version : une pour IE, la seconde pour les autres… C'est à cause de ça que le web2.0 a beaucoup été designé (du verbe to design :p) à coup d'aplat de couleur.

Et bien avec Safari 3, finie l'usine à gaz ! Une propriété magique, propriétaire pour le moment, mais en cours de validation par le W3C fait des miracles. Il s'agit de -webkit-border-image.

Pour faire une bulle comme sur le screenshot, nous n'avons besoin que d'une image :

Et de la css suivante :

.bulle {
	border-width: 16px 8px 8px 8px;
	-webkit-border-image: url('bubbleWhite.png') 16 8 8 8;
}

Appliqué au XHTML suivant :

<div class="bulle">
	Je suis dans une bulle \o/
</div>

Et c'est tout. La bulle pourra s'agrandir en hauteur et en largeur sans aucun étirement ou décalage.

Comment cela fonctionne-t-il ?

On définit tout d'abord l'épaisseur de chaque bordure du cadre :
border-width: haut droite bas gauche;
Dans mon cas, la bordure du haut sera plus épaisse car il faut y faire rentrer la flèche de la bulle.

Ensuite, on indique quelles zones de l'image de fond seront appliquées dans les bordures :
-webkit-border-image: url('bubbleWhite.png') haut droite bas gauche;
On prends la zone de l'image de 0px du haut à 16px et on la met sur la bordure du haut, la zone de 0 pixel de droite à 8px et on la calle à droite, etc. Tout le reste fait partie du centre du contenant qui s'étirera selon le contenu. Tout ce qui est dans les bordure gardera sa taille initiale.

Les zones rouges sont les parties de l'images qui seront placées en tant que bordure, le reste sera étirée en tant que background :

C'est magnifique !

PS : DaScritch nous indique que ça marche aussi de la même façon sur Firefox 3 :D

Coder pour l'iPhone

Hadrien — Fri, 01 Aug 2008 21:09:00 +0200

…c'est fantastique. Je parle de web dev pour Safari Mobile, pas du SDK Cocoa touch.

Quand on dev du web de façon classique, c'est à dire en privilégiant IE, puis Firefox, et éventuellement si on a le temps, Safari et Opéra, on est obligé d'utiliser les même technos de 5 ans d'âge, de passer du temps à faire des version différentes pour IE qui ne respecte rien, même pas ses propres standards proprios. Obligé de faire des design laids, car IE6 ne sait pas gérer le PNG24, impossible de s'amuser avec les fantastiques CSS3 que seul Safari gère pour le moment.

L'iPhone utilise donc Safari, le navigateur le plus en avance technologiquement. En plus des CSS3, il inclue des propriétés CSS (propriétaires, ok, mais proposées au W3C pour compléter CSS3) très pratiques qui permettent de gagner un temps fou pour faire des choses, qui nécessitent l'utilisation de grosses librairies Javascript pompant la CPU sur les autres navigateurs.

Parmi celles-ci, on trouve -webkit-transition-property et -webkit-transition-duration. Ces deux propriétés CSS permettent de réaliser des transitions en une seule ligne de code JS. Sur les autres navigateurs, il faut définir des intervalles qui vont éxécuter les étapes de l'animation toute les 10 millisecondes, procédé chiant à coder (heureusement il y a des librairies qui aident à faire ça facilement). Avec Safari, il suffit de préciser dans la feuille de style quelle est la propriété qui devra produire une animation et sa durée. Ensuite, dès que cette propriété est modifiée par javascript (par changement de la variable style ou par changement de classe), la propriété subira une transition d'une fluidité parfaite.

Exemple : CSS :

.panel {
	width: 100px;
	-webkit-transition-property: width;
	-webkit-transition-duration: 1s;
}

XHTML :

<div class="panel" id="panel">
	kikoo
</div>

Javascript :

document.getElementById('panel').style.width = '500px';

Le conteneur va s'agrandir progressivement de 100px à 500px en 1 seconde, avec une parfaite fluidité.

Pour conclure, c'est vraiment très agréable de pouvoir utiliser les dernières technologies web sans se prendre la tête en voyant un résultat tel qu'on l'a imaginé dès le premier jet, sans retouche. Si Safari était le navigateur le plus utilisé, le métier de web développeur serait tellement beau…

Plus d'infos et des exemples

Que fait un geek quand il s'ennuie ?

Hadrien — Sat, 03 May 2008 22:11:00 +0200

Les jours de week end où on sait pas quoi faire, la plupart des gens tondent le gazon, font du jardinage, vont se ballader… Le geek, lui, code. Et donc j'ai codé en une heure ce superbe programme totalement inutile mais fun qui permet de cacher une image dans un texte grâce à une propriété CSS 3 disponible uniquement dans Firefox (::-moz-selection). Et ça donne ça :

ceci

Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...
Alt-i, des informations alternatives...

Si vous êtes sous Firefox et que vous sélectionnez ce blog de texte, vous pourrez voir une surprise. Et si vous voulez faire vos propres images cachées, vous pouvez utiliser le script suivant.

Internet Explorer 8 passerait l'Acid 2 test

Hadrien — Thu, 20 Dec 2007 09:57:00 +0100

D'après le blog MSDN, Internet Explorer 8 passerait enfin le test Acid2 du WebStandard Project.

En témoigne ce screenshot :

Par contre, on peut voir à la fin du billet qu'ils ont donné un nom maudit au projet IE 8 :

Integrated Files
//depot/longhorn_ie8/Inetcore/ieframe/shdocvw/hlframe.h
//depot/longhorn_ie8/Inetcore/ieframe/shdocvw/iedisp.cpp
//depot/longhorn_ie8/Inetcore/lib/network/dataprot/dataprot.cxx
//depot/longhorn_ie8/Inetcore/lib/network/dataprot/iel3/dataprot.pass0_publish_to_inetcore_internal_inc
//depot/longhorn_ie8/Inetcore/lib/network/dataprot/ut_dataprot/fakeurlmon.cxx

Longhorn, c'était le nom de Vista au départ… on voit où ça les as mené.