colspan=“0”

On a tous dĂ©jĂ  rigolĂ© (au moins une fois) en voyant un dev. essayer de faire de l’intĂ©gration : des interrogations qui ont ni queue ni tĂŞte, des rĂ©sultats farfelus, tout cela relevĂ© d’un « IE on s’en fou, ça marche en CSS4 sur Firefox ».

La question débile (ou pas)

Mais il y a des questions qui se rĂ©vèlent parfois magiques intĂ©ressantes. La dernière en date fut : Â« C’est lĂ©gal de mettre zĂ©ro Ă  un colspan ? » J’avoue avoir hĂ©siter un long moment avant de rĂ©pondre. D’ailleurs, mes premiers mots auraient pu ĂŞtre : « T’es dĂ©bile ! », « Mais oĂą vas-tu chercher un truc comme ça ? ».

Mais nous le savons tous, les questions les plus bĂŞtes sont souvent loin de l’ĂŞtre et accrochez vous bien : OUI ! il est tout Ă  fait possible d’assigner la valeur zĂ©ro Ă  l’attribut colspan. C’est mĂŞme le W3C qui le dit : w3.org/TR/html4/struct/tables.html.

Le cas pratique

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>colspan="0"</title>
        <style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body {
    color: #333;
    font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
caption, th, td { text-align: left; }
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    vertical-align: middle;
}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr><th>#</th><th>First Name</th><th>Last Name</th><th>Website</th></tr>
            </thead>
            <tbody>
                <tr><td rowspan="2">1</td><td>Xavier</td><td>Zalawa</td><td><a href="http://7studio.fr/">7studio.fr</a></td></tr>
                <tr><td></td><td></td><td><a href="http://bricks-css.tumblr.com/">bricks-css.tumblr.com</a></td></tr>
            </tbody>
            <tbody>
                <tr><td>2</td><td>Matthieu</td><td>Lebreton</td><td><a href="http://gorlo.fr/">gorlo.fr</a></td></tr>
            </tbody>
            <tfoot>
                <tr><th colspan="0">Tables For, you guessed it, tabular data</th></tr>
            </tfoot>
        </table>
    </body>
</html>

Rien de mieux qu’un exemple concret : colspan-0.html ou plus gĂ©nĂ©ralement browsers-table.html.

Concrètement, la valeur zĂ©ro “0” signifie que la cellule va couvrir toutes les colonnes, Ă  partir de la colonne courante jusqu’Ă  la dernière colonne du groupe de colonnes (COLGROUP) dans lequel la cellule est dĂ©finie.

DorĂ©navant, cette solution simple nous permet d’envisager une maintenabilitĂ© plus facile et plus rapide des tableaux que nous aimons tant. Mais il y a un hic. Contrairement au prĂ©cĂ©dent article, seul Firefox semble interprĂ©ter cette règle. Bizarre ? CarrĂ©ment. Dommage ? Encore plus.

Un Hack sinon rien

En cherchant bien, il existe finalement une solution cross-browser :

colspan="100%"

Je vous l’accorde, cette solution n’est pas très propre et totalement plutĂ´t incomprĂ©hensible mais elle marche. Je vous laisse donc seul juge de son utilisation. Après, si “100%” ne vous plait pas, vous pouvez tout Ă  fait mettre “1000”, ça marche très bien aussi (sans commentaire sur ce coup)…

Sur ce coup, je n’ai pas de mots racoleurs percutants pour finir. Mais sachez quand mĂŞme que ça marche aussi pour rowspan.

Broken images


Se prĂ©occuper de choses qui peuvent sembler inutiles est un jeu auquel je me prĂŞte de plus en plus. Bien Ă©videmment, je n’envisage ni reconnaissance internationale, ni journal tĂ©lĂ©visĂ© mais après tout, ça occupe le temps devient vite très intĂ©ressant.

Cette fois ci, je me suis arrêté quelques instants sur la gestion des images “cassées”. Une fonctionnalité fixe, qui n’a pas pour but d’évoluer dans le temps et qui ne devrait pas poser de problèmes. Mais en y regardant de plus près, la chose n’est pas si simple et les mauvais élèves ne sont pas toujours ceux qu’on croit.

Voici la base de mon exemple :

