Share
Cascading Style Sheets er et presentasjonsmodell for stilark. I den forstand har den ikke mye av funksjonaliteten som mange utviklere ønsker å tilfredsstille sine programmeringsinstinkter. I dag skal vi gå over hvordan du kan overbelaste CSS ved å sette noen PHP under hetten.
Å bruke CSS til å koble opp et nettsted er en nødvendig i dagens web for ikke-Flash-nettsteder - og med god grunn. CSS er kraftig. Det kan gjøre eller ødelegge et nettsted (selv om vanligvis IE6 gjør det). Selv med sin nytte har både designere og utviklere ønsket å ha mer ut av språket siden starten for over tolv år siden med CSS Nivå 1-anbefaling. I dag skal vi vurdere noen måter å Overbelast ditt CSS med PHP under hetten.
Merk: Jeg skal ikke argumentere for eller mot konseptet CSS Variable og / eller CSS Constants. Denne artikkelen er skrevet med forutsetningen om at du vil ta en informert beslutning om disse en gang presenteres med hva den kan gjøre. Denne artikkelen lærer hvordan du konfigurerer dem og bruker dem, men adresserer ikke kontroversen i sin helhet.
Før overladingen starter, må vi sørge for at du har de riktige kravene for å gjøre det. Vi skal gå over to metoder for å gjøre CSS arbeidet med PHP, en som er kort og søt, og en som er litt mer elegant og mindre merkbar for brukeren. Begge disse har samme grunnleggende krav til en server som kjører PHP. Den mer elegante versjonen krever litt mer:
Nettlesere er ikke så kresne om filutvidelser når de håndterer HTML-koblingsmerket. Hva de er kresne om, er toppdataene den mottar for den filen. Hva det betyr er at du kan koble en * .php-fil med de riktige header-dataene i stedet for en * .css-fil, og nettleseren vil tolke resultatet akkurat som standard CSS. For å gjøre det, legg til PHP-overskriften som forteller Apache å sende filen som CSS:
Så bare lenke til PHP-filen som du normalt ville:
Nå som du har gjort dette, kan du - i teorien - hoppe over til neste del av opplæringen som omhandler CSS-variabler og konstanter, hvis du vil; Men alle som ser på kilden din, kommer til å se at du har en PHP-fil der en CSS-fil skal være. I tillegg, bare fordi nettleseren vil tolke resultatet riktig, betyr det ikke at det nødvendigvis vil gjøre andre ting som å cache filen i nettleseren. For å fikse dette, går vi videre til den litt mer elegante versjonen.
Apache kommer med et stort antall .htaccess-triks. Dette er en av dem. Vi skal fortelle Apache å tolke alle CSS-filer i en bestemt mappe som PHP-filer, og nettleseren (og brukerne) vil generelt ikke vite at du gjør det. Første ting å gjøre er å sette toppdataene i CSS-filen din, akkurat som den enkle metoden:
I stedet for å lagre CSS-filen som en * .php-fil, lagrer du den som en * .css-fil, og du plasserer den i en mappe for CSS (i vårt eksempel, ~ / css /). Når du har gjort dette, opprett en * .htaccess-fil i den mappen og legg til følgende:
AddHandler-applikasjon / x-httpd-php .css
Denne teksten forteller Apache å tolke alle CSS-filer i mappen med * .htaccess-filen med PHP-scriptbehandleren. Hvis du ikke har muligheten til å legge til denne i en enkelt mappe, eller hvis du trenger dette for å være serveromfattende, kan du også legge til dette i httpd.conf server konfigurasjonsfil for Apache. For å gjøre det, vil du legge til forrige snippe rett under gruppen av AddType og AddHandler erklæringer (som disse fra en av mine servere):
AddType-applikasjon / x-httpd-php .php .php3 .php4 .php5 AddType-applikasjon / x-httpd-php-kilde .phps AddHandler cgi-script .cgi .pl
Bare husk at hvis du legger til dette i din httpd.conf server konfigurasjonsfil som HVER * .css fil på serveren nå må ha PHP header for tekst / css prepended til den. Dette er grunnen til at min anbefaling er å legge den til via .htaccess
Fra gjennomsnittlig topp 100 Weblog Performance Survey:
Vi kjørte en test på de 100 beste bloggene for eksterne CSS-filer og total størrelse. Den gjennomsnittlige topp 100 bloggen bruker 4 eksterne CSS-filer (@imports included) med en gjennomsnittlig total filstørrelse på 43,1K (ukomprimert). Antallet eksterne CSS-filer varierte fra 1 til 18. Den totale størrelsen på CSS varierte fra til 0,2K til en fullstendig 307K. Vær oppmerksom på at denne analysen ikke inkluderer intern CSS i (X) HTML-filer. Det inkluderer nestede CSS-filer kalt med @import-direktiver.
Det er mye CSS. Hvorfor er det sånn? Mange ganger er det fordi CSS blir levert ukomprimert og ikke optimalisert. Den mer sannsynlige mistenkte er CSS oppblåst og dårlig vedlikeholdt kode. Et populært alternativ for å forbedre kodeunderholdbarhet er å implementere CSS-variabler gjennom PHP.
Hva dette betyr er at i stedet for å ha CSS som dette (ja, dette ville produsere en aberrasjon av design, men det er godt å illustrere poenget):
kropp farge: # 000; bakgrunn: #fff; skriftstørrelse: 10px; div # innhold bakgrunn: #ccc; skriftstørrelse: 1.1em; div # sidebar color: #fff; bakgrunn: # 000; fontstørrelse: 1.0em; div # footer color: # 555; bakgrunn: #ccc;
Du kan ha CSS slik:
kropp farge: ; bakgrunn: ; skriftstørrelse: px; div # innhold bakgrunn: ; skriftstørrelse: px; div # sidebar color: ; bakgrunn: ; skriftstørrelse: px; div # footer color: ; bakgrunn: ;
Merk at de lange variabelenavnene kun er til illustrasjonsformål. Selvfølgelig kan disse variablene være så lenge eller så korte som du vil, og kortere variabler gir mindre filstørrelser.
I eksemplet ovenfor har vi brukt grunnleggende variabler for å sette opp et svart-hvitt fargeskjema som deretter kan brukes over hele nettstedet i andre stiler. Disse variablene kunne enkelt blitt byttet med $ color01, $ color02, $ color03, etc for å produsere lignende effekter. Ofte blir designere og front-end webutviklere spurt av klienter. "Hei, kan du gjøre teksten litt mørkere?" eller "Kan du gjøre hele teksten bare litt større?" Når du bruker variabler som dette, vil det ikke alltid være den beste løsningen, det vil ofte redusere vedlikeholdstiden når du bruker mange templeringssystemer og bloggingplattformer (WordPress, Moveable Type, Expression Engine, osv.) Eller bedriftens CMSer (Drupal, Joomla, Bitrix, etc ).
En alternativ metode for lagring av variablene er å lagre dataene i tilknyttede arrays (som er min foretrukne metode), som produserer kode mer som følgende:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> body color: ; bakgrunn: ; skriftstørrelse: px; div # innhold bakgrunn: ; skriftstørrelse: px; div # sidebar color: ; bakgrunn: ; skriftstørrelse: px; div # footer color: ; bakgrunn: ;
Når du har satt opp ting for å bruke PHP med CSS, kan du gjøre noen fine ting som beregninger. La oss anta at du vil sette opp et system når du lager en masse DIVer på skjermen, hver med en annen type element inni. Hver elementtype (dvs. img, p, blockquote osv.) Har en unik høyde og bredde styrt via CSS, og du vil at verdien av marginen skal baseres på disse verdiene, slik som:
I dette scenariet vil du sette opp et standardisert rutenett som inneholder tre forskjellige typer elementer (img, p og blockquote) innkapslet i to forskjellige beholdere (div og li). Hver DIV må være 550px bred og 250px høy, hver LI må være 600px bred og 300px høy, og hver av elementene har en annen høyde og bredde. Plasseringen av elementene på innsiden må være døds sentrum. Over tid vil høydene og breddene til de forskjellige DIVs / LIs og elementene sannsynligvis måtte endres. Du kan manuell angi marginen for hver av de forskjellige elementene og / eller bruke ekstra klasseinformasjon på containerens DIV for å legge til riktig mengde polstring, men dette er ikke så nyttig for raske endringer, som de som ønsker av noen som er prototyping i nettleseren eller som har 200 av disse forskjellige elementene som de måtte endre data på.
Først setter vi opp XHTML-innholdet som vi skal stile slik:
Kjæresten din er veldig snill.
Etiam quis nulla pretium et.
Kjæresten din er veldig snill.
Etiam quis nulla pretium et.
Deretter setter vi opp PHP / CSS-filen som vi skal bruke til å utforme XHTML. Dette er hvor vi erklærer standardstørrelsene til de forskjellige elementene for bruk over hele siden.
Accentsconagua
'550', 'høyde' => '250',); $ liData = array ('width' => '600', 'høyde' => '300',); $ blockquoteData = array ('width' => '440', 'height' => '100'); $ imgData = array ('width' => '450', 'høyde' => '150'); $ pData = array ('width' => '480', 'høyde' => '130'); ?> Deretter fortsetter vi PHP-filen fra Trinn 2 og bruker variablene vi satt i beregninger. I tillegg fastsetter vi de beregnede MarginX- og MarginY-verdiene for de forskjellige elementene for å redusere antallet beregninger som er nødvendige.
div width: px; høyde: px; li bredde: px; høyde: px; div blockquote width: px; høyde: px; margin: px px; div img width: px; høyde: px; margin: px px; div p bredde: px; høyde: px; margin: px px; li blockquote width: px; høyde: px; margin: px px; li img width: px; høyde: px; margin: px px; li p bredde: px; høyde: px; margin: px px;
Hva dette gjør at vi kan gjøre nå, er å endre størrelsen på elementene en gang på toppen av filen og ikke omberegne 12 marginverdier (24 hvis marginalverdiene var asymmetriske). Forstå at jeg ikke foreslår at dette vil bli brukt i alle dine prosjekter fremover, men denne typen teknikk har bestemte fordeler i forhold til standard "statisk" CSS-metoden.
Som nevnt tidligere, kan CSS bli ganske stor. En ting du kan gjøre for å redusere CSS-størrelsen, er å automatisk gzipping CSS-filene dine. For å gjøre dette har du to alternativer på hvordan du gjør det: rett fra Apache ved hjelp mod_gzip / mod_deflate eller bruk PHPs innebygde komprimeringsmetoder, som vi gjør her.
Inne i vår CSS-fil, har vi allerede en utdrag av PHP som setter opp overskriften:
Alt vi trenger å gjøre nå, er å legge til en enkelt linje med kode som angir en utgangsbuffer for å bruke ob_gzhandler før overskriftsdeklarasjonen slik:
Det bør bemerkes at det finnes andre måter å gjøre gzip komprimering på, og de har alle sine fordeler og mangler. Min foretrukne metode bruker mod_deflate som nevnt tidligere, men ikke alle designere og utviklere har det alternativet.
Å legge programmeringslogikk til et stilarksspråk er ikke noe nytt. Mange nettsteder bestemmer hvilke stilark de bruker basert på URL, påloggingsstatus eller til og med datoen. Her er et enkelt eksempel som kan brukes enkelt på blogger og e-handelsnettsteder (blant annet). La oss anta at du har et h1-tag som erstattes med Phark-bildet utskiftingsmetoden beskrevet av følgende CSS:
h1 bredde: 300px; høyde: 80px; tekstindeks: -9999px; bakgrunn: url (images / logo.png) no-repeat;
Ved å legge til et lite PHP i miksen for å bestemme datoen da CSS er lastet, kan du da angi et annet bilde for en ferie som Google ofte gjør med sine Google Doodles (selv om de bruker en annen teknologiløsning for å gjøre det):
h1 bredde: 300px; høyde: 80px; tekstindeks: -9999px; bakgrunn: url () ingen gjentakelse;
Dette er bare et super enkelt eksempel. Din CSS venter bare på å bli forsterket av PHP. Det du gjør med det, kan variere fra person til person. En av mine personlige bruksområder er å bruke den som en måte å skjule og innebygge @ font-face-filer ved hjelp av data URI-strenger og sjekke henviseren som ber om filen som ligner deler av teknologien som Typekit bruker:
@ font-face font-family: FontName; src: local ("fontName"), url () format ("opentype"); Bruke variabler i CSS, uansett fordeler og ulemper har vært et kontroversielt problem i mange år. Som jeg sa i begynnelsen av denne artikkelen, skal jeg ikke argumentere for eller imot konseptet CSS Variables eller CSS Constants. Noen svært respekterte designere og utviklere har argumentert for det, mens andre har argumentert for det. Jeg håper, for en bedre netts skyld, at en effektiv CSS-only-løsning skjer raskere enn senere. I mellomtiden kan de av oss som støtter CSS-variabler og konstanter stole på våre server-side-språk, mens de som ikke støtter dem, vil fortsette som vanlig.
Jeg er alltid på utkikk etter nye og innovative måter å overbelaste CSS med PHP. Hva er noen av dine favorittbruksscenarier for å blande CSS med PHP?
