Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif. Ce Carrousel est d’abord pensé pour fonctionner en HTML et CSS et peut bénéficier des améliorations apportées par Javascript (en l’occurrence jQuery) pour avoir des transitions plus funky entre les contenus. Via JPV.
WordPress est un CMS formidable, ce qui ne l’empêche pas d’avoir des lacunes. L’une d’elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme Drupal ou Joomla. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n’est pas toujours très évidente à maintenir. Voici la solution que j’ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog. →
Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Ceci dit, j’aime bien tester les frameworks CSS qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation. Le potentiel didactique de ces projets est très intéressant. Ne vous en privez pas. →
CleverCSS est une manière de produire des CSS inspirée par le langage de programmation Python : les accolades sont remplacées par l’indentation des différentes règles CSS et les déclarations sont introduites par le signe deux-points. Jusque-là, rien de bien fou, mais CleverCSS ne s’arrête pas à l’économie de quelques signes et propose de nombreuses améliorations à CSS : de l’optimisation de la syntaxe à l’utilisation des constantes en passant par le calcul sur les valeurs, y compris les couleurs. →
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. →
jqTransform est un plugin jQuery qui améliore légèrement — mais sûrement — l’apparence des formulaires web en gardant l’essentiel : les formulaires ressemblent toujours à des formulaires ! Les champs text voient leurs coins légèrement arrondis, ainsi que les case à cocher avec une coche du plus bel effet. Les boutons radio et les menus select sont eux aussi légèrement stylés.
Les feuilles de style réservées à l’impression sont souvent oubliées alors qu’elles offrent de grands services pour tous ceux qui impriment les pages web pour les consulter plus tard ou simplement pour avoir une meilleure lisibilité si les pages présentent des fonds torturés. Voici l’essentiel en 10 trucs et astuces pour créer une feuille de style CSS réservée à l’impression. →
Les problèmes de compatibilité entre les feuilles de style CSS et leurs interprétations parfois fantaisistes d’un navigateur à l’autre font partie du quotidien des intégrateurs web et autres webdesigners. Voici une liste de liens (en anglais) qui vous permettra de reconnaitre et corriger les bugs de rendu qui font tâches dans votre design web : →
A mesure que les techniques des langages du web l’ont permis, des designers web talentueux ont travaillé à l’élaboration d’environnement de travail permettant de mettre en place des systèmes de grille adaptés aux contraintes de la création de pages web. Contrairement à l’imprimé où le langage de description de page Postscript d’Abode est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs). →
Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur li:hover avec la classeli.sfHover). →
