yepnope.js permet de charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le but de ne charger que l’essentiel. C’est le compagnon idéal de Modernizr qui se charge de détecter les fonctionnalités en question (cf. Modernizr — Détection des fonctionnalités CSS3 et HTML5). Un Polyfills est une fonction (généralement en Javascript) qui émule une fonctionnalité pour les navigateurs ne la prenant pas en charge (cf. What is a Polyfill?). Grâce à Modernizr et yepnope.js il est possible d’utiliser les fonctionnalités HTML5 et CSS3 en première intention tout en ménageant une porte de sortie pour les navigateurs plus anciens. Lire le reste de cet article »
06/12/10
CSS3 Media Queries en Javascript pour les vieux navigateurs
CSS3-MediaQueries-JS est une bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2 — Firefox 3.5+, Opera 7+ et Safari 3+ étant nativement compatibles avec cette propriété CSS3. Les Medias Queries offre un mécanisme pour isoler certaines propriétés ou pré-requis techniques pour appliquer aux agents utilisateurs correspondants une déclaration ou une feuille de style CSS spécifique. Lire le reste de cet article »
18/10/10
innerShiv — Le contenu HTML5 généré par innerHTML fonctionne enfin dans IE
Pour les injecter les balises HTML5 dans le DOM et leur appliquer la propriété CSS display: block pour les styler, Remy Sharp a mis au point html5shiv qui est toutefois sans effet lorsque les balises HTML5 sont affichées via innerHTML. Heureusement, HTML5 innerShiv est là pour que les version 6 à 8 d’Internet Explorer tiennent compte des nouvelles balises HTML5 créées à la volée.
15/09/10
Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery
Outre un nouveau design sombre que je trouve très réussi, Soh Tanaka nous offre une belle leçon de choses en utilisant le pseudo sélecteur :nth-child() et une pincée de jQuery (compatibilité Internet Explorer oblige) pour donner du rythme à une liste de produits contenant des éléments récurrents de tailles différentes. Rassurez-vous, le concept est très bien expliqué avec moult illustrations dans l’article Advanced Columns using the :nth-child(N) ;)
23/08/10
ChangeClass — Changer de classe CSS à la volée
ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript et de jQuery pour la majorité des solutions pour régler 12 problèmes courant liés aux navigateurs. Via @zeubeubeu. Lire le reste de cet article »
22/06/10
Étendre la zone cliquable d’un lien à l’élément parent avec jQuery
Pour étendre la surface cliquable d’un lien les CSS sont bien utiles : il suffit d’augmenter le padding de l’ancre concernée. Mais ne serait-il pas judicieux de rendre cliquable l’élément parent d’un lien ? C’est ce que propose Eroan Boyer dans son billet Étendre la portée d’un lien avec Jquery : Lire le reste de cet article »
13/04/10
Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click»
David Walsh s’est penché sur l’affichage du «doigt qui clique» lorsqu’on ajoute un événement click ou hover sur un élément du DOM : Lire le reste de cet article »
03/03/10
Effets « lightbox » CSS & Javascript sans framework
Effets lightbox sans framework — L’ouverture de nouvelles fenêtres popup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS et comportant, une fois n’est pas coutume, du Javascript intrusif pour réaliser une lightbox pour présenter des images, un contenu dynamique, un formulaire avec effet de fading tout en assombrissant le reste de la page. Sans framework Ajax, avec quelques lignes de code. Scripts testés avec Internet Explorer, Firefox, Chrome, Opera, Safari et Konqueror.
04/02/10
Implémentation jQuery du module CSS3 Template Layout
css-template-layout est la transcription Javascript du module CSS Template Layout Module. Ce mécanisme prévu par CSS3 permet de faire une grille de mise en page indépendante de la position des éléments dans le flux, sous la forme de déclarations CSS. Lire le reste de cet article »
09/01/10
Astuces (Snippets) pratiques pour Javascript et jQuery
Voici une collection de près de 40 bouts de code pour faciliter vos développements en Javascript ou jQuery : rechercher une chaine de caractère dans n’importe quel élément HTML, vérifier si un élément existe avant de l’utiliser, sélectionner/de-sélectionner une série de cases à cocher, déplacer une option d’une liste à l’autre, etc. Via Taggle.