Schließen ShoutBox
Eintragen
DustFireSky Infos einsehen
Erstelle einfach mal einen Thread mit ein paar Serveradressen, wo das nicht geht. Ich schau mir das dann mal an.
DustFireSky Infos einsehen
Eigentlich sollte das für beides sein. Aber da da Addon auch schon etliche Monate auf dem Buckel hat kann es natürlich sein, das die das Server Protokoll geändert haben. Weiß ich nicht. Wenn falsche Infos ausgegeben werden ist das naheliegend.
Der WU Infos einsehen
Kann es sein dasder GSV mit Valve Modul nur für CSS ausgelegt ist und nicht für CS 1.6? Irgendwie zeigt er immer Bilder von CSS an desweiteren total falsche Details. Oo
DustFireSky Infos einsehen
Wenn du wüsstest wie einfach das ist.... Lachen

Kit-Coding.de - PHPKIT Plugins

Wir helfen wo Sie nicht weiter wissen!

 
 
Logo Kit-Coding.de - PHPKIT Plugins
Noch nicht registriert...
Sie sind noch nicht registriert! Einige Bereiche werden für Sie nicht zugänglich sein.
Zur Registrierung

Auf http://www.kit-coding.de registrieren

Letzten Downloads

Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - Valve G..

Was soll das sein fragt Ihr Euch ?!? *code Dieses Modul wird zum auslesen der Valve Games Source Server und Mod Ser..

mehr lesen...
Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - JW Play..

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

mehr lesen...
Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - Battlef..

Was soll das sein fragt Ihr Euch ?!? *code Dieses Modul wird zum auslesen der Battlefield 4 Server und Mod Server b..

mehr lesen...
Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - MVS (Mu..

Was soll das sein fragt Ihr Euch ?!? *code Wollten Sie schon immer mal eine Video Galerie besitzen und Sie Ihren Be..

mehr lesen...
Bild öffnen Download Kommentare

pK ASCE PHPKIT 1.6.6 - Gameser..

Was soll das sein fragt Ihr Euch ?!? *code Dies stellt die Basis für den Gameserver Viewer her. Dieses Script allei..

mehr lesen...

Letzten News

Kommentare

Neue JW Player Version / Forum

Sehr geehrte Leser, es gibt nun ein neues Update zu dem bekannten JW Player. Dieser ist nun in der Version 6.9 erhä..

mehr lesen...
Kommentare

Die Pluginsystem Dokumentation..

Sehr geehrte Leser, ich habe nun alle Dokumentationen die schon vorhanden waren aktualisiert und thematisiert. Sie ..

mehr lesen...
Bild öffnen Kommentare

Nach langer Zeit kleinere Upda..

Hallo liebe Leser, lange ist es her seitdem Addonupdates erschienen sind. Da ich allerdings ein wenig Zeit hatte, h..

mehr lesen...
Kommentare

Die Telekom will DSL Anschlüss..

Die Telekom will also die DSL Anschlüsse drosseln… Soso. Liegt es an der Geiz ist geil Mentalität? Nein, denn von ..

mehr lesen...
Bild öffnen Kommentare

Erstes ESA Addon fertig => For..

Hallo liebe Leser, wie schon in manchen Threads angedeutet habe ich nun die Rechte an seinen Addons ebenso wie PYK...

mehr lesen...

Letzten Videos

Loading the player...

 

pK ASCE - Einsteiger Tipp.. ansehen...
Loading the player...

 

pK ASCE - Was muss ich be.. ansehen...
Loading the player...

 

pK ASCE - Wofür sind die .. ansehen...
Loading the player...

 

pK ASCE - Ein Plugin aktu.. ansehen...
Loading the player...

 

pK ASCE - Ein Plugin dein.. ansehen...
 
  • Letzten 5 Secrets

  • Der WU

    1 31.08.14/17:20 (25/37)

  • Der WU

    1 28.08.14/19:08 (24/37)

  • Der WU

    1 27.08.14/20:54 (23/37)

  • Der WU

    1 11.08.14/19:28 (22/37)

  • Der WU

    1 10.08.14/16:04 (21/37)

  • Der WU

    1 10.08.14/16:03 (19/37)

  • Der WU

    1 10.08.14/16:01 (20/37)

  • Der WU

    1 10.08.14/12:26 (18/37)

  • Der WU

    1 10.08.14/12:24 (17/37)

  • Der WU

    1 10.08.14/12:23 (16/37)

 
x
Montag, 2. September 2014
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

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-Code Anfang: (12 Zeilen) | Code markieren









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-Code ENDE: (12 Zeilen) | Code markieren 


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-Code Anfang: (1 Zeile) | Code markieren
/* 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-Code ENDE: (1 Zeile) | Code markieren 


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-Code Anfang: (1 Zeile) | Code markieren
/* 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-Code ENDE: (1 Zeile) | Code markieren 


Das hier gemacht:

PHP Icon PHP-Code Anfang: (36 Zeilen) | Code markieren









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-Code ENDE: (36 Zeilen) | Code markieren 


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
 
x x x
 
x
x LCL-ONLINE - Webhelp || Webdesign || Gaming Community Kontaktieren Sie uns. x Impressum x x
Seite in 0.20646 Sekunden generiert
Alle Inhalte und verfassten Texte, sowie das grafische Design der Seite auf Kit-coding.de unterliegen dem Urheberrecht und dürfen weder kopiert, noch auf anderen Internetplattformen verbreitet werden.
PageRank Verifizierung www.kit-coding.de