Spécifications du nouvel élément html5 « picture »

Introduction

Cet article est la traduction de la page http://picture.responsiveimages.org/

La spécification de l’élément picture est un point qui m’intéresse depuis plusieurs mois déjà,  notamment dans le cadre de la R&D que j’ai pu faire sur le responsive design.

Le texte ci-dessous est tiré du site du groupe de recherche sur l’élément picture.
Bonne lecture !

Théorie

L’élément picture est une balise d’image dont le contenu source est déterminé par une ou plusieurs requêtes media CSS.

Statut de ce document

Cette section décrit le statut du présent document au moment de sa publication. D’autres documents peuvent venir le supplanter. La liste des publications W3C actuelles, ainsi que la dernière version de ce rapport technique, sont disponibles dans l’index des rapports technbiques W3C à http://www.w3.org/TR/.

Cette spécification a été publiée par le Responsive Images Community Group. Elle n’est ni un standard W3C, ni en passe de devenir un standard W3C. Veuillez remarquer que sous la licence W3C Community Contributor License Agreement (CLA), une possibilité limitée de retrait ainsi que d’autres conditions s’appliquent. Si vous désirez en savoir plus, renseignez-vous sur W3C Community and Business Groups.

Note:
La présente spécification est en phase active de dévelopement et sujette à des modifications fréquentes. Veuillez consulter la liste des points à régler.

Table des matières

  1. 1 Introduction
    1. 1.1 Exemple d’utilisation
    2. 1.2 Rapport à srcset
  2. 2 Conformité
  3. 3 Définitions
  4. 4 l’élément image
  5. 5 Algorithme pour dériver l’image source
  6. Points à régler
  7. Remerciements
  8. Références normatives

1 Introduction

Cette section est non-normative.

Cette spécification fournit aux développeurs un moyen de déclarer des sources multiples pour une image, et, grâce à [CSS3-MEDIAQUERIES] (requêtes media CSS), elle permet aux développeurs de contrôler quand ces images doivent être présentées à un utilisateur. On obtient cela en introduisant un nouvel élément picture au [HTML] utilisant l’élément source. L’élément picture reste rétroactivement compatible avec les anciens user-agents en se dégradant élégamment via le contenu alternatif (i.e., via l’élément img) tout en fournissant potentiellement une meilleure accessibilité que l’élément img existant.

En ayant recours à [CSS3-MEDIAQUERIES], un user-agent peut réagir aux changements intervenus dans l’environnement de navigation en sélectionnant la source d’image correspondant le mieux à l’environnement de navigation – incarnant ainsi une technique connue sous le nom de responsive web design directement dans le code HTML. Les caractéristiques media auxquelles un user-agent peut potentiellement réagir comprennent – sans s’y limiter – la largeur et la hauteur des pixels, leurs densités, ainsi que les conditions d’éclairage de l’environnement, les changements d’orientation, les changements dans le type de media tels que le passage de l’affichage écran à l’impression.

Cette spécification définit aussi l’interface de programmation HTMLPictureElement, qui offre aux développeurs un jeu d’attributs et de méthodes pour interagir avec les éléments picture via ECMAScript.

1.1 Exemple d’utilisation

Cette section est non-normative.

Ce premier échantillon montre comment combiner l’élément picture avec l’élément source, tout en fournissant aussi un contenu alternatif pour les user-agents plus anciens via l’élément img.

EXAMPLE 1
<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <p>Accessible <strong>and rich</strong> text</p>
</picture>

Problème 1

L’exemple suivant considère comme acquis que l’on peut obtenir l’attribut srcset supporté sur l’élément source du HTML. Voir problème 64.

Ce second exemple montre comment l’élément picture peut être employé avec l’attribut srcset afin de fournir une liste de sources appropriée pour toute requête media:

EXAMPLE 2
<picture width="500" height="500">
   <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <p>Accessible <strong>and rich</strong> text</p>
</picture>

1.2 Rapport à srcset

L’attribut `srcset` permet aux auteurs de définir diverses ressources image et des “indices” aidant un user-agent à déterminer la source d’image la plus appropriée à afficher. À partir d’un jeu de ressources image, l’user-agent a le choix de suivre ou d’ignorer les déclarations de l’auteur afin d’optimiser ce que voit l’utilisateur, selon des critères tels que la densité d’affichage, le type de connexion,les préférences utilisateur, etc.

