Minifying et Obsfucating CSS similaire à Javascript

Je sais qu'il existe plusieurs outils là-bas qui sont capables d'obscurcir les fichiers JavaScript tel qu'en tournant un simple fonctions telles que:

function testing()
{
  var testing;
  var testing2;
  alert(testing+testing2);
}

en

function a(var a,b;alert(a+b);)

Ma question est en fait quelque chose comme cela existe pour une utilisation avec du CSS/HTML (ou est-il un outil qui dispose d'un effet similaire)? En particulier, un minification du/de la dissimulation de l'outil qui fait la renomme les variables et les refereneces et élimine supplémentaire d'espace blanc etc.

Et si oui - les avantages dans l'emportent sur les performances de la lisibilité dans les deux CSS/HTML/JavaScript minification/obscurcissement?

Sûrement quand vous rapetisser quelque chose, vous avez à jeter des raisons de lisibilité de la fenêtre dompletely!
Je suis d'accord - je me demandais simplement si les avantages de la dissimulation en valent la peine, augmente (le cas échéant) dans la performance.
Je pense que le seul avantage, c'est que le fichier est plus petit, de sorte que votre économiser de la bande passante si vous poussez à des milliers d'agents utilisateurs par jour.
Quel est le point en ôtant le CSS et le HTML? Les classes ont encore de match. Tous vous perdre de la sémantique, et il est encore assez facile à "voler" ce que vous voulez... allez... même avec de la dissimulation de l', firebug et d'autres sont encore en mesure de montrer le CSS avec le point-and-click!

OriginalL'auteur Rion Williams | 2011-01-04

  1. 11

    Il est très difficile de "rapetisser" HTML ou CSS parce que tout ce qui peut en toute sécurité être sauvée, c'est l'espace blanc (qui ne sont pas d'une énorme économie). Comme pour la classe de renommage, vous perdez une partie importante du web, qui est d'avoir sémantique code (qui représente la signification). Je pense que la meilleure option est de s'assurer que vous avez la compression gzip activée sur votre serveur web et de se concentrer sur la combinaison de vos actifs dans un seul fichier, dans la mesure du possible.

    Merci Kevin - je me demandais juste si il y avait des outils pour aider dans l'exécution d'une tâche comme ça (en fait, ôtant un fichier CSS, puis allez à travers et de modifier l'HTML donc) que je suis sûr que certains anal concepteurs là ne voudrais pas avoir une chance de leur travail "réutilisés".
    tout "Web Developer" qui estime que leur travail doit être à l'abri de la réutilisation est indigne du titre.
    +1 pour ton commentaire zzzzBov. 🙂
    mais comment pourrait-web-travail de conception pas être réutilisable? Il y a a pour être un lien entre des éléments, des noms de classe, id s et les règles de style CSS. Étant donné que le lien est pour être là, il n'a pas d'importance combien vous, ou 'ils," dissimuler des noms de classe. Il pourrait rendre plus difficile, mais certainement rien comme aussi délicat que JS ou PHP (entre autres), de l'obscurcissement.
    être ou ? Le droit d'auteur doit protéger un travail du développeur de les réutiliser. ? Probablement pas. Sauf si elle a été explicitement déclaré que le css/javascript/html/images/sites web ont obtenu une licence pour la réutilisation, il est ILLÉGAL d'utiliser tout ou partie de ce contenu, sans le consentement de l'auteur.

    OriginalL'auteur Kevin Sylvestre

  2. 9

    HTML Muncher est un python outil qui tente de renommer les Identifiants et les noms de classe CSS à travers le HTML, les fichiers javascript et CSS. Vous pouvez l'utiliser comme une première étape dans l'optimisation de votre processus, avant de transmettre les fichiers à d'autres outils tels que Google Closure compiler ou YUI CSS Compressor.

    HTML Muncher est un outil formidable. Toutefois, les économies ne sont jamais va être énorme si vous êtes déjà à l'aide de gzip. Original = 148k - Rapetisser+gzip = 17929 v. Croquait+rh+gzip = 15905 - soit une économie d'environ 2k pour beaucoup de travail
    compte ceux 2kb pour des millions de pages vues, et il fera la différence 🙂

    OriginalL'auteur zah

  3. 2

    L'YUI Compressor minifies CSS, mais je ne suis pas sûr de savoir comment grand d'une victoire il pourrait être plus simple de compression gzip. Si vous avez autant de CSS, il pourrait être un signe de problèmes plus graves.

    Merci Hank - j'avais pris un bref coup d'oeil à l'YUI Compressor plus tôt - comme je le crois "minifies CSS" autant qu'il le peut (supprime tous les espaces blancs). Je voulais juste voir si il y avait toute semblable à celle de l'JavaScript-style-outils. (Oh, et ne vous inquiétez pas - ce n'a pas été demandé en raison d'un problème de plus en plus juste de la curiosité)
    Hank - si vous travaillez sur un gros projet (en particulier dans un environnement d'entreprise), il est courant de rencontrer une multitude de fichiers de CSS qui nécessitent minification afin de réduire l'impact sur les performances du site. J'ai vu quelques grandes entreprises utilisent YUI Compressor pour gérer minification CSS.L'Obfuscation, cependant... pas tellement.
    Je suis sûr qu'il y a des exceptions à la règle, mais la plupart des sites ne devrais vraiment pas besoin de rames et ramettes de feuilles de style CSS. Même si vous avez besoin d'un beaucoup de CSS, combien de KBs avez-vous besoin pour démarrer avec un CSS minifier fait un impact important? Ne serait pas la concaténation de tous en un seul fichier, la mise en cache des réglages, et la compression GZip, tout y est beaucoup plus grand impact?
    Je suis d'accord ces tweaks sont tout aussi importants. Minification est important parce que sur certains sites, chaque kilo-octet questions - gzip n'est pas aussi bon que gzip + minification.

    OriginalL'auteur Hank Gay

  4. 1

    Prendre un coup d'oeil à ceci: minifycss

    Que de la confusion, je ne suis pas sûr que ce soit une bonne idée.
    Les classes css peuvent être manipulés n'importe où. La minute que vous modifiez le fichier css, vous perdrez le lien pour les classes/id etc...

    OriginalL'auteur

  5. 1

    Si vous utilisez Ruby, voici une Ruby CSS Minifier que j'utilise à bon escient. Compte tenu de mon déjà-style laconique, il me donne environ 15% de réduction dans mon fichier de tailles.

    Par exemple, sur un projet au total de 5 fichiers 32,3 kiB devient 1 fichier de 26,4 kiB (18%). Sur un autre projet, 2 fichiers de 21,6 kiB devenir 1 fichier de 19,0 kiB (12%).

    OriginalL'auteur Phrogz

  6. 0

    Prendre un coup d'oeil à html5boilerplate.com; en particulier le dernier code source sur GitHub.

    HTML5Boilerplate le script de construction de peut rapetisser JavaScript, CSS et HTML pour vous. Il n'a pas de renommer vos sélecteurs CSS mais il est probablement le plus proche d'un "automatisé obfuscator" vous trouverez.

    Si vous êtes à la recherche à la semaine précédente quelques octets supplémentaires à partir de chaque page, assurez-vous que vous êtes en utilisant gzip/deflate compression PUIS essayez de les alphabétiser votre CSS sélecteur de propriétés et de votre code HTML de l'élément attributs et leurs valeurs.

    Lire ce pour Google recommandations détaillées sur la méthode ci-dessus.

    Dans certains langages dynamiques avec HTML helpers (comme asp.net/C#) vous pouvez remplacer le code html de contrôle "ClientID" méthode pour être une chaîne de caractères aléatoires et lier dynamiquement vos sélecteurs CSS à HTML (enfin, les contrôles côté serveur de rendu HTML). Mais ce serait pour autre chose, et n'est probablement pas ce que vous cherchez à en obtenir. Il deviendrait également un entretien cauchemar.

    OriginalL'auteur David Murdoch

  7. -1

    Ligne il existe de nombreux outils que vous pouvez utiliser pour des choses comme la minification css. Voici un en ligne css minifier! Je l'ai trouvé.

    Comme pour renommer les classes css, je voudrais essayer et d'éviter que vous allez perdre beaucoup à la lisibilité de votre code html.

    OriginalL'auteur the_doc

  8. -3

    J'ai développé l'outil pour Obfusquer le code CSS. C'est l'objectif n'est pas de faire des feuilles de styles rapides à charger, ou que ce soit, mais pour faire de votre "réutilisable" travailler à l'abri de voler. Il dispose de plusieurs méthodes comment faire un enfer d'obtenir un original CSS source (Mais c'est toujours en développement et de meilleures méthodes seront utilisées). Je vous recommande en HTML/CSS templates vendeurs, qui fournissent des démonstrations en direct et sont inquiets de vols, et aussi pour des codeurs - pigistes, qui veut présenter leurs travaux (untrusty) clients. Vous pouvez l'essayer: http://cssobfuscator.com

    OriginalL'auteur user3720773