Des bordures CSS sur des tableaux et des images dans Outlook 2007/10/13

Ayant récemment dû intégrer une newsletter HTML, je me suis heurté à un soucis de bordures de tableaux et d’images sous Outlook 2007, Outlook 2010 et Outlook 2013.

Des bordures CSS sur les tableaux HTML dans Outlook

Lorsque l’on style un email HTML, le peu de propriétés CSS supportées doivent être présentes dans l’attribut « style » de l’élément à styler.
Voici le code original utilisé pour créer un tableau avec une bordure. Ce code fonctionne parfaitement sous Gmail, Thunderbird, Yahoo! et bien d’autres, excepté sur les différentes versions d’Outlook citées plus haut :

<table cellpadding="0" cellspacing="0" bgcolor="#dbd7d4" border="0" style="border:2px solid #816d5b;" width="550" align="center">

Après quelques essais il s’avère que l’attribut « border » prend le pas sur la déclaration CSS inline lorsque sa valeur est à 0. Pour remédier à ce problème il suffit simplement d’enlever cet attribut :

<table cellpadding="0" cellspacing="0" bgcolor="#dbd7d4" style="border:2px solid #816d5b;" width="550" align="center">

Cela semble logique. Après tout si l’élément voit son attribut « border » égal à 0 alors il ne semblerait pas normal qu’une bordure CSS s’ajoute à cet élément.
Seulement voilà, il n’y a que Outlook 2007/2010/2013 qui se comportent de cette façon, tous les autres clients affichent correctement la bordure définie en CSS même si l’attribut « border » de l’élément est égal à 0.
En étudiant d’un peu plus près les spécifications CSS, voici ce que l’on trouve, au premier paragraphe de la dernière section des spécifications sur la cascade CSS :

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

Ce paragraphe explique que s’il existe des attributs permettant de styler des éléments (tels que « border  » ou « bordercolor »), ces attributs sont convertis en CSS puis sont traités comme si ils étaient ajoutés au début de la CSS de la page. Ces attributs se font donc écraser par n’importe quel style et sont donc censés être écrasés par un style inline qui a la priorité la plus élevée (si l’on omet le « !important »).

Comme on pouvait ici s’en douter, c’est Outlook qui interprète mal le code.

Des bordures CSS sur les images dans Outlook

Lorsqu’il s’agit d’appliquer dans un email HTML une règle CSS à un élément, la première chose à vérifier est la compatibilité de cette règle avec les principaux clients mails. Une des référence en la matière est le guide de compatibilité CSS de Campaign Monitor qui nous indique que la propriété « border » est compatible avec tous les clients listés, dont Outlook 2007/10/13.

Le code HTML est tout simple :

<img src="#" style="display: block; border: 1px solid black">

Cependant, rien ne s’affiche.

Un petit coup d’oeil à la documentation officielle d’Outlook qui indique également le support complet de cette propriété pour la balise « img ».

Une recherche rapide me conforte dans mon idée. Bien que le support de la propriété CSS « border » sur les balises « img » dans Outlook 2007/10/13 est annoncé sur la doc officielle et dans d’autres tableaux de compatibilité des emails HTML (qui doivent en fait reprendre la documentation), celle-ci ne l’est pas.

La parade pour contourner cette limitation est d’englober l’image dans un tableau :

<table cellpadding="0" cellspacing="0" style="border:1px solid #b53b32;" bgcolor="#f6f6f6" width="217" align="center">
  <tr>
    <td width="217">
      <img src="#" alt="" width="215" border="0" style="display:block" />  
    </td>
  </tr>
</table>

Il faut additionner à la largeur de la cellule et du tableau le nombre de pixels supplémentaires de la bordure.
La seule contrainte de cette méthode étant la taille fixe sur la largeur de l’image.

eZ publish : utiliser ezdesign en PHP

Avec le CMS eZ publish une des fonctions fréquemment utilisée dans les templates est la fonction ezdesign. Celle-ci permet de charger n’importe quel fichier contenu dans les répertoires « design », sans tenir compte des « siteaccess ».

Normalement cette fonction ne devrait-être utilisée que dans les templates, les fichiers contenus dans les répertoires « design » étant relatifs à la vue. Malheureusement il arrive que l’on doive reprendre du code tellement mauvais que l’affichage est généré en PHP. Lorsque c’est le cas et que vous devez afficher des éléments graphiques, il faut toujours utiliser la fonction « ezdesign » afin de générer des URLs correctes.

Après un peu de recherche dans le code source d’eZ publish, voici comme faire pour utiliser la fonction « ezdesign » en PHP :

eZURLOperator::eZDesign(null, 'stylesheets/core.css', 'ezdesign')

Le premier paramètre est la template dans laquelle la fonction est utilisée. Etant donné que nous l’utilisons en PHP, aucune.
Le second paramètre est le chemin du fichier à charger en commencer dans les répertoires « design ».
Le troisième paramètre est le nom de l’opérateur de template, ‘ezdesign’.

Plugin jQuery validation : vérifier l’unicité d’un champ

Le plugin de validation jQuery propose une fonction de validation « à distance » en AJAX, utile par exemple pour vérifier l’unicité d’un login (cf. documentation).

Dans le cas d’un login pouvant être modifié par l’utilisateur il est nécessaire de n’appliquer la règle de validation que si celui-ci change. Imaginez un formulaire d’édition des informations d’un utilisateur enregistré en base où l’on peut modifier le login et le mot de passe. Dans le cas où le login ne change pas le formulaire ne passe pas la validation car le login est déjà pris… par la personne qui modifie ses informations.

Pour contourner ce problème j’utilise l’option « depends » qui permet de déclencher une règle de validation uniquement si la dépendance est correcte.

$('#myInput').rules('add', {
	required: true,
	remote: {
		param: {
			url: 'http://url/vers/ma/fonction/de/verification',
			type: 'POST'
		},
		depends: function(el) {
			return $(el).val() != loginValue;
		}
	}
}

« loginValue » est une variable contenant le login actuel, login qui provient du champ texte et qui est stocké à l’initialisation de la page. Si le login actuel est différent du login présent dans l’input lorsque la validation s’effectue, « depends » renvoie « true » et la vérification AJAX s’effectue.

Notez que contrairement à la documentation les paramètres sont passé dans un objet « param ». Après le contournement du bug des classes multiples c’est ici un nouveau bug. Si vous utilisez « depends » dans « remote » les paramètres de l’appel AJAX ne sont pas pris en compte, à moins de passer un nouvel objet « param ».

Sélectionner ou désélectionner toutes les checkboxes avec jQuery

On trouve de nombreux bouts de code permettant, à partir d'une checkbox maître, de sélectionner ou désélectionner toutes ses checkbox enfant, mais beaucoup d'entre eux contiennent de trop nombreuses lignes inutiles.
Voici ce que j'utilise :
$('#checkAll').click(function(){
	$(':checkbox').attr('checked', $(this).attr('checked'));
});

Il vous suffit juste d'adapter les sélecteurs a vos besoins.

Plugin WordPress BetaSeries Widget

WordPress BetaSeries est mon tout premier plugin officiel wordpress. WordPress BetaSeries est un plugin se présentant sous la forme d’un widget vous permettant d’afficher vos dernières activités réalisée sur le site BetaSeries.

Tiré du site :

Grâce à BetaSeries, vous pouvez enfin gérer vos séries de A à Z : De la gestion de votre planning au téléchargement des derniers sous-titres, en passant par la découverte de nouvelles séries… Tout cela entouré de la communauté BetaSeries ainsi que de vos amis, directement sur le site !

WordPress BetaSeries Widget ne propose pour le moment que peu d’options. Outre la configuration du pseudo et le nombre d’activités à afficher il propose la gestion du cache.

D’est un plugin relativement simple qui parse un flux RSS pour en afficher son contenu. Contrairement à de nombreux autres plugins, Wordpress BetaSeries Widget ne réalise pas une requête HTTP à chaque requête sur le blog qui l’utilise. Dans l’optique de minimiser le nombre de hits le plugin fonctionne avec un cache se rafraîchissant toutes les X minutes.

WordPress BetaSeries Widget est disponible sur GitHub. N’hésitez pas à le forker ou à proposer de nouvelles fonctionnalités.

Installation

  1. Décompresser l’archive dans le répertoire « wp-content/plugins ». Assurez vous qu’un dossier « betaseries » est créé avec le fichier « betaseries.php » ainsi que le répertoire « images » contenant 4 images.
  2. Sur le tableau de bord WordPress, activez le plugin via le menu des extensions.
  3. Rendez-vous dans « Thèmes » => « Widgets » et glissez le widget où bon vous semble pour l’activer
  4. Configurez le

Ce plugin nécessite PHP5.

Liens