Catégorie Web - posté le 06/12/07 09:17:11
Catégorie Web - posté le 07/10/07 10:31:36
Faisant une page internet grand public au boulot, j'ai été obligé de me pencher plus ou moins sérieusement sur la question des respects des standards et du bon affichage sur l'ensemble des navigateurs.
Le principal problème rencontré est qu'il existe encore une bonne part de marché utilisant Internet Explorer 6, qui supporte ou implante très mal certains attributs CSS2 voir CSS1.
Problème 1: la taille d'une "div". Lorsque l'on souhaite spécifié la taille d'une "div", on se voit obligé à ne pas utilisé les attributs "padding", "border". En effet IE6 calcule la taille de la div selon la zone de texte visible, et non avec la zone totale. Exemple, une div ayant un height:30px; border:1px solid black; padding:5px; se retrouve alors avec un height réel de 30+1+5px. Cela cause de nombreux problèmes d'affichage et des décalages fréquents lors de la mise en forme.
Solution 1: utilisé deux "div" imbriqués: En effet, si l'on souhaite utilisé une bordure, ou un padding quelconque, il faut alors imbriqué une div sur laquelle on spécifiera ces derniers éléments.
Problème 2: Les bordures arrondies! Le début de CSS3 implenté par Mozilla Firefox nous propose un joli -moz-border-radius, correspondant au border-radius css3. Cependant sous IE* cet attribut n'est évident pas pris en charge.
Solution 1: Utiliser des images pour afficher l'arrondi. L'idée est bonne mais cependant implique l'imbrication de beaucoup d'éléments et le problème du changement de couleur de fond de la bordure imposant l'edition des images.
Solution 2: Utiliser des balises vides pour simuler la présence d'une bordure arrondie. Je ne fais pas traiter des la technique ici vu que d'autres personnes le font déjà très bien.
En ésperant que ces quelques astuces seront utils à quelqu'un :)
Catégorie Blog - posté le 13/07/07 22:29:58
Hein? quoi? comment?
Vous aussi vous ignoriez l'existence des fichiers HTC? Mince alors, on est vraiment tombé à coté d'une base! Mais que sont-ils?
Les fichiers HTC sont des fichiers associés à votre feuille de style. Ils permettent d'interagir avec votre document XHTML (voir XML je pense) de manière transparente. Ainsi, plus qu'un style à la page, un "thème" complet peut être crée.
Commençons par le commencement: comment intégrer le bazard à votre fichier CSS:
#element {behavior: url('fichier.htc');}
/* ou ce que vous voulez d'autre du style */
div.bidule {behavior: url('fichier.htc');}
OK ca semble facil à faire. Maintenant reste plus qu'à créer le petit fichier .htc qui est sous la forme suivante:
<PUBLIC:ATTACH EVENT="event" ONEVENT="fonction(params)" />
Par exemple:
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="alert('CA MARCHE!')" />
Cet exemple est certes inutile, mais les possibilités de ce système sont alors (presque) infinies. Exemple: rendre les png du css compatibles avec Internet Explorer.
UPDATE: Only IE :@
Catégorie Web - posté le 06/03/07 23:08:39
Encore une news du w3c qui fait plaisir. Ce que sera prochainement le CSS3 grandit rapidement avec aujourd'hui la section Text.
Allez, je vais pas faire semblant de vous résumer les trucs intéressants, mais préfère vous laisser le soin de potasser un peu :)
Ésperons juste que le line-break soit vite implementé, histoire d'arrêter de tronquer les longs mots à coup de scripts plus ou moins foireux...