Cette évolution (en plus d’être à la mode) est utile pour définir une sémantique claire, ce qui est d’abord un plus pour le référencement SEO, mais qui permet aussi d’ajouter des fonctionnalités.
Ainsi (c’est variable en fonction des navigateurs), les formulaires de contact ou de commentaire bénéficient d’une vérification préalable avant même d’être envoyés – et ce sans utilisation de javascript – et la barre de recherche du blog bénéficiera des avantages implémentés par les différents navigateurs webs dans les versions à venir.

Et vous, êtes vous passé au HTML5 ?

Mais c’est en réalité très simple à faire, et nous allons voir comment.

Le html

La première chose, c’est d’abord de placer les trois colonnes dans un conteneur, que nous appellerons ici « page« . Ensuite, il faut mettre les éléments flottants (les sidebar donc) avant le corps central.

<div id="page">
	<div id="gauche"></div>
	<div id="droite"></div>
	<div id="centre"></div>
</div>

Comme toujours, essayez d’ajouter un peu de contenu pour pouvoir voir les effets ; utilisez par exemple le générateur de lipsum.

Le CSS

Maintenant, il suffit de mettre en place les éléments :

#page {
	overflow: auto;
}
#gauche {
	width: 200px;
	float: left;
}
#droite {
	width: 200px;
	float: right;
}
#centre {
	width: auto;
	overflow: hidden;
}

Voyons ces lignes en détail :

#page {
	overflow: auto;
}

Les éléments flottants (utilisés avec la propriété float donc) sortent du flux d’éléments, ce qui conduit les autres éléments à passer en-dessous comme s’ils étaient ignorés. Utiliser une propriété neutre comme overflow permet au contenant de tenir compte de ces flottants et de les englober pour que tout rentre dans l’ordre.

#gauche {
	width: 200px;
	float: left;
}
#droite {
	width: 200px;
	float: right;
}

On place simplement les éléments flottants (les menus latéraux) à gauche et à droite avec la propriété float, et on leur attribue une largeur fixe.

#centre {
	width: auto;
	overflow: hidden;
}

Enfin, on donne à l’élément central une largeur automatique afin qu’il s’adapte automatiquement à la largeur disponible. Là encore, on use de la propriété overflow pour que cette colonne tienne compte des deux éléments flottants.

Avec cette méthode, si votre design est évolutif ou que la mise en page change (une colonne ou une autre ou bien les deux ou aucune en fonction des pages visitées, par eemple), la colonne centrale sera toujours adaptée correctement, ainsi que son contenu.

Voici, pour preuve, le logo d’InfographiZm, en version html générée par ImgToCss. Vous pouvez consulter la source à loisir.

Voici le résultat avec une photo de Danny Wallace. Le poids de la page est énorme (2,6Mo), mais le rendu est bluffant. Soyez TRÈS patient pour afficher la page, cela peut prendre plusieurs paires de minutes…

Voici des travaux d’icones et de logos réalisés entièrement en HTML/CSS, rivalisant d’ingéniosité et de techniques pour réaliser ce que d’aucuns tiendraient pour impossible :

• Le logo d’Opera en CSS
• Le logo d’Internet Explorer en CSS
• Des icones en CSS

Chapeau à leurs créateurs !

Nous allons voir une solution possible.

Tout d’abord, comprenons bien de quoi l’on parle dans ce tutoriel, et pour cela, nous allons d’abord illustrer le problème.

Lorsqu’un site possède une hauteur totale plus grande que l’écran sur lequel il est vu, on peut alors descendre la page vers le bas, jusqu’au bas de la page en question ; là, le défilement est arrêté, le pied-de-page, ou « footer » en anglais, est alors fixé naturellement au bas de la page et de l’écran.

Mais dans le cas où la hauteur totale de la page est inférieure à la hauteur de l’écran, alors le pied-de-page, toujours placé au bas de la page, n’atteint pas le bas de l’écran.

Si certains design ne sont pas gênés par cette éventualité, ce n’est pas le cas de tous. Pour palier à ce problème, nous allons devoir faire en sorte que le design adopte la taille du contenu si la taille de la page est supérieure à la taille de l’écran, mais que la taille minimale de la page ne puisse pas être inférieure cette dernière.

