Graphiques

Bien qu'il soit tout à fait possible de générer des graphiques coté serveur, notamment grâce à la lib GD, ce code vous permettra de faire des économies d'images qui prennent de la place sur le serveur et bouffent de la bande passante.

Voici un tutorial complet sur la création de graphiques au visuel saisissant, le tout en 100% pur css à partir d'une simple liste html.

Coins arrondis

Ce n'est pas un scoop: Dans l'univers du web 2.0, les coins arrondis ont plus que jamais la cote. Si visuellement ils sont saisissants, ils ont l'inconvénient d'être parfois assez lourds à mettre en place. Heureusement, le site Spiffy Corners à tout prévu et vous propose un générateur de coins arrondis. Si le rendu visuel est excellent, je ne peut par contre pas en dire autant du code généré: Balises <b> dépréciées, code non sémantique... A vous de choisir entre rendu visuel et respect des standards.

Galerie photo avec effet au survol

Niveau scripts pour galeries photos, il y a de quoi faire, surtout via des librairies javascript "Nouvelle génération" du style Mootools ou JQuery. Mais si vous ne souhaitez pas implémenter de solution javascript pour l'affichage de vos images, voici un code CSS qui devrait vous satisfaire: Hoverbox, Une galerie photo simple, sobre, avec un agrandissement automatique des images survolées, le tout en 100% css.

Mettre une photo en valeur avec une bordure, ou même une ombre

Dans le cadre d'un site dynamique, si vous souhaitez décorer vos photos à l'aide d'un cadre, vous n'avez pas des milliers de possibilités: Passer par Php et GD pour générer de nouvelles images au termes de codages parfois fastidieux. Ou alors, utiliser css et ses possibilités souvent sous estimées.
Dans ce second cas, le célèbrissime site A List Apart propose un tutorial précis sur l'ajout d'une ombre de bordure à vos images, en pur css, bien sûr.

Et pour finir sur une note amusante...

...mais pas pour autant exempte de technique: Il s'agit d'Homer Simpson, totalement réalisé en CSS par Román Cortés. ça vaut le détour, et ça se passe ici.

Source: Cameron Olthuis

L'installation d'xray est d'une simplicité déconcertante: Il vous suffira de vous rendre sur le site du projet, puis de glisser-déposer le bouton xray dans votre barre de favoris. Xray fonctionne avec Safari, Firefox ainsi qu'Internet Explorer à partir de la version 6.
Une fois cette opération effectuée, vous aurez un beau bouton "xray" dans votre barre de favoris, comme le montre l'image ci-dessous:

Cliquez sur le bouton: Une fenêtre grise apparait et vous propose de cliquer sur un élément du document html. Au clic, xray affichera de nombreuses informations sur l'élément: hauteur/largeur, héritage html, nom d'id où de classe, ainsi que ces propriétés css.

Même si on regrettera l'impossibilité de copier les informations dans le presse papier et celle de modifier les valeurs des propriétés css en visualisant le rendu directement sur la page, un peu à la manière du web developper de Firefox, xray est un outil efficace qui sera utile ou développeur web lors de débogage, ou tout simplement pour comprendre le fonctionnement d'un élément sur une page web en particulier.

Avant de rentrer dans les détails, il faut bien savoir que ce genre, c'est du 100% quick & dirty: Aucune feuille de style dotée de ce genre de bidouille ne passera la validation w3c. Si votre objectif est d'obtenir un code irréprochable, alors utilisez plutôt un commentaire conditionnel.
Toutefois, devant les innombrables idiosyncrasies propres au navigateur de microsoft, il faut savoir s'armer. Et même si c'est discutable, la plupart des clients préfereront 100 fois un code avec une ou deux erreurs w3c mais 100% compatible IE à l'inverse.

Passons au hack en lui-même: IE6 utilisait l'underscore, pour IE7, un simple point fera l'affaire:

.uneClasse{
        width: 150px; /* Tous les browsers */
        _width: 150px; /* Uniquement appliqué par IE6 */
        .width: 150px; /* Uniquement appliqué par IE7 */
}

J'avoue avoir été quelque peu suspicieux lorsque j'ai entendu parler de cette technique pour la première fois, mais je l'ai testée hier au boulot (gloups!) et tout fonctionne comme escompté.
Un hack bien cracra à garder pour les cas désespérés...

Dégradé sur un texte

Je tire cette technique de l'excellent Web Designer Wall. Le principe est d'ajouter une image png comprenant un dégradé du blanc au transparent sur notre titre. Nous utiliserons ici la balise span afin de paramètrer l'effet sur le texte lui-même, et non sur le background comme on pourrais facilement le faire en utilisant la propriété CSS background-image.

Sympa, n'est-ce pas?

Rien de bien compliqué: Il suffit d'ajouter la balise span dans votre header:

