CSS et évolutivité

Cet article est une traduction de l’article d’Adam Morse (@mrmrs_) intitulé CSS and Scalability. Le terme “scalability” n’a pas d’équivalent évident en français. Il fait référence à l’utilisation de CSS sur des projets qui évoluent, qui grandissent. Kaelig Deloumeau-Prigent parle de CSS “maintenables”, dans son livre du même nom, pour évoquer des problématiques comparables. J’ai choisi de traduire “scalability” par “évolutivité”.

Il y a plusieurs années, je me suis demandé comment les utiliser les CSS sur des projets de grande envergure. Quand j’ai commencé, il y avait beaucoup moins de ressources sur le sujet qu’aujourd’hui. Il y avait quelques livres que des amis m’avaient prêtés et deux ou trois articles de blog intéressants. Mais les CSS étaient encore un sujet relativement récent et la plupart des gens n’avaient pas encore commencé à réfléchir sérieusement ou à découvrir par la pratique les concepts de maintenabilité lors du travail d’équipes sur de grosses applications web.

Continue reading “CSS et évolutivité”

CSS : Comment gérer l’élément actif d’un menu de navigation placé dans un include PHP ?

Sous ce titre pas très explicite (mais je n’ai pas trouvé mieux) se cache une vraie question que tout intégrateur web a bien dû se poser une fois…

Je n’en ai pas parlé depuis mon premier post, mais j’aime beaucoup les CSS. C’est même indiqué dans le sous-titre du blog, pour vous montrer à quel point c’est important.

Ce que j’aime beaucoup avec les CSS, c’est résoudre les petits problèmes qui ne manquent pas de se présenter lorsqu’on intègre un site et que, bizarrement, on n’avait pas envisagé au début.

On m’a soumis un des ces petits problèmes aujourd’hui, et je me propose de vous en parler, parce que c’est une situation plutôt classique. J’imagine que si vous intégrez des sites en HTML/CSS de façon régulière, vous devez déjà avoir votre méthode (n’hésitez pas à l’expliquer dans les commentaires). Cet article est donc plutôt destiné aux débutants.

Le problème

Nous avons un site avec, de haut en bas :

  • un bandeau supérieur
  • un menu de navigation horizontal
  • le reste du site, qui ne nous intéresse pas aujourd’hui

Nos deux premiers éléments (le bandeau et le menu) se répétant de page en page, ils ont été placés dans un fichier header-inc.php qui est rappelé à chaque page par la fonction PHP include. L’intérêt de cette pratique est bien sûr de ne pas avoir à répéter sur chaque page des éléments communs à toutes les pages. Ainsi, si on modifie le menu de navigation, on ne le fera qu’une fois (dans notre fichier header-inc.php, et non pas sur chaque page.

Le problème qui se pose est le suivant : comment faire pour mettre en valeur l’élément du menu correspondant à la page sur laquelle on se trouve ?.

Continue reading “CSS : Comment gérer l’élément actif d’un menu de navigation placé dans un include PHP ?”

The Parallax Effect : CSS is beautiful !

Paul Annett a imaginé une façon simple et élégante de créer un effet de parallaxes en utilisant uniquement les CSS. Brillant !

Où Paul Annett recréé le parallax scrolling de Sonic (le jeu Sega, si, si) en CSS.

Silverback est un outil de test d’ergonomie des sites internet créé par Clearleft, une web agency de Brighton. Vendu moins de $50, Silverback ne nécessite pas d’autre matériel qu’un Mac tournant sous Tiger ou Leopard. C’est déjà bien. Ce qui est encore plus beau, c’est le site Silverback.

Page d'accueil du site Silverback

On ne s’en rend compte qu’en redimensionnant la fenêtre du navigateur, mais l’image de fond n’est pas fixe. Ainsi, les lianes entourant le gorille, logo de Silverback, se déplacent de façon différentes pour simuler la profondeur.

Continue reading “The Parallax Effect : CSS is beautiful !”