IE6, IE7, IE8 ne supportent pas plus de 31 fichiers CSS liés dans une page html (que se soit par tag <link rel="stylesheet" ...> ou CSS @import).

Toutes les CSS venant après la 31ème seront simplement ignorées !

Ok, ça n'est pas idéal, d'un point de vue performance, de splitter ses CSS mais des fois nous n'avons pas le choix. (Ex : Développement Drupal avec quelques modules rajoutant chacun sa propre CSS).

La solution pour Drupal :

Un module existe (il ne loade pas de CSS propre) : IE CSS Optimizer concatène les CSS trouvées dans les répertoires /modules/ d'un projet Drupal une fois configuré et activé.

Et si je n'emploie pas Drupal ? :

Comme Microsoft le suggère [1] :

To work around this limitation, combine multiple classes into a single style tag.

Pour contourner cette limitation, combinez les différentes classes dans un seul tag style.

Le plus simple est de vérifier si les CSS liées sont vraiment nécessaires et en supprimer si besoin. D'autres solutions de concaténation existent (voir la librairie Minify)

Liens relatifs :

• Testcase des différentes solutions envisageables
• Drupal IE CSS Optimizer Module
• via John Albin
• [1] : Résolution proposée par Microsoft

© Marin for Gatellier.be, 2010. | Permalink | 2 comments | Add to del.icio.us
Post tags: bug, concatenate, CSS, Drupal, IE, IE6, IE7, IE8, minify, Performances

Internet Explorer et le vertical-align

En cause, Internet Explorer dans les versions 6 et 7 (je ne parle même pas des versions antécédantes) ne supportent pas correctement la propriété CSS display:table-cell.

En effet, le seul moyen correct de centrer verticalement un élément est de faire en sorte que l'élément parent se comporte comme une cellule de tableau (d'où des réactions folkloriques).

Le display:table-cell a été introduit dans Internet Explorer 8. Avant ça, toutes les solutions avaient leurs revers : line-height qui ne permet pas d'avoir des espacements de lignes correct, hauteur des éléments impérativement fixe, hacks CSS mystérieux (dont on ne connaîtra pas le comportement dans les futurs navigateurs).

Bref, rien qui ne me satisfait pleinement.

CSS vertical-align:middle;

Dans Firefox 2 (pc), Firefox 3 (pc/mac), Chrome 1.0.154, Safari (4 pc, 3.2.1 mac), Opera 9.64 (pc/mac), Camino, Shira, IE8, le code suivant est bien rendu.

Le code HTML

<div class="v">
	<div>Ce texte devrait être centré verticalement</div>
</div>

Le code CSS

<style type="text/css">
.v {
	display:table-cell;
	vertical-align:middle;
	/*les 3 lignes suivantes ne sont pas nécessaires*/
	background:#900;
	height:250px;
	width:150px;
}
.v div {
	/*non nécessaire, juste de la décoration pour mieux visualiser*/
	background:#090;
}
</style>

Par contre dans IE 6 et 7, l'alignement vertical n'est pas pris en compte et la boîte de texte reste en haut de la boîte bleue.

Expressions CSS à la rescousse

Encore une fois, les expressions CSS d'Internet Explorer – qui, je sais, ne sont pas recommandées pour des raisons de performances et qui ont été supprimées d'IE8 – peuvent nous être bien utiles.

Code

<!--[if lt IE 8]>
<style type="text/css">
.v {
	position:relative;
	width:expression(this.childNodes[0].offsetWidth+"px");
}
.v div {
	position:absolute;
	top:50%;
	margin-top:expression(-this.offsetHeight/2);
}
</style>
<![endif]-->

Le contenu sera positionné en absolu, à cinquante pourcent du top, par rapport à son conteneur. Il aura aussi une marge négative de la moitié de sa hauteur.

Comme, le contenu est placé en absolu, il sort du flux de la page. Sa largeur est donc reportée sur le conteneur.