L’élément `image` définit les conditions dans lesquelles il faut que l’user-agent se conforme aux instructions expresses de l’auteur dans sa sélection des ressources à afficher. Cela inclut les sources image ayant des dimensions inhérentes conçues pour s’aligner avec les variations de design spécifiées dans les requêtes media CSS (voir: design breakpoints, media features and types et relative units ) ou les variations de contenu destinées à améliorer la clarté et la visibilité basées sur les dimensions d’affichage du client.

Les solutions proposées ne sont pas incompatibles entre elles, et peuvent très bien opérer de concert afin de traiter la liste complète des cas d’usage et exigences des images réactives.

2 Conformité

De la même façon que les sections indiquées comme étant non-normatives, tous les guides généraux d’écriture, diagrammes, exemples et notes dans cette spécification sont également non-normatives. Tout le reste dans cette spécification est normatif.

Les mots-clefs must (doit), must not (ne doit pas), required (nécessaire), should (il faut), should not (il ne faut pas), recommended (recommandé), may (peut), and optional (optionnel) dans cette spécification sont à interpréter tels qu’ils sont décrits dans [RFC2119].

Cette spécification a les mêmes exigences de conformité et s’applique aux mêmes classes de conformité que le [HTML].

Les implémentations utilisant ECMAScript pour exposer les APIs définis dans cette spécification doivent les implémenter d’une manière cohérente avec les Bindings ECMAScript définis dans la spécification [WEBIDL].

3 Définitions

The termes suivants sont employés tout au long de cette spécification, aussi sont-ils réunis ici dans un but de simplicité pratique pour les lecteurs. La liste de termes suivante est non-exhaustive; d’autres termes se voient definis au cours de cette spécification.

Les termes sont définis par la spécification [HTML]: élément img, élément source, contenu fallback, et requête media valide.

4 L’élément picture

Catégories:


Flow content.

Phrasing content.

Embedded content.

Palpable content.

Contextes dans lesquels cet élément peut être utilisé:

Là où embedded content est attendu.

Modèle de contenu:

Si zéro éléments efants, alors transparent.

Un ou plusieurs éléments sources.

Zéro ou un élément img, servant de contenu fallback.

Attributs du contenu:

Attributs globaux

largeur

hauteur

Interface DOM:

[NamedConstructor=Picture,
 NamedConstructor=Picture(unsigned long width),
 NamedConstructor=Picture(unsigned long width, unsigned long height)]
HTMLPictureElement : HTMLImageElement{
   readonly attribute DOMString media; 
}

L’élément picture est utilisé pour afficher une image qui peut provenir d’un certain nombre de sources (voir l’attribut srcset). Le choix de l’image affichée par l’user-agent dépend de l’algorithme de dérivation de l’image source.

En obtenant l’attribut media IDL, l’user-agent doit renvoyer la requête media correspondant à l’environnement du moment.

Il est recommandé que pour les cas où une unique source image est disponible et où aucune adoption réactive n’est nécessaire, les auteurs utilisent l’élément img. Les auteurs peuvent utiliser l’attribut srcset pour les sources image redimensionnées simples.

L’ image choisie est le contenu intégré.

Pour les user-agents ne supportant pas l’élément picture, l’author peut fournir un élément img comme contenu alternatif. Il ne faut pas que les user-agents supportant l’élément picture montrent ce contenu à l’utilisateur: il est seulement destiné aux user-agents anciens qui ne supportent pas picture, de façon à ce qu’un élément img compatible puisse être montré à la place.

Exigences de création: comme avec l’élément img, les documents ne doivent pas utiliser l’élément picture comme outil de design. En particulier, il ne faut pas que les éléments picture  soient utilisés pour afficher des images transparentes, étant donné que celles-ci sont rarement porteuses de sens et ajoutent rarement quoi que ce soit d’utile au document.

Lorsque celui-ci est utilisé avec l’élément picture, il faut qu’un document contienne seulement les éléments sources nécessaires pour représenter le même sujet, mais avec des cadrages et des niveaux de zoom pouvant différer.

Problème 2

