Vraag betreft minifyen css
Ikzelf ben helaas nog niet voldoende thuis in PHP om een probleem op te lossen.
Hopelijk past mijn vraag hier op het forum en is iemand bereid te helpen.
Een (standaard) php script welke op een website gebruikt wordt om css te minifyen werkt niet helemaal goed.
Ik weet niet of ik het hele script zo hier kan plaatsen, dus beperkt ik mij voor nu tot een klein deel ervan, waarvan ik denk dat het probleem zit.
Het idee is dat er spaties en regeleindes uit de css gehaald worden.
Dat werkte prima, tot ik er achter kwam dat als er een bijv. een punt stond, deze niet goed ging.
Bijv. ging #test p { wel goed, maar #test .test werd door het script aan elkaar geplakt.
In het script vond ik dit, die dat afhandelde:
case ' ':
if ($this->isAlphaNum($this->b)) {
$this->action(1);
} else {
$this->action(2);
}
break;
Goed hierbij te weten dat $this de spatie zelf is.
$this->b is dan $this->next()
oftewel het teken na de spatie.
De actions verwijzen naar hoe deze af te handelen.
De action(1) behoud in dit geval de spatie en bij action(2) wordt deze vervangen/weggehaald.
Het is mij gelukt dat stukje script aan te pasen, zodat hij ok de punt, een haakje, een hash, of een dubbele punt uitsluit.
Dat heb ik zo gedaan:
case ' ':
if (strpos($this->b, ".") !== false) {
$this->action(1);
} elseif (strpos($this->b, "(") !== false) {
$this->action(1);
} elseif (strpos($this->b, "#") !== false) {
$this->action(1);
} elseif (strpos($this->b, ":") !== false) {
$this->action(1);
} elseif ($this->isAlphaNum($this->b)) {
$this->action(1);
} else {
$this->action(2);
}
break;
Dit leek goed te werken en het gewenste effect te hebben.
Tot ik er achter kwam dat als er een % of een plus-teken of een min-teken staat, deze de spaties toch aan elkaar plakt, zoals bijv in een css calc:
#test .test {
color: #000;
width: calc(100% - 30px);
}
Wordt:
#test .test{color:#000;width:calc(100%-30px);}
Dan heb ik geprobeerd om deze toe te voegen:
} elseif (strpos($this->b, "-") !== false) {
$this->action(1);
Maar dat deed niets.
Ik vermoed dan ook dat procenten, plussen en minnen (math-tekens) hierbij mis gaan.
Als ik als test het min-teken aanpas naar het word 'min', krijg ik deze output:
#test .test{color:#000;width:calc(100%min 30px);}
Het lijkt dus ook dat naast het teken erna, ook het teken ervoor (in dit geval de %) roet in het eten gooit.
Hopelijk heb ik het goed uitgelegd zo en kan iemand hier iets zinnigs over zeggen.
Misschien is het hele script nodig om goed te beoordelen..maar ik weet niet of ik die in het geheel hier kan plaatsen.
gr Tim
Want hiervoor zijn toch al genoeg online oplossingen te vinden.
"minify css" in google en je vindt bijvoorbeeld al
https://www.toptal.com/developers/cssminifier/
of
https://www.cleancss.com/css-minify/
Daar hebben vast mensen al tijden op zitten ontwikkelen en met de handleiding van CSS ernaast.
Dan heb je ook vast nog een hele rij oplossingen voor opties die in jouw testbestanden niet voorkwamen, maar in de praktijk wel mogelijk zijn.
En aangezien je dit normaal gesproken niet bij elke aanroep van je CSS file opnieuw laat bouwen, maar alleen als je een keer als developer een aanpassing hebt gedaan, kun je dit gewoon even copy-paste daardoorheen halen.
Toevoeging op 27/11/2021 16:24:37:
en anders nog https://www.minifier.org/
die heeft de source op github staan:
https://github.com/matthiasmullie/minify
In dit geval werd het bestand aangeroepen vanuit een CMS-systeem, waarbij ditzeflde bestand dan ook tegelijk de javascript minified.
Deze was voor CSS dus al wel volledig werkend, met als uitzondering de calc()
Dit heb ik (met behulp van een collega) uiteindelijk opgelost door uit te lezen op 'calc', daar een replace op en die dan weer als spatie laten outputten:
$input = preg_replace_callback('/(?<=calc\().*(?=\))/', "filter_css", $input);
Dit bleek een goede oplossing.
Dit topic is gesloten.