Avant d’entrer dans le vif du sujet, il est important de comprendre plusieurs concepts.
La mise en place de codes Javascript non-obstructif permet de faire fonctionner le site sans l’utilisation du javascript. (aujourd’hui presque tout le monde active le javascript ce qui n’est donc pas l’argument principal).
Cette technique permet surtout de garder le code xhtml propre et de l’utiliser pour ce dont il est conçu, c’est-à-dire, l’organisation du contenu.
Un code xhtml tout basique, il s’agît d’un bouton de formulaire de ce type :
[code lang="html"]
[/code]ce bout de code est sémantiquement correct, il décrit un bouton tel que spécifié dans les standards du W3C.
Mais nous aimerions que le design de celui-ci soit plus … disons …. attractif comme ça :
Et moi un beau bouton
Pour ce faire, il faut donc dynamiquement remplacer le code html du bouton par une balise de type lien. Nous en reparlerons, mais l’utilisation de la technique « sliding-doors » permet d’avoir un bouton redimentionnable.
Le framework jQuery permet facilement d’effectuer ce remplacement.
[code lang="javascript"]
$(document).ready(function() {
// dès que la page est chargée
// pour chaque élément contenant la class "submitbutton"
$('.submitButton').each(function(e){
//récupéré les attributs suivants
var val = $(this).attr('value');
var formsend = $(this).attr('name');
var bt_id = $(this).attr('id');
// remplacer le bouton par un lien
$(this).parent().html(''+val+'').click(function(){
// comportement du lien lors du clique
$('form#'+formsend).submit();
});
});
});
[/code]La propreté du code dans une page web, c’est surtout les avantages suivants :
- Une meilleure sémantique améliore grandement le référencement dans les moteurs de recherche
- Une meilleure « maintenabilité » du code, et donc moins de frais :-)
Pour aller plus loin
- Présentation sur le javascript non-obstructif
- Les boutons dans les applications de google Quelques pistes
- Une technique moins extensible pour svnpack
Continuer ma lecture
Auteur(s) de l'article
RayCast, à 2 clics de tout
Repos GitHub, pull requests, historique du presse-papiers… Et si tout cela tenait dans un seul raccourci clavier ?
Repos GitHub, pull requests, historique du presse-papiers… Et si tout cela tenait dans un seul raccourci clavier ?
Auteur(s) de l'article
Smashing Conference Freiburg 2026
Retour à Freiburg pour la Smashing Conference 2026: l'IA et les design systems, du CSS et du HTML très techniques, et des talks plus humains sur l'équipe et la posture. Voici ce qu'on en retient.
Retour à Freiburg pour la Smashing Conference 2026: l'IA et les design systems, du CSS et du HTML très techniques, et des talks plus humains sur l'équipe et la posture. Voici ce qu'on en retient.
Auteur(s) de l'article
Le prix du logiciel c’est surtout : qui possède le problème
La responsabilité et la confiance Payer pour un logiciel, ce n’est pas simplement acheter une solution clé en main. C’est bien plus que ça. C’est déléguer une partie de notre […]
La responsabilité et la confiance Payer pour un logiciel, ce n’est pas simplement acheter une solution clé en main. C’est bien plus que ça. C’est déléguer une partie de notre […]
.png)
.png)