Nous allons maintenant voir comment faire ceci.

Le html

Nous partons sur cette base html :

<body>
	<div id="page">
		<div id="bloc-principal">
			<div id="header"></div>
			<div id="contenu">
				<div id="sidebar"></div>
				<div id="texte"></div>
			</div><!-- contenu -->
		</div><!-- fin bloc-principal -->
		<div id="footer"></div>
	</div><!-- fin page -->
</body>

Ce n’est qu’un exemple de site de base ; vous pouvez bien sûr utiliser votre propre site.

Pourquoi mettre le pied de page (footer) en dehors du bloc principal ?

Toute l’astuce est là, c’est le fait de placer le pied-de-page en dehors du bloc du contenu qui va permettre de le fixer au bas de la page, mais aussi de l’empêcher de passer par-dessus le texte du contenu.

Le CSS en action

La première étape est donc de donner à <html> une hauteur de 100%, qui servira à définir pour les balises enfants à quoi correspondent les valeurs en pourcentage que nous allons leur donner par la suite. La première balise enfant étant <body>, nous lui attribuons également cette valeur.

html, body { height: 100% }

Il nous faut ensuite donner à notre conteneur principal, « page », une hauteur de 100%. Mais nous n’allons pas utiliser la propriété height, car celle-ci défini une hauteur définitive ; à la place, nous ferons usage de min-height, qui défini une hauteur minimale pour le conteneur : Ainsi, Si la fenêtre est plus grande que la page, alors le conteneur prendra toute la hauteur disponible, mais ne sera jamais plus petite que 100% -soit la taille du contenu de la page- et ne chevauchera donc jamais ledit contenu.

Il faut également préparer le positionnement du pied-de-page au bas du conteneur, aussi nous appliquons un paramètre de position relative à page.

#page {
	min-height: 100%;
	position: relative;
}

Nous passons maintenant au conteneur bloc-principal. L’astuce consiste à lui attribuer une marge interne de la hauteur du pied-de-page (ici, 100px). Cela a pour but de bien définir la fin du conteneur à la fin de son contenu. Sans ce paramètre, vous vous rendrez compte que le pied-de-page se superposerait au bas du contenu sur 120px, soit sa propre hauteur.

#bloc-principal {
	padding-bottom: 100px;
}

Maintenant, nous nous attaquons au pied-de-page. Il faut que celui-ci ait tout d’abord une hauteur définie (même s’il s’agit d’un pourcentage), puis il faut lui affecter un positionnement absolu. Comme son parent direct, le conteneur page, est en positionnement relatif, footer se sert de cette référence pour savoir où se positionner. Enfin, grâce au positionnement absolu, il suffira d’accrocher le conteneur au bas du bloc parent. On ajoute également left et right afin que le bloc prenne toute la largeur.

#footer {
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

Et nous y voici ! Il est à noter que le pied de page doit avoir du contenu pour être affiché, à cause de son positionnement absolu.

Si vous souhaitez réagir à ce tutoriel, n’hésitez pas à laisser un commentaire !

Vous pouvez voir un exemple ici.

Voyons d’abord le code html :

<div id="menu">
	<ul>
		<li><a href="#">Sans sous-menu</a></li>
		<li><a href="#">Un niveau</a>
			<ul>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 2</a></li>
				<li><a href="#">Lien 3</a></li>
				<li><a href="#">Lien 4</a></li>
				<li><a href="#">Lien 2</a></li>
			</ul>
		</li>
		<li><a href="#">Deux niveaux</a>
			<ul>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 2</a>
					<ul>
						<li><a href="#">Sous-menu 1</a></li>
						<li><a href="#">Sous-menu 2</a></li>
						<li><a href="#">Sous-menu 3</a></li>
						<li><a href="#">Sous-menu 4</a></li>
						<li><a href="#">Sous-menu 5</a></li>
					</ul>
				</li>
				<li><a href="#">Lien 3</a>
					<ul>
						<li><a href="#">Sous-menu 1</a></li>
						<li><a href="#">Sous-menu 2</a></li>
						<li><a href="#">Sous-menu 3</a></li>
					</ul>
				</li>
				<li><a href="#">Lien 4</a></li>
				<li><a href="#">Lien 5</a></li>
			</ul>
		</li>
		<li><a href="#">Sans sous-menu</a></li>
		<li><a href="#">Sans sous-menu</a></li>
	</ul>
</div>

Pour l’instant, nous obtenons un rendu tout à fait normal d’une liste html à plusieurs niveaux. Vous pouvez constater qu’il n’y a pas de classes, car tout va se passer en CSS !

Et maintenant, du CSS !

Tout d’abord, il faut enlever les marges automatiques des listes, et supprimer les puces devant chaque élément :

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0
}

Vous avez peut-être noté la présence de font-size: 0 ? C’est parce que les éléments de liste vont être positionnés avec la propriété display: inline-block; ; d’où le fait que seules les versions plus récentes d’Internet Explorer puissent avoir le rendu désiré, car la prise en charge pour les versions 6 et 7 n’était que partielle, et ne fonctionnait que sur des éléments inline. inline-block a en effet tendance à créer un espace (white-space) entre les éléments ainsi déclarés. Définir font-size sur 0 permet de corriger ce problème, mais il faut penser à définir une taille normale par la suite.

Voyons maintenant les propriétés à donner aux éléments de liste :

#menu li {
	display: inline-block;
	position: relative;
	font-size: 12px;
}

Comme annoncé, les éléments de liste sont déclarés comme inline-block, et on donne une taille au texte. On ajoute également le positionnement relatif afin de pouvoir ensuite placer les sous-menu directement par rapport à leur parent.

Définissons maintenant les liens :

#menu a {
	display: block;
	width: 150px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #555;
}

Pour pouvoir appliquer une largeur et une hauteur, il faut donner au lien la propriété display: block;. Une couleur de fond est appliquée afin de pouvoir simplement vérifier que tout se met correctement, mais vous pourrez vous occuper d’embellir l’ensemble plus tard. line-height sert à centrer verticalement le texte du lien.

Il faut enfin masquer les sous-menu par défaut :

#menu * ul {
	visibility: hidden;
	position: absolute
}

Nous utilisons le sélecteur *, qui est un sélecteur descendant, permettant de sélectionner toute liste qui n’est pas directement enfant de #menu. Le positionnement absolu permet de placer chaque sous-menu par rapport à son parent.
À noter qu’on pourrait utiliser display: none; à la place de visibility: hidden; pour masquer les éléments.

Afficher les sous-menu au survol

Nous allons utiliser la pseudo-classe :hover pour faire apparaître les sous-menus au survol d’un lien.

#menu li:hover > ul {
	visibility: visible
}

Simple n’est-ce pas ? Si nous avions utilisé display: none; à l’étape précédente, nous aurions ici employé display: block; pour afficher l’élément. Nous utilisons cette fois le sélecteur ">", afin d’accéder uniquement à l’enfant direct de l’élément survolé.

À ce stade, nous avons déjà un menu déroulant simple et fonctionnel. Mais nous avons ajouté un second sous-niveau de liens, voyons donc comment l’afficher correctement :

#menu li li:hover > ul {
	left: 150px;
	top: 0
}

Grâce au positionnement absolu, nous pouvons régler le placement de la liste avec les propriétés left et top. Nous décalons donc la sous-sous-liste de 150px (la largeur des éléments de liste que nous avons choisie plus haut) et le replaçons à la même hauteur que son parent.

Et voilà ! Vous avez un menu-horizontal déroulant à plusieurs niveaux, uniquement en CSS. Mission accomplie !

Compatibilité avec les anciens navigateurs (facultatif)

Attention, les propriétés CSS qui vont être utilisées dans ce chapitre doivent remplacer les anciennes. Cette étape est facultative.

Nous allons utiliser le flottement pour mettre les éléments en ligne. Tout d’abord, nous pouvons enlever quelques propriétés pour la liste elle-même :

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none
}

Maintenant, nous utilisons float: left; pour aligner les élements de liste :

#menu li {
	float: left;
	width: auto;
	position: relative
}

Comme nous n’avons pas défini font-size: 0;, il n’y a plus besoin de redéfinir la taille du texte ici. La largeur automatique est présente car un float nécéssite un width pour être valide.

Et c’est tout ! Vous pouvez ensuite styliser d’avantage l’affichage de votre menu, par exemple en mettant le lien survolé en surbrillance :

#menu a:hover {
	color: #666;
	background-color: #ccc
}

Si vous souhaitez réagir à ce tutoriel, n’hésitez pas à poster un commentaire !

Voici une liste (tout ce qu’il y a de plus personnelle et subjective !) non exhaustive des meilleurs d’entre eux :

Google Analyticator

Cette extension fait le lien entre votre blog et le service de statistiques Google Analytics. L’intégration est parfaite et permet d’utiliser le mode asynchrone afin de ne pas ralentir les pages au chargement du code.

Catégorie : Statistiques

Google XML Sitemaps

Génère un fichier sitemap, afin de faciliter la visite des robots d’indexations des moteurs de recherche.

Catégorie : Référencement

Contact Form 7

Un excellent gestionnaire de formulaires de contact, très personnalisable et facile d’emploi.

Catégorie : Fonctionnalités

WP Super Cache

Cette extension met votre blog en cache, générant des pages statiques pour vos visiteurs afin de les afficher bien plus rapidement.

Catégorie : Optimisation

WP Minify

Ce plugin combine et compresse vos fichiers HTML, CSS et javascript, afin qu’ils soient chargés bien plus rapidement par le navigateur du visiteur. Attention toutefois, la « minification » du CSS entraîne parfois des changements d’affichage.

Catégorie : Optimisation

WP Smush.it

Compresse vos fichiers image (jpg, png et gif) sans perte de qualité afin de les afficher plus rapidement, à la manière du service Smush.it de Yahoo!.

Catégorie : Optimisation

WP Socializer

Ajoutez à vos posts des boutons vers les réseaux sociaux (Facebook, Twitter, LinkedIn, Digg, Buzz, et autres) pour partager vos articles.

Catégorie : Fonctionnalités

StatPress Reloaded

Ajoute à votre blog des statistiques de visites, directement visibles depuis l’interface d’administration de votre WordPress.

Catégorie : Statistiques

Viper’s Video Quicktags

Ajoute à la fenêtre de rédaction des articles et des pages des boutons pour ajouter des vidéos depuis les principaux services de partage vidéo (YouTube, Dailymotion, Vimeo).

Catégorie : Fonctionnalités

SyntaxHighlighter Evolved

