Share
Formatele stil cascadă reprezintă un limbaj de prezentare a stilului de prezentare. În acest sens, nu are o mulțime de funcționalitate pe care mulți dezvoltatori doresc să-i satisfacă instinctele programatorului. Astăzi, vom trece peste cum să suprasolicitați CSS-ul dvs. prin plasarea unor PHP sub capota.
Utilizarea CSS pentru pornirea unui site web este o necesitate pe site-ul web contemporan pentru site-urile non-Flash - și pentru un motiv întemeiat. CSS este puternic. Poate face sau rupe un site web (deși de obicei IE6 face ruperea). Chiar și cu utilitatea sa, designerii și dezvoltatorii au dorit, deopotrivă, să-și scoată mai mult de la limbă încă de la începuturile sale de peste douăsprezece ani în urmă cu Recomandarea CSS de nivel 1. Astăzi, vom revizui câteva modalități Supraîncărcați CSS-ul cu PHP sub capotă.
Notă: Nu voi argumenta pentru sau împotriva conceptului de constante CSS variabile și / sau CSS. Acest articol este scris cu presupunerea că veți lua o decizie în cunoștință de cauză cu privire la acestea odată prezentate cu ce poate face. Acest articol învață cum să le înființeze și să le folosească, dar nu abordează controversa în întregime.
Înainte de începerea supraîncărcării, trebuie să vă asigurați că aveți cerințele corespunzătoare pentru a face acest lucru. Vom trece peste două metode de a face CSS să lucreze cu PHP, unul care este scurt și dulce și unul care este puțin mai elegant și mai puțin vizibil pentru utilizator. Ambele au aceeași cerință de bază a unui server care rulează PHP. Versiunea mai elegantă necesită un pic mai mult:
Browserele web nu sunt exacte cu privire la extensiile de fișiere atunci când se ocupă de tag-ul HTML link. Ceea ce ei sunt preocupați despre datele antet primite pentru acel fișier. Ceea ce inseamna asta este ca puteti conecta un fisier * .php cu datele antetului corespunzatoare in locul unui fisier * .css si browserul va interpreta rezultatul la fel ca si standardul CSS. Pentru a face acest lucru, adăugați antetul PHP care îi spune lui Apache să emită fișierul ca CSS:
Apoi, doar legătura cu fișierul PHP ca tine în mod normal ar fi:
Acum că ați făcut acest lucru, puteți - în teorie - să treceți la următoarea secțiune a tutorialului care vizează variabilele și constantele CSS, dacă doriți; cu toate acestea, oricine vă vede sursa va vedea că aveți un fișier PHP unde ar trebui să fie un fișier CSS. În plus, doar pentru că browserul va interpreta rezultatul în mod corespunzător nu înseamnă că va face în mod necesar alte lucruri, cum ar fi salvarea fișierului în browser. Pentru a rezolva aceasta, trecem la versiunea puțin mai elegantă.
Apache vine cu un număr mare de trucuri .htaccess. Acesta este unul dintre ele. Vom spune Apache că va interpreta toate fișierele CSS într-un anumit dosar ca fișiere PHP, iar browserul web (și utilizatorii dvs.), în general, nu vor ști că faceți acest lucru. Primul lucru pe care trebuie să-l faceți este să plasați datele antetului în fișierul dvs. CSS, la fel ca metoda simplă:
Apoi, în loc să salvați fișierul CSS ca fișier * .php, salvați-l ca fișier * .css și plasați-l într-un dosar pentru CSS (în exemplul nostru, ~ / css /). Odată ce ați făcut acest lucru, creați un fișier * .htaccess în acel director și adăugați următoarele:
Aplicația AddHandler / x-httpd-php .css
Acest fragment spune Apache să interpreteze toate fișierele CSS din folderul cu fișierul * .htaccess cu un handler de script PHP. Dacă nu aveți capacitatea de a adăuga acest lucru într-un singur director sau dacă aveți nevoie ca acesta să fie la nivel de server, puteți adăuga acest lucru și la httpd.conf server pentru Apache. Pentru a face acest lucru, doriți să adăugați fragmentul anterior chiar sub grupul de AddType și AddHandler (cum ar fi cele de pe unul dintre serverele mele):
Aplicația AddType / x-httpd-php .php .php3 .php4 .php5 aplicația AddType / x-httpd-php-source .phps addHandler cgi-script .cgi.
Doar amintiți-vă că dacă adăugați acest lucru la dvs. httpd.conf server de configurare a fișierului FIECARE * .css fișier pe server acum trebuie să aibă antet PHP pentru text / css prepended la acesta. De aceea recomandarea mea este să o adăugați prin .htaccess
Din sondajul privind performanța medie a top 100 de bloguri:
Am testat cele mai bune 100 de bloguri pentru fișiere CSS externe și dimensiune totală. Blogul mediu de top 100 folosește 4 fișiere CSS externe (inclusiv @importuri incluse) cu o dimensiune medie totală de 43,1K (necomprimată). Numărul de fișiere CSS externe a variat de la 1 la 18. Dimensiunea totală a CSS a variat de la 0.2K la 307K. Rețineți că această analiză nu include CSS intern în fișierele HTML (X). Acesta include fișiere CSS imbricate numite cu directivele @import.
Aceasta este o mulțime de CSS. De ce asta? De multe ori este pentru că CSS este livrat necomprimat și nu este optimizat. Probabil cel mai probabil este că CSS se umflă și codul se menține prost. O opțiune populară de îmbunătățire a mentenabilității codului este implementarea variabilelor CSS prin PHP.
Ceea ce inseamna asta este ca in loc sa ai asa CSS (da, acest lucru ar produce o aberatie de design, dar este bun la ilustrarea punctului):
corp culoare: # 000; fundal: #fff; font-size: 10px; div # conținut background: #ccc; font-size: 1.1; div # bara laterală culoare: #fff; fundal: # 000; font-size: 1.0; div # footer culoare: # 555; fundal: #ccc;
Ați putea avea CSS astfel:
corp culoare: ; fundal: ; marimea fontului: px; div # conținut fundal: ; marimea fontului: px; div # bara laterală culoare: ; fundal: ; marimea fontului: px; div # footer culoare: ; fundal: ;
Rețineți că numele variabilei lungi sunt doar pentru ilustrare. Evident, aceste variabile pot fi atâta timp cât sau cât de scurte doriți, iar variabilele mai scurte fac ca dimensiunile fișierelor să fie mai mici.
În exemplul de mai sus, am utilizat variabile de bază pentru a configura o schemă de culori monocrom, care ar putea fi apoi utilizată pe tot site-ul în alte stiluri. Aceste variabile ar putea fi ușor schimbate cu $ color01, $ color02, $ color03, etc pentru a produce efecte similare. Adesea, designerii și dezvoltatorii web de la front-end sunt întrebați de clienți "Hei, puteți face tot textul un pic mai întunecat?" sau "Puteți face tot textul doar puțin mai mare?" În timp ce folosiți astfel de variabile nu va fi întotdeauna cea mai bună soluție, adesea s-ar reduce timpul de întreținere atunci când se utilizează multe sisteme de template-uri și platforme de blogging (WordPress, Moveable Type, Expression Engine etc.) sau corporate CMSes (Drupal, Joomla, Bitrix etc. ).
O metodă alternativă de stocare a variabilelor este de a stoca datele în matricele asociate (care este metoda mea preferată), care produce coduri mai asemănătoare cu cele de mai jos:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> corp culoare: ; fundal: ; marimea fontului: px; div # conținut fundal: ; marimea fontului: px; div # bara laterală culoare: ; fundal: ; marimea fontului: px; div # footer culoare: ; fundal: ;
Odată ce ați stabilit lucrurile pentru utilizarea PHP cu CSS-ul dvs., puteți face apoi câteva lucruri cum ar fi calcule. Să presupunem că doriți să configurați un sistem în cadrul dvs. să oferiți o mulțime de DIV pe ecran, fiecare cu un alt tip de element în interiorul. Fiecare tip de element (adică img, p, blockquote, etc) are o înălțime și o lățime unică controlate prin CSS și doriți ca valoarea marjei să se bazeze pe aceste valori:
În acest scenariu, doriți să configurați o rețea standardizată care conține trei tipuri diferite de elemente (img, p și blockquote) încapsulate în două containere diferite (div și li). Fiecare DIV trebuie să aibă o lățime de 550 de pixeli și o înălțime de 250 de pixeli, fiecare LI trebuie să aibă o lățime de 600 de pixeli și o înălțime de 300 de pixeli, iar fiecare dintre elementele are o înălțime și o lățime diferite. Poziționarea elementelor pe interior trebuie să fie un centru mort. În timp, înălțimile și lățimile diferitelor DIV / LI și elemente vor trebui probabil schimbate. Aveți posibilitatea să introduceți manual suma marjelor pentru fiecare dintre elementele diferite și / sau să folosiți informații extra de clasă pe DIV pentru containere pentru a adăuga cantitatea corespunzătoare de umplutură, dar acest lucru nu este util pentru schimbări rapide, cum ar fi cele dorite de cineva care este prototip în browser sau care are 200 dintre aceste elemente diferite pentru care ar trebui să modifice datele.
În primul rând, am creat conținutul XHTML pe care îl vom schimba astfel:
Lorem ipsum dolor sta amet tellus.
Etiam quis nulla pretium et.
Lorem ipsum dolor sta amet tellus.
Etiam quis nulla pretium et.
Apoi, am creat fișierul PHP / CSS pe care îl vom folosi pentru a modela XHTML-ul. Aici decidem dimensiunile standard ale diferitelor elemente pentru utilizare pe întreaga pagină.
Accentsconagua
'550', 'înălțime' => '250',); $ liData = array ('lățime' => '600', 'înălțime' => '300',); $ blockquoteData = array ('lățime' => '440', 'înălțime' => '100'); $ imgData = array ('lățime' => '450', 'înălțime' => '150'); $ pData = array ('lățime' => '480', 'înălțime' => '130'); ?> Apoi, vom continua fișierul PHP de la Pasul 2 și vom folosi variabilele pe care le-am stabilit în calcule. În plus, am setat valorile calculate MarginX și MarginY ale diferitelor elemente pentru a reduce numărul de calcule necesare.
div width: px; înălţime: px; li width: px; înălţime: px; div blockquote width: px; înălţime: px; Marja: px px; div img width: px; înălţime: px; Marja: px px; div p lățime: px; înălţime: px; Marja: px px; li blocquote width: px; înălţime: px; Marja: px px; li img width: px; înălţime: px; Marja: px px; li p lățime: px; înălţime: px; Marja: px px;
Ceea ce ne permite să facem acum este să modificăm mărimea elementelor o dată în partea de sus a fișierului și să nu recalculează 12 valori de margine (24 dacă valorile marjelor erau asimetrice). Înțelegeți că nu sugerez că acest lucru va fi folosit în fiecare dintre proiectele dvs. înainte, dar acest tip de tehnică are avantaje clare față de metoda standard "statică" CSS.
După cum am menționat mai devreme, CSS poate deveni destul de mare. Un lucru pe care îl puteți face pentru a reduce dimensiunea CSS este să vă gzipați automat fișierele CSS. Pentru a face acest lucru, aveți două opțiuni pentru a face acest lucru: direct de la Apache folosind mod_gzip / mod_deflate sau utilizați metodele de compresie încorporate în PHP, pe care le vom face aici.
În interiorul fișierului nostru CSS, avem deja un fragment PHP care stabilește antetul:
Tot ceea ce trebuie să facem acum este să adăugăm o singură linie de cod care stabilește un tampon de ieșire pentru a folosi ob_gzhandler înainte de declarația de antet ca aceasta:
Trebuie remarcat că există și alte modalități de a face compresia gzip și că toate au avantaje și neajunsuri. Metoda mea preferată este folosirea mod_deflate așa cum am menționat mai devreme, dar nu toți designerii și dezvoltatorii au această opțiune.
Adăugarea logicii de programare la o limbă a foii de stil nu este nimic nou. Multe site-uri web determină ce foi de stil utilizează pe baza adresei URL, a stării de conectare sau chiar a datei. Iată un exemplu simplu care poate fi aplicat cu ușurință blogurilor și site-urilor de comerț electronic (printre altele). Să presupunem că aveți o etichetă h1 care este înlocuită utilizând metoda de înlocuire a imaginii Phark descrisă de următorul CSS:
h1 lățime: 300px; înălțime: 80px; text-indent: -9999px; fundal: url (imagini / logo.png) no-repeat;
Prin adăugarea unui mic PHP în mix pentru a determina data la care este încărcat CSS, puteți specifica o imagine diferită pentru o vacanță pe care Google o face adesea cu ajutorul Google Doodles (deși utilizează o altă soluție tehnologică pentru a face acest lucru):
h1 lățime: 300px; înălțime: 80px; text-indent: -9999px; background: url () nu-repeta;
Acesta este doar un exemplu foarte simplu. CSS-ul dvs. așteaptă doar să fie amputat de PHP. Ce faceți cu el poate varia de la o persoană la alta. Una dintre utilizările mele personale este să o folosesc ca o modalitate de a observa și de a încorpora fișierele @ font-face utilizând fișierele URI de date și verificarea refererului care solicită fișierul similar cu părțile tehnologiei pe care Typekit le folosește:
@ Font-face font-family: FontName; src: local ("FontName"), url () format ("opentype"); Utilizarea variabilelor în CSS, indiferent de argumentele pro și contra, a fost o problemă controversată de ani de zile. Asa cum am spus la inceputul acestui articol, nu voi argumenta pentru sau impotriva conceptului de variabile CSS sau de constante CSS. Unii designeri și dezvoltatori foarte respectați s-au opus, în timp ce alții au susținut acest lucru. Sper că, pentru o pagină mai bună, o soluție eficientă pentru CSS se va întâmpla mai devreme decât mai târziu. Între timp, aceia dintre noi care susțin variabilele și constantele CSS se pot baza pe limbile noastre de server, în timp ce aceia care nu le suportă vor continua pur și simplu la fel.
Sunt mereu în căutarea unor metode noi și inovatoare de supraîncărcare a CSS-ului cu PHP. Care sunt câteva dintre scenariile preferate de utilizare a cazului pentru amestecarea CSS cu PHP?