<!doctype html>
<html>
<head>
    <meta charset="utf-8" >
    <title>broken-image</title>
    <style type="text/css">
img
{
    margin: 0 20px 0 0;
    vertical-align: top;
}
img.is-last { margin-right: 0; }

img
{
    margin: 3px;
    padding: 3px;
}
    </style>
</head>
<body>
    <img src="defined.jpg" alt="My beautiful image" />
    <img src="undefined.jpg" />
    <img src="undefined.jpg" alt="2 : My beautiful image is broken" />
    <img src="undefined.jpg" alt="3 : My beautiful image is broken" width="200" />
    <img src="undefined.jpg" alt="3 : My beautiful image is broken" width="200" height="200" class="is-last" />
</body>
</html>

Jugez par vous mĂŞme des rĂ©sultats dĂ©gâts : broken-image.html ou plus gĂ©nĂ©ralement browsers-table.html

Firefox WTF

Il y a des fois, et il faut le dire, Internet Explorer gère plutĂ´t bien, mĂŞme mieux les situations (des fois). Dans notre cas, seul Firefox pose un rĂ©el problème. Et heureusement car il est aussi le seul Ă  offrir une solution :

/*
 * @doc: https://developer.mozilla.org/en/CSS/-moz-force-broken-image-icon
 */
-moz-force-broken-image-icon: <integer>;

Je souligne honteusement que sans cette propriĂ©tĂ©, une image cassĂ©e n’occupe mĂŞme pas sa largeur mĂŞme si elle a Ă©tĂ© dĂ©finie avec l’attribut “width”. Quoi qu’il arrive, seule, cette propriĂ©tĂ© n’est pas une solution satisfaisante : -moz-broken-image.html.

La solution ?

Que faut-il alors pour satisfaire ce caprice ? Une largeur et une hauteur dĂ©finie par leur attribut sur toutes les balises image ? Pourquoi pas. Après tout c’est le critère 159 de la Checklist Opquast V2 et ajouter deux attributs n’a jamais tuĂ© personne ou alors j’ai ratĂ© un truc.

Sauf que malheureusement, nous ne maitrisons pas toujours toutes les cartes (prestataire, CMS, dĂ©veloppeur) et que nous avons pas rarement le choix, il faut s’adapter.

Voici la solution que je vous propose :

img:-moz-any(:-moz-broken, :-moz-user-disabled)
{
    -moz-force-broken-image-icon: 1;
}
img:-moz-any(:-moz-broken, :-moz-user-disabled):not([width]),
img:-moz-any(:-moz-broken, :-moz-user-disabled):not([height]),
img:-moz-any(:-moz-broken, :-moz-user-disabled)[width=""],
img:-moz-any(:-moz-broken, :-moz-user-disabled)[height=""]
{
    display: inline-block;
    -moz-force-broken-image-icon: 0 !important;
}

img:-moz-any(:-moz-broken, :-moz-user-disabled)::before
{
    position: relative;
    display: inline-block;
    border: 1px inset;
    padding: 3px 3px 3px 22px;
    background: url(broken-image.png) 3px 3px no-repeat;
}
img:-moz-any(:-moz-broken, :-moz-user-disabled):not([alt])::before,
img:-moz-any(:-moz-broken, :-moz-user-disabled)[alt=""]::before
{
    height: 16px;
    padding-right: 0 !important;
}

Le rĂ©sultat est intĂ©ressant : broken-image.bricks.html. Toutefois, je mets un bĂ©mol Ă  son utilisation. Cette reprĂ©sentation (ou correction) est très personnelle et n’est peut ĂŞtre pas celle attendue par l’Ă©quipe de Mozilla. Mais aussi car elle utilise de nombreuses propriĂ©tĂ©s prĂ©fixĂ©es qui peuvent disparaitre ou/et fonctionner diffĂ©remment d’une version Ă  l’autre.

Concernant l’image utiliser proposer par Firefox, elle se trouve normalement ici :

jar:file:///C:/Program%20Files/Mozilla%20Firefox/omni.ja!/chrome/toolkit/res/broken-image.png

Un mot pour la route

Retrouvez à tous moments le bug 58646 reporté le 31/10/2000 sur bugzilla.mozilla.org