Ajoutez du code à vos articles ! Cette extension prend en compte un grand nombre de langages (HTML, XML, CSS, javascript, C#, C, C++, Java…).

Catégorie : Fonctionnalités

Author Highlight

Avec ceci, vous pourrez aisément personnaliser les commentaires de l’auteur d’un article au milieu de ceux de vos lecteurs.

Catégorie : Personnalisation

Et vous, vous avez des extensions favorites, ou que vous trouvez indispensables ? Faîtes-le savoir dans les commentaires !

Essayez de deviner le score d’InfographiZm !

Le plus simple : balises meta

Les fonctions de base peuvent être réalisées à partir des balises meta. Les voici tout d’abord :

<meta name="application-name" content="" />
<meta name="msapplication-tooltip" content="" />
<meta name="msapplication-window" content="" />
<meta name="msapplication-navbutton-color" content="" />
<meta name="msapplication-starturl" content="" />
<meta name="msapplication-task" content="" />

Voilà à quoi ça ressemble. Maintenant, voyons ces lignes l’une après l’autre :

<meta name="application-name" content="Nom du site" />

C’est explicite : Il s’agit du nom du bouton. À noter que si vous le laissez vide, le nom par défaut sera le nom du site précisé dans la balise title.

<meta name="msapplication-tooltip" content="" />

Une information qui sera affichée au survol du bouton.

<meta name="msapplication-window" content="width=900;height=600" />

La taille de la fenêtre à l’ouverture.

<meta name="msapplication-navbutton-color" content="#c00" />

Il s’agit de la couleur des boutons « Précédents » et « Suivant » du navigateur. Si ce champ est vide, alors une couleur par défaut sera faite à partir du favicon du site. L’attribut content prend n’importe quel paramètre de couleur html.

<meta name="msapplication-starturl" content="/mapage.html" />

L’adresse à ouvrir lors du clic sur le bouton. Si ce champ n’est pas renseigné, alors l’adresse sera celle de la page vue au moment où le site a été épinglé. Cette adresse peut-être relative ou absolue.

<meta name="msapplication-task" content="" />

Cette balise sert à ajouter des tâches, que nous allons voir plus en détail.

Des tâches supplémentaires

Un site épinglé peut, comme tout autre programme, avoir d’autres utilités que de simplement rediriger vers une seule page. On peut par exemple mettre une liste de liens, internes ou externes au site. C’est grâce aux « task » (tâches) que nous allons réaliser ceci.

<meta name="msapplication-task"
	content="name=Le blog InfographiZm;
	action-uri=/blog/;
	icon-uri=/design/wordpress.ico" />

Voici l’exemple utilisé sur le site InfographiZm pour ajouter la tâche vers le blog. Il faut décortiquer le content :

• name permet de donner un nom à la tâche.
• action-uri désigne l’adresse vers laquelle va pointer le lien de la tâche. Il peut-être relatif à partir de la page épinglée, ou bien absolu.
• icon-uri designe l’adresse du fichier qui servira d’icone à la tâche ; encore une fois il peut-être relatif à partir de la page épinglée ou absolu.

Ajouter une « JumpList »

Il est possible d’ajouter, par du javascript, une autre liste de liens, qui n’est pas associée aux tâches. Voici comment faire :

function NouvelleListe() {
	try {
		if (window.external.msIsSiteMode()) {
			window.external.msSiteModeCreateJumplist("Titre de la liste");
			window.external.msSiteModeAddJumpListItem("Titre", "http://", "/custom.ico");
			window.external.msSiteModeShowJumplist();
		}
	}
	catch (error) { }
}
NouvelleListe();

Ce qu’il faut retenir ici surtout, c’est ceci :

window.external.msSiteModeCreateJumplist("Titre de la liste");

Permet de créer une nouvelle liste.

window.external.msSiteModeAddJumpListItem("Titre", "http://", "/custom.ico");

Permet de créer un nouvel élément dans cette liste, avec son titre, son adresse, et son icone (les liens sont encore une fois relatifs ou absolus à votre convenance).

Pour aller plus loin…

En associant par exemple le code javascript avec du PHP, on pourrait très facilement créer des liens vers les 5 derniers articles d’un blog de manière dynamique ! Cela fera peut-être l’objet d’un prochain tutoriel…

Il faut également savoir qu’au moyen du framework .NET de Microsoft, il est possibile, peu importe le langage (ASP, C#…) d’aller beaucoup plus loin, pour par exemple afficher des liens différents à ceux qui sont de simples visiteurs et ceux qui sont administrateurs, ou encore permettre à l’icone du bouton d’afficher un icone différent si un nouvel article a été rajouté sur le site.

Sources : MSDN

Évidemment, un tel changement de rythme implique aussi des modifications plus mineures que précédemment – à l’image du navigateur de Google, encore une fois. Voyons donc les nouveautés pour les deux concurrents.

Firefox 5

Outre quelques menues améliorations apportées à l’interface et une optimisation générale des pages, cette nouvelle version apporte une meilleure prise en charge des animations CSS3 et de diverses technologies (Canvas, XML, HTML5, MathML, etc.), et bien évidemment la correction de plusieurs bugs rapportés dans la version précédente.

Cliquez sur l’icone pour télécharger Mozilla Firefox 5

Chrome 12

De son côté, Google améliore l’accélération matérielle de son navigateur et l’utilisation de l’Omnibox (barre de recherche à tout faire).

Cliquez sur l’icone pour télécharger Google Chrome 12