Il faut codifier que ceci n’est pas un mécanisme destiné à interchanger des images disparates en fonction de la taille de l’écran. Voir bug 18384.

5 Algorithme pour dériver l’image source

L’algorithme pour dériver l’image source se présente comme suit. Le résultat est la source image destinée à être utilisée par l’élément picture, qui reflète l’attribut IDL src de l’élément picture :

Note

Notre but est de faire en sorte que l’élément picture se comporte exactement de la même manière qu’un élément img, à cette seule différence près que son élément source est utilisé pour déterminer la valeur de l’attribut IDL src (et donc, quel contenu image est affiché). La façon don’t cela se détermine passe par l’utilisation de l’attribut media de l’élément source.

Donc, pour dériver l’image source: ignorant toutes sources don’t le type n’est pas supporté par le navigateur, rassembler toutes les requêtes media  provenant des attributs media de l’élément source dans une « feuille de style », par ordre de document. Tous les attributs media manquants sont simplement considérés comme équivalant à « tous ». Tous les attributs media qui ne constituent pas des requêtes media valides sont ignorées. Donc, considérant ce qui suit:

<picture id="pictureElement">
   <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

   <!-- assume media all --> 
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">

   <!-- the following are ignored -->
   <source media=" is the message " srcset="">

</picture>

Devient approximativement l’équivalent CSS de (une feuille de style virtuelle pour le document?):

//on considère dans l’exemple que #pictureElement est magiquement dédié à l’élément correspondant.

@media all{
   #pictureElement{
      background-image: image-set(small-1.jpg 1x, small-2.jpg 2x);
   }
}

@media all and (min-width: 45em){
   #pictureElement{      
      background-image: image-set(large-1.jpg 1x, large-2.jpg 2x);
   }
}

@media all and (min-width: 18em){
   #pictureElement{      
      background-image: image-set(med-1.jpg 1x, med-2.jpg 2x);
   }
}

L’API fonctionne ensuite exactement de la même manière conformément aux images. Les évènements sont déclenchés de la même façon que si l’attribut IDL src de l’image avait été établi manuellement par l’auteur.

Le comportement d’obtention de ressources  de (?) alors gouverné par CSS Image Values and Replaced Content Module Level 4.

Un user-agent peut prendre la priorité sur les demandes d’images en plus haute résolution pour des raisons de préférences utilisateur. Par exemple: “toujours solliciter des images haute résolution”, “toujours solliciter des images basse résolution”, et “solliciter des images haute résolution dans la mesure de ce que permet la bande passante” à partir des informations de bande passante dont dispose le navigateur.

Points à régler

Nous effectuons un suivi des points restant à régler sur Github. Aidez-nous à les résoudre SVP!

  • Point 19 – Ajouter un exemple de la manière d’utiliser figure, figcaption, et picture ensemble
  • Point 18 – Dans la section 5 il manque l’attribut de type et son comportement Affecté: marcoscaceres Etiquettes: [ bug ]
  • Point 16 – Clarifier/définir le modèle d’accessibilité du
  • Point 12 – Inclure une section pour expliquer la différence avec Etiquettes: [ enhancement ] [ question ]
  • Point 7 – Pré-chargement basé sur MQs & `@viewport`
  • Point 6 – Contenu alternatif – texte alternatif
  • Point 2 – Le comportement de l’attribut `src` de picture est mal déterminé
  • Point 1 – Refléter le media correspondant Etiquettes: [ enhancement ]


Implémentations de référence

Nous avons une liste des utilisateurs actuels, polyfills, prototypes, et implémentations sur Github.

Remerciements

Une liste complète des participants du Responsive Images Community Group est disponible sur le site web du groupe communautaire W3C.

Références normatives

[CSS3-MEDIAQUERIES]

Requêtes Media. (statut).

[HTML]

HTML5. (statut).

[RFC2119]

Mots clefs à utiliser dans les RFC pour indiquer les niveaux d’exigence.

[WEBIDL]

Web IDL. (statut).

Intégrateur TYPO3 depuis 2003, maintenant responsable du pôle d'expertise chez TalanSolutions. Je réalise des audits, des préconisations, des missions d'expertise. J'ai la chance de diriger le plateau technique Web PHP / TYPO3 d'EXL Group.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *