L’objectif de CSS3Pie est donc de permettre à Internet Explorer de comprendre les propriétés CSS3

Comment ?

Il s’agit en fait d’un fichier htc qui va modifier le comportement d’Internet Explorer. Il était déjà question de ces fichiers pour gérer la transparence des images PNG.

Ici, celui-ci va donc permettre à notre cher IE d’interpréter les propriétés CSS3 comme par exemple les bordures arrondies :

#myAwesomeElement {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(path/to/PIE.htc);
}

Un site donc à découvrir pour profiter des joies du CSS3

Lien :

• CSS3Pie

CSS3 Generator

CSS3 Gradient Generator

CSS3, please!

Liens :

• CSS3 Generator
• CSS3 Gradient Generator
• CSS3, please!

Autant de version de ce navigateur, autant de comportements différents (les intégrateurs web me comprendront).

Et à contrario d’un Firefox, où les propriétés CSS par défaut appliquées sont disponibles, le navigateur de Microsoft est lui complemetement fermé.

D’ou l’idée de ce site iecss.com d’essayer de sortir ces feuilles de style par défaut.

Lien :

• iecss.com

La faute aux navigateurs bien sûr. Seules les dernières versions intègrent les propriétés de ces 2 nouvelles normes.

FindMeByIP liste donc les propriétés HTML5 et CSS3 et précise si elles sont interprétées par les principaux navigateurs du marché (et leurs principales versions) et ce sur les plateformes MAC et Windows :

Ce qui donne par exemple pour quelques propriétés CSS3:

et pour le HTML5 :

Y’a du progrès… à faire.

Lien :

• CSS3 and HTML5 on findmebyip.com

Sexy Buttons,
Simply-Buttons v2 et
Super Awesome Buttons with CSS3 and RGBA

Sexy Buttons

Simply-Buttons v2

Super Awesome Buttons with CSS3 and RGBA

Par rapport aux 2 précédents, cette source utilise des propriétés CSS3.

Liens :

• Sexy Buttons – Sexy, skinnable HTML/CSS buttons with icons.
• Simply-Buttons v2
• Super Awesome Buttons with CSS3 and RGBA

Voici comment procéder en CSS d’une part, et en Javascript à l’aide de jQuery d’autre part.

Une petite icone devant les liens menant à des documents Pdf, Doc, Excel ou autre c’est possible en CSS.

a[href$=".pdf"]  {
    background: url(../images/icons/pdf.gif) top left no-repeat;
    padding-left:16px;
}
a[href$=".doc"]  {
    background: url(../images/icons/doc.gif) top left no-repeat;
    padding-left:16px;
}
a[href$=".xls"]  {
    background: url(../images/icons/xls.png) top left no-repeat;
    padding-left:16px;
}

Notons qu’Internet Explorer 6 (oui encore lui), ne comprend pas ces sélecteurs css Heureusement il y a jQuery Il est en effet possible de faire la même chose.

On peut par exemple ajouter une classe spécifique à nos liens selon l’extension qui reprend les propriétés CSS ci-dessus :

$(document).ready(function(){
    $("a[@href$=pdf]").addClass("pdf");
    $("a[@href$=doc]").addClass("doc");
    $("a[@href$=xls]").addClass("xls");
});

Ou on peut utiliser ce petit plugin :

(function($){
    $.fn.iconize = function(params){
        // paramètres par défaut
        var params = $.extend({
            paddingLeft: '16px',
            height: '16px',
            pathToImage: 'images'
        }, params);

        // process en returnant l'object
        return this.each(function(){
            var $$ = $(this);

            if( $$.attr('href').length>0 )
            {
                var width = $$.width();
                var fichier = $$.attr('href');
                var extension = fichier.substr( fichier.lastIndexOf( "." ) + 1 );

                $$.css({
                    'backgroundImage' : 'url(' + params.pathToImage + '/' + extension.toLowerCase() + '.png)',
                    'backgroundPosition' : 'top left',
                    'backgroundRepeat' : 'no-repeat',
                    'display': 'block',
                    'height': params.height,
                    'lineHeight': params.height,
                    'paddingLeft': params.paddingLeft,
                    'width': width
                });
            }
        });
    };
})(jQuery)

Et pour l’appeler :

// appel par défaut
$( "a" ).iconize();

// en spécifiant des paramètres
$( "a" ).iconize( { paddingLeft: '32px', height: '32px', } );

La différence :

Ici pas de système à grille mais un système permettant de diviser un bloc en plusieurs éléments de même largeur.

Lien :

• EZ-CSS

The Framework from the futur

Pourquoi ?
Tout simplement parce que ce framework combine les normes HTML5 et CSS3.

Et oui et ça change tout l’utilisation de ces normes puisqu’à l’heure de ces lignes tous les navigateurs du marché ne les appliquent pas encore ou en partie (je pense à certaines propriétés CSS3 correctement utilisés par Firefox ).

Car si les propriétés css3 permettant les cadres arrondis, les ombres, …, il faudra surtout s’adapter aux blocs HTML5 <header>, <nav>, <section>, < footer>, … .

En tout cas, ce framework s’annonce dans la continuité des Blueprint ou 960.gs à savoir fournir une base de développement forte intéressante.

Lien :

• 52Framework

Un effet « Bubble ».

Rien que le nom ça vous donne envie non ?

Mais ce nom se cache un simple effet qui vous permet de faire apparaitre un message (ou autre chose) au survol d’un lien.

Le tutorial est simple mais utilise jQuery donc ça me plait

La mécanique :

A l’interieur de la balise lien <a>, on place un bloc (ici un <em>) qui par défaut est caché (ie en display:none;)

En javascript, on détecte le survol de ce lien et on fait apparaitre cette balise.

Lien :

• Create a jQuery Popup Bubble

Allons un peu plus loin dans l’optimisation de celles-ci.

I – Inclusion des styles

Pour inclure vos élements de styles vous avez plusieurs méthodes :

• La méthode en ligne (Pas bien !). c’est à dire inclure directement vos styles aux élements XHTML

  <div style="margin:0 auto;text-align:center;width:960px;">
  Bloc
  </div>
  

• L’importation d’un fichier CSS (Bien ), un fichier CSS propre.
  • en utilisant @import (pas bien)

    <style type="text/css" />
    @import('style.css');
    </style>
    

  • en utilisant link (bien )

    <link media="screen" href="css/style.css" rel="stylesheet" type="text/css" />
    

II – Trop de feuilles de styles…

Tuent les feuilles de styles ? Non, mais afin de réduire le nombre de requête HTTP, je vous conseil de regrouper vos différentes feuilles de styles en une seule.

<!-- pas ok -->
<link media="screen" href="css/reset.css" rel="stylesheet" type="text/css" />
<link media="screen" href="css/forms.css" rel="stylesheet" type="text/css" />
<link media="screen" href="css/style.css" rel="stylesheet" type="text/css" />

<!-- ok -->
<link media="screen" href="css/style.css" rel="stylesheet" type="text/css" />

III – Postionnement

Techniquement, il n’y a aucun emplacement spécifique pour placer votre feuille de style CSS dans votre page web.

Logiquement, celle-ci doit se mettre au sein de la balise head, ceci afin de faciliter son chargement et d’éviter un affichage non stylisé du contenu avant la mise en forme par cette feuille de style.

IV – Regroupez

Il est judicieux de reperer les propriétés CSS identiques à plusieurs élements et donc de les regrouper.

<!-- pas ok -->
.remove {color:red;}
.red {color:red;}

<!-- ok -->
.remove, .red {color:red;}

V – Raccourcissez

Que cela soit avec les marges (margin ou padding) ou les bordures, raccourcissez les lignes pour le haut, la droite, le bas et la gauche en une seule propriété.

<!-- pas ok -->
#bloc {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
border-top:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
}

<!-- ok -->
#bloc {
margin:10px;
border:1px solid red;
}