Formation HTML5 : Autres API
HTML5

Formation HTML5 : Autres API

  1. Un mot sur la sérialisation HTML5
  2. Details et Summary
  3. Progress et Meter
  4. Attribut hidden
  5. Attributs data-
  6. WebIDL
  7. Un peu de silence pour les disparus

La sérialisation HTML5

text/html
HTML5
application/xml+xhtml
XHTML5
  • XHTML 2 n'est peut-être plus maintenu, mais XHTML continue de survivre grâce à la sérialisation XHTML5
  • Plus d'appendice C (on ne peut plus envoyer du XHTML comme étant du text/html)
  • HTML accèpte maintenant la syntaxe XHTML pour éléments qui se ferment eux-mêmes (<br />) pour faciliter la transition à partir de XHTML 1.x
  • XHTML ne peut pas avoir la balise <noscript>, document.write en javascript, etc
  • Les documents polyglottes représentent un document identique peu importe la sérialisation

<details> et <summary>

Plus d'info:

L'information plus spécifique


    <details>
        <summary>Plus d'info:</summary>
        <p>L'information plus spécifique</p>
    </details>
                

<progress>

Représente la progression d'une tâche (ex: formulaire à plusieurs pages, appels ajax multiples)


        <article>
            <h1>% du formulaire de complété </h1>
            <p><progress value="10" max="100">10%</progress></p>
        </article>
                

<meter>


    <meter min="-100" max="100" value="50">50 degré celsius, cette piscine est trop froide!</meter>
                

Attribut hidden

Attributs data-


	<p>Le jeu de la courte paille?</p>
	<ul>
		<li data-length="12">Le brin d'herbe de Ben
		<li data-length="5">Le brin d'herbe de Dave
		<li data-length="10">le brin d'herbe de Ken
	</ul>
				

WebIDL


interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError error;

  // network state
           attribute DOMString src;
  readonly attribute DOMString currentSrc;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
           attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  void load();
  DOMString canPlayType(in DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
           attribute double currentTime;
  readonly attribute double initialTime;
  readonly attribute double duration;
  readonly attribute Date startOffsetTime;
  readonly attribute boolean paused;
           attribute double defaultPlaybackRate;
           attribute double playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
           attribute boolean autoplay;
           attribute boolean loop;
  void play();
  void pause();

  // controls
           attribute boolean controls;
           attribute double volume;
           attribute boolean muted;

  // text tracks
  readonly attribute TextTrack[] tracks;
  MutableTextTrack addTrack(in DOMString kind, in optional DOMString label, in optional DOMString language);

};
                 

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html

Un moment de silence pour les disparus dans le HTML

Et ceux qui ont été abandonnés

Ajouts au DOM

Autres éléments d'intérêt

Nouveau dans HTML5, mais existait / fonctionnait avant dans les navigateurs

Qu'est-ce que je peux utiliser dès maintenant ?

Sur tous les navigateurs qui possèdent une part de marché significative
Ce qui se dégrade bien (coins ronds CSS), ARIA, attributs data-, liens de niveau blocs, doctype, notation de type xhtml
Internet Explorer 8 et plus
Stockage local, un peu plus de CSS
Internet Explorer 9+
CSS3, SVG et plus
Web mobile basé Webkit (derniers Android, iOS)
Stockage local, canvas, géolocalisation
Sur votre blogue technique
Éléments sémantiques
Si votre application demande une nouvelle caractéristique de HTML5?
Utilisez des PolyFills

Pour continuer

Commentaires? Questions?

Merci!