Share
Cascading Style Sheets är ett presentationsblad av stilark. I den meningen har den inte mycket av funktionaliteten som många utvecklare vill tillfredsställa sina programmerarinstinkter. Idag ska vi gå över hur du laddar upp din CSS genom att lägga lite PHP under huven.
Att använda CSS för att driva upp en webbplats är en nödvändig i den moderna webben för icke-Flash-webbplatser - och med goda skäl. CSS är kraftfull. Det kan göra eller bryta en webbplats (även om vanligtvis brukar IE6 bryta). Även med sin användbarhet har både designers och utvecklare önskat mer av språket sedan starten för över tolv år sedan med CSS Level 1 Recommendation. Idag ska vi granska några sätt att Supercharge din CSS med PHP under huven.
Obs! Jag kommer inte att argumentera för eller mot konceptet CSS Variable och / eller CSS Constants. Den här artikeln är skrivet med antagandet att du kommer att fatta ett välgrundat beslut om dessa en gång presenteras med vad den kan göra. Den här artikeln beskriver hur man ställer upp och använder dem, men tar inte upp kontroversen i sin helhet.
Innan överladdning börjar måste vi se till att du har rätt krav för att göra det. Vi ska gå över två metoder för att göra ditt CSS-arbete med PHP, en som är kort och söt, och en som är lite mer elegant och mindre märkbar för användaren. Båda dessa har samma grundläggande krav på en server som kör PHP. Den mer eleganta versionen kräver lite mer:
Webbläsare är inte så krävande om filtillägg när de hanterar HTML-länktaggen. Vad de är picky om är header data som den tar emot för den filen. Vad det betyder är att du kan länka en * .php-fil med rätt rubrikdata i stället för en * .css-fil, och webbläsaren tolkar resultatet precis som standard CSS. För att göra det, lägg till PHP-rubriken som berättar Apache att utmata filen som CSS:
Sedan länkar du bara till PHP-filen som du normalt skulle:
Nu när du har gjort det kan du - i teorin - gå vidare till nästa avsnitt i handledningen som handlar om CSS-variabler och konstanter, om du vill, Men alla som tittar på din källa kommer att se att du har en PHP-fil där en CSS-fil ska vara. Dessutom, bara för att webbläsaren tolkar resultatet korrekt betyder det inte att det nödvändigtvis kommer att göra andra saker som att cacha filen i webbläsaren. För att åtgärda detta fortsätter vi vidare till den något mer eleganta versionen.
Apache kommer med ett stort antal .htaccess-tricks. Detta är en av dem. Vi ska berätta för Apache att tolka alla CSS-filer i en viss mapp som PHP-filer, och webbläsaren (och dina användare) kommer i allmänhet inte veta att du gör det. Första sak att göra är att sätta huvudinformationen i din CSS-fil, precis som den enkla metoden:
I stället för att spara CSS-filen som en * .php-fil, sparar du den som en * .css-fil, och du placerar den i en mapp för CSS (i vårt exempel, ~ / css /). När du har gjort det här skapar du en * .htaccess-fil i den mappen och lägger till följande:
AddHandler-applikation / x-httpd-php .css
Det här avsnittet berättar Apache att tolka alla CSS-filer i mappen med * .htaccess-filen med PHP-skripthanteraren. Om du inte har möjlighet att lägga till den i en enda mapp, eller om du behöver det här för att vara servertäckande, kan du också lägga till det här httpd.conf serverns konfigurationsfil för Apache. För att göra det vill du lägga till det föregående utgåvan strax under gruppen av AddType och AddHandler deklarationer (som dessa från en av mina servrar):
AddType-applikation / x-httpd-php .php .php3 .php4 .php5 AddType-applikation / x-httpd-php-källa .phps AddHandler cgi-script .cgi .pl
Kom bara ihåg att om du lägger till detta till din httpd.conf serverns konfigurationsfil som VARJE * .css-fil på servern måste nu ha PHP-rubriken för text / css prepended till den. Det är därför min rekommendation är att lägga till den via .htaccess
Från den genomsnittliga topp 100 Weblog Prestationsundersökningen:
Vi körde ett test på de 100 bästa bloggarna för externa CSS-filer och total storlek. Den genomsnittliga topp 100 bloggen använder 4 externa CSS-filer (@imports included) med en genomsnittlig total filstorlek på 43,1K (okomprimerad). Antalet externa CSS-filer varierade från 1 till 18. Den totala storleken på CSS varierade från 0,2K till en jättestor 307K. Observera att denna analys inte innehåller intern CSS inom (X) HTML-filer. Det inkluderar nestade CSS-filer som heter @import-direktiv.
Det är mycket CSS. Varför är detta? Många gånger beror det på att CSS levereras okomprimerad och inte optimerad. Den mer troliga misstänkt är CSS bloat och dåligt underhållen kod. Ett populärt alternativ att förbättra kodunderhåll är att implementera CSS-variabler via PHP.
Vad det här betyder är att istället för att ha CSS så här (ja, det skulle ge en avvikelse i designen, men det är bra att illustrera punkten):
kropp färg: # 000; bakgrund: #fff; typsnittstorlek: 10px; div # innehåll bakgrund: #ccc; typsnittstorlek: 1.1em; div # sidebar färg: #fff; bakgrund: # 000; typsnittstorlek: 1,0em; div # footer color: # 555; bakgrund: #ccc;
Du kan ha CSS så här:
kropp färg: ; bakgrund: ; textstorlek: px; div # innehåll bakgrund: ; textstorlek: px; div # sidebar färg: ; bakgrund: ; textstorlek: px; div # footer färg: ; bakgrund: ;
Observera att de långa variabla namnen endast är illustrerande. Självklart kan dessa variabler vara så långa eller så korta som du vill, och kortare variabler gör mindre filstorlekar.
I exemplet ovan har vi använt grundläggande variabler för att skapa ett monokromt färgschema som sedan kan användas över hela webbplatsen i andra stilar. Dessa variabler kunde lätt ha byts ut med $ color01, $ color02, $ color03, etc för att producera liknande effekter. Ofta blir designers och front-end webbutvecklare frågade av kunder "Hej, kan du göra hela texten lite mörkare?" eller "Kan du göra hela texten bara lite större?" Medan du använder variabler som detta inte alltid kommer att vara den bästa lösningen, skulle det ofta minska underhållstiden när du använder många templeringssystem och bloggplattformar (WordPress, Moveable Type, Expression Engine, etc.) eller företags CMS (Drupal, Joomla, Bitrix etc ).
En alternativ metod för lagring av variablerna är att lagra data i associerade arrayer (vilket är min föredragna metod), vilket ger kod mer som följande:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> kropp färg: ; bakgrund: ; textstorlek: px; div # innehåll bakgrund: ; textstorlek: px; div # sidebar färg: ; bakgrund: ; textstorlek: px; div # footer färg: ; bakgrund: ;
När du har ställt upp saker för att använda PHP med din CSS, kan du göra några snygga saker som beräkningar. Låt oss anta att du vill konfigurera ett system när du tillhandahåller en massa DIV-enheter på skärmen, var och en med en annan typ av element inuti. Varje elementstyp (dvs img, p, blockquote etc) har en unik höjd och bredd som styrs via CSS, och du vill att mängden marginal ska baseras på dessa värden är som sådan:
I det här scenariot vill du skapa ett standardiserat rutnät som innehåller tre olika typer av element (img, p och blockquote) inkapslade i två olika behållare (div och li). Varje DIV måste vara 550px bred och 250px lång, varje LI måste vara 600px bred och 300px lång, och var och en av elementtyperna har en annan höjd och bredd. Placeringen av elementen på insidan måste vara dödscentrum. Över tiden kommer höjderna och bredderna för de olika DIV / LIs och elementen sannolikt att ändras. Du kan manuellt ange mängden marginal för varje av de olika elementen och / eller använda extra klassinformation på behållarens DIV för att lägga till lämplig mängd vaddering, men det är inte så användbart för snabba förändringar, som de som önskas av någon som är prototyper i webbläsaren eller som har 200 av dessa olika element för vilka de skulle behöva ändra data.
Först ställer vi upp XHTML-innehållet som vi ska utforma så här:
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
Därefter inrättade vi PHP / CSS-filen som vi ska använda för att utforma XHTML. Det här är där vi förklarar standardstorlekarna för de olika elementen för användning på hela sidan.
Accentsconagua
'550', 'height' => '250',); $ liData = array ('width' => '600', 'height' => '300',); $ blockquoteData = array ('width' => '440', 'height' => '100'); $ imgData = array ('width' => '450', 'height' => '150'); $ pData = array ('width' => '480', 'height' => '130'); ?> Därefter fortsätter vi PHP-filen från steg 2 och använder de variabler som vi satt i beräkningar. Dessutom ställer vi de beräknade MarginX- och MarginY-värdena för de olika elementen för att minska antalet beräkningar som är nödvändiga.
div width: px; höjd: px; li bredd: px; höjd: px; div blockquote width: px; höjd: px; marginal: px px; div img width: px; höjd: px; marginal: px px; div p bredd: px; höjd: px; marginal: px px; li blockquote width: px; höjd: px; marginal: px px; li img width: px; höjd: px; marginal: px px; li p bredd: px; höjd: px; marginal: px px;
Vad det här gör att vi kan göra nu är att ändra storleken på element en gång högst upp i filen och inte räkna om 12 marginalvärden (24 om marginalvärdena var asymmetriska). Förstå att jag inte föreslår att detta kommer att användas i alla dina projekt framåt, men denna typ av teknik har bestämda fördelar jämfört med den vanliga "statiska" CSS-metoden.
Som tidigare nämnts kan CSS bli ganska stor. En sak som du kan göra för att minska CSS-storleken är att automatiskt gzipping dina CSS-filer. För att göra detta har du två alternativ på hur du gör det: direkt från Apache med mod_gzip / mod_deflate eller använd PHPs inbyggda komprimeringsmetoder, vilket vi gör här.
Inne i vår CSS-fil har vi redan ett utdrag av PHP som sätter upp rubriken:
Allt vi behöver göra nu är att lägga till en enda kodkod som ställer in en utmatningsbuffert för att använda ob_gzhandler innan huvuddeklarationen så här:
Det bör noteras att det finns andra sätt att göra gzip-kompression och de har alla sina fördelar och brister. Min föredragna metod använder mod_deflate som nämnts tidigare, men inte alla designers och utvecklare har det alternativet.
Lägga till programmeringslogik till ett stilarksspråk är inget nytt. Många webbplatser bestämmer vilka stylesheets de använder baserat på URL, inloggningsstatus eller till och med datumet. Här är ett enkelt exempel som kan tillämpas enkelt på bloggar och e-handelswebbplatser (bland annat). Låt oss anta att du har en h1-tagg som ersätts med Phark-bildbytesmetoden som beskrivs av följande CSS:
h1 bredd: 300px; höjd: 80px; textindelning: -9999px; bakgrund: url (images / logo.png) no-repeat;
Genom att lägga till lite PHP i mixen för att bestämma datumet när CSS laddas, kan du sedan ange en annan bild för en semester som Google ofta gör med sina Google Doodles (även om de använder en annan teknologisk lösning för att göra det):
h1 bredd: 300px; höjd: 80px; textindelning: -9999px; bakgrund: url () ingen upprepning;
Detta är bara ett super enkelt exempel. Din CSS väntar bara på att bli amped upp av PHP. Vad du gör med det kan variera från person till person. Ett av mina personliga användningsområden är att använda den som ett sätt att dölja och inbädda @ font-face-filer med data URI-strängar och kontrollera referenten som begär filen liknande de delar av tekniken som Typekit använder:
@ font-face font-family: FontName; src: local ("fontName"), url () format ("opentype"); Använda variabler i CSS, oavsett för och nackdelar har varit en kontroversiell fråga i flera år. Som jag sa i början av den här artikeln kommer jag inte att argumentera för eller emot begreppet CSS-variabler eller CSS-konstanter. Några mycket respekterade formgivare och utvecklare har argumenterat mot det, medan andra har argumenterat för det. Jag hoppas, för en bättre webs skull, att en effektiv CSS-bara lösning händer tidigare än senare. Under tiden kan de av oss som stöder CSS-variabler och konstanter förlita sig på våra språk på serversidan, medan de som inte stöder dem helt enkelt fortsätter som vanligt.
Jag är alltid på utkik efter nya och innovativa sätt att överbelasta min CSS med PHP. Vad är några av dina favoritfallsscenarier för att blanda CSS med PHP?
