CSS komprimering

Det vore fetare om den analyserade de olika stilmallsdefinitionerna och sedan försökte banka ihop dem så gott det går. Och jobbigare ;)

Ahhh, äntligen! :)

Jag har letat som en idiot efter en applikation som denna (inte så svårt att göra själv visserligen, men varför det när det nu finns ett bra alternativ!).

Jag har relativt många CSS-filer - samtliga på några kilobytes - vilket jag tjänar mycket på om jag komprimerar. Nu slipper jag göra det manuellt, tack! :)

r) Ett ytterligare förslag för komprimering är att göra om vanliga hexfärger såsom "#ffffff" till kortformen "#fff".

Ett ytterligare förslag för komprimering är att göra om vanliga hexfärger såsom "#ffffff" till kortformen "#fff".

Mycket bra ide!

Logiken borde vara att #<2likadan><2likadana><2likadana>

Och en annan, mer avancerad är att göra om:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 14px;
font-family: Arial;

till kortformen:

font: italic small-caps bold 12px/14px arial;

[i](logik: font: style variant weight size/line-height family)[/i]

Detsamma gäller för "margin-left/margin-top/margin-bottom/margin-right" till "margin: 0 0 0 0;" och exakt samma för "padding". Det krävs ju lite arbete med en sådan funktion, men det är ju inte omöjligt. ;)

Så, nu har jag gjort så att färger komprimeras också. Prova gärna.

Det andra förslaget du kom med va bra också, men är för specifikt. Även om det går, skulle det sakta ner skriptet som är tänkt att köras on-the-fly.
Om jag tar all inline CSS från just denna sidan, och multiplicerar den med 10 så tar ungefär 0.01 sekunder på min hyffsade dator. Så det finns ännu lite CPU utrymme för andra saker.
Ska dock tänka på ditt förslag. Särskilt det om margin: och padding:. Fast skriver folk sånt ofta?

För övrigt har jag hittat en bug som jag måste fixa. Det kan på windows bli dubbla radbrytningar ibland efter } tecknen.

Är den komprimerade koden crossbrowser-vänlig?

Är den komprimerade koden crossbrowser-vänlig?

Så vitt jag vet. Det är ett av skälen att jag vill ha feedback på resultat så att vi kan försäkra oss om att det kommer att funka.

Jag har labbat lite med den i olika webbläsare och har hittils inte märkt någon skillnad. :bire

Några tips på förändringar: :)

Mellanrummet mellan första måsvingen ({) och första elementet tas inte bort, ex.

[red][b]Detta..[/b]
#myDiv { float: left; background: transparent; }

[b]..blir:[/b]
#myDiv{ float:left; background:transparent;}[/red]

Sedan skulle man kanske kolla lite på..

[red][b]Från:[/b]
background-color: #fff;
background-image: url(myImage.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;

[b]Till:[/b]
background: #fff url(myImage.gif) no-repeat fixed 50% 50%;[/red]

Oj. Ändringarna jag gjorde igår måste ha sabbat lite så att de spacen inte tas bort.
Det lustiga är att min CSS fil fortfarande funkar fint.
http://www.peterbe.com/stylesheet.css

Mellanrummet mellan första måsvingen ({) och första elementet tas inte bort, ex.

Fixat!

Nu fungerar det bättre, spacen försvinner. :bire