| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Liste exhaustive des types de voies (rue, avenue...) en France, d'après le Ministère de l'Intérieur</title> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>abbaye</li> | |
| <li>agglomération</li> |
Par exemple, nous voulons connaître la classe associée à la classe foo.
L'intérêt peut être multiple...
À titre d'illustration, nous générons une liste de choix avec Hypertext Preprocessor (Php) à partir de la saisie d'un utilisateur, qui est envoyée par Asynchronous JavaScript And Xml (Ajax). Nous voulons conserver un identifiant pour sécuriser la transaction suivante.
<?php
Nous pourrions, avec une simple expression régulière, vouloir valider une date :
<script>
function ValidDate(day) {
var pattern = new RegExp(/^\d{2}-\d{2}-\d{4}$/);
return pattern.test(day);
}
</script>
Les navigateurs sont bien conçus : pour accélérer le traitement des pages, les fichiers, par exemple les Cascading Style Sheets (Css) ou autres bibliothèques JavaScript ou jQuery, sont mis en cache. Or, cet avantage est contre-productif pour le développeur : il doit modifier constamment la configuration de son logiciel de navigation afin de voir les changements.
Grâce à cette astuce élémentaire, <?php echo '?'.mt_rand(); ?>, qui requiert donc l'utilisation de Hypertext Preprocessor (Php), les fichiers seront systématiquement rafraîchis et les modifications instantanées ; leurs noms seront modifiés aléatoirement à chaque chargement de page.
Bien entendu, pour être agréable à ses visiteurs (!), il ne faudra pas oublier de renommer l'appel des feuilles de styles et autres scripts lors de la mise en production.
Avec WordPress, on pourrait utiliser dans le fichier functions.php...
| <ul> | |
| <li>Comment s'appelait votre meilleur ami lorsque vous étiez adolescent ?</li> | |
| <li>Comment s'appelait votre premier animal de compagnie ?</li> | |
| <li>Quel est le premier plat que vous avez appris à cuisiner ?</li> | |
| <li>Quel est le premier film que vous avez vu au cinéma ?</li> | |
| <li>Où êtes-vous allé la première fois que vous avez pris l'avion ?</li> | |
| <li>Comment s'appelait votre instituteur préféré à l'école primaire ?</li> | |
| <li>Quel serait selon vous le métier idéal ?</li> | |
| <li>Quel est le livre pour enfants que vous préférez ?</li> | |
| <li>Quel était le modèle de votre premier véhicule ?</li> |
| @gutter : 0.5rem; | |
| @screen-sm: 48; | |
| @screen-md: 62; | |
| @screen-lg: 75; | |
| @columns-xs: 12; | |
| @columns-sm: 12; | |
| @columns-md: 12; | |
| @columns-lg: 12; | |
| @container-sm: unit(@screen-sm - (4 * @gutter), rem); | |
| @container-md: unit(@screen-md - (2 * @gutter), rem); |
Le script [html5shiv] (https://github.com/afarkas/html5shiv) est la solution la plus répandue pour assurer le support de Html 5 dans les vieux navigateurs. Or, son inclusion est souvent problématique.
Certains auteurs recourent aux commentaires conditionnels pour que le code ne soit pris en compte que par les anciennes versions d'Internet Explorer. Cette option est insatisfaisante : d'autres navigateurs, plus rares certes, ne supportent pas non plus Html 5.
La détection par navigateur n'est jamais satisfaisante !
... Ainsi que le rappelle [Microsoft] (https://msdn.microsoft.com/fr-fr/library/hh273397%28v=vs.85%29.aspx).
[Modernizr] (http://modernizr.com/) permet de détecter facilement les caractéristiques d'un navigateur afin de prévoir une solution de repli éventuelle, un Fallback ou Failback.
Cependant, et comme la ressource est rare, il peut être judicieux de détecter quelques caractéristiques, directement, sans librairie.
Toutes les détections que nous présentons ont été testées dans les principaux navigateurs, c'est-à-dire qu'elles ne provoquent pas d'erreurs : la syntaxe est conforme comme l'indique [JsHint] (http://jshint.com/) et universelle comme le confirme [JavaScript compatibility checker] (http://jscc.info/). Elles permettront d'y puiser de l'inspiration pour d'autres développements.
Attention ! certaines propriétés sont redondantes.
Nous souscrivons à la plupart des arguments en faveur du maintien du support de JavaScript, comme ceux développés dans [punkchip] (http://www.punkchip.com/why-support-javascript-disabled/) (le texte est en anglais).
En effet, le contenu des sites justifie rarement l'emploi exclusif (ou maladroit !) de JavaScript.
Cependant, JavaScript peut être nécessaire pour assurer une interaction riche avec les visiteurs. 1 à 2 % d'internautes rétifs ne justifie pas un double développement ou un appauvrissement des fonctionnalités permises par l'état de l'art. Au surplus, ces internautes qui désactivent JavaScript dans leur navigateur sont plutôt des technophiles (soucieux de vitesse, de sécurité...), car les autres ne modifient pas la configuration d'origine ; les premiers connaissent les avantages et les inconvénients de la technologie. Enfin, l'interaction exclusive avec JavaScript, comme les requêtes en Asynchronous JavaScript And Xml (Ajax), peut être un
Les images en ligne au format Standard Vector Graphics (Svg), commodes d'emploi, permettent une économie de bande passante. Prenons un exemple, avec l'image décrite comme suit (svg-0.html)...
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="title-logo desc-logo">
<title id="title-logo" class="svg-aria">Logotype</title>
<desc id="desc-logo" class="svg-aria">Ornement</desc>
<path fill="#ff0000" d="M12,1A3,3 0 0,1 15,4V5A1,1 0 0,1 16,6V7.07C18.39,8.45 20,11.04 20,14A8,8 0 0,1 12,22A8,8 0 0,1 4,14C4,11.04 5.61,8.45 8,7.07V6A1,1 0 0,1 9,5V4A3,3 0 0,1 12,1M12,3A1,1 0 0,0 11,4V5H13V4A1,1 0 0,0 12,3M12,8C10.22,8 8.63,8.77 7.53,10H16.47C15.37,8.77 13.78,8 12,8M12,20C13.78,20 15.37,19.23 16.47,18H7.53C8.63,19.23 10.22,20 12,20M12,12A2,2 0 0,0 10,14A2,2 0 0,0 12,16A2,2 0 0,0 14,14A2,2 0 0,0 12,12M18,14C18,13.31 17.88,12.65 17.67,12C16.72,12.1