Remarques et limitations :

• voir la démo
• Les commentaires conditionnels sont employés pour cibler les version d'Internet Explorer inférieures à 8.
• Les expressions css ne sont pas exécutées si le navigateur à le JavaScript désactivé.
• Les impacts de preformance sont à tenir en compte : les expressions CSS sont recalculées à chaque changement de propriétés CSS dans la page (redimensionnement du navigateur etc,...)
• Le comportement d'un élément en display:table-cell est différent de celui d'un display:block. S'il doit prendre la largeur d'un conteneur, il faudra spécifier celle-ci.

© Marin for Gatellier.be, 2009. | Permalink | 6 comments | Add to del.icio.us
Post tags: bugfix, expression, fix, vertical-align

Les expressions CSS d'Internet Explorer

En effet, les expressions CSS (apparues avec IE5) permettent de calculer dynamiquement (via JScript) les différentes propriétés stylistiques.

On attribue une valeur calculée par JScript à une propriété CSS d'un élément html. Les différents objets du DOM sont supportés

#centeredDiv {
	position:absolute;
	left:
		expression(
			(document.body.clientWidth/2)-
			(this.offsetWidth/2)
		);
	top:
		expression(
			(document.body.clientHeight/2)-
			(this.offsetWidth/2)
		);
}

Sur Internet Explorer, cet exemple positionnerait l'élément ayant un id centeredDiv au centre de la page en le positionnant à la différence de la moitié hauteur de la page (document.body.clientHeight/2) et de la moitié de sa hauteur (this.offsetWidth/2). Notez que this représente l'objet en lui-même.

© Marin for Gatellier.be, 2007. | Permalink | 14 comments | Add to del.icio.us
Post tags:

Toutefois, il existe des cas concrets où le flash a des avantages non négligeables.

On connaissait SIFR - qui permet de changer les typos de texte à l'aide de javascript, de css et de flash - ses avantages et ses inconvéniants (sur des grosse pages pleines de titres, le contenu est parfois vraiment long à s'afficher sur un vieux pc).

Dans la même optique, vient d'arriver swfIR pour swf Image Replacement.

Il permet d'ajouter des ombres portées, des bords arrondis et des rotations (choses qu'on ne peut pas faire en css/javascript) à vos images sans devoir passer par votre éditeur d'image favori.

Pour cela, on a juste besoin d'insérer un javascript dans sa page, d'avoir le fichier .swf adéquat dans sa page et d'appeler une fonction javascript qui remplacera votre image par le fichier flash en question.

sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "#fff");
sir.specify("src", "/swfir.swf");
sir.swap("#example img");

Les méthodes specify définissent les propriétés de l'image et la méthode swap remplace l'élément passé en paramètre (via la méthode DOM document.getElementsBySelector - que je ne connaissais pas)

Je pense qu'on va voir cette méthode fleurir aux quatres coins du web.

Liens relatifs

• swfIR
• plus d'exemples de swfIR en action
• via : A List Apart

© Marin for Gatellier.be, 2007. | Permalink | 11 comments | Add to del.icio.us
Post tags:

Spécifiez les répertoires à valider, et scannez. Tidybot génèrera un rapport complet pour les pages contenant des erreurs de syntaxe (x)html voir l'exemple de rapport de page Tidybot.

Des paramètres avancés vous permettent de spécifier, entre autres, de ne pas afficher tel type fichier ou tels types d'erreurs.

Dommage seulement de ne pas pouvoir vérifier des pages en ligne. Disponible pour Window et Unix avec ou sans interface

Liens relatifs :

• La page du validateur Tidybot
• L'exemple de rapport de page tidybot
• Via : l'excellent WATS.ca (excellente ressource d'outils de développement).

© Marin for Gatellier.be, 2007. | Permalink | No comment | Add to del.icio.us
Post tags:

Format XML OpenSearch

Les définitions des différents éléments composant un XML OpenSearch nous aident à composer notre propre plugin de recherche.
Pour une installation standard de Firefox, vous trouverez les plugins déjà installés dans le répertoire C:\Program Files\Mozilla Firefox\searchplugins. Normalement ce répertoire ne contient que des fichiers .xml qui sont les définitions des plugins. Prenons-en un, le fichier amazon.xml

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Amazon.com</ShortName>
<Description>Amazon.com Search</Description>
<InputEncoding>ISO-8859-1</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoA...=</Image>
<Url type="text/html" method="GET" template="http://www.amazon.com/exec/obidos/external-search/">
	<Param name="field-keywords" value="{searchTerms}"/>
	<Param name="mode" value="blended"/>
	<Param name="tag" value="mozilla-20"/>
	<Param name="sourceid" value="Mozilla-search"/>
</Url>
<SearchForm>http://www.amazon.com/</SearchForm>
</SearchPlugin>

SearchPlugin

Définition du namespace des différents nodes du fichier xml (dans ce cas-ci, on parle de la définition de Firefox)

ShortName

Nom du plugin de recherche

Description

Description du plugin de recherche

InputEncoding

Encodage des caractères du formulaire

Image

Définition de l’icône qui sera ajoutée dans l’interface de recherche encodée en Base64

Url

Contient les différents attributs du formulaire de recherche

type

Format dans lequel les données sont envoyées au serveur

method

GET ou POST méthode d’envoi des données au serveur

template

C’est l’ACTION du formulaire de recherche

Param

Les différents champs qui sont passées au formulaire. Le champ sur lequel se fait la requête doit avoir la value="{searchTerms}". C’est les termes qui seront entrés dans le formulaire de recherche de Firefox

SearchForm

C’est le lien vers les soumissions de formulaires vides iront.

Analyse d’un formulaire à convertir en plugin.

Pour un premier exemple, je me suis basé sur la page d’accueil de Tutmaks.com (excellente ressource de tutoriels). Le moteur de recherche du site ne fonctionnant pour l’instant que sur des pages /index.php et pas sur les pages de détail /story.php.

A l’aide de l’Inspector de Firebug, j’ai facilement repéré que le nom du champ du formulaire était “search” l’action est vide (d’où l’erreur ci-dessus).

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="GET" template="http://tutmarks.com/index.php">
	<Param name="search" value="{searchTerms}"/>
</Url>

Pour un second exemple, j’ai pris la recherche inversée de numéros de téléphone sur 1307.be.

Il y a plusieurs champs cachés dans ce formulaire-ci. J’ai repris les nom et valeurs de ces champs en tant que Param de mon XML

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="POST" template="http://1307.be/fr/servlets/ReverseServlet">
	<Param name="number" value="{searchTerms}"/>
	<Param name="iso_language" value="fr"/>
	<Param name="template" value="1x07be"/>
</Url>

Ajout de l’icône du plugin de recherche.

J’ai repris les favicônes des sites repectifs. Je les ai enregistrées sur mon ordinateur et je les ai converties en base64 avec cet outil. De ce fait, les images sont transformées en code et sont plus facilement transportable d’un environnement à un autre (les images sont incluses dans le fichier XML sous forme de code).

La documentation OpenSearch précise qu’on peut aussi mettre une url vers une icône de favori ou autre image.

<Image height="16" width="16" type="image/x-icon"><br />
http://example.com/favicon.ico<br />
</Image><br />

Code à rajouter dans les pages html.

Pour que le plugin soit à la disposition de tout le monde, il faut l’insérer dans les pages de votre site.

Cela se fait aisément en ajoutant une balise link real="search" dans le header de la page html.

<link rel="search" type="application/opensearchdescription+xml" title="Tutmarks.com" href="/chemin-vers/définition.xml">

Ajouter les plugins créés à Firefox 2.

