Catégorie Web - posté le 23/07/08 12:18:24
Il existe un problème (oui, un de plus...) dans Internet Explorer (IE) avec certaines propriétés CSS, et leur manipulation avec Javascript.
Lorsque l'on utilise une réference vers un objet (typiquement, $('id_de_l_objet') avec prototype par exemple), certaines propriétés Javascript disparaissent.
Par exemple :
$('id_objet').style.backgroundColor='red';
fera planter le javascript de la page.
Pour contourner le problème, il faut donc utiliser une variable intermediaire...
var item=$('id_objet')
item.style.backgroundColor='red';
0 commentaire(s) Astuce CSS IE Bug BackgroundColor Javascript
Catégorie Web - posté le 06/12/07 09:17:11
- Preview des ajouts de HTML 5 par alistapart
- Normes html5 par le w3c
- Aide au developpement pour l'HTML5 par le w3c
- Une page de test css3 pour votre navigateur par css3.info.
Catégorie Web - posté le 18/11/07 17:23:36
Comme certaines personnes le savent déjà, j'ai assisté ce jeudi et vendredi aux conférences Paris Web 2007. Seul point noir de ces jours passés à Paris: la grève de la RATP/SNCF. Au final j'ai du prendre l'avion pour me rendre chez mon hôte (que je remercie vraiment pour l'accueil).
Un résumé exhaustif serait difficile à écrire: voici donc quelques notes que j'ai pu prendre lors des conférences.
Conférences Décideurs
Lors d'une proposition de contrat pour développer un site Internet, il est important de se présenter comme un conseiller, plus que comme un exécutant: En effet un exécutant se verra vite limité par ce que désire la personne; un conseiller expliquera les avantages d'un web accessible et du respects des standards tout en écoutant les besoins.
Il est important de sensibiliser sur l'aspect recensement d'un nom de domaine: le nom de l'entreprise est parfois peu parlant, et un mini-descriptif dans le nom de domaine peut souvent aider au référencement.
Mettre en avant les standards dans le cahier des charges en expliquant ses atouts.
En dernier recours: savoir dire non à un employeur, lorsque celui-ci est trop exigeant et désire une page que l'on prévoit à l'avance peu utilisable.
Toujours avoir un lien disponible facilement et sur toutes les pages pour contacter le webmaster et/ou la direction.
Outils utilisables:
- Ocawa (Extension firefox)
- Validateurs (W3C et Acces-pour-tous, Cynthia Says)
- Utiliser du javascript plutôt que l'attribut _blank (peu judicieux je pense)
- Listes de diffusions: accesstech, RGAA, www.wefail.com/twats http://www.w3.org/TR/WAI-AUTOOLS/.
Conférences Flash/PDF
Lors de cette conférence, il y a été dit beaucoup de choses, mais un résumé court pourrait être:
Il faut toujours ouvrir une alternative aux documents PDF/Flash proposés sur le Site. Le flash se doit d'être décoratif et non proposer du contenu.
Conférences Multilinguïsmes par Steph Booth)
Dans le cadre de sites multilingues, il est bon de proposer un contenu alternatif selon la configuration de l'utilisateur:
- Privilégier la préférence de compte utilisateur puis
- Utiliser le Header http accept-langage
- la préférence de langue du navigateur internet
- la langue de l'OS
- la localisation physique (en dernier recours)
Un conseil judicieux: ne pas utiliser de drapeaux pour la localisation: un suisse ne saurait pas quoi choisir (drapeau suisse= allemand?, francais?)
Ajax et accessibilité
Peu de choses intéressantes au final, puis que la plupart des informations étaient logiques ou déjà acquises par la plupart des personnes.
Au final on retiendra la publicité non dissimulée pour l'utilisation de la librairies prototype.js, behavior.js et jQuery.
Web Mobile
La conférence la plus intéressant pour ce qui est du contenu. Une personne travaillant pour le W3C nous a parlé des standards relatifs au Web Mobile et aux contraintes lors du développement.
Au final, il est à noter qu'il existe plus de 100 "Browsers" différents sur téléphone portable et que le plus important d'entre eux ne fait que 6% de parts de marché.
Quelques astuces pour le développement Mobile:
- Utiliser une feuille de style handhed
- Utiliser du Xhtml1.1 Basic strict: il s'agit d'une version de xhtml dépurée de certains éléments non tolérables sur téléphone portable, du type imbrication de tableaux et autres balises dépréciées.
- Label de qualité MobileOK Basic sur validator.w3.org/mobile/alpha.
- Utilisation du SVG Tiny: concurrent de flash?
- WICD: Manière d'utilisation du XHTML et du SVG (il faudra se renseigner sur ce point)
3 commentaire(s) W3c CSS standards parisweb Explorer Internet
Catégorie Web - posté le 27/10/07 10:05:33
En voyant la page officielle de Starcraft 2, je me demandais comment ils avaient fait pour faire un diaporama en fondu, sans utiliser Flash.
En fait il s'agit tout simplement de l'utilisation de la propriété CSS "opacity" d'une image. Cet attribut peut prendre les valeurs décimales de 0 à 1: 1 étant la valeur pour une image opaque. Seule ombre au tableau étant que Internet Explorer 5 et 6 ne supportent pas cet attribut: Il faut passer par un filtre. Exemple avec 1, 0.7, 0.4, 0.1:
Au final en javascript on obtient le code suivant.
var img = document.getElementById("mon_id_image");
img.style.opacity=0.5; /* Par exemple */
img.style.filter=alpha(opacity=0.5*100);
Ou tout simplement en css le code suivant
img
{
opacity:0.5;
filter:alpha(opacity=0.5);
}
À noter que l'attribut filter opacity demande pour valeurs un décimal de 0 à 100, d'où le "*100".
Avec ce petit code, et un peu de patience, nous pouvons faire un fondu entre 2 images: Il faut pour cela superposer 2 images au même emplacement, et dégrader celles-ci.
Si je ne suis pas clair, rien de plus parlant qu'un bon exemple (cliquez sur les miniatures pour modifier l'image).
4 commentaire(s) W3c CSS programmation javascript Explorer Internet
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...
Catégorie Web - posté le 04/03/07 15:17:25
C'est en essayant de créer un nouveau thème pour le blog, et en farfouillant des thèmes du csszengarden, que j'ai découvert une astuce pour rendre le position:fixed compatible avec Internet Explorer.
En gros l'astuce consiste à spécifier les arguments des navigateurs standards en !important, puis de surcharger pour Internet Explorer:
position:fixed !important;
posifion:absolute;
top:0px;
left:0px;
Firefox connaissant la signification du "!important" ne va pas chercher à remplacer la règle fixed. Internet Explorer par contre va continuer à modifier cet attribut lors de la seconde ligne...
On obtient ainsi un style différent selon les version des navigateurs tout en restant standards. Cependant la position:absolute d' Internet Explorer ne permets pas de garder le menu visible malgré le scroll. Il n'est donc pas possible de faire de jolis effets comme celui-ci.
(Si vous avez voulez revenir au style par défault, le voici)...