Schließen ShoutBox
Eintragen
Roy Infos einsehen
Gerade das "Goodbye" des PHPKITs gelesen. Kurz und bündig, musste halt mal was geschrieben werden...
DustFireSky Infos einsehen
Träum weiter. Ich bin seit Anfang an dabei. Glaub mir, da kommt nichts mehr.
ich Infos einsehen
Es ist ja garnicht 100% ausgeschlossen ob das nicht nochmal grundlegend überarbeitet und weiterentwickelt wird (ob durch den ursprünglichen Entwickler, Community oder wen anders), warum also zur Ausschlachtung freigeben
DustFireSky Infos einsehen
Im Westen nichts Neues. Treffer Also weiter zoggen Juhu




Kit-Coding.de - PHPKIT Plugins / Addons / Styles

 
 

Letzten Downloads

Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - KC feat..

Was soll das sein fragt Ihr Euch ?!? *s016* Hier ist das alt bekannte Security Modul für die PHPKIT Version 1.6.6 d..

Mehr lesen...
Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - KC feat..

Wichtig! Wenn Sie das Addon installieren über den Button => "Automatische Dateieditierung starten" so können 30 Sekunde..

Mehr lesen...
Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - JW Play..

Was soll das sein fragt Ihr Euch ?!? *s016* Dieser Player wird von einigen Addons von uns genutzt. Daher sollten Si..

Mehr lesen...

Letzten News

Kommentare

Änderungen der Vorraussetzunge..

Sehr geehrte Leser, In naher Zukunft werden alle Hoster Ihre Serversoftware aktualisieren und somit würde der Reibung..

Mehr lesen...
Kommentare

All inkl. PHP Umstellung im 1Q..

Sehr geehrte Leser, Durch meinen Anbieter wurde ich darüber in Kenntnis gesetzt, dass die PHP Versionen 5.2,5.3 und..

Mehr lesen...
Kommentare

Medienhaus Gersöne / PHPKIT un..

Sehr geehrte Leser, lange haben wir auf eine Reaktion des Unternehmens gewartet. Wie wir diesem Thread entnehmen k..

Mehr lesen...

Letzten Artikel

Bild öffnen Kommentare

Synology DSM 6.0+ / Syslinux 6..

Vorweg: Diese Anleitung basiert auf dem Aufbau meines Beispiels aus diesem Artikel: Synology DSM 6.0+ / Syslinux 6.04 ..

Mehr lesen...
Bild öffnen Kommentare

Final Fantasy XV Review und Fi..

Einleitung: Die Zeiten wiegen schwer in der Final Fantasy Geschichte. Es ist ein ewiger Kampf zwischen Neuerungen, Verb..

Mehr lesen...
Bild öffnen Kommentare

Silent Hunter 5 Multiplayer Po..

Wie behebt man das Multiplayer Ping 999 Problem ? Anleitung Speedport W700V Anleitung Speedport W724V Firewall D..

Mehr lesen...
  • Community

  • Jetzt Online (0)
    Executive Officer
    Development Officer
    Administrative Officer
    V.I.P
    User
    Gäste Online
    60
  • KitKniff - Top 5


  • Heute wurde noch kein Spiel beendet

  • Spenden

  • Unterstützen Sie uns durch eine Spende!
    Vielen Dank!

 
Artikel » Tutorials - 1.6.5 » CSS Dateien Tidy/Minify machen und umgekehrt
   

Tutorials - 1.6.5 CSS Dateien Tidy/Minify machen und umgekehrt
20.02.2012 von DustFireSky

0 Kommentar(e)kommentieren
Hierbei geht es rein um die Performance der Webseite. Je nach Anzahl der Addons oder Skripts des PHPKIT's, die installiert wurden, können da schon einige KB zusammen kommen. Daher hier mal eine kleine Anleitung wie man diese Dateien Komprimieren kann, damit im Endeffekt die Seite auch schneller geladen wird.

Ich nehme mir jetzt einfach mal irgendeine CSS Datei, damit Sie ein Beispiel haben, wie das nachher aussehen wird. Sie nehmen sich eine CSS Datei und öffnen diese via Editor. Markieren Sie alles und kopieren es in die Zwischenablage.

Beispiel CSS:

PHP Icon
PHP Quelltext: (12 Zeilen) | Code markieren | Generiert in 0.00023 Sekunden.