Quand un plugin de recherche a été trouvé par Firefox, l’icône de la liste des moteurs de recherche prend un fond bleuté.

En cliquant sur cette icône, on peut voir la liste des plugins de recherche. Dans le bas du menu, on peut rajouter les différents plugins de recherches.

L’ordre des moteurs de recherche peut être modifié et on peut aussi en supprimer via l’interface de gestion des plugins de recherche

Le plugin de recherche Tutmarks pour Firefox 2 prêt à l’usage.

Liens relatifs

• l’organisation OpenSearch
• Documentation sur le site Mozilla des plugin OpenSearch
• Tutorial pour les extensions Firefox avant la version 2
• Encoder et décoder en Base64 en ligne

© Marin for Gatellier.be, 2006. | Permalink | 17 comments | Add to del.icio.us
Post tags:

• soit en prenant le raccourcis clavier Shift+F8
• soit en cliquant une de vos barre d'outils avec le bouton droit de votre souris et en choisissant l'option "Customize"
• soit encore en sélectionnant le menu "Options" puis "Customize" de vos barres de menu.

© Marin for Gatellier.be, 2005. | Permalink | No comment | Add to del.icio.us
Post tags:

Je m'y attarderai plus tard.

Pour vous mettre l'eau à la bouche et vous montrer que même les développeurs peuvent s'amuser, voici les oeufs de Pâques (easter eggs) de Contribute. Ils requièrent quand même d'avoir le logiciel installé.

Le premier, pas trop rigolo, c'est la liste des développeurs (et leur photo) du produit

Pour l'avoir (ou la voir), dans Contribute, gardez la touche ctrl enfoncée et à l'aide de votre souris, clickez sur le menu Help puis sur About Contribute

Le second est plus ludique, il s'agit d'un master mind.

Vous vous rappellez ce jeu casse-tête dans lequel il faut retrouver une combinaison colorée. Et bien oui, il est à votre disposition dans Macromedia Contribute.

Pour y avoir accès: allez dans le menu View, sélectionnez Go to Web Address et, comme adresse, entrez "play a game". Tadaaa. Amusez-vous bien !

Le troisième est carrément poétique : en fonction des saisons, l'arbre de l'icône de la fonction insert image évoluera, comme les cerisiers du Japon.

Pour activer cette touche de poésie dans votre travail (parfois) trop aride: menu Edit, sélectionnez My Connections, cliquez sur la touche Administer pour un site auquels vous avez accès, sélectionnez les Roles Settings pour un utilisateur, allez dans New Images et enfin, cliquez plusieur fois sur le petit arbre. La prochaine fois que vous redémarrerer Contribute, en mode édition, vous verrez que l'icône a changé.

On va pouvoir créer ses pages relax maintenant. Merci qui? Merci Macromedia.

La prochaine fois, je vous parlerai de l'œuf de Pâques de Macromedia Homesite...

Affaire a suivre...

src=http://weblogs.macromedia.com/amusselman/archives/2005/11/contribute_east.cfm

© Marin for Gatellier.be, 2005. | Permalink | 2 comments | Add to del.icio.us
Post tags:

A quoi servent-ils? A suivre de l'information rapidement sans devoir charger tout un site.

Normalement, on emploie un aggrégateur de flux pour les parcourir d'un coup d'oeil. Il en existe de nombreux logiciels ou sous forme de site web.

Grâce à mon aggrégateur préféré, je surveille presque quotidiennement une bonne 50taine de sites grâce à leurs rss. Un titre m'article m'intéresse? Hop, je clique et je lis.

Un RSS lisible

Là où le bât blesse, c'est quand un utilisateur non-confirmé clique un lien pointant vers le fichier rss. Il se trouve confronté à une page incompréhesible faite de code. Ce sera une expérience vraiment mauvaise.

© Marin for Gatellier.be, 2005. | Permalink | 4 comments | Add to del.icio.us
Post tags: