Share
Cascading Style Sheets è un linguaggio di presentazione in stile. In questo senso, non ha molte funzionalità che molti sviluppatori vogliono soddisfare i loro istinti programmatori. Oggi esamineremo come potenziare il tuo CSS mettendo un po 'di PHP sotto il cofano.
Usare i CSS per potenziare un sito Web è un requisito nel web contemporaneo per i siti Web non Flash, e per una buona ragione. Il CSS è potente Può creare o distruggere un sito Web (sebbene in genere IE6 stia facendo la rottura). Anche con la sua utilità, i designer e gli sviluppatori hanno sperato di avere di più dalla lingua sin dal suo inizio più di dodici anni fa con la Raccomandazione CSS Livello 1. Oggi esamineremo alcuni modi per Supercharge il tuo CSS con PHP Under The Hood.
Nota: non ho intenzione di discutere a favore o contro il concetto di variabile CSS e / o costanti CSS. Questo articolo è stato scritto con l'assunto che prenderà una decisione informata riguardo a questi una volta presentati con quello che può fare. Questo articolo spiega come impostarli e usarli, ma non affronta la controversia per intero.
Prima che inizi la sovralimentazione, dobbiamo assicurarci di avere i requisiti appropriati per farlo. Stiamo andando oltre due metodi per far funzionare il tuo CSS con PHP, uno che sia breve e dolce, e che sia un po 'più elegante e meno evidente per l'utente. Entrambi hanno lo stesso requisito di base di un server che esegue PHP. La versione più elegante richiede un po 'di più:
I browser Web non sono così schizzinosi sulle estensioni dei file quando si tratta del tag link HTML. Ciò di cui sono pignoli sono i dati di intestazione che riceve per quel file. Ciò significa che puoi collegare un file * .php con i dati di intestazione appropriati al posto di un file * .css, e il browser interpreterà il risultato proprio come il CSS standard. Per fare ciò, aggiungi l'intestazione PHP che indica ad Apache di emettere il file come CSS:
Quindi, collega semplicemente al file PHP come faresti normalmente:
Ora che hai fatto questo, puoi - in teoria - saltare alla prossima sezione del tutorial che tratta di variabili e costanti CSS, se vuoi; tuttavia, chiunque veda la tua fonte vedrà che hai un file PHP dove dovrebbe essere un file CSS. Inoltre, solo perché il browser interpreterà correttamente il risultato non significa che farà necessariamente altre cose, come la memorizzazione nella cache del file nel browser. Per risolvere questo problema, passiamo alla versione leggermente più elegante.
Apache viene fornito con un gran numero di trucchi .htaccess. Questo è uno di loro. Spiegheremo ad Apache di interpretare tutti i file CSS in una determinata cartella come file PHP, e il browser web (e i tuoi utenti), in generale, non sapranno che lo stai facendo. La prima cosa da fare è inserire i dati dell'intestazione nel file CSS, proprio come il metodo semplice:
Quindi, invece di salvare il file CSS come file * .php, lo salvi come un file * .css e lo metti in una cartella per CSS (nel nostro esempio ~ / css /). Una volta fatto questo, crea un file * .htaccess in quella cartella e aggiungi quanto segue:
Applicazione AddHandler / x-httpd-php .css
Questo frammento di codice indica ad Apache di interpretare tutti i file CSS nella cartella con il file * .htaccess con il gestore di script PHP. Se non si ha la possibilità di aggiungerlo a una singola cartella o se è necessario che questo sia esteso a tutto il server, è anche possibile aggiungerlo alla httpd.conf file di configurazione del server per Apache. Per fare ciò, vorresti aggiungere lo snippet precedente proprio sotto il gruppo di AddType e AddHandler dichiarazioni (come queste da uno dei miei server):
AddType application / x-httpd-php .php .php3 .php4 .php5 AddType application / x-httpd-php-source .phps AddHandler cgi-script .cgi .pl
Ricorda solo che se lo aggiungi al tuo httpd.conf file di configurazione del server che OGNI * Il file .css sul server ora deve avere l'intestazione PHP per il testo / css preposto ad esso. Questo è il motivo per cui la mia raccomandazione è di aggiungerla tramite .htaccess
Dall'indagine sulle prestazioni media del weblog top 100:
Abbiamo eseguito un test sui primi 100 blog per file CSS esterni e dimensioni totali. Il blog medio top 100 utilizza 4 file CSS esterni (inclusi gli @imports) con una dimensione totale media del file di 43,1 KB (non compresso). Il numero di file CSS esterni variava da 1 a 18. La dimensione totale del CSS variava da 0,2 a un enorme 307K. Si noti che questa analisi non include i CSS interni nei file HTML (X). Include i file CSS annidati chiamati con le direttive @import.
Questo è un sacco di CSS. Perchè è questo? Un sacco di volte è perché il CSS viene consegnato non compresso e non ottimizzato. Il sospetto più probabile è il codice CSS bloat e il codice mal gestito. Un'opzione popolare per migliorare la manutenibilità del codice è quella di implementare le variabili CSS tramite PHP.
Ciò significa che invece di avere CSS come questo (sì, questo produrrebbe un'aberrazione del design, ma è utile per illustrare il punto):
body color: # 000; sfondo: #fff; font-size: 10px; div # content background: #ccc; font-size: 1.1em; div # sidebar color: #fff; sfondo: # 000; font-size: 1.0em; div # footer color: # 555; sfondo: #ccc;
Potresti avere CSS come questo:
corpo colore: ; sfondo: ; dimensione del font: px; div # content background: ; dimensione del font: px; div # sidebar color: ; sfondo: ; dimensione del font: px; div # footer color: ; sfondo: ;
Si noti che i nomi delle variabili lunghe sono solo a scopo illustrativo. Ovviamente, queste variabili possono essere lunghe o brevi quanto si desidera e le variabili più brevi rendono le dimensioni dei file più piccole.
Nell'esempio sopra, abbiamo utilizzato le variabili di base per impostare una combinazione di colori monocromatica che potrebbe quindi essere utilizzata in tutto il sito Web in altri stili. Queste variabili potrebbero facilmente essere state scambiate con $ color01, $ color02, $ color03, ecc. Per produrre effetti simili. Spesso i progettisti e gli sviluppatori Web front-end vengono interrogati dai clienti "Ehi, puoi rendere tutto il testo un po 'più oscuro?" oppure "Puoi rendere tutto il testo solo un po 'più grande?" Anche se l'utilizzo di variabili come questa non rappresenta sempre la soluzione migliore, spesso riduce i tempi di manutenzione quando si utilizzano molti sistemi di template e piattaforme di blogging (WordPress, Moveable Type, Expression Engine, ecc.) O CMS aziendali (Drupal, Joomla, Bitrix, ecc. ).
Un metodo alternativo per la memorizzazione delle variabili consiste nel memorizzare i dati negli array associati (che è il mio metodo preferito), che produce codice più simile al seguente:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> body color: ; sfondo: ; dimensione del font: px; div # content background: ; dimensione del font: px; div # sidebar color: ; sfondo: ; dimensione del font: px; div # footer color: ; sfondo: ;
Dopo aver impostato le impostazioni per l'utilizzo di PHP con il tuo CSS, puoi fare alcune cose semplici come i calcoli. Supponiamo che tu voglia configurare un sistema in cui fornisci una serie di DIV sullo schermo, ognuno con un diverso tipo di elemento all'interno. Ogni tipo di elemento (ad esempio img, p, blockquote, ecc.) Ha un'altezza e una larghezza univoche controllate tramite CSS e si desidera che la quantità di margine sia basata su tali valori in questo modo:
In questo scenario, si desidera impostare una griglia standardizzata che contenga tre diversi tipi di elementi (img, p e blockquote) incapsulati in due contenitori diversi (div e li). Ogni DIV deve essere largo 550px e alto 250px, ogni LI deve essere largo 600px e alto 300px, e ognuno dei tipi di elemento ha un'altezza e una larghezza diverse. Il posizionamento degli elementi all'interno deve essere a centro morto. Con il passare del tempo, sarà necessario modificare le altezze e le larghezze dei diversi DIV / LI e degli elementi. È possibile inserire manualmente la quantità di margine per ciascuno dei diversi elementi e / o utilizzare ulteriori informazioni sulla classe sui DIV del contenitore per aggiungere la quantità appropriata di riempimento, ma questo non è utile per le modifiche rapide, come quelle volute da qualcuno che è prototipazione nel browser o chi ha 200 di questi diversi elementi per i quali dovrebbero modificare i dati.
Per prima cosa, impostiamo il contenuto XHTML che andremo a stilare in questo modo:
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
Lorem ipsum dolor sit amet tellus.
Etiam quis nulla pretium et.
Quindi, impostiamo il file PHP / CSS che useremo per lo stile dell'XHTML. Qui è dove dichiariamo le dimensioni standard dei diversi elementi da utilizzare in tutta la pagina.
Accentsconagua
'550', 'altezza' => '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'); ?> Successivamente, continuiamo il file PHP dal passaggio 2 e utilizziamo le variabili che impostiamo nei calcoli. Inoltre, impostiamo i valori MarginX e MarginY calcolati dei diversi elementi per ridurre il numero di calcoli necessari.
div larghezza: px; altezza: px; li larghezza: px; altezza: px; div blockquote width: px; altezza: px; margine: px px; div img width: px; altezza: px; margine: px px; div p width: px; altezza: px; margine: px px; li blockquote width: px; altezza: px; margine: px px; li img larghezza: px; altezza: px; margine: px px; li p larghezza: px; altezza: px; margine: px px;
Ciò che questo ci permette ora di fare è modificare la dimensione degli elementi una volta all'inizio del file e non ricalcolare 12 valori di margine (24 se i valori dei margini erano asimmetrici). Capisco che non sto suggerendo che questo verrà utilizzato in tutti i tuoi progetti futuri, ma questo tipo di tecnica presenta vantaggi definiti rispetto al metodo CSS statico standard.
Come accennato in precedenza, i CSS possono diventare piuttosto grandi. Una cosa che puoi fare per ridurre le dimensioni CSS è quella di gzipping automaticamente i tuoi file CSS. Per fare ciò, hai due opzioni su come farlo: direttamente da Apache usando mod_gzip / mod_deflate o usa i metodi di compressione incorporati di PHP, che faremo qui.
All'interno del nostro file CSS, abbiamo già uno snippet di PHP che imposta l'intestazione:
Tutto ciò che dobbiamo fare ora è aggiungere una singola riga di codice che imposta un buffer di output per utilizzare ob_gzhandler prima della dichiarazione dell'intestazione in questo modo:
Va notato che ci sono altri modi per fare la compressione gzip e tutti hanno i loro vantaggi e svantaggi. Il mio metodo preferito è usare mod_deflate come accennato in precedenza, ma non tutti i designer e gli sviluppatori hanno questa opzione.
L'aggiunta della logica di programmazione a un linguaggio di fogli di stile non è una novità. Molti siti Web determinano quali fogli di stile utilizzano in base all'URL, allo stato di accesso o persino alla data. Ecco un semplice esempio che può essere applicato facilmente a blog e siti di e-commerce (tra gli altri). Supponiamo che tu abbia un tag h1 che viene sostituito usando il metodo di sostituzione dell'immagine Phark descritto dal seguente CSS:
h1 larghezza: 300px; altezza: 80 px; text-indent: -9999px; background: url (images / logo.png) no-repeat;
Aggiungendo un po 'di PHP nel mix per determinare la data in cui viene caricato il CSS, puoi quindi specificare un'immagine diversa per una vacanza come fa spesso Google con i suoi Google Doodles (sebbene utilizzino una soluzione tecnologica diversa per farlo):
h1 larghezza: 300px; altezza: 80 px; text-indent: -9999px; sfondo: url () no-repeat;
Questo è solo un esempio molto semplice. Il tuo CSS sta solo aspettando di essere ampliato da PHP. Quello che fai con esso può variare da persona a persona. Uno dei miei usi personali è usarlo come un modo per oscurare e incorporare i file @ font-face usando le stringhe URI dei dati e controllando il referente che richiede il file in modo simile alle parti della tecnologia che Typekit usa:
@ font-face font-family: FontName; src: local ("FontName"), url (formato ("opentype"); L'utilizzo di variabili in CSS, indipendentemente da pro e contro, è stato per anni un argomento controverso. Come ho detto all'inizio di questo articolo, non ho intenzione di discutere a favore o contro il concetto di variabili CSS o di costanti CSS. Alcuni designer e sviluppatori molto rispettati hanno discusso contro di esso, mentre altri lo hanno sostenuto. Spero, per il bene di una rete migliore, che una soluzione efficace per CSS solo accada prima che dopo. Nel frattempo, quelli di noi che supportano variabili e costanti CSS possono contare sui nostri linguaggi lato server mentre quelli che non li supportano continueranno semplicemente come normali.
Sono sempre alla ricerca di modi nuovi e innovativi per potenziare il mio CSS con PHP. Quali sono alcuni dei tuoi scenari d'uso preferiti per mescolare CSS con PHP?