<h1><span></span>Hello, I'm Shinely</h1>

Le code CSS n'est guère plus compliqué, le plus important étant de bien paramètrer h1 en position relative et h1 span en position absolue.

h1 {
    font: bold 330%/100% "Lucida Grande";
    position: relative;
    color: #464646;
}

h1 span {
    background: url(gradient.png) repeat-x;
    position: absolute;
    display: block;
    width: 100%;
    height: 31px;
}

Malheureusement, il y à plusieurs inconvénients à cette technique:
Premièrement, sémantiquement parlant, le <span></span> n'a pas de sens.
L'image dégradée ne devra pas être plus grande que votre texte, autrement celui-ci ne sera plus sélectionnable.
Il est nécessaire d'utiliser un hack si l'on souhaite assurer une compatibilité avec IE6.
La couleur de fond de votre titre devra être solide: Tout blanc, tout gris, tout noir mais ni image ni dégradé.

Entêtes stylisés

J'ai pris connaissance de cette technique il y à quelques temps déja via le blog Devil can't burn. Niveau principe, on reste dans le même esprit que ce dont je vous ai parlé plus haut: Utiliser la balise span afin de s'ouvrir de nouvelles possibilités en terme de style de titre.
Voilà pour l'exemple:

Le code xhtml:

<h2><span>Des entetes stylisés en css</span></h2>

Niveau CSS, nous allons définir une image de fond se répetant en x sur l'élément h2, Puis, nous allons utiliser background-color sur h2 span de manière à cacher l'image de fond à l'endroit ou se situe le texte.

h2 {
    font: 1.4em "Arial Narrow", Helvetica, Arial, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    color: #9cf;
    background: transparent url(background.gif) repeat-x 0 50%;
}

h2 span {
    padding: 0 4px;
    background: #FFF;
}

Voilà pour aujourd'hui. Bonnes décorations

L'idée

Pour Cat Print, l'idée était d'intégrer parfaitement la barre de recherche à la barre de navigation en respectant le design. La barre de recherche est composée en tout et pour tout de deux images: le fond, et la loupe. L'image de fond à été créé sous Photoshop, en utilisant un calque que j'avais téléchargé ici il y à quelques semaines. Quand à l'image de la loupe...c'est tout simplement celle qui est fourni avec l'excellent thème d'icones Ubuntu Studio.
Quand au html/css, il s'agit ici de masquer totalement le champ input text (bordure, couleur de fond, etc) et d'afficher une image en lieu et place du bouton submit. Toutefois, rien ne vous empêche de mettre un input image à la place.

Vous trouverez ici le background et la loupe.

Le xhtml

<div id="searchbar">
    <form method="get" id="searchform" action="http://www.lyxia.org/blog/">
        <div>
            <input type="text" name="s" id="s"/>
            <input type="submit" value="" id="loupe"/>
        </div>
    </form>
</div>

La CSS

#searchbar{
    background: transparent url('images/search.png') no-repeat top left;
    float:right;
    height:41px;
    width:280px;
}

#searchbar #s{
    background:none;
    border:none;
    color:#222;
    float:left;
    font-family:"Trebuchet MS";
    font-size:22px;
    height:30px;
    line-height:35px;
    margin-left:15px;
    padding-top:5px;
}

#searchbar #loupe{
    background: transparent url('images/loupe.png') no-repeat top left;
    border:none;
    float:right;
    height:38px;
    margin-right:5px;
    width:38px;
}

Pour commencer, une bonne base

Déja, la première chose à savoir est qu'Internet Explorer 6 ne gere pas ce type de codage css, pourtant bien pratique:

input[type="submit"]{...}

Pour contrer ce problème, il suffit d'ajouter une classe à chaque submit que l'on voudra styler. Ce qui nous donne, en html:

<input type="submit" value="ok" id="valider" class="submit" />

Le principe de la classe CSS submit est simple: Nous allons enlever les bordures définies par défauts par les browsers sur les boutons submit et affecter une image de fond de notre choix. Il ne faudra pas non plus oublier de préciser la longueur et largeur de l'image afin qu'elle ne soit pas tronquée:

.submit{
     border:none;
     color:#fff;
     background: transparent url('images/monimage.png') no-repeat top left;
     width:75px;
     height:20px;
}

Pour aller plus loin

Il erait fort tentant de vouloir ajouter un effet de type rollover au survol du bouton, malheureusement, encore une fois le navigateur de Micro$oft va mettre des barrières à notre créativité: Il ne gère pas la pseudo classe :hover sur un autre élément qu'un lien.
Il existe toutefois plusieurs solutions plus ou moins propres qui tentent de pallier à ce problème. La moins cracra à mon gout consiste à entourer le bouton d'un lien hypertexte comme dans l'exemple proposé ci-dessous:

<a href="javascript:void(0)">
<input type="submit" id="valider" class="submit" value="ok" />
</a>

Dans la feuille de style, il faudra mettre:

a:hover input.submit {
cursor:pointer;
background-image: url('images/secondeimage.png');
}

Ce même effet peut facilement être implémenté avec un peu de javascript. Ici nous appellons la fonction rollover au survol du bouton.

<input type="submit" id="valider" class="submit" value="ok" onmouseover="rollover();"/>

La fonction Javascript rollover se chargera de modifier l'image de fond:

function rollover(){
    document.getElementById('valider').style.backgroundImage = 'url(images/secondeimage.png)';
}

Bien entendu, il ne faudra pas oublier de replacer la première image lorsque le curseur ne survolera plus le bouton!

Une autre solution, expliquée ici, indique comment faire comprendre la pseudo-classe :hover à IE6. Toutefois, il faut noter que cette méthode n'est pas valide CSS. Comme (trop) souvent, avec IE, les développeurs se voient obligés de choisir entre fonctionnalité et respect des standards...

Les hacks que vous trouverez ici sont de qualité diverses: Si certains sont recommandés, d'autres ne le sont pas et il faudrait, dans la mesure du possible, s'en passer.

1 - Les commentaires conditionnels

Les commentaires conditionnels sont une façon propre d'isoler une règle à Internet Explorer (depuis sa version 5).
Leur usage consiste à dire "Si le navigateur du client est IE6, alors inclure cette feuille de style complémentaire". C'est une technique que j'utilise très souvent, car malheureusement, vous vous en êtes probablement rendu compte, il est ardu, voire impossible de coder une CSS valide qui s'adaptera sans soucis à Internet Explorer.

La syntaxe des commentaires conditionnels est la suivante:

<!--[if IE]>
   <link rel="stylesheet" type="text/css" media="screen" href="only_ie.css">
<![endif]-->

Vous pouvez également spécifier la version (exemple, uniquement la version 6)

<!--[if IE 6]>
   <link rel="stylesheet" type="text/css" media="screen" href="only_ie6.css">
<![endif]-->

Ou encore, une version et les version inférieures...

<!--[if lte IE6]>
   <link rel="stylesheet" type="text/css" media="screen" href="only_ie.css">
<![endif]-->

...Ou supérieures

<!--[if IE gte 6]>
   <link rel="stylesheet" type="text/css" media="screen" href="only_ie.css">
<![endif]-->

Les commentaires conditionnels ne peuvent être inclus directement dans la feuille de style. Mettez les dans la partie head de votre document (x)html.

2 - Cacher des règles à IE

Internet Explorer ne comprends pas la règle !important.
En CSS, si un id ou classe est répétée plusieurs fois, c'est la dernière déclaration qui sera appliquée au document. la règle !important fera appliquer cette déclaration, même si elle est répétée avec des propriétés différentes.

#header{
    width: 200 px !important;
    width: 300px;
}

Dans cet exemple, #header aura une longuer de 200px sous Firefox (qui comprends !important et donc ne tiens pas compte de la seconde déclaration) tandis qu'IE affectera 300px de longueur à #header car il ne comprends pas la règle !important.

3 - Une règle spécifique à IE

Si une propriété est préfixée par un underscore, IE sera le seul à la comprendre.

#header{
    width: 200 px;
    _width: 300px;
}

Sur l'exemple ci-dessus, seul IE comprendra _width, et par conséquent, cette déclaration remplacera la précédente. Il affectera donc 300px à #header contrairement aux autres navigateurs qui, ne connaissant pas cette règle, l'ignoreront.
A noter, les déclarations préfixées d'un underscore sont marquées comme erreur dans la console d'erreur de Firefox. A utiliser uniquement en dernier recours...

4 - Transparence des images PNG

Le gros avantage des images PNG est qu'elle peuvent être transparentes, avec une qualité hautement supérieure à celle proposée par le format GIF. Malheureusement, les versions d'Internet Explorer (encore lui!) inférieures à 7 ne gèrent pas sa transparence.
Pour celà, vous avez deux options:

-Utiliser un commentaire conditionnel et spécifier qu'IE < 6 doit afficher des images GIF
au lieu des images PNG.

-Utiliser le script JavaScript suivant:

/*Correctly handle PNG transparency in Win IE 5.5 & 6.http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
    for(var i=0; i<document.images.length; i++)
    {
	var img = document.images[i]
	var imgName = img.src.toUpperCase()

	if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	{
	    var imgID = (img.id) ? "id='" + img.id + "' " : ""
	    var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 	    var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
	    var imgStyle = "display:inline-block;" + img.style.cssText

	    if (img.align == "left") imgStyle = "float:left;" + imgStyle

	    if (img.align == "right") imgStyle = "float:right;" + imgStyle

	    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

	    var strNewHTML = "
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\">"
            img.outerHTML = strNewHTML
            i = i-1
       }
   }
}

Ce script permettra que votre image PNG s'affiche de manière transparente, comme c'est le cas sur Firefox ou Opera. Esthétiquement parlant, le résultat est à la hauteur, mais n'oublions pas qu'un peu moins de 10% des gens n'ont pas JavaScript activé sur leur machine.

5 - Min-Height

La propriété min-height est intéréssante: Elle permet de donner une hauteur minimale à une bloc, qui pourra par la suite s'étendre verticalement si son contenu l'y oblige. Particulièrement pratique si vous avez une page avec très peu de contenu et que vous ne souhaitez pas que votre footer soit placé au beau millieu de la page...
Mais une fois de plus, l'ami IE6 rechigne à prendre cette propriété en compte. Sur ce navigateur, la propriété height à quand à elle un comportement plus ou moins semblable à min-height.

Voici le hack proposé par Dustin Diaz:

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}

Cette technique, respectueuse des standards est un must: Personellement je ne peux plus m'en passer.

6 - Min-Width, Max-Width...

Encore des propriétées non implémentées par IE6 et inférieurs. Ce hack permet de contourner le problème, mais bien entendu cette syntaxe n'est absolument pas valide W3C.
Elle n'est prise en compte que par Internet Explorer, n'oubliez donc pas de spécifier normallement la propriété pour les autres browsers.

Le hack suivant simulera la propriété min-width avec une longueur minimum de 170px:

width:expression(document.body.clientWidth > 170? "170px": "auto" );

7 - Les hacks, ça craint?

Le site Stylegala à expliqué pourquoi l'usage de hacks css était déconseillé.
Leur technique de contournement est très simple mais ô combien intéréssante:
Utiliser une fonction PHP pour détecter le navigateur puis générer la feuille de style avec des propriétés adaptées au navigateur utilisé par le client.
Puisque nous utilisons PHP dans cet exemple, j'en profiterais pour présenter une technique d'optimisation des CSS en PHP, présentée il y a peu par Paul Stamatiou sur son blog. Celle-ci permet de réduire une feuille de style de 35kb à environ 22Kb.

Pour mettre en pratique la solution de Stylegala, créez un fichier portant l'extension .php.
Au début du fichier, incluez ce code:

header("Content-type: text/css");
$d = detect();
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];

function detect()
{
    $browser = array ("IE","OPERA","MOZILLA","NETSCAPE","FIREFOX","SAFARI");
    $os = array ("WIN","MAC");
    $info['browser'] = "OTHER";
    $info['os'] = "OTHER";

    foreach ($browser as $parent)
    {
        $s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
        $f = $s + strlen($parent);
        $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
        $version = preg_replace('/[^0-9,.]/','',$version);

        if ($s)
        {
            $info['browser'] = $parent;
            $info['version'] = $version;
        }

    }

    foreach ($os as $val)
    {
        if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;
    }

    return $info;

}

Le principe est simple: la fonction detect() renvoie un tableau contenant l'os, le navigateur et la version du navigateur utilisée par le client. Avec ces informations, une simple instruction conditionnelle permettra d'afficher la propriété et la valeur adéquate pour le browser que le visiteur utilise.
Exemple:

.content {
    padding: 0 100px;
    width: <?php
    if ($o == "WIN" && $b == "IE" && $v < 6) echo "700px;"
    else echo "500px;";
    ?>
}

Si l'OS du client est Windows, son navigateur est IE et la version du navigateur est inférieure à 6, .content aura une longueur de 700px. Dans tous les autres cas, ce sera 500px.

Et maintenant, l'optimisation de Paul Stamatiou:
A placer au tout début de votre fichier style.php:

<?php
    if(extension_loaded('zlib'))
    {
        ob_start('ob_gzhandler');
    }
    header("Content-type: text/css");
?>

A placer à la dernière ligne du fichier:

<?php
    if(extension_loaded('zlib'))
    {
        ob_end_flush();
    }
?>

Vous pourrez en apprendre plus sur cette technique en lisant le post original.

En guise de conclusion...

Vous l'aurez remarqué, IE6 cause bien des soucis à quiconque souhaite utiliser des styles CSS proprement. Rare sont les développeurs ou intégrateurs web qui n'ont jamais été confrontés à ce problème. Heureusement, IE7 corrige certains des problèmes que j'ai exposé ici, mais il va falloir attendre encore longtemps avant qu'IE6 ai disparu du web au point ou il sera possible de ne plus le prendre en compte.
Selon moi, un des meilleurs "hacks" consiste à faire connaitre et utiliser FireFox. Malheureusement, énormément de clients et utilisateurs ne jurent encore que par le E bleu...Propagande Micro$oft quand tu nous tiens...