• Réduire le nombre de CSS chargés au minimum, pour économiser les requêtes HTTP.
• Permettre de créer des fichiers CSS à la volée, sans code php à l’interieur, et de les diviser le plus possible.
• Compresser le résultat.
• Mettre en cache la version compressée, qui sera servie au visiteur.

Cette méthode est grandement inspirée de l’article sur la compression des CSS chez CatsWhoCode, que j’ai décortiqué pendant un bout de temps

On fera donc appel à ces fichiers :

• style.php : appelé pour créer la page, mais qui transmet également les instructions CSS.
• style-min.css : Le CSS final, appelé par la version du site.
• style/ : Le sous dossier contenant tous vos CSS.

Les éventuelles images devront être dans le même répertoire que style.php.

Voici donc le code commenté de style.php :

On déclare le contenu comme étant du CSS, pour être sûr de son interpretation.

<?php
header("Content-type: text/css");

Ensuite, il faut inclure les CSS, que l’on va trier dans l’ordre alphabétique, pour permettre d’éventuels hacks, et surtout une idée de l’ordre des instructions.

// On cree une variable de retour pour contenir le CSS.
$retour_css = '';
 
// On parcourt le sous-dossier style/
$dir = opendir("style/");
$fichiers = array();
// On ajoute chaque fichier à un tableau 'fichiers'
while($fichier = readdir($dir))
	{if($fichier!="." && $fichier!="..") $fichiers[] = 'style/'.$fichier;}
closedir($dir);
 
// Tri par ordre alphabetique des fichiers
asort($fichiers);
 
// inclusion des fichiers ... dans l'ordre
foreach($fichiers as $fichier)
	$retour_css .= file_get_contents($fichier);

La fonction compress() va agir sur plusieurs points :

• Retirer les caractères « inutiles », comme les commentaires, tabulations, et transformer les espaces multiples en espaces simples, etc.
• Permettre la mise en place d’un léger système de variables. Utile si vous avez beaucoup de fichiers

function compress($buffer) {
$variables_css = array(
	'COULEUR1'=>'#003366',
	'COULEUR2'=>'#336699',
	'FONT1'=>'Georgia, serif'
	);
// On remplace les variables par leur valeur
foreach($variables_css as $code_variable => $valeur)
	$buffer = str_replace('{'.$code_variable.'}', $valeur, $buffer);
 
	// Suppression des commentaires
	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
 
	// Suppression des tabulations, espaces multiples, retours à la ligne, etc.
	$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '	 ', '	 '), '', $buffer);
 
// Suppression des derniers espaces inutiles
	$buffer = str_replace(array(' { ',' {','{ '), '{', $buffer);
	$buffer = str_replace(array(' } ',' }','} '), '}', $buffer);
	$buffer = str_replace(array(' : ',' :',': '), ':', $buffer);
 
	return $buffer;
}
 
// Compression du CSS
$retour_css = compress($retour_css);

Enfin, nous allons mettre en cache le contenu de la variable $retour_css, et l’afficher, pour les tests.

// Mise en cache du fichier style-min.css
file_put_contents('style-min.css',$retour_css);
// On affiche le contenu compressé
echo $retour_css;

Vous pouvez créer autant de fichiers CSS que vous le désirez dans le sous-dossier style/, afin de séparer couleurs, tailles, réglages de base, Reset CSS et autres grilles.

Vous m’avez lu jusqu’ici ? Woah Apprenez donc que ce code est sous licence WTFPL, qu’un lien vers cet article sera accueilli avec grand bonheur, et qu’un commentaire constructif le sera également

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Compresser et ranger son CSS avec PHP.
Partager cet article sur Twitter

• Le raccourci Ctrl + W / Pomme + W ( Mac )
• Le « clic milieu » sur l’onglet.

Heureusement, les développeurs de Mozilla Firefox ont implémenté un réglage assez utile dans about:config : Le paramètre « browser.tabs.closeButtons« .
Il peut prendre 4 valeurs distinctes, selon le réglage que vous souhaitez :

• 0 – Affiche un bouton de fermeture seulement sur l’onglet actif.
• 1 – Affiche un bouton de fermeture sur tous les onglets ( par défaut ).
• 2 – N’affiche aucun bouton de fermeture.
• 3 – Affiche un bouton de fermeture à la fin de la barre d’onglets. ( mon choix )

Pour modifier cette option, suivez le guide.

• Ouvrez un nouvel onglet dans Firefox. ( Ctrl + T / Pomme + T )
• Dans la barre d’adresse, tapez about:config
• Si Firefox vous le demande, répondez que  » oui, vous ferez attention « .
• Dans le champ de recherche, tapez « browser.tabs.closeButtons« .
• D’un habile clic droit sur la ligne de « browser.tabs.closeButtons » cliquez sur modifier.
• Entrez la valeur que vous désirez, et validez.
• Fermez l’onglet.

En espérant que ça vous serve

Vu chez GHacks

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Astuce Firefox 3 : le bouton « Fermer un Onglet »
Partager cet article sur Twitter

Pour désactiver x-powered-by, il vous suffit de créer – ou de modifier – un fichier php.ini dans le dossier où s’execute votre script et d’ajouter la ligne :
expose_php = off

Si vous pouvez modifier votre fichier php.ini principal, c’est encore mieux !

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : [PHP] Comment désactiver l'entête x-powered-by
Partager cet article sur Twitter

Pour l’activer, tapez « about:config » dans votre barre d’adresse.
Dans le filtre, tapez « gfx.color_management.enabled » et mettez la valeur à « true » (clic droit, inverser).
Redémarrez Firefox, et admirez !

( Bon ok, l’amélioration est légère, mais … c’est toujours ça ! )
Attention, un impact de 10-15% sur les performances est à prévoir …

Vu sur LifeHacker !

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Des couleurs plus belles avec Firefox 3
Partager cet article sur Twitter

• Bien utiliser <HTML> et <BODY>
• Appliquer un style à tous les éléments.
• Donner plusieurs « class » à un élément

Bien utiliser <HTML> et <BODY>

<HTML>, comme tout autre élément, peut être personnalisé via les CSS.
Par exemple, on peut lui ajouter un background, un margin ou autre.
<BODY>, quant à lui, est interprété par la plupart des navigateurs comme un élément de type block.
Cette astuce implique donc de bien réfléchir à la nécessité d’utiliser un block type « mapage », ou « tout » comme j’ai (trop) souvent trouvé dans des templates

Appliquer un style à tous les éléments.

Il est possible d’appliquer un style général à tous les éléments, via *
Cette technique est utilisée par certaines feuilles de Reset CSS, pour appliquer des marges intérieurs et extérieures de 0 par défaut sur tous les éléments.

* {
	margin	: 0;
	padding	: 0
}

Donner plusieurs « class » à un élément

Il est possible de donner plusieurs valeurs à un attribut class, ce qui permet de gérer plus proprement certains éléments.

/* CSS */
.rose {
	color	: pink;
}
.souligne {
	text-decoration	: underline;
}

<em class="rose souligne">texte rose et souligné</em>

avec comme résultat « texte rose et souligné« .
edit : comme l’a noté Kazhar dans les commentaires, il faut nommer ses classes CSS en fonction de l’utilité de l’élément, mais pour le coup, il me fallait un exemple facile à comprendre, et à expliquer

En espérant que ces 3 astuces en CSS vous aient été utiles

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : 3 astuces CSS fort utiles
Partager cet article sur Twitter

Une astuce courte, mais qui peut servir !

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Astuce Firefox 3 : Raccourcis Suivant / Précédent
Partager cet article sur Twitter

• Tapez « about:config » dans votre barre d’adresse. Validez si vous recevez un avertissement.
• Recherchez « extensions.getAddons.maxResults » via le filtre, et passez la valeur au chiffre que vous désirez ( entre 0 et 8 )
• C’est fait !

Note : Un bug empêche mon Firefox de passer au dessus de 4, bizarre bizarre

Une astuce dégotée sur Ghacks.net

Un article publié sur Darklg Blog © 2012
Lien vers l'article original : Astuce Firefox 3 : Augmenter le nombre d'Add-Ons recommandés
Partager cet article sur Twitter