begin process at 2012 02 05 02:02:05
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

ASP.Net

 > COMPACTEZ VOS CSS

COMPACTEZ VOS CSS


 Information sur la source

Note :
9 / 10 - par 3 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :ASP.Net Source .NET ( DotNet ) Classé sous :compacter, css, httphandler, expressions, régulières Niveau :Expert Date de création :12/12/2005 Date de mise à jour :25/01/2006 15:18:04 Vu :22 211

Auteur : poppyto

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (18)
Ajouter un commentaire et/ou une note


 Description

Cliquez pour voir la capture en taille normale
Bonjour à tous !

Si vous êtes un webmaster consciencieux, vous devez livrer un site web léger afin de satisfaire vos clients les plus démunis (56k, 28k!) ainsi que d'économiser la bande passante qui vous est gracieusement louée contre une belle poignée de billets.

1-Pour ceux qui ont la possibilité de le faire, activer premièrement gzip sur votre serveur afin que les pages envoyées soient compressées. Si vous ne savez pas si votre serveur compresse, utilisez cet outil http://www.pipeboost.com/report.asp.

2-La deuxième solution qui peut être mis en place est un compacteur de CSS. J'en entend déjà qui commencent à marmonner que gzip est largement suffisant et je les invite à tester ;-). L'idée du compacteur de CSS est de supprimer les espaces et sauts de ligne inutiles grâce à de bonnes vieilles expressions régulières. En plus de compacter le fichier css, ça permet de le rendre plutôt illisible

Pour la mise en place, il faut ajouter dans la configuration du répertoire virtuel de IIS l'extension css et mettre comme exécutable la dll isapi d'asp.net 2. Si vous ne faîte pas ça, le HttpHandler que nous allons développer ne fonctionnera pas.

Nous allons créer notre HttpHandler dans le répertoire App_Code mais il est possible de le créer dans une dll externe...c'est une affaire de goût, à vous de voir.

Vous devez aussi déclarer le HttpHandler dans le fichier Web.config comme ceci:

<httpHandlers>
<add verb="POST,GET" path="*.css" type="CSSHandler"/>
</httpHandlers>

Au niveau du gain j'ai personnellement gagné ~10% avec gzip activé en aval, ce qui n'est pas rien. Notez que c'est à vous d'ouvrir le fichier CSS dans ProcessRequest et que les compactages effectués peuvent être améliorés, quoique :-P.

-------------------------------------------- ----------------------
Tableau des performances avec une CSS :

Originale         : 36661 octets
Compactée   : 25,240 octets
GZIP              : 7,365 octets
GZIP + Compactée  : 5,054 octets

Source

  • using System;
  • using System.Data;
  • using System.Collections;
  • using System.IO;
  • using System.Configuration;
  • using System.Web;
  • using System.Web.Security;
  • using System.Web.UI;
  • using System.Web.UI.HtmlControls;
  • using System.Text.RegularExpressions;
  • /// <summary>
  • /// CSSHandler Compacteur de CSS
  • /// </summary>
  • public class CSSHandler : IHttpHandler
  • {
  • /// <summary>
  • /// Compacte la CSS, sinon on envoie une erreur 404 si le fichier css n'existe pas
  • /// </summary>
  • /// <param name="context">Context</param>
  • public void ProcessRequest(HttpContext context)
  • {
  • //on test l'existence du fichier et on déclenche une erreur 404
  • //s'il n'existe pas
  • if (!new FileInfo(context.Request.PhysicalPath).Exists)
  • throw new HttpException(404, context.Request.Path + " not found");
  • else //le fichier exist
  • {
  • string strCssContenu = "";
  • //on lit le fichier entièrement
  • using (TextReader hFile = new StreamReader(context.Request.PhysicalPath))
  • {
  • strCssContenu = hFile.ReadToEnd();
  • hFile.Close();
  • }
  • //on compacte
  • //supprime les sauts de ligne
  • strCssContenu = new Regex("\xd\xa").Replace(strCssContenu,"");
  • //supprime les commentaires
  • strCssContenu = new Regex(@"(/\*.+?\*/)").Replace(strCssContenu, "");
  • //1: On isole les chaines " "
  • string regChaine = @""".+?[^\\]""";
  • MatchCollection MatchesStrings = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Matches(strCssContenu);
  • //2: On supprime les chaines
  • strCssContenu = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Replace(strCssContenu, "<STRING_CACHE/>");
  • strCssContenu = new Regex(@"\t").Replace(strCssContenu,"");
  • strCssContenu = new Regex(@" {2,}").Replace(strCssContenu, " ");
  • strCssContenu = new Regex(@" *({|}|:|!|;) *").Replace(strCssContenu, "$1");
  • //Bug d'iE avec les attributs first-letter, first-line-> il faut un espace avant la parenthèse
  • //du coup on le rajoute devant chaque parenthèse ouverte
  • strCssContenu = new Regex(@"([^ ]){", optCompile).Replace(strCssContenu, @"$1 {");
  • //On replace les chaines
  • foreach (Match oneString in MatchesStrings)
  • {
  • strCssContenu = new Regex(@"<STRING_CACHE/>",
  • RegexOptions.IgnoreCase | RegexOptions.Singleline)
  • .Replace(strCssContenu, oneString.Value, 1);
  • }
  • //Important pour FireFox oubien il ne reconnait pas la css
  • context.Response.ContentType = "text/css";
  • //on écrit la css compactée dans le flux de reponse
  • context.Response.Write(strCssContenu);
  • //on envoie explicitement le buffer en cache
  • context.Response.Flush();
  • //on ferme la connexion
  • context.Response.End();
  • }
  • }
  • public bool IsReusable
  • {
  • get { return true; }
  • }
  • }
using System;
using System.Data;
using System.Collections;
using System.IO;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;


/// <summary>
/// CSSHandler Compacteur de CSS
/// </summary>
public class CSSHandler : IHttpHandler
{
     /// <summary> 
    /// Compacte la CSS, sinon on envoie une erreur 404 si le fichier css n'existe pas
    /// </summary> 
    /// <param name="context">Context</param> 
    public void ProcessRequest(HttpContext context)
    {
    	//on test l'existence du fichier et on déclenche une erreur 404
    	//s'il n'existe pas
        if (!new FileInfo(context.Request.PhysicalPath).Exists)
            throw new HttpException(404, context.Request.Path + " not found");
        else //le fichier exist
        {
            string strCssContenu = "";
            
            //on lit le fichier entièrement
            using (TextReader hFile = new StreamReader(context.Request.PhysicalPath))
            {
                strCssContenu = hFile.ReadToEnd();
                hFile.Close();
            }
            
            //on compacte
            
            
           //supprime les sauts de ligne 
            strCssContenu = new Regex("\xd\xa").Replace(strCssContenu,"");
            //supprime les commentaires
            strCssContenu = new Regex(@"(/\*.+?\*/)").Replace(strCssContenu, "");

            //1: On isole les chaines "    "
            string regChaine = @""".+?[^\\]""";
            MatchCollection MatchesStrings = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Matches(strCssContenu);
            //2: On supprime les chaines
            strCssContenu = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Replace(strCssContenu, "<STRING_CACHE/>");


            strCssContenu = new Regex(@"\t").Replace(strCssContenu,"");
            strCssContenu = new Regex(@" {2,}").Replace(strCssContenu, " ");
            strCssContenu = new Regex(@" *({|}|:|!|;) *").Replace(strCssContenu, "$1");

            //Bug d'iE avec les attributs first-letter, first-line-> il faut un espace avant la parenthèse
            //du coup on le rajoute devant chaque parenthèse ouverte
                    
            strCssContenu = new Regex(@"([^ ]){", optCompile).Replace(strCssContenu, @"$1 {");


            //On replace les chaines
            foreach (Match oneString in MatchesStrings)
            {
                strCssContenu = new Regex(@"<STRING_CACHE/>",
                                         RegexOptions.IgnoreCase | RegexOptions.Singleline)
                                         .Replace(strCssContenu, oneString.Value, 1);
            }

            //Important pour FireFox oubien il ne reconnait pas la css
            context.Response.ContentType = "text/css"; 
            
            //on écrit la css compactée dans le flux de reponse
            context.Response.Write(strCssContenu);
            //on envoie explicitement le buffer en cache
            context.Response.Flush();
            //on ferme la connexion
            context.Response.End();
        }
    } 

    
    public bool IsReusable
    {
       get { return true; }
    }


}

 Conclusion

Je remercie Sebastien "Regexp" Ferrand pour son aide.
Autre chose, je ne l'ai pas mis dans le code, mais dans le cas où la css n'est pas générée dynamiquement, mettez la css compactée dans le Cache, le serveur vous en sera reconnaissant !


 Historique

12 décembre 2005 09:47:52 :
Correction ortographique
12 décembre 2005 09:49:29 :
*Orthographique pardon ;-) et réindentation du code.
12 décembre 2005 11:43:20 :
FireFox ne reconnait pas le css si le ContentType "text/css" n'est pas explicite
13 décembre 2005 01:02:12 :
simplification d'une expression
21 décembre 2005 12:56:58 :
Les chaines " chaine chaine" sont mises en cache. Le compacteur a été validé par Cyril.
25 janvier 2006 15:18:04 :
Bug CSS repéré sur IE6 (Les pseudo class doivent être suivies par un espace ou un saut de ligne !) donc j'ai modifié le code en conséquent en rajoutant un espace juste avant une accolade ouvrant ".maclass:first-line{" devient ".maclass:first-line {"

 Sources du même auteur

Source .NET (Dotnet) IMPERSONATION : EXECUTER UN BOUT DE CODE AVEC LES DROITS D'U...
Source .NET (Dotnet) VARIABLES GET,POST,SERVER COMME EN PHP
Source .NET (Dotnet) ENCRYPTER UNE CHAINE AVEC MD5
Source .NET (Dotnet) MASQUER LA VERSION D'ASP.NET DANS LE HEADER HTTP SANS FILTRE...

 Sources de la même categorie

Source avec Zip Source .NET (Dotnet) GUESTBOOK AVEC GRIDVIEW par DanMor498
Source avec Zip CHECKED DROPDOWNLIST par fredzool
Source avec Zip Source avec une capture Source .NET (Dotnet) GRIDVIEW WITH TREEVIEW AND CALLBACK par fredzool
Source avec Zip APPELLER UN WEBSERVICE DEPUIS JAVASCRIPT par fredzool
Source avec Zip Source .NET (Dotnet) MONEY TEXTBOX WITH EMBEDED JAVASCRIPT par fredzool

 Sources en rapport avec celle ci

Source avec Zip GESTION DES SKIN par youdream
Source avec Zip Source .NET (Dotnet) NAVIGATION PAR ONGLET ENTIEREMENT PARAMETRABLE par mael94420
Source avec Zip Source .NET (Dotnet) MENU HORIZONTAL EN ASP.NET COMPATIBLE XHTML ET CSS2 par jesusonline
FONCTION CALENDRIER par TBliss
Source avec Zip [MAJ] ENCORE 1 CALENDRIER PERPETUEL MAIS AVEC UTILISATION DI... par garfield90

Commentaires et avis

Commentaire de sebmafate le 12/12/2005 09:57:53 administrateur CS

Merci pour le clin d'oeil ;)

Commentaire de poppyto le 12/12/2005 10:14:00 administrateur CS

Pas de quoi :)

Commentaire de badrbadr le 27/12/2005 22:47:34

salut,
//supprime les commentaires
strCssContenu = new Regex(@"(/\*.+?\*/)").Replace(strCssContenu, "");

ca enlève les commentaires css
est-ce que tu peux me passer une Regez qui enlève les commentaires html
( <!-- commentaires --> )
parce que je sais pas utiliser les expressions régulières

merci d'avance

Commentaire de poppyto le 27/12/2005 23:10:32 administrateur CS

//commentaires
new Regex("<!--.+?-->").Replace(chaine, " ");

Voilà ^^

Commentaire de badrbadr le 27/12/2005 23:18:26

merci, c gentil;
en passant, je vais te dire pkoi j'ai posté cette question
je veux faire la meme chose que toi mais cette fois-ci en compactant les fichiers html, txt, aspx, (avec un Module au lieu d'un Handler en utilisant le filtre) ... en enlevant les enters (\r\n) et en supprimant les commentaires (<!-- xxx -->)

mais j'ai fait une petite experimentation avec mes fichiers aspx en enlevant les entré...résultat : ca cause des problèmes avec les javascripts (IE et FireFox)

alors, comme solution, soit que je compacte pas le texte inclut dans des balises de type <script> soit que je trouve le problème pkoi ca marche pas :D

sérieusement, si on fait en sorte de remettre un programme en C# sur une seule ligne, ca devrait pas poser de problèmes parce que les points virgules, accolades, ... séparent assez bien le code

etk, merci encore
bye

Commentaire de poppyto le 27/12/2005 23:22:11 administrateur CS

Je m'en doutais. J'ai déjà réalisé un filtre HTML qui fonctionne mais je ne l'ai pas (encore) posté sur aspfr. Ca ne saurait tarder ^^.

Commentaire de badrbadr le 27/12/2005 23:26:11

lol, à nos claviers, que le plus rapide gagne

p.s.: je devine qu'on est tout les deux sur msn messenger actuellement
p.s.s: j'arrete de poster et je me remet au travail, j'ai un module a faire ;)

Commentaire de sebmafate le 28/12/2005 08:50:28 administrateur CS

il y a aussi le mien pour JavaScript qui arrivent bientot :p

Commentaire de poppyto le 28/12/2005 09:46:59 administrateur CS

Yes Cyril me l'avait filé mais c'était pas encore au point car il y avait des problèmes avec les chaines de caractères qui étaient modifiées. Je guette ta nouvelle mouture ^^. Au pire je veux bien la tester en bêta ;-)

Commentaire de sebmafate le 28/12/2005 10:56:05 administrateur CS

il arrive bientot :p
c'est presque au point.

Commentaire de aurelien0306 le 08/09/2007 20:54:08

Très intéressant par contre petite question :
si la css contient un hack css qui joue avec les bugs d'interprétation des commentaires de tel ou tel navigateur.. je suppose qu'elle est purement supprimée par le handler?

Commentaire de ABF le 22/05/2009 16:11:15

Salut,

Ca code est très sympa par conter je n'ai pas compris ce que faisait : strCssContenu = new Regex(@" *({|}|:|!|;) *").Replace(strCssContenu, "$1"); ???


Merci

++

Commentaire de ABF le 22/05/2009 16:12:20

oupla, désolé pour les fautes, c'est le café ;)

Commentaire de poppyto le 22/05/2009 16:16:45 administrateur CS

C'est pour virer les espaces inutiles ^^

Commentaire de ABF le 22/05/2009 16:32:32

Ha ok d'où la gestion du "bug" IE au dessous.

Commentaire de poppyto le 22/05/2009 16:34:52 administrateur CS

exact ^^

Commentaire de ABF le 22/05/2009 16:43:22

Merci bien, et le $1 est équivalent à ?

Commentaire de Renfield le 23/05/2009 08:51:52 administrateur CS

a la première expression matchée entre ( )

dépend du pattern, pour une réponse précise

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Problème avec les expressions régulières et les navigateurs [ par Manu94600 ] Petit souci, je suis en train de faire un site et j'utilise des ControlValidator.J'ai un petit souci que peut être certain ont déjà rencontré.Donc j'u Expressions Régulières [ par Kraken ] Bonjour,Je veux faire un split sur une chaîne de caractères en fonction des caractères + et -, comment faire ? Existe il les expressions régulières co problème sur les expressions régulières [ par guitza87 ] Bonjour, j'ai r&#233;alis&#233; une page en asp qui r&#233;cup&#232;re le contenu d'une autre page dans le but de retrouver les valeurs affich&#233;es css et asp.net relativiser les adresses [ par badrbadr ] salut tout le monde.J'ai une masterpage dans laquelle j'inclue une feuille de style.&lt;link rel="stylesheet" type="text/css" id="document" href="them expressions regulieres [ par hudon77 ] Bonjour a tous!J'ai une expresssion réguliere qui fonctionne bien qui sert à valider un mot de passe  pouvant comporter des lettres et des chiffres,  ATLAS : updatepanel + CSS [ par somsom ] Bonjour,Dans mon update panel, j'ai un tableau dont les image et le style sont liée à une feuille CSSà chaque mise à jour de l'update panel, il y a un recuperer propriété css dans le code behind [ par lilippx ] Salut à tous, mon petit soucis : &lt;div class="centre"&gt;           &lt;div id="Content"&gt;            &lt;asp:contentplaceholder id="ContentPlace pb avec CSS [ par Jabba from mars ] J'utile une feuille de style css externe standard pour gérer l'affichage de toutes les pages de mon site (html 4 + asp 2 + javascript).Or si en intran Perte de mémoire sur les css et en plus c URGENT [ par polluxtroll ] Peut-on colorer les scrollbars d'une balise select ?? MERCIPoLlUx_TrOlLPrenez un troll au petit-déjeuner!! (avis d'expert : y'a rien de mieux) CssCollection et Feuille de stylle .CSS [ par alk ] HellloVoila en ASP.NET avec C# je voudrait savoir si il est faisable d'affecter une feuille de style .CSS à un objet CssCollection car c pas marrant d


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,463 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales