Honda Forum & Tuning - MaXReV
     [ erweiterte Suche ]
Board-AnkündigungenRe:HitsLetzter Beitrag
Auto Probefahrt: Hier kostenlos anmelden (auch Testfahrer)
Jetzt (2012) eine neue Aktion, wo auch ein Honda Civic dabei ist: Beitrag aus 2010: Hi, ich hatte ein nettes Gespräch mit dem Betreiber von autoprobefahrten.de. Dort kann man sich kostenlos für Probefahrten...
Seite 2, 3, 4, 5, 6 [Allgemein]von mgutt
52541901.06.2012, 15:34
mgutt

»Neue CSS Minimierung (Minify) im Einsatz

Buttons mit "MaXReV"-Schriftart?Neues Thema eröffnenNeue Antwort erstellenDas Thema einem Freund empfehlenDas Thema druckenUhrzeit ist falsch!
Seite 1 von 1 [1 Beitrag]
AutorNachricht
Administrator 


Name: Marc
Geschlecht:
Anmeldedatum: 28.08.2004
Beiträge: 40910
Chats: 11134
Wohnort: Hennef


Meine eBay-Auktionen:
12.04.2011, 10:03


Neues CSS Cachesystem
CSS-Daten, die hauptverantwortlich für das Design einer Internetseite sind, werden in aller Regel in eine Datei ausgelagert (z.B. styles.css).

Vorteil:
- die CSS Datei wird vom Besucher nur 1x heruntergeladen und verbleibt in seinem Browsercache

Nachteil:
- Änderungen in der CSS Datei bekommt der Besucher erst mit, wenn die Datei neu geladen wurde (entweder weil das Verfallsdatum abgelaufen ist oder bewusst über STRG + F5). Das kann zu Darstellungsfehlern der Seite führen.
- wer wie wir einen Proxyserver mit Cache einsetzt muss erstmal ein Script schreiben, dass auf dem Proxyserver den Cache löscht, sobald die Datei verändert wurde

Daher sind wir vor längerer Zeit übergegangen und haben die CSS Datei immer wieder umbenannt, sobald wir Änderungen vorgenommen haben.

Vorteil:
- die CSS-Datei wird nur 1x heruntergeladen
- die CSS-Datei ist stets aktuell

Nachteil:
- abspeichern unter neuem Namen (sind nur wenige Schritte, aber trotzdem ein Aufwand)
- es müssen in allen Verlinkungen auf die CSS Datei (z.B. im Template) angepasst werden (bei uns 4 verschiedene Dateien)

Nun habe ich das System komplett umgestellt. Es erkennt automatisch, wenn die CSS Hauptdatei geändert wurde und erstellt dann davon eine Kopie im css/-Verzeichnis mit einem neuen Dateinamen (styles2.css, styles3.css, usw.). Den neuen Dateinamen speichert es dann automatisch in der Datenbank und dieser Wert wird automatisch bei allen Verlinkungen genutzt.

Vorteil:
- die CSS-Datei wird nur 1x heruntergeladen
- die CSS-Datei ist stets aktuell
- man muss die bestehende Datei bei Änderungen nur überschreiben
- dank der durchlaufenden Nummerierung hat man automatisch ein Backup von jedem Änderungsschritt (unverhoffter Vorteil ^^)

Nachteil:
keiner

Neue automatische CSS Minimierung
Durch die neue automatische Verarbeitung der CSS Datei und das Schreiben des Caches kam ich dann gleich auf die Idee diese gleich noch zu minimieren.

D.h. die CSS-Datei wird nun minimiert und komprimiert ausgegeben. Komprimiert wurde sie schon immer, aber die automatische Minimierung (international als "Minify" bekannt) ist neu.

Bei der Komprimierung ist es bekanntlich so, dass Daten, die sich in einer Datei ständig wiederholen durch Platzhalter ersetzt werden (grob formuliert). Bei der Minimierung ist es dagegen so, dass man unwichtige Daten vollständig entfernt.

Ein einfaches Beispiel für einen CSS-Code, der die Schriftfarbe und die Hintergrundfarbe einer Internetseite bestimmt:
   Code:
body {
  color: black;
  background-color: white;
}


Nach der Minimierung:
   Code:
body{color:black;background-color:white}


Beide Varianten machen das gleiche, aber letztere Version verzichtet auf Leerzeichen, Zeilenumbrüche und das abschließende Semikolon.

Im Grunde ist selbst die Minimierung bei uns nicht wirklich neu, weil ich mir schon vor längerer Zeit angewöhnt hatte den Code gleich so kompakt zu schreiben, allerdings kann ich mir das jetzt sparen, weil das nun ein Script automatisch übernimmt.

Der Vorteil ist dabei nicht nur, dass ich jetzt wieder schön übersichtlich formatiert schreiben kann, sondern auch dass das Script im Gegensatz zu mir keine Stellen übersieht ;)

Dabei erkennt das Script z.B. noch mehr Potential ersetzt die Farbangaben durch gekürzte Hex-Codes:
   Code:
body{color:#000;background-color:#fff}


Insgesamt wurde die CSS-Datei mit diesen Techniken um noch mal 10% verkleinert (gegenüber einer formatierten Schreibweise ist das Einsparpotential natürlich viel höher).

Aber selbst jetzt gibt es noch Einsparpotential, aber es wird relativ kompliziert, wenn man anfängt und CSS Deklarationsblöcke untereinander vergleicht, um so unnötige doppelte Deklarationen entfernen zu können. z.B. sowas:
   Code:
div {
  color: black;
  background-color: white;
}
div {
  background-color: white;
}


In dem Fall wäre der zweite Deklarationsblock überflüssig.

Allerdings ist unsere CSS (noch) klein genug um da noch relativ die Übersicht zu behalten.

Obwohl es viele verschiedene PHP Klassen zur Minimierung der CSS Datei gibt, habe ich mich dazu entschlossen eine eigene Funktion zu schreiben. Auch weil meine Version CSS-Standards ignoriert (z.B. "zoom"-Befehl in Internet Explorer) und nicht einfach irgendwas im Code korrigiert, was ich durchaus absichtlich eingebaut habe.

Hier unsere aktuelle Version:
function css_minify($source, $formatted=false) {
	$source = preg_replace(array(
			// remove comments
			'#/\*.*?\*/#s',
			// reduce whitespace
			'#\s+#',
		), array(
			'',
			' ',
	), $source);
	$source = str_replace(array(
			// remove leading and trailing whitespace at special characters
			' :', ': ', ' ;', '; ', ' ,', ', ', ' {', '{ ', ' }', '} ', '( ', ' )',
			// remove unnecessary semi-colon
			';}',
			// add padding
			':', '}', ';',
			// remove leading whitespace at size formats
			' cm ', ' em ', ' ex ', ' in ', ' mm ', ' pc ', ' pt ', ' px ', ' % ',
			// shorten zero notations
			' 0cm', ' 0em', ' 0ex', ' 0in', ' 0mm', ' 0pc', ' 0pt', ' 0px', ' 0%',
			// shorten floats with leading zero
			' 0.', ' -0.',
			// shorten font-weight
			'font-weight: normal', 'font-weight: bold'
		), array(
			':', ':', ';', ';', ',', ',', '{', '{', '}', '}', '(', ')',
			'}',
			': ', ';}', ' ;',
			'cm ', 'em ', 'ex ', 'in ', 'mm ', 'pc ', 'pt ', 'px ', '% ',
			' 0', ' 0', ' 0', ' 0', ' 0', ' 0', ' 0', ' 0', ' 0',
			' .', ' -.',
			'font-weight: 400', 'font-weight: 700'
	), $source);
	// shorten hex colors
	if (preg_match_all('/ #[0-9a-f]{6}/i', $source, $hexs)) {
		$hexs = array_unique($hexs[0]);
		foreach ($hexs as $h) {
			if ($h[2] == $h[3] && $h[4] == $h[5] && $h[6] == $h[7]) {
				$source = str_replace($h, $h[0] . $h[1] . $h[2] . $h[4] . $h[6], $source);
			}
		}
	}
	// shorten side notations
	if (preg_match_all('/(margin|padding|border-width): ([^;]+) ([^;]+) ([^;]+) ([^;]+) ;/iU', $source, $n)) {
		for ($i = 0; $i < count($n[0]); $i++) {
			if ($n[3][$i] == $n[5][$i]) {
				// margin: 10px 10px 10px 10px => margin: 10px;
				if ($n[3][$i] == $n[2][$i] && $n[3][$i] == $n[4][$i]) {
					$source = str_replace($n[0][$i], $n[1][$i] . ': ' . $n[2][$i] . ' ;', $source);
				}
				// margin: 10px 20px 10px 20px => margin: 10px 20px;
				else if ($n[2][$i] == $n[4][$i]) {
					$source = str_replace($n[0][$i], $n[1][$i] . ': ' . $n[2][$i] . ' ' . $n[3][$i] . ' ;', $source);
				}
				// margin: 10px 20px 15px 20px => margin: 10px 20px 15px;
				else {
					$source = str_replace($n[0][$i], $n[1][$i] . ': ' . $n[2][$i] . ' ' . $n[3][$i] . ' ' . $n[4][$i] . ' ;', $source);
				}
			}
		}
	}
	$source = str_replace(array(
			// shorten css1 color values
			' aqua ',' black ',' blue ',' fuchsia ',' #808080 ',' #008000 ',' lime ',' #800000 ',' #000080 ',
			' #808000 ',' #800080 ',' #f00 ',' #c0c0c0 ',' #008080 ',' white ',' yellow ',
			// remove padding
			': ', ' ;', ';}',
		), array(
			' #0ff ',' #000 ', ' #00f ',' #f0f ',   ' gray ',   ' green ',  ' #0f0 ',' maroon ', ' navy ',
			' olive ',  ' purple ', ' red ', ' silver ', ' teal ',   ' #fff ', ' #ff0 ',
			':', ';', '}'
	), $source);
/*
		// shorten extended colors
		$source = str_replace(array(
			'aliceblue','antiquewhite','aqua','aquamarine','#f0ffff','#f5f5dc','black','blue','blueviolet','#a52a2a',
			'burlywood','cadetblue','chartreuse','chocolate','#ff7f50','cornflowerblue','cornsilk','crimson','darkblue',
			'darkcyan','darkgoldenrod','darkgray','darkgreen','darkkhaki','darkmagenta','darkolivegreen','darkorange',
			'darkorchid','darkred','darksalmon','darkseagreen','darkslateblue','darkslategray','darkturquoise',
			'darkviolet','deeppink','deepskyblue','dimgray','dodgerblue','firebrick','floralwhite','forestgreen',
			'fuchsia','gainsboro','ghostwhite','#ffd700','goldenrod','#808080','#008000','greenyellow','honeydew',
			'hotpink','indianred','#4b0082','#fffff0','#f0e68c','lavender','lavenderblush','lawngreen','lemonchiffon',
			'lightblue','lightcoral','lightcyan','lightgoldenrodyellow','lightgreen','lightgrey','lightpink',
			'lightsalmon','lightseagreen','lightskyblue','lightslategray','lightsteelblue','lightyellow','lime',
			'limegreen','#faf0e6','#800000','mediumaquamarine','mediumblue','mediumorchid','mediumpurple',
			'mediumseagreen','mediumslateblue','mediumspringgreen','mediumturquoise','mediumvioletred','midnightblue',
			'mintcream','mistyrose','moccasin','navajowhite','#000080','oldlace','#808000','olivedrab','#ffa500',
			'orangered','#da70d6','palegoldenrod','palegreen','paleturquoise','palevioletred','papayawhip','peachpuff',
			'#cd853f','#ffc0cb','#dda0dd','powderblue','#800080','#f00','rosybrown','royalblue','saddlebrown','#fa8072',
			'sandybrown','seagreen','seashell','#a0522d','#c0c0c0','skyblue','slateblue','slategray','#fffafa',
			'springgreen','steelblue','#d2b48c','#008080','thistle','#ff6347','turquoise','#ee82ee','#f5deb3','white',
			'whitesmoke','yellow','yellowgreen',
			// weight search
			'font-weight:normal','font-weight:bold'
		), array(
			'#f0f8ff',  '#faebd7',     '#0ff','#7fffd4',   'azure',  'beige',  '#000', '#00f','#8a2be2',   'brown',
			'#deb887',  '#5f9ea0',  '#7fff00',   '#d2691e',  'coral',  '#6495ed',       '#fff8dc', '#dc143c','#00008b',
			'#008b8b', '#b8860b',      '#a9a9a9', '#006400',  '#bdb76b',  '#8b008b',    '#556b2f',       '#ff8c00',
			'#9932cc',   '#8b0000','#e9967a',   '#8fbc8f',     '#483d8b',      '#2f4f4f',      '#00ced1',
			'#9400d3',   '#ff1493', '#00bfff',    '#696969','#1e90ff',   '#b22222',  '#fffaf0',    '#228b22',
			'#f0f',   '#dcdcdc',  '#f8f8ff',   'gold',   '#daa520',  'gray',   'green',  '#adff2f',    '#f0fff0',
			'#ff69b4','#cd5c5c',  'indigo', 'ivory',  'khaki',  '#e6e6fa', '#fff0f5',      '#7cfc00',  '#fffacd',
			'#add8e6',  '#f08080',   '#e0ffff',  '#fafad2',             '#90ee90',   '#d3d3d3',  '#ffb6c1',
			'#ffa07a',    '#20b2aa',      '#87cefa',     '#789',          '#b0c4de',       '#ffffe0',  '#0f0',
			'#32cd32',  'linen',  'maroon', '#66cdaa',         '#0000cd',   '#ba55d3',     '#9370db',
			'#3cb371',       '#7b68ee',        '#00fa9a',          '#48d1cc',        '#c71585',        '#191970',
			'#f5fffa',  '#ffe4e1',  '#ffe4b5', '#ffdead',    'navy',   '#fdf5e6','olive',  '#6b8e23',  'orange',
			'#ff4500',  'orchid', '#eee8aa',      '#98fb98',  '#afeeee',      '#db7093',      '#ffefd5', '#ffdab9',
			'peru',   'pink',   'plum',   '#b0e0e6',   'purple', 'red', '#bc8f8f',  '#4169e1',  '#8b4513',  'salmon',
			'#f4a460',   '#2e8b57', '#fff5ee', 'sienna', 'silver', '#87ceeb','#6a5acd',  '#708090',  'snow',
			'#00ff7f',    '#4682b4',  'tan',    'teal',   '#d8bfd8','tomato', '#40e0d0',  'violet', 'wheat',  '#fff',
			'#f5f5f5',   '#ff0',  '#9acd32'
		), $source);
*/
	// formatted output
	if ($formatted) {
		$source = str_replace(array(
				// add linebreak after declaration blocks
				'}',
				// add linebreak before nested declaration blocks (buggy)
				'{#', '{.'
			), array(
				"}\n",
				"{\n#", "{\n."
		), $source);
	}
	return trim($source);
}


Wie man sieht habe ich auch schon die erweiterte Farbpalette angedacht, allerdings wird diese nicht durch jeden Browser erkannt und das Einsparpotential ist eher gering, weil man zu 99% den Farbnamen in den Hexcode umwandelt und nicht andersherum. Und ich denke so gut wie niemand schreibt die Farbnamen aus, sondern setzt gleich auf die Hex- oder RGB-Schreibweise. Allerdings werde ich zumindest überlange erweiterte Farbnamen in Hexcodes wandeln. Mal sehen welche Farbnamen dann noch übrig bleiben.

Todo
- erweiterte Farbpalette
- IE6: Pseudoklassen (:first-line und :first-letter) benötigen Leerzeichen
- leere Deklarationsblöcke löschen (div{})
- Nachkommastellen entfernen, falls Null (10.0px)
- positives Vorzeichen entfernen (+10px)
- Anführungszeichen bei url() entfernen (url("image.jpg"))
- RGB in HEX wandeln
- alle Deklarationen in Kleinbuchstaben wandeln (spart bei Komprimierung, falls gemixt)
- Leerzeichen vor !important entfernen
- eingebettetes Javascript komprimieren
- margin-left/-right/-top/-bottom in Einfachschreibweise wandeln (auch bei padding, border, font usw.)
- CSS Kommentarhacks erhalten

Zuletzt bearbeitet von mgutt am 12.04.2011, 10:03, insgesamt einmal bearbeitet
Nach obenprofil pn email
Gast 

12.04.2011, 10:03


Mach mit!

Wenn Dir die Beiträge gefallen haben oder Du noch Fragen hast oder Ergänzungen machen möchtest, solltest Du Dich gleich bei uns anmelden:

    » Anmelden

Registrierte Mitglieder genießen die folgenden Vorteile:
✔ kostenlose Mitgliedschaft
keine Werbung
✔ direkter Austausch mit Gleichgesinnten
✔ neue Fragen stellen oder Diskussionen starten
✔ schnelle Hilfe bei Problemen
✔ Bilder und Videos hochladen
✔ und vieles mehr...
Nach oben
Seite 1 von 1 [1 Beitrag]
Neues Thema eröffnenNeue Antwort erstellen
Ähnliche BeiträgeRe:HitsLetzter Beitrag
common.css
Hallo, ich habe gerade frisch ein eigenes Mediawiki installiert. Es läuft soweit. Ein Problem hab ich: Einstellungen in der URL: http://www.[mein-wiki.de]/index.php/MediaWiki:Commons.css werden nicht übernommen. Konkret möchte ich den linken...
von 3go
213014.10.2011, 05:42
3go
HTML-/CSS-Entwickler (w/m)
Die Starmeo Betriebs GmbH ist im August 2011 mit Sitz in Köln gegründet worden. Starmeo.com ist eine Social-Media-Plattform, spezialisiert auf die Bedürfnisse von Stars und deren Fans. Das junge Start-up sucht noch weitere Mitarbeiter (m/w) in...
von Starmeo
04416.12.2011, 14:47
Starmeo
Extension : CSS MenuSidebar [gelöst]
Hallo zusammen, die Extension CSS MenuSidebar ermöglicht es, eine klappbare Sidebar anzulegen. Das klappt soweit auch sehr gut, das Einzigste was mich stört ist, dass die Untermenüs abgeschnitten werden. Die Darstellung reicht leider nicht über die...
von Rina6489
016213.10.2011, 07:40
Rina6489
Wo liegt Media:WikiCommen.css
Ich bin schon bei einigen Extensions auf eine Datei MediaWiki:Common.css aufmerksam gemacht worden. Dort soll ich laut dieser Anleitung etwas eintragen: [URL=http://www.mediawiki.org/wiki/Extension:Google_AdSense_2]Extension:GoogleAdSense...
von LJR
110623.08.2010, 07:22
LJR
 Design: Grundgerüst von Tabellen auf CSS umgestellt
Hallo, das Grundgerüst unserer Seite wurde testweise von Tabellen auf CSS umgestellt. Leider habe ich ein Problem im Kopf. Dort wird die Navigation zentriert angezeigt, aber das geht nur wenn man eine fixe Breite hinterlegt. Dummerweise ist im...
Seite 2, 3, 4, ...14, 15, 16 [Ankündigungen]von mgutt
158305127.02.2010, 10:16
mgutt
Die CSS Designer von Auxmoney sind super
Gleich mal alle wichtigen Links mit einem Layer überdeckt und schon kann man den Kreditnehmer nicht mehr kontaktieren...
von mgutt
05014.12.2011, 16:04
mgutt
crx heckschürzen einsatz wo kaufen ?
Hey Leute ich such se nen Einsatz das die Aussparung in der Orginalschürze Schließt wo gibts sowas ?. Hab bei ebay nix...
[CRX]von termi_crx
129704.08.2006, 19:55
termi_crx
 Opeltreffen Oschersleben ADAC im dauer einsatz
das ist typisch OPEL er muss abgeschleppt werden, aber dass dafür gleich 2 Schlepper nötig sind, das ist der hammer und ein dritter war auch unterwegs :D:D:D:D:D:D:D so sind se die opels:D kann einem Honda nicht...
Seite 2, 3, 4 [Allgemein]von civicmausi90
3297607.06.2010, 20:04
CivicJogi
Schrifteffekte: Verlauf, Schatten & Umrandung im Einsatz
Hier ein Beispiel, wenn man die folgenden Effekte...
von mgutt
072920.11.2008, 16:00
mgutt
Grundloser ABS einsatz bei hohem Tempo
Moin, mein ABS spinnt bei hohem Tempo, wenn ich ca. 150-220 fahre und dann bremse, greift das ABS ein, auch wenn ich nur ganz leicht bremse. Woher kommt das? Bei niedrigem Tempo habe ich es nicht, auch geht keine Lampe o.ä. an. Hatte wer dieses...
[Del Sol]von mx-ryd3r
29121.09.2011, 21:54
Slowrida
Sponsor: Car Import Center Hauck
Car Import Center Hauck

© 2004 - 2012 www.maxrev.de (srv02) | Communities | Impressum