10 
11 
12 
/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url(fx/css/movie/delete.pngno-repeat 0 -16px}
div.star-rating,div.star-rating a{background:url(fx/css/movie/star.pngno-repeat 0 0px}
div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
div.star-rating-on a{background-position:-16px!important}
div.star-rating-hover a{background-position:-32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */
 
PHP Quelltext: (12 Zeilen) | Code markieren | Generiert in 0.00023 Sekunden.


So, wie komprimieren wir das jetzt ?

Ich habe das über ein paar Webseiten gemacht, die ich im Netz gefunden habe. Es war mir aber wichtig, das ich später bei Bedarf diese Komprimierung auch wieder Rückgängig machen könnte. Deshalb bin ich erstmal auf diese Webseite gegangen und habe meine soeben kopierte CSS Datei in das Linke Fenster kopiert.

Siehe Bild. Die Einstellungen sollten Sie nach Möglichkeit übernehmen.

547_CSS01.PNG

Klicken Sie nun auf "CSS verarbeiten". Dabei heraus kommt dann das hier:

PHP Icon
PHP Quelltext: (1 Zeile) | Code markieren | Generiert in 0.00017 Sekunden.
/* CSSTidy 1.3: Mon, 20 Feb 2012 07:01:29 -0600 */div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden;}div.rating-cancel,div.rating-cancel a{background:url(fx/css/movie/delete.pngno-repeat 0 -16px;}div.star-rating,div.star-rating a{background:url(fx/css/movie/star.pngno-repeat 0 0;}div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0;border:0;}div.star-rating-on a{background-position:-16px!important;}div.star-rating-hover a{background-position:-32px;}div.star-rating-readonly a{cursor:default!important;}div.star-rating{background:transparent!important;overflow:hidden!important;}
 
PHP Quelltext: (1 Zeile) | Code markieren | Generiert in 0.00017 Sekunden.


547_CSS02.PNG

Eingabe: 0.862KB, Ausgabe:0.741KB, Komprimierungsrate: 14% (-121 Bytes)

Er hat durch die Komprimierung satte 14% der Größe eingespart. Bei diesem Beispiel scheint das noch wenig zu sein, aber bei großen CSS Dateien, die 5 KB groß sind werden mitunter bis zu 50% und mehr eingespart. Die Ausgabe kopieren Sie dann einfach aus dem Fenster in die von eben geöffnete Datei und speichern diese ab. Den Schritt können Sie mit allen CSS Dateien machen, die Sie finden können. Komprimieren Sie aber auf keinen Fall die Datei: pkinc/publictpl/style.css!!! Mit allen anderen Dateien dürfen Sie das jedoch machenzwinkern

Ok, komprimiert ist jetzt alles, aber was machen wir, wenn wir das jetzt wieder lesbar machen wollen, eben weil wir etwas ändern müssten ?

Gehen Sie dazu auf folgende Seite und kopieren Ihre minimierte CSS Datei in das Fenster und klicken einfach auf "Unminify"

Er hat dann aus:

PHP Icon
PHP Quelltext: (1 Zeile) | Code markieren | Generiert in 0.00016 Sekunden.
/* CSSTidy 1.3: Mon, 20 Feb 2012 07:01:29 -0600 */div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden;}div.rating-cancel,div.rating-cancel a{background:url(fx/css/movie/delete.pngno-repeat 0 -16px;}div.star-rating,div.star-rating a{background:url(fx/css/movie/star.pngno-repeat 0 0;}div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0;border:0;}div.star-rating-on a{background-position:-16px!important;}div.star-rating-hover a{background-position:-32px;}div.star-rating-readonly a{cursor:default!important;}div.star-rating{background:transparent!important;overflow:hidden!important;}
 
PHP Quelltext: (1 Zeile) | Code markieren | Generiert in 0.00016 Sekunden.


Das hier gemacht:

PHP Icon
PHP Quelltext: (36 Zeilen) | Code markieren | Generiert in 0.00019 Sekunden.









10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
/* CSSTidy 1.3: Mon,  20 Feb 2012 07:01:29 -0600 */div.rating-canceldiv.star-rating {
    
floatleft;
    
width17px;
    
height15px;
    
text-indent: -999em;
    
cursorpointer;
    
displayblock;
    
backgroundtransparent;
    
overflowhidden;
}
div.rating-canceldiv.rating-cancel a {
    
backgroundurl(fx/css/movie/delete.pngno-repeat 0 -16px;
}
div.star-ratingdiv.star-rating a {
    
backgroundurl(fx/css/movie/star.pngno-repeat 0 0;
}
div.rating-cancel adiv.star-rating a {
    
displayblock;
    
width16px;
    
height100%;
    
background-position0 0;
    
border0;
}
div.star-rating-on a {
    
background-position-16px!important;
}
div.star-rating-hover a {
    
background-position-32px;
}
div.star-rating-readonly a {
    
cursor: default!important;
}
div.star-rating {
    
backgroundtransparent!important;
    
overflowhidden!important;
}
 
PHP Quelltext: (36 Zeilen) | Code markieren | Generiert in 0.00019 Sekunden.


Sie könnten jetzt die Datei bearbeiten und wenn Sie fertig sind wieder komprimieren. So einfach kann es sein. Jeder, der sich gedanken um die Performance der Webseite macht sollte dies bei sich ändern.


Artikel-Infos
Druckansichtdruckbare Version anzeigen Seite empfehlenSeite empfehlen 0 Kommentar(e)kommentieren
Wertung ø 10,00
1 Stimme(n)
Seitenanfang nach oben
 
 
© Kit-Coding.de 2008-2017
Seite in 0.04517 Sekunden generiert