Il est possible de réaliser des inclusions de fichiers coté serveur. Pour cela, il vous faudra d’abord rendre opérationnelle l’extension mod_include sur Apache.
Rien de plus simple ! En supposant que votre serveur apache est localisé chemin « /etc/apache2/ », exécutez la commande suivante :

sudo ln -s /etc/apache2/mods-available/include.load /etc/apache2/mods-enabled

Cette commande va créer un lien symbolique du module « include » dans le dossier des modules activés de Apache.

N’oubliez pas de redémarrer Apache :

apache2 -k restart

Une fois cette opération effectuée, vous avez fait le plus gros du boulot. Nous allons maintenant utiliser ce module pour activer les inclusions au sein des fichiers javascript ayant pour extension « .includer.js »

Dans votre dossier contenant les scripts ou même à la racine de votre projet, créez un fichier .htaccess. Dans ce fichier .htaccess, nous allons d’abord définir un filtre de type de fichier (supprimez bien l’espace entre < et Filematch, mon syntax highlighter est buggé ):

< FilesMatch "\.includer\.js$">
< /FilesMatch>
 
Ensuite, il faut activer le module include de Apache :
<pre lang="apache">Options +Includes

Enfin, nous lançons le filtre qui va examiner les fichiers filtrés précédemment et gérer l’inclusion :

SetOutputFilter INCLUDES

Voici ce que vous obtenez au final dans votre fichier .htaccess :

< FilesMatch "\.includer\.js$">
Options +Includes
SetOutputFilter INCLUDES
< /FilesMatch>

Créez maintenant dans votre dossier de script un fichier nommé global.includer.js puis créez votre première inclusion.
Exemple en ayant pris le soin de mettre à disposition jquery dans le même dossier que le fichier gérant l’inclusion:

<!--#include file="jquery-1.4.4.js" -->
$('document').ready(function() {
    alert("L'inclusion fonctionne à merveille");
});

Avec cet exemple, jquery va être automatiquement inséré avant le script créant l’alerte javascript.

L’inclusion coté serveur peut être très utile aussi dans des fichiers css ou même html !

Voici donc une liste (non-exhaustive) des points de contrôle effectués :

Points de contrôle
Ergonomie
	Ne pas utiliser de soulignement de texte pour autre chose que des liens.
	La page 404 est indispensable et doit être personnalisée aux couleurs du site. Proposer éventuellement un formulaire de recherche.
	Une feuille de style d’impression doit être prévue.
Accessibilité
	En cas d’utilisation de plug-ins (vidéo, Flash), prévoir une alternative textuelle pour un utilisateur qui n’aurait pas installé et/ou ne voudrait pas installer le plug-in.
	Tester la page sans images (via l’extension Webdevelopper de Firefox) pour s’assurer que l’ensemble du contenu est lisible sans les images de fond. Exemple : Un texte blanc sur une image def fond peut devenir illisible si aucune couleur de fond n’a été spécifiée dans les propriétés du bloc conteneur.
	Toute image doit avoir un alt, renseigné ou non. Illustration : alt vide, ou image de fond
	Dans le cas où des fichiers sont proposés au téléchargement, deux points sont à respecter : format ouvert, poids du fichier à télécharger doit être indiqué.
	Le javascript doit être non-obstrusif et le site doit être parfaitement utilisable s’il est désactivé par l’utilisateur.
Intégration HTML / CSS
	Les pages sont valides W3C
	Le balisage est propre : pas de styles ou de scripts dans le code HTML
	Le doctype du document HTML sera du XHTML 1.0 Transitional dans le cas (limité) d’utilisation d’iframe.
	Le doctype du document HTML sera du XHTML 1.0 Frameset dans le cas (limité) d’utilisation de frameset.
	Bannir l’utilisation de tableaux pour la mise en page, les tableaux ne doivent être utilisée que pour des données tabulaires et non pas pour créer des mises en page.
	S’efforcer de renseigner l’intitulé « title » des liens pour des raisons de référencement et d’accessibilité. Le title du lien doit fournir plus d’informations que l’intitulé du lien lui-même (mais y compris l’intitulé ; ex : « Aide (nouvelle fenêtre) »)
	La structuration de l’information doit être cohérente par rapport au contexte général du site Web (ex : pas de pub au milieu du texte)
	Une page Web doit posséder une structure cohérente (utiliser h1 (oblig.), h2, …pour leur fonction 1ère ; les blocs d’infos doivent être distincts)
	Pour les tableaux de données, identifier les zones suivante : « thead » (pour l’entête du tableau), « tbody » (pour le corps du tableau) et « tfoot » (pour les données de pied de tableau). On s’efforcera de fournir une description du tableau au sein de la balise « summary »
	Les champs de saisie d’un formulaire doivent être reliés à leurs textes explicatifs respectifs (spécifier label, id et for)
	Respecter le sens sémantique des balises. Proscrire l’utilisation des balises et attributs dépréciés (ex : b, center, basefont, applet, dir, font, isindex, menu, s, strike, u et align, bgcolor, height…).
	Utiliser la balise <abbr> et/ou <acronym> ainsi que son attribut title lorsque cela est possible.
	Dans le cas d’un style spécifique à Internet Explorer, utiliser les commentaires conditionnels. Evitez les hacks du type « _margin » ou encore « *width »
	Pour conserver un maximum de souplesse aux feuilles de style, limiter tant que possible le « poids » des déclarations. Exemple : privilégier « .content » à « body.page #wrapper div.content »
	Pas de notions topographiques ou colorimétriques dans les noms de classes ou : noms faisant référence à la structure. Pas de couleur ni gauche/droite. Exemple : ne pas utiliser div.rouge ou div.left. Si on décide un jour de modifier les propriétés de placement ou d’apparence, ces classes n’auront plus de sens.
	Ne pas utiliser de cote, double ou simple, dans les chemins des CSS.
	Les sites, les pages doivent pouvoir être actualisés facilement et avec souplesse. De ce fait, les zones de contenu doivent s’étendre graphiquement en hauteur (pas de hauteur fixe donc pour les blocs)
Optimisation du référencement
	Pour des raisons de référencement, limiter au maximum les paramètres et les caractères « exotiques » dans les liens.
	Les balises d’indexation <title>, <meta name= »description » /> et <meta name= »keywords » /> doivent êtres renseignées même si leur action en terme de référencement peut être discutable. Elles doivent être situées juste sous la balise définissant l’encodage et dans l’ordre suivant : title / description / keywords
	La balise <title> doit être présente et renseignée sur toutes les pages. Elle doit être en adéquation avec son contenu et donc, dans la plupart des cas, différente d’une page à l’autre.
	La balise <meta name= »description »> doit être présente et renseignée sur toutes les pages. C’est une balise visible par l’internaute. Elle doit être significative de son contenu, des services rendus par la page, des informations livrées.
	La balise <meta name= »keywords »> doit être présente et renseignée sur toutes les pages. Elle doit reprendre les quelques mots-clé de la page. On peut aussi y inclure certains pluriels, synonymes, anglicismes, etc.
	Prévoir un fichier à l’intention des robots d’indexation, à la racine du site. (robots.txt)
Compatibilité Navigateurs
	Internet Explorer 6, (N.B. : Pour cette version, il faut que le site soit un minimum exploitable)
	Internet Explorer 7 et +,
	Firefox 2 et +,
	Safari 2 et + (tolérance)
	Opera 9 et + (tolérance)
	Les pages livrées doivent s’afficher, sans ascenseur horizontal, dans un écran en 1024 x 768
Performance
	Le poids maximal d’une page, images incluses, ne doit pas dépasser 150k.
	Seule la page d’accueil fait exception et peut atteindre jusqu’à 250k, images incluses.
	Évitez les appels multiples à des feuilles de style ou à des fichiers javascript. Merger ces appels pour des raisons évidentes de performance
	L’utilisation du format PNG 24 devra être utilisé avec parcimonie pour des raisons de compatibilité navigateur (IE6 ne supporte pas les couches alpha sans l’utilisation de DirectX. Ce dernier pose des soucis de performances, les images filtrées n’étant pas mises en cache).
Autre…
	L’encodage privilégié est l’UTF-8, il est indiqué avec la balise meta « content type ».
	Les caractères suivants doivent être encodés sous forme d’entité HTML : &, <, >, €
	Prévoir une icône de favori à la racine du site.
	Les valeurs monétaires, statiques ou dynamiques, doivent suivre le format suivant : un espace insécable comme séparateur de millier une virgule comme séparateur de décimale un espace insécable entre le nombre et son unité
	Utiliser un espace insécable entre une double ponctuation et le mot qui la précède : !, ?, :, ;
	Les chemins vers les pages (mais aussi vers les scripts, feuilles de style, images, etc) doivent être en absolu en considérant le répertoire / comme la racine du site.
	Dans le cas d’envoi de paramètre dans l’URL, ne pas oublier d’encoder sous forme d’entité HTML le « & » (&amp;).

Dans la démonstration associée à cet article, vous aller pouvoir visualiser quelques possibilités offertes par CSS3, voici celles que j’ai utilisées :

Le pseudo-selecteur :target

:target est un pseudo-sélecteur permettant d’accéder à un élément du DOM possédant l’id du lien référent.
En clair, si je clique sur un lien dont l’attribut href est égal à #test, la propriété de style a:target { background-color:red; } affectera un fond de couleur rouge à l’élément ayant pour ID #test.

C’est de cette manière que j’obtiens la méthode de sélection des images agrandie dans la démo. Pour IE qui ne supporte par cette propriété, j’ai bidouillé grâce à l’overflow. En clair, le cadre conteneur des images agrandies a pour attribut overflow, la valeur hidden. Il dispose en outre des dimensions exactes d’une de ces images. Au clic sur le lien de la miniature, l’image cible est directement appelée par le hash du lien.

Les ombres

Pour la démo, j’ai utilisé la propriété box-shadow afin de mettre en valeur l’image miniature survolée. La syntaxe est simple :

-moz-box-shadow:0 0 0 rgba(255,255,255,0.5);
-webkit-box-shadow:0 0 0 rgba(255,255,255,0.5);

Il est à noter que cette propriété à été retiré pour le moment de la spécification CSS3.

La propriété transform

Cette propriété permet d’agir sur la forme d’un élément, qu’il s’agisse d’une image ou de toute autre balise standard.

Il est par exemple possible d’effectuer une rotation sur un objet via cette syntaxe :

img {
  transform:rotate(20deg);
}

Il vous sera également possible de mettre à l’échelle certains élements. Voici un exemple :

div#button {
  transform:scale(0.8); /* réduira la div de 20% */
}

Sur la démonstration, je m’en suis servi pour agrandir les miniatures au survol de la souris.

Les transitions

J’ai également utilisé les transitions (qui ne fonctionnent qu’avec la version 3.7 de Firefox et avec les dernières versions de Safari).  Les transitions CSS permettent de modifier les valeurs de propriétés CSS progressivement, sur une durée déterminée. On construit la valeur en spécifiant d’abord la ou les propriétés sur lesquelles on souhaite agir (background-color par exemple ou all pour toute les propriétés liées au sélecteur), on indique ensuite une durée d’animation (en secondes ou millisecondes), puis le type d’effet de transition (default, linear, ease-in, ease-out, ease-in-out ou cubic-bezier).
Voici un exemple de propriété :

transition: all 1s ease-in-out;

Les animations de la galerie CSS3 utilisent pleinement les possibilités offertes par les transitions.

Dernière astuce liées à cette propriétés : pour donner cette impression d’image tournoyante lorsqu’une miniature est sélectionnée, j’ai juste initialisée la rotation de l’image à -360 degrés. Une fois l’image sélectionnée, l’image cible (:target) subit une rotation de 0 degré.

La démonstration

Voici donc la démonstration d’une galerie full-CSS. Pour le fun, visualisez cette galerie sur différents navigateurs (IE 6, Firefox 3.6, Safari). Vous verrez ainsi que la galerie utilise le concept d’amélioration progressive.

Édit le 04/10/2010 : MAJ de la feuille de style suite au commentaire de mekal. Le zip est à jour également sur mon espace GitHub.

• Accéder à la démonstration
• Télécharger la démo

<a href="http://www.smashingmagazine.com">
  <h1>Smashing Magazine</h1>
  <h2>online magazine dedicated to designers and developers.</h2>
</a>

Le lien devient ainsi actif sur l’ensemble des balises bloc. Ceci évite d’insérer plusieurs fois le même lien.

Ce balisage marche sur la plupart des navigateurs dont IE6 seulement voilà, sur ce dernier, le curseur n’est pas correct au survol des balises de type bloc. A la place du pointeur, on à le curseur de type de texte.

Voici ce que l’on peut ajouter dans la feuille de style pour corriger celà :

a * { cursor:pointer; }

Et miracle, le curseur par défaut des liens fonctionne également sur les balises type bloc.

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

On obtiendra avec jQuery ce type de code pour la div #frontvines

$("body").mousemove(function(event){
   $("#frontvines").css({ 
      backgroundPosition: (event.clientX * 1.1) + 'px 0px'
   });
});

Sur la première ligne, on cherche l’évènement qui indique que l’utilisateur bouge sa souris sur la page. Dans la partie fonction, on place en paramètre la position du curseur pour la réutiliser ensuite pour modifier les propriétés de styles associées à la balise comportant l’id #frontvines. Pour observer le résultat, rendez-vous sur la page dédié à cette démonstration disponible ici.

Pour aller plus loin, je me suis amusé, dans une seconde démonstration, à réutiliser une photo de paysage pour y introduire du parallax. Le principe reste le même, je vous laisse le soin de télécharger le script sur la page de la seconde démonstration, vous y trouverez la manière de procéder dans les commentaires du fichier Javascript.

Quelques liens en rapport avec Parallax :

Effet parallax à l’aide de CSS ou de Javascript

• Le futur site de service Dumago.net (CSS)
• Effet parallax aux mouvements de la souris sur Umaghetzeggen.nl (Javascript)
• Le site des tests de performances Javascript Dromaeo (CSS)
• Démo expérimentale de footer avec effet de vagues (CSS)

Utilisation de parallax sous Flash

• Une démo assez bluffante en Flash
• Effet de rotation rendu grâce à parallax
• Un header construit en parallax
• Le site Freedent White

Tutorial

• Un tutos sur Sitepoint.com sur les effet parallax en CSS

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n’est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l’épreuve du validateur W3C. Ce n’est pas en insérant des « _width: » ou encore de « %margin: » dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J’irais même jusqu’à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j’avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l’intérêt sans ces soucis de compatibilité. Même si j’affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d’un navigateur à l’autre et surtout, comment y remédier.

Les hacks que l’on pourrait éviter

Les images PNG

Prenons l’exemple du PNG. Beaucoup de webmasters s’extasient devant les possibilités de ce format d’image. L’utilisation des différentes couches alpha de transparence offre effectivement de nombreuses possibilités. Seulement voilà, ce format n’est pas pris en charge par les anciennes versions d’IE. Le hacker en herbe viendra me faire remarquer que l’on peut remédier à ce problème en utilisant la propriété CSS DX.Transform dans la feuille CSS ou dans un fichier .htc. Cette utilisation pose plusieurs soucis :

• La feuille de style n’est pas valide W3C.
• La feuille CSS n’est pas censée intégrer ce genre de propriétés ou faire appel à des fichiers chargeant du JavaScript.
• Ce hack fait appel au moteur Direct X et selon la version, une simple image peut faire bugger le système d’exploitation, ce qui est, vous en conviendrez, un peu gênant…

Si vous souhaitez vraiment utilisez le PNG sur Internet Explorer, appelez plutôt un fichier JavaScript pur pour arriver à vos fins.

Parfois, un simple découpage de l’illustration au format GIF ou même une image JPEG placée intelligemment peut offrir au visiteur le même effet. Le PNG n’est pas une fin en soit.

Les pseudo-classes

Concernant les pseudo-classes, évitez également de passer par un fichier .htc dans votre feuille de style pour intégrer le :hover sur une balise div ou un :target sur une tout autre balise. Encore une fois, si cette utilisation est requise, passez par de pures fonctions JavaScripts.

Un problème de taille !

Arrêtons de nous prendre le chou avec les débats philosophiques sur le model box ou autre double-margin. Ces problèmes peuvent être aisément contournés. De plus, vous le verrez par vous même, quand on commence avec des hacks de placement ou d’ajustement de dimension, on en finit plus. Les hacks attirent les hacks

Comme vous pourrez le constater sur l’exemple suivant, les soucis de padding ou de margin peuvent parfois être causés par une simple propriété qui n’a pas lieu d’être. Pour être certain de contrôler pleinement votre mise en page, efforcez-vous de tester plusieurs méthodes de positionnement sans passer par les hacks et testez le résultat sur différents navigateurs. Il y aura toujours une méthode qui fasse plaisir à tout le monde

Pour résumer

Avant de se décider à utiliser un hack, il faut d’abord se questionner sur les autres alternatives valables. Dénigrer IE sans chercher plus loin n’amènera rien de bon. N’intégrez pas de fonctions JavaScripts dans votre feuille de style par le biais de fichiers .htc mais préférez un fichier JavaScript pur. N’abusez pas du format PNG et ne l’utilisez qu’en dernier recours. Privilégiez l’utilisation de « !important » aux notations bidons telles que « _width: » ou encore « %padding: ». Les hacks CSS c’est taboo, on en viendra tous à bout.

• Le site web dédié à cet ouvrage : transcendingcss.com

Les pseudo-éléments sélectionnent une partie spécifique dans le Doctree (le formatage du document source) à partir des informations déjà données par ce dernier: nom, attribut… De fait, on peut appliquer un style sur une partie spécifique du document. Par exemple, avec le pseudo-élement :first-letter permet d’appliquer un style sur la première lettre d’un paragraphe. En combinant cette propriété avec le pseudo-classe :first-child, on peut alors créer une lettrine.

Les pseudo-classes, quant à eux, ciblent des éléments sans forcément prendre en compte les informations renvoyées par le Doctree. Elles ne se déduisent donc pas de ce dernier. (On notera toutefois deux exceptions: :first-child et :lang). Une propriété peut être générée dynamiquement par l’action de l’utilisateur sur le document.

La pseudo-classe qui nous intéresse dans le cas présent est :hover. Elle offre un certains nombre de possibilité que nous allons voir en détail en utilisant plusieurs exemples. Comme beaucoup de pseudo-classes et pseudo-éléments, elle connait des problèmes de compatibilités avec les navigateurs strictement inférieurs à IE 7. IE ne permet cette propriété que sur les balises de liens. Pour résoudre ces lacunes, on peut utiliser le hack JavaScript de Suckerfish pour implémenter la propriété :hover au vieux navigateurs IE.

D’un point de vue sémantique, les exemples ne sont pas toujours corrects. La raison? J’ai fais appel à des balises liens pour chaque exercice afin que le résultat soit visible sur tout les navigateurs, y compris les IE antérieurs à la version 7. Hors, les liens sont inactifs et ne lient à aucune page. Dans le meilleur des cas, il faudrait utiliser des balises span ou div mais il s’agit juste, dans le cas présent, de rendre compte des possibilités offertes par CSS sans utiliser le moindre JavaScript. Hormis la démonstration 2, l’ensemble des exemples fonctionnent avec les principaux navigateurs sur le marché. Vous trouverez toutes les explications complémentaires dans la feuille css associée au démos.

Démonstration 1

Pour le premier exemple, on construit un menu traditionnel et donc les différents items changeront d’apparence au survol de la souris. Pour cela, on utilise une simple image de fond qui servira à la fois lorsque le menu sera inactif et au moment ou le pointeur se dirigera au dessus de la zone du lien. Pour cela, on change simplement la position du fond d’écran lors de l’interaction de l’utilisateur. On modifie également le padding gauche du texte pour créer cet effet de déplacement.

• Voir la démonstration n°1

Démonstration 2

Sur la seconde démonstration, nous réalisons une simple galerie CSS qui va permettre aux utilisateurs d’agrandir la miniature au simple passage de souris sur la zone de lien. Pour cet exemple, on cache dans un premier temps la balise qui contient la version agrandie de l’image. Le plus important est d’inclure la balise dans celle du lien car c’est l’action :hover de ce lien qui va permettre de rendre visible la balise.

• Voir la démonstration n°2

Démonstration 3

Cette démonstration montre les possibilités étendues de la pseudo-classe :hover. On dresse ici une carte du monde. On place les villes sur le coté et au simple passage de la souris, une flèche nous indique sa position sur la carte. En fait, au départ, on cache la flèche en lui donnant une position extrême dans la zone de block. Au moment du survol, on agrandit la zone de block pour placer la flèche au bon endroit sur la carte.

• Voir la démonstration n°3

Démonstration 4

Un petit exemple pour se divertir. Un petit jeu dans lequel il faut découvrir qui se cache derrière les différentes cases. Au survol des zones, on peut découvrir certaines parties de l’image. En fait, on place plusieurs zones carrées avec un fond coloré et au passage de souris, on supprime tout simplement le fond.

• Voir la démonstration n°4

Conclusion

Comme on a pu le voir, la pseudo-classe :hover offre de nombreuses possibilités. Elle offre du dynamisme aux mises en page et une certaine rapidité d’exécution. Il est dommage que Internet Explorer (comme toujours) implémente mal cette propriété et il faudra bien souvent recourir à des hacks en tout genre pour combler ces faiblesses et de fait, on perd tout l’intérêt des pseudo-classes CSS.

Vous pouvez télécharger l’ensemble des fichiers sur son site internet personnel.