Img content - petit test

Salut,

Pour gérer le logo d'un site on a plusieurs possibilités dont :

Utiliser une balise <img> : problème de séparation du visuel et du document
Utiliser un block avec un background et masquer le texte contenu dans le block avec text-indent : problème d'accessibilité
Et d'autres bidouilles

En fait, j'ai appris qu'il y a une autre alternative : on peut utiliser une balise <img> en omettant l'attribut src et en chargeant l'image dans la CSS avec la propriété content. Comme ceci :

#logo {
  content: url(monimage.jpg);
}

<img id="logo" alt="Le nom du site">

Ça fonctionne dans Opera et Chrome (et peut être dans Safari mais je peux pas tester pour l'instant). Ça ne fonctionne pas sous Firefox ni IE.

C'est un comportement qui ne fait, apparemment, pas encore partie des specs, mais peut être que ce sera le cas un jour. A priori c'est accessible puisque si on désactive les styles on devrait voir le alt à la place de l'image. On devrait assez simplement pouvoir faire un polyfill en JS pour IE et Firefox (a tester).

Bref, tout ça pour dire que j'ai appris un truc.

Des avis sur le sujet ?

Tiens on pourrait aussi utiliser ça avec les media queries pour charger des images de contenu différentes selon la définition de l'écran, non ?

Bonjour,

j'avais fait un test du genre en 2008/09 et deja Chrome appliqué content à la mode CSS3
http://www.w3.org/TR/css3-content/#inserting3

alors que les autres en restaient a CSS2.1:
http://www.w3.org/TR/CSS21/generate.html#content

Du coup autant en resté avec les pseudo before et after , et les médias queries ne sont pas incompatibles .

sur un titre un test permet ce genre de truc :

<h1><a href="#">un ti titre</a></h1>

h1 a:before  {content:url(http://lorempixum.com/200/200);position:absolute;z-index:1;overflow:hidden;line-height:0;border-radius:100px;box-shadow:0 0 5px;}
a:hover:before {content:url(http://lorempixum.com/200/200/)}
h1 a {line-height:200px;}

puis avec les medias queries il est facile de changer ou ne pas afficher les images.

Cordialement,
GC

Euh oui, mais bon... avec after et before on connait. C'était pas vraiment l'idée.
Modifié par jb_gfx (17 Apr 2012 - 04:23)

Oui .
Je ne suis pas convaincu que la balise "image" soit un bon exemple de départ.
Content est destiné en css3 a remplacé un contenu , pas a modifié un attribut ou a le renseigner .
Je pense que "cette" bidouille" est un défaut qui sera corrigé a une version ou une autre, ce serait aussi une astuce pour empêcher/limiter la "copie d'image"

Cordialement,
GC

Salut,

jb_gfx a écrit :
Pour gérer le logo d'un site on a plusieurs possibilités dont :

Utiliser une balise <img> : problème de séparation du visuel et du document

Perso je pense que pour un logo on peut (doit ^^) utiliser une balise img avec un alt bien mentionné (mais bon là n'est pas la question et c'est un débat sans fin en plus^^). Et puis même si on veut insérer une image décorative on peut toujours le faire via img mais sans alt. C'est accessible aussi à priori.

Mais sinon l'idée me plais bien, ça me semble logique comme comportement, et c'est clair que combiné aux media queries il y a de quoi faire. Mais je suis quand même partager car quand on y pense il y a déjà deux façons (à mes yeux) d'intégrer des images décoratrices de façon accessible. En rajouter une ne changerait pas grand chose. D'autant plus qu'elle n'a pas de réelle avantage sur les autres, à moin que quelque chose m'échappe. Mais l'idée me plais ^^
Modifié par Gili (17 Apr 2012 - 19:39)

Séparer le contenu de la feuille HTML, je trouve que ça à quand même un défault..

Google !

Il en dit quoi lui de ce content ?(car si je ne me trompe pas, il s'en fout du css)

J'aimerais savoir comme ça se passe chez eux. Car l'utilisation peut-être très efficace, mais si derrière sa suit pas
Modifié par lutall (18 Apr 2012 - 08:59)

C'est une vaste question, et d'après le peu que j'en sais, Google reperd les text-indent négatifs et les display: none. Bref il repère quand on lui cache du texte. Donc non Google ne s'en fou pas de CSS (Peut être je dis une énormité mais j'ai déjà lu ça quelques fois)

De plus ici on parle d'images décoratives, donc a priori qui ne ce sont pas nécessaire au bon référencement de la page (d'où la séparation contenu/forme).

Les images sont utiles au référencement si je ne me trompe pas ?

Ne serait-ce pour un photographe /google image ?

Après effectivement, ca serait intéressant de voir comment google reagit face au content