Les dernières actualités d'Alsacreations.com
La version 10 de Mozilla Firefox a été dévoilée. Quelques allègements ont été opérés sur l'interface, mais aussi (et surtout) des nouveautés ont été apportées quant aux fonctionnalités supportées :
Il s'agit également de la première version qui soit estampillée ESR (Extended Support Release), pour rassurer et déployer une version maintenue à long terme surtout dans le monde de l'entreprise. Téléchargement : Windows, Mac OS X, Linux.
Et pour les prochaines versions, que nous prépare Mozilla ? Parmi ce qui est prévu : migration des paramètres depuis Chrome, amélioration de la lisibilité du texte, support de Flash sur Android, vue 3D dans l'inspecteur de code, éventuellement support du protocole SPDY. À plus long terme, la volonté est de pouvoir créer des web apps mieux intégrées au système d'exploitation, d'améliorer l'interface générale (onglets, téléchargements, accueil) et de rendre les mises à jour encore plus transparentes pour l'utilisateur.
Cette page claire et bien organisée liste les différentes fonctionnalités tournant autour de HTML5 et leur niveau de support dans les navigateurs : peut-on les utiliser dès à présent, faut-il penser à utiliser une alternative, faut-il les éviter ? Tout ceci en fonction des parts de marché actuelles des navigateurs et de leurs capacités.
Si vous désirez participer à cet événement en tant qu'orateur, faites-nous part de votre candidature et de vos idées en remplissant le formulaire d'Appel à Orateurs.
Nous organiserons a priori deux sessions de conférences en parallèle : une présentation de 45min en grande salle ainsi que des mini-conf / ateliers de 20 minutes.
Le choix sur le contenu se fera durant le mois de mars et sera détaillé sur le site de la Kiwi Party, nous vous tiendrons bien évidemment informés dès que possible.
Information importante : il s'agit d'un événement dont tous les frais sont intégralement couverts par des sponsors et par Alsacréations. Nous tenons à dédommager autant que faire se peut les orateurs pour leurs déplacements ou hébergements, mais nous ne pourrons certainement pas couvrir tous les frais engagés. À titre d'exemple, la moyenne des défraiements s'élevait autour de 100 euros par orateur l'an passé.
Les sponsors ont un rôle prépondérant pour cet événement puisque c'est grâce à eux qu'il peut avoir lieu et accueillir autant de participants. L'an passé, grâce à Epitech, Kiubi, Eyrolles, Dunod et Devclic, nous avons pu être accueillis dans de magnifiques locaux au centre de Strasbourg, pu rembourser une partie des frais des orateurs, et disposer de lots pour les gagnants du Quiz.
Nous souhaiterions bien évidemment réitérer ces petites attentions cette année et accueillerons avec plaisir tout partenaire qui nous permettrait d'offrir des lots lors des jeux organisés durant la journée ou de participer aux frais.
Sponsors, contactez-nous !
Cet élément permet de baliser un contenu quelconque (texte, image, listes, tableaux, formulaires, etc) ayant pour rôle d'apporter une information ou des détails supplémentaires. Ceux-ci ne doivent cependant pas être obligatoires pour poursuivre la bonne marche de l'application web ou la compréhension du document HTML.
Le navigateur pourra masquer ces informations par défaut, et les déployer à la demande de l'utilisateur (voir exemples visuels ci-après). Une icône pourra indiquer l'état de l'élément : déployé (visible) ou compacté : seul le résumé reste visible. Ce résumé, assimilable à un titre ou une légende, est apporté par
.
open
de l'élément
Si cet attribut est présent, les détails sont exposés à l'utilisateur dès le chargement.
Attribut | Valeurs | Rôle |
---|---|---|
open |
open ou "" ou (vide) |
Spécifie la visibilité initiale de l'élément (visible ou non à l'utilisateur) |
Cet élément sert d'intitulé à
, en cela il doit être pertinent. Sa fonction s'apparente à une légende ou un résumé donnant du sens au contenu de son parent. Seul
peut-être le parent de
. Si
n'est pas présent, il incombe au navigateur de déterminer le libellé de
.
L'intérêt de ces deux éléments fonctionnant de concert est de mimer ce que l'on retrouve déjà couramment avec les interfaces graphiques des systèmes d'exploitation. Un intitulé est présenté à l'utilisateur, résumant parfois un état, et permettant d'accéder - généralement après un clic - à d'autres informations détaillées.
et
Navigateurs | Versions |
---|---|
Chrome 12.0+ | |
Android Browser 4.0+ |
Un navigateur ne supportant pas ces éléments affichera leur contenu sans comportement particulier.
L'élément
contient l'élément
lui servant d'intutilé ou de légende, à la suite de celui-ci nous retrouvons le contenu à afficher ou masquer. L'attribut open
affichant par défaut le contenu. Pour une utilisation classique l'icône par défaut est une flèche : ?
Caractéristiques techniques
Nom
Détails
Matière
Inox alimentaire
Dimensions
140x120 mm, hauteur 30 mm
L'élément
peut aussi contenir des éléments de formulaire.
Aperçu sous Chrome 16.0
Plusieurs blocs
peuvent être imbriqués les uns dans les autres, cette pratique reste tout à fait valide.
Il n'y a pas de convention actuellement définie et reconnue par tous les navigateurs pour accéder aux propriétés CSS. Néanmoins avec le moteur WebKit et la pseudo-classe ::-webkit-details-marker
vous pouvez modifier l'icône (en forme de flèche par défaut). Le sélecteur details[open]
, permet de styler l'icône lorsque
est déployé.
summary::-webkit-details-marker {
color:#ADCA48;
background:#ADCA48;
}
details[open] summary::-webkit-details-marker {
color:#eaeaea;
background:#eaeaea;
outline: 2px solid #ADCA48;
}
Aperçu sous Chrome 16.0
Il est également possible de changer l'icône par défaut à l'aide de la pseudo-classe :after
summary::-webkit-details-marker {
display: none
}
summary:after {
content: "+";
color: #ADCA48;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 5px 0 0;
padding: 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
}
Aperçu sous Chrome 16.0
Voici une alternative basée sur jQuery pour les navigateurs n'implémentant pas encore les éléments
Tout d'abord faites appel à votre script dans lequel vous intégrerez la fonction permettant d'afficher/masquer les éléments et la dernière version de jQuery en les insérant juste avant la balise de fermeture
et
. Il est important de savoir que ces éléments peuvent être utilisés quelle que soit la prise en charge. Si l'effet est déjà fonctionnel avec des éléments neutres
et
pour les navigateurs qui les supportent nativement, et de continuer à exploiter la version en JavaScript pour les autres.
Dans votre fichier details-summary.js, il vous faudra vous assurer que la page est chargée, une fois celle-ci prête il est important de vérifier que le navigateur n'implémente pas les éléments
ou
afin de ne pas lancer le script si tel est le cas :
$(document).ready(function() {
?if (!('open' in document.createElement('details'))) {
Une fois la condition validée, pour chaque élément
on affiche "son"
à l'aide de la méthode show()
. Pour procéder à la détection, l'utilisation de Modernizr peut être plus avantageuse.
Et lorsque l'on clique sur l'élément
une fonction permet d'afficher ou masquer les frères de celui-ci, c'est-à-dire le contenu. Puis on ajoute ou enlève la classe open à l'élément
ainsi que la classe html5_details
.
$("details").each(function() {
$(this).find("summary").show().click(function() {
$(this).siblings().toggle();
$(this).parent('details').toggleClass('open');
});
Avant de fermer la fonction, il reste encore à masquer le contenu si l'attribut open
n'est pas présent au sein de la balise
. On stocke dans une variable l'attribut open
. On vérifie s'il est absent, si tel est le cas, on masque les enfants de
excepté
que l'on affiche.
var opened = $(this).attr("open");
if(opened==undefined) {
$(this).children().hide();
$(this).children("summary").show();
}
});
// Fermeture de la condition et de $(document).ready
}
});
Le script établit le comportement dynamique, mais cela n'est pas suffisant pour la présentation : il faut encore ajouter l'icône et cela se passe du côté de la feuille de styles CSS. Rien de plus simple, grâçe à la pseudo-classe :
:before
et à la classe .open
:
.html5_details > summary::before {
content:"?"; margin-right:"5px";
}
.html5_details.open > summary::before {
content:"?"
}
Vous obtenez ainsi le même affichage que par défaut.
Il existe d'autres alternatives :
Propriété | Détails |
---|---|
Modèles de contenu autorisés | Contenu de phrasé. |
Parents autorisés |
|
Omission de balise | Les balises ouvrantes et fermantes sont obligatoires |
Style par défaut |
summary { display:block; } |
et
vus par le WhatWG
et
par le W3C
Inauguré avec la vague HTML5, est un élément de formulaire permettant de lier une liste de choix à un élément
input
. Il est voué à fournir des fonctionnalités d'auto-complétion ou d'auto-suggestion, dans un formulaire classique ou un champ de recherche, voire à d'autres éléments d'entrée, tels que les nouveaux types .
Par défaut, demeure invisible. Lors de la frappe, ou en appuyant sur la touche ↓ (flèche bas) , la liste de choix apparaît et autocompléte le champ de formulaire rattaché.
Navigateurs | Versions |
---|---|
Firefox 4.0+ | |
Opera 9.0+ Opera Mobile 10.0+ |
|
Internet Explorer 10+ |
Un navigateur ne supportant pas l'élément n'affichera aucune suggestion. Le champ lié restera cependant totalement fonctionnel, l'entrée sera libre. L'exemple présenté dans cet article ne fonctionne que sur les navigateurs compatibles. Pour les alternatives, se rapporter au dernier point.
Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte à une liste de suggestions.
list="bieres" type="text" id="choix_bieres">
Aperçu sous Internet Explorer 10
Le champ de formulaire (input
) et la liste de suggestions (datalist
+ option
) sont reliés grace à la valeur commune des attributs list
rattaché à l'input
, et id
de la datalist
.
Il est possible d'utiliser la même liste de suggestions pour plusieurs champs de formulaire. Cela peut être pratique pour les champs dupliqués, il n'y a ainsi qu'une seule liste à maintenir.
list="bieres" type="text" id="choix_bieres">
list="bieres" type="text" id="choix_bieres_ami">
Pour les navigateurs ne supportant pas , une alternative simple peut être trouvée en complétant le formulaire par un
. Le champ primaire reste libre, tandis que la liste de choix est présentée pour ces navigateurs.
Il appartient ensuite au script traitant les données côté client (navigateur) ou côté serveur de déterminer de quel champ proviennent les données : a priori il faudra prendre en compte la liste de choix uniquement si le champ est laissé libre.
Dans le même ordre d'esprit, un contenu texte stocké dans , en-dehors des options, sera affiché par les navigateurs qui ne reconnaissent pas cet élément.
L'étiquette affichée est définie par l'attribut label
. Cependant, il est important de garder à l'esprit que la valeur utilisée au final est celle donnée aux attributs value
des éléments et non à leur contenu (situé entre la balise ouvrante et la balise fermante) ou à la présence de l'attribut
label
.
Si des valeurs différentes sont spécifiées pour deux ou trois de ces possibilités (value
, label
ou contenu texte), par exemple le comportement des navigateurs sera disparate :
value
et label
mais pas le texte contenu,label
, puis le contenu texte, puis la valeur figurant dans l'attribut value
Pour les navigateurs ne supportant pas , l'élément
est toujours affiché en dernier recours, mais ses options sont aussi affectées par les précédentes informations, mais avec une meilleure cohérence dans l'interprétation : toutes les options sont affichées de la même façon. Notons aussi que les options ne peuvent être groupées avec
comme dans une liste de choix
.
La liste de données peut être potentiellement appliquée à d'autres éléments d'entrée, et n'est pas limitée à un . Si le navigateur le supporte, elle a pour vocation d'épauler d'autres types, par exemple
, ou .
type="range" list="lumidata" min="0" max="100" value="50" step="1">
Aperçu sous Opera 11.6
Le contenu de l'élément peut être manipulé dynamiquement dans le document, par JavaScript et l'API DOM notamment. Ceci permet d'ajouter ou de supprimer des options à la demande, par exemple en fonction d'un critère local (une case à cocher, une autre condition) ou en fonction du retour d'un appel AJAX avec XMLHttpRequest, voire avec un framework JavaScript tel que jQuery.
Cet élément étant présent en dur dans le document HTML, des frameworks JavaScript appropriés (jQuery, Dojo...) ou des scripts spécifiques peuvent aller y piocher les informations pour construire une auto-complétion dynamique.
datalist
(inclus input[list], input[selectedOption], datalist[options]) par Alexander Farkas.Les informations et codes piochés sur le Web sont-ils toujours d'actualité ? Vos sources sont-elles toujours fiables et tenues à jour ?
Nous avons soulevé cette question à la fin de l'année passée, et force est de constater qu'un bon nombre de ressources considérées comme des références dans notre domaine deviennent petit à petit obsolètes, tant le Web, les navigateurs et les standards évoluent constamment.
Les articles et tutoriels proposés sur Alsacreations.com n'échappent pas à cette règle inexorable et c'est pourquoi un grand ménage a été programmé et s'achève en ce moment dans le but de remettre au goût du jour l'ensemble de nos contenus libres.
Sous la houlette de Dew, une petite équipe d'irréductibles modérateurs s'est évertuée pendant plusieurs mois à reprendre un par un plus de 275 documents publiés et leur appliquer les modifications suivantes :
Ce travail de titan, qui sera régulièrement renouvelé par surveillance automatique des dates de mise à jour, nous permet de vous proposer un ensemble de contenus qui devrait toujours coller au plus près de l'actualité, même si vous avez affaire à une "ancienne" ressource. Et c'est bien ce qu'on aimerait trouver lors de toutes nos recherches sur Internet, n'est-ce pas ?
(Photo : Walt Stoneburner)