Le principe :

Sur votre site vous utilisez une feuille de style, des fichiers javascripts ainsi que des images qui sont les mêmes sur plusieurs de vos pages (voir sur toutes…). L’objectif est de ne les servir qu’une seule fois à chaque visiteur.
Pour cela, les navigateurs ont un cache (également appelés “fichiers temporaires”), qui lui permet de réutiliser des éléments qu’il a déjà chargé, pour peu que votre site lui ai indiqué de tenir ce comportement.

Gain estimé :

Les éléments statiques sont assez nombreux et volumineux, que ce soit les librairies javascript (jQuery, les lightbox, etc …) ou encore les images (une belle bannière en header du site, etc …), on accumule les kilo-octets…
Lorsque ces éléments sont mis en cache, le volume de données transférées se voit ainsi divisé par 6 ou 10.

Comment ?

Ce comportement peut être défini dans un fichier .htaccess, voici le code à insérer :

<ifModule mod_headers.c>
  <FilesMatch "\.(js|css|ico|jpg|jpeg|png|gif)$">
    Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT"
    Header unset ETag
    FileETag None
    Header unset Last-Modified
    Header set Cache-Control "max-age=864000, public"
  </FilesMatch>
</ifModule>

Il faut également activer le mod_headers sur le serveur Apache (par ex : “sudo a2enmod headers” sous debian/ubuntu)

Analyse du code :

• “Header set Expires …” : indique au navigateur un date d’expiration dans un futur (assez) lointain
• “Header unset ETag” : va nous permettre de débrayer le système de validation de contenu du navigateur, ainsi c’est notre Cache-Control qui va gérer la mise en cache.
• “FileEtag None” : idem ci-dessus
• “Header unset Last-Modified” : comme pour les Etag, nous ne voulons pas que ce soit le navigateur qui décide de rafraichir le contenu
• “Header set Cache-Control …” : Nous indiquons au cache du navigateur que le contenu est valide pendant 10 jours (exprimé en secondes)

Conclusion :

Cette technique est assez simple à mettre en place, permet d’économiser de la bande passante et de servir ses pages plus rapidement à chaque visiteur (à partir de sa seconde page vue…).
Il y a donc tout à gagner en adoptant cette pratique.

Les feuilles de styles sont bien pratiques car elles permettent de déclarer des styles globaux ou propres à chacun des éléments d’une page HTML.
Malheureusement, il n’est pas toujours facile de savoir quelle déclaration l’emportera au final.

Je vais donc tenter de résumer, simplement, le principe qui permet au navigateur de savoir quelle déclaration appliquer pour un élément grâce au “poids” de son sélecteur.

Crédit photo : M4r00n3d

Une histoire de poids :

• Balise HTML : 1 point, par exemple : div{…}
• Classe : 10 points, par exemple : .article{…}
• Id : 100 points, par exemple : #header{…}
• Déclaration “inline” (dans le code HTML) : 1000 points, par exemple : <div style=”…”></div>

A noter, qu’à “poids” égal, c’est la dernière déclaration qui l’emporte.

Exemples :

• #test { background-color:red } -> 100 points
• div.toto {float:left} -> 10+1 = 11 points
• body #header div -> 1+100+1 = 102 points

etc…

Concrètement :

Si vous déclarez :

form.inscription input{ width:100px }
input.email { width:130px }

A l’affichage, le champ “Email” s’affichera avec une largeur de 100px.
Car la première déclaration a un poids de 12 points alors que la seconde (qui peut paraitre plus précise) n’a qu’un poids de 11 points. 12>11 (sisi, promis), donc la première déclaration l’emporte.

L’attribut !important :

L’attribut !important donne une priorité absolue, un “poids”infini à la déclaration qui le précède. Du coup, les déclarations portant la mention !important prendront toujours le dessus sur les autres déclarations, aussi précises soient-elles, il l’emporte même sur les déclarations dites “inline”. (Ce qui peut devenir gênant si vous avez besoin de préciser le style d’un élément directement dans son code HTML)

Ainsi :

• body div.test { background-color: blue } -> 1+1+10 = 12 points
• body div.test { background-color: blue !important } -> 1+1+10+infini = infini

Le cas Internet Explorer :

On ne peut parler de feuilles de style sans parler de la lignée Internet Explorer.

• IE6 ne prendra pas en compte l’attribut !important. Ainsi, il appliquera bêtement la dernière déclaration trouvée pour un élément.
• IE7 prendra en compte les poids, sauf si vous êtes en quirk-mode ou que le doctype n’a pas été déclaré (auxquels cas, il se comportera comme IE6)
• IE8 semble respecter correctement les priorités des déclarations
• IE9 devrait se comporter de manière identique à IE8 (normalement ^^)

Vous l’aurez compris, cette analogie entre le type de sélecteur et “poids” est une excellente méthode pour organiser ou debugger vos feuilles de styles.

Peu être avez-vous d’autres astuces concernant les feuilles de styles et leurs déclarations. N’hésitez pas à profiter des commentaires pour partager à votre tour ces astuces.

Cet article est laaaargement inspiré des articles de Tutplus , Smashing Magazine et Electric Toolbox

Pour rappel, une feuille de style est un document qui permet d’habiller tous les éléments HTML de votre page pour la rendre plus élégante et attrayante aux yeux des visiteurs.

Cet habillage se fait par une syntaxe claire, mais, dans les grosses pages, les éléments HTML et leurs classes peuvent être nombreux, et par conséquent, la feuille de style devient vite un vrai bordel ? bazard ? oui, un vrai bordel.

Ainsi, il devient vite indispensable, lorsqu’on attaque un gros projet, de se montrer organisé et méthodique avec tous ce genre de scripts.

Voici donc les étapes que j’applique (en théorie) sur de “gros” projets. (par gros, comprenez que les éléments HTML à habiller sont assez nombreux …)

1/ Organiser ses balises

L’organisation des balises est un vaste débat, il y a les partisans du rangement alphabétique (ou plutôt alphanumérique), et ceux qui bossent sur la hiérarchisation, suivant ainsi l’organisation du document HTML à habiller.

Des deux méthodes (qui ont chacune leurs avantages et leurs inconvénients), ma préférence va à la seconde.
La raison de mon choix est toute simple : j’aime que mes feuilles de styles suivent (à peu près) l’ordre de mon document HTML. En principe, je pars de l’élément le plus gros, grand, englobant, bref de toute façon c’est souvent la balise html elle-même. Pour finir par mon élément le plus petit, enfant, le dernier de la hierarchie (c’est souvent un em ou un td).

html{/*la première balise*/}

body{/*sa descendante/fille*/}

div#header{/*mon premier cadre*/}

div#logo{/*le logo se trouvera dans mon header*/}

div.corpsdelapage{/**/}

etc…

Ainsi, je retrouve (normalement) mes balises.

1bis/ Ranger les propriétés

Tout comme l’ordre des balises, l’ordre des propriétés définies à l’intérieur de celles-ci n’a aucune importance pour les navigateurs, en revanche, il peut revêtir une importance capital pour vous ou les développeurs qui passent derrière vous.

Dans une logique toute logique bête simple, je classe donc mes propriétés par ordre alphabétique.

div.monJouliDiv{
background : #112211;
border : 1px solid #ccc;
height : 20px; //etc …
}

2/ Reset pour tous

Je ne vous invite pas à redémarrer votre ordinateur, ni à fermer cette page (surtout pas ^^), mais je vous propose d’instaurer des valeurs par défaut cohérentes à vos balises.
Quand on attaque un habillage en partant de zéro et/ou lorsqu’on souhaite réaliser une page compatible avec tous les navigateurs, on se heurte souvent à des décalages, des cadres qui “sautent”, se chevauchent, etc ….

La raison en est simple : les navigateurs imposent un style par défaut pour chaque balise HTML. Le reset est donc un manière de pallier à ce genre de problèmes. Voici comment je (et de nombreux développeurs, intégrateurs et designeurs) procède :

html, body, div, h1, h2, h3,  ul, ol,  li, p,  form, fieldset, table, th, td { margin: 0; padding: 0; } // Placez les balises selon votre document HTML

3/Soignez votre “présentation”

Je sais que les scripts ne sont pas la partie visible de votre site mais il est important (à mes yeux) d’en soigner l’écriture.
Il existe de nombreuses manières de mettre en page ses balises et leurs propriétés.

Personnellement, je laisse mes propriétés en ligne lorsqu’elles sont moins de 4 par balises, au delà, je mets des retours à la ligne pour chacune (en prenant soin d’indenter mes lignes d’une tabulation).

body{margin:0;padding:0}

h1{
border : 1px dashed #000;
font-size : 50pt; //ça devrait être lisible …
letter-spacing : 30px;
text-decoration:none; //surtout pas de blink, avec une police aussi grosse ^^
//etc…
}

4/ Commentez !!!

Les commentaires constituent le point de repère principal pour vous y retrouver dans toutes ces balises, mots en anglais et autres #.* etc … De plus, je fais parti des petits fouineurs, des types qui pour une raison ou une autre vont jeter un coup d’œil au code source d’un site, à ses javascripts ainsi qu’à ces feuilles de styles, donc merci de commenter ça me facilitera la tâche

Tout comme en PHP et Javascript (ainsi qu’en C/C++, et bien d’autres langages), les commentaires sont soit :

• précédés d’un double slash  : //mon commentaire se terminera en fin de ligne
• ou alors entourés par /* et */ : /* ce commentaire se finira après ce symbole */

Évidemment, certains de ces conseils vous sembleront logiques et simples, mais je pense qu’ils sont loin d’être inutiles pour quiconque souhaite attaquer sainement avec les CSS.

Et vous (oui, vous qui avez eu le courage de tout lire jusqu’au bout ^^), avez-vous d’autres astuces à partager ?

Cet article est inspiré de celui-ci

Les sites s’allourdissent (sans parler des pubs, du flash, etc …). Bref ! C’est la crise, faut alléger tout ça ! (oui, je sais que la crise n’a rien à voir, mais c’est dans l’ère du temps ).

Je vais parler aujourd’hui d’un petit bout de php qui ne fera de mal à personne : Minify.

Minify est un script codé en php5 qui permet de réduire et de réunir efficacement les fichiers CSS et Javascript.
Cette application supprime tous les caractères inutiles à l’interprétation du code par les navigateurs, à savoir les espaces et les commentaires.
De plus, elle concatène ces scripts entre eux, ce qui permet de réduire le nombre de requêtes effectuées par le navigateur de vos visiteurs (ce qui implique un temps de chargement ainsi qu’une charge en bande passantes réduits).
Autre atout, les fichiers crées sont envoyés avec un encodage HTTP (gzip/deflate), ce qui signifie qu’au moment de l’envoi au navigateur, ils vont être (g)zippés (compressés).

Au niveau de l’installation, c’est assez simple puisqu’un assistant de création d’URL est fourni avec l’outil pour permettre une integration plus aisée à vos créations existantes ou futures. Le fichier readme explique tout ça bien mieux que moi ^^

Cette petite application est simple, mais diablement efficace. De plus, elle est gratuite et sous licence BSD (une des nombreuses licences OpenSource).

Via : WebAppers

Je vous invite à en découvrir plus dans la suite…

1/ Les forces en présence :

Les feuilles de styles sont un moyen efficace d’habiller toutes ces pages web de manière homogène, de créer facilement des thèmes et d’alléger le code HTML.
Gros avantage de ces feuilles de style : Vous définissez une seule fois les propriétés (style) d’une balise HTML pour les voir s’appliquer sur toutes les occurrences de cette même balise.

Par exemple, sans CSS, pour afficher tout les liens hypertexte en couleur rouge, on écrit :
<a href=”index.html” style=”color: #ff0000″>Home</a>
et ce, pour chaque lien présent sur la page.

Avec du CSS, on écrit toujours la syntaxe classique du lien hypertexte soit :
<a href=”index.html”>Home</a>
dans le fichier HTML. Puis, on écrit dans le fichier CSS :
a{ color:#FF0000 }
Ainsi, on écrit le style une seule fois.

“C’est bien joli, je vois le principe, mais concrètement, ça ne me dérange pas de faire des copier-coller pour écrire mes liens…”
L’intérêt se trouve dans la non-répétition du style. Imaginons maintenant que votre site présente une vingtaine de liens, vous écrivez ceux-ci en utilisant la syntaxe habituelle : <a href=”"></a> et tous vos liens arboreront une belle couleur rouge.

2/ Mise en place :
La feuille de style (CSS) est un fichier portant l’extension .css (on l’aurait deviné …)
Elle doit être désignée par la page HTML via un “link” placé entre les balises <head> et </head> dont voici la syntaxe :
<link rel=”stylesheet” type=”text/css” href=monStyle.css” media=”all” />
rel=”stylesheet” nous indique que l’on charge une feuille de style.
type=”text/css” signifie qu’il s’agit d’un contenu en texte, et que c’est du css
href=”monStyle.css” est l’url du fichier
media=”all” indique que cette feuille de style sera utilisé pour tout type d’affichage (écran, imprimante, projecteur, etc …)

Maintenant, vous allez pouvoir créer votre page HTML ainsi que le fichier de style.

3/ Impose ton style !
Nous allons maintenant passer à du concret. Dans un premier temps, créons 2 fichiers :
Le premier sera notre fichier HTML, appelons-le index.html
Le second sera donc la feuille de style, appelons-la style.css

Ouvrons le fichier HTML, et écrivons une base classique :
<html>
<head>
<title>Ma page avec du CSS dedans</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”all” />
</head>
<body>
<h1>Je suis un titre de type H1</h1>
<ul>
<li>Les listes en gras, c’est très sympa !</li>
<li>surtout avec un texte aussi inspiré</li>
</ul>
<a href=”./”>Cliquez-moi dessus !!!</a>
<br />
<a href=”./”>Non, cliquez sur moi !</a>
</body>
</html>
Je pense que ce sera suffisant pour l’exemple.

Maintenant, passons au fichier CSS :
h1{color:#00FF00}
li{
font-weight:bold;
background-color:#00FF00;
color:#FF0000;
}
a­{text-decoration:blink}
Voilà, pour le style.
Maintenant, afficher votre page dans le navigateur et admirez le résultat.

Je vous laisse donc sur cet exemple, et vous promet de revenir très rapidement pour la suite.