Share
Cascading Style Sheets is een presentatiestijl voor presentaties. In die zin heeft het niet veel van de functionaliteit die veel ontwikkelaars willen om hun programmeursinstincten te bevredigen. Vandaag gaan we bespreken hoe je je CSS kunt verbeteren door wat PHP onder de motorkap te plaatsen.
Het gebruik van CSS voor het opstarten van een website is een vereiste in het hedendaagse web voor niet-Flash-websites - en niet zonder reden. CSS is krachtig. Het kan een website maken of breken (hoewel meestal IE6 het breken doet). Zelfs met zijn nut hebben ontwerpers en ontwikkelaars al meer dan twaalf jaar geleden meer van de taal gewild met de CSS Level 1 Recommendation. Vandaag gaan we enkele manieren bekijken om Supercharge je CSS met PHP onder de motorkap.
Opmerking: ik zal niet pleiten voor of tegen het concept van CSS-variabelen en / of CSS-constanten. Dit artikel is geschreven met de veronderstelling dat u een weloverwogen beslissing zult nemen over deze eens gepresenteerd met wat het kan doen. In dit artikel wordt uitgelegd hoe ze worden ingesteld en gebruikt, maar de controverse wordt niet volledig behandeld.
Voordat de supercharging begint, moeten we ervoor zorgen dat u de juiste vereisten hebt om dit te doen. We gaan twee methoden bespreken om je CSS te laten werken met PHP, een die kort en krachtig is en een die wat eleganter en minder opvallend is voor de gebruiker. Beide hebben dezelfde basisvereiste van een server met PHP. De elegantere versie vereist een beetje meer:
Webbrowsers zijn niet zo kieskeurig over bestandsextensies wanneer het om de HTML-link-tag gaat. Waar ze kieskeurig over zijn, zijn de headergegevens die ze voor dat bestand ontvangen. Wat dat betekent is dat u een * .php-bestand kunt koppelen met de juiste headergegevens in de plaats van een * .css-bestand, en de browser interpreteert het resultaat net als standaard-CSS. Voeg hiervoor de PHP-header toe die Apache vertelt om het bestand als CSS uit te voeren:
Link dan gewoon naar het PHP-bestand zoals u dat normaal zou doen:
Nu je dit hebt gedaan, kun je - in theorie - doorgaan naar de volgende sectie van de zelfstudie over CSS-variabelen en constanten, als je dat wilt; echter, iedereen die jouw bron bekijkt, zal zien dat je een PHP-bestand hebt waar een CSS-bestand zou moeten zijn. Bovendien, alleen omdat de browser het resultaat correct zal interpreteren, betekent dit niet dat het andere dingen zoals het cachen van het bestand in de browser noodzakelijkerwijs zal doen. Om dit op te lossen, gaan we verder met de iets elegantere versie.
Apache wordt geleverd met een groot aantal .htaccess-trucs. Dit is er een van. We gaan Apache vertellen om alle CSS-bestanden in een bepaalde map als PHP-bestanden te interpreteren, en de webbrowser (en uw gebruikers) zullen in het algemeen niet weten dat u dit doet. Eerst moet u de koptekstgegevens in uw CSS-bestand plaatsen, net als bij de eenvoudige methode:
In plaats van het CSS-bestand op te slaan als een * .php-bestand, slaat u het op als een * .css-bestand en plaatst u het in een map voor CSS (in ons voorbeeld, ~ / css /). Zodra u dit hebt gedaan, maakt u een * .htaccess-bestand in die map en voegt u het volgende toe:
AddHandler-toepassing / x-httpd-php .css
Dit fragment vertelt Apache om alle CSS-bestanden in de map met het * .htaccess-bestand te interpreteren met de PHP-scripthandler. Als u niet de mogelijkheid hebt om dit aan een enkele map toe te voegen of als u dit voor de hele server nodig hebt, kunt u dit ook toevoegen aan de httpd.conf serverconfiguratiebestand voor Apache. Om dit te doen, zou je het vorige fragment direct onder de groep willen toevoegen AddType en AddHandler verklaringen (zoals deze van een van mijn servers):
AddType application / x-httpd-php .php .php3 .php4 .php5 AddType application / x-httpd-php-source .phps AddHandler cgi-script .cgi .pl
Onthoud dat als je dit aan je toevoegt httpd.conf serverconfiguratiebestand dat ELKE * .css-bestand op de server moet nu de PHP-header voor tekst / css als bijlage hebben. Dit is de reden waarom mijn aanbeveling is om het toe te voegen via .htaccess
Uit de Average Top 100 Weblog Performance Survey:
We hebben een test uitgevoerd op de 100 beste blogs voor externe CSS-bestanden en totale grootte. De gemiddelde blog van top 100 maakt gebruik van 4 externe CSS-bestanden (inclusief @imports) met een gemiddelde totale bestandsgrootte van 43.1K (ongecomprimeerd). Het aantal externe CSS-bestanden varieerde van 1 tot 18. De totale CSS-grootte varieerde van 0.2K tot maar liefst 307K. Merk op dat deze analyse geen interne CSS bevat in (X) HTML-bestanden. Het bevat geneste CSS-bestanden die zijn opgeroepen met @import-richtlijnen.
Dat is veel CSS. Waarom is dit? Vaak is dit omdat de CSS niet-gecomprimeerd wordt aangeboden en niet geoptimaliseerd. De meest waarschijnlijke verdachte is CSS-bloat en slecht onderhouden code. Een populaire optie om de code te onderhouden, is om CSS-variabelen via PHP te implementeren.
Wat dit betekent is dat in plaats van het hebben van CSS zoals dit (ja, dit zou een aberratie van het ontwerp produceren, maar het is goed in het illustreren van het punt):
lichaam kleur: # 000; achtergrond: #fff; lettergrootte: 10px; div # content background: #ccc; font-size: 1.1em; div # zijbalk color: #fff; achtergrond: # 000; font-size: 1.0em; div # footer color: # 555; achtergrond: #ccc;
Je zou CSS als volgt kunnen hebben:
lichaamskleur: ; achtergrond: ; lettertypegrootte: px; div # inhoud achtergrond: ; lettertypegrootte: px; div # zijbalk color: ; achtergrond: ; lettertypegrootte: px; div # footer color: ; achtergrond: ;
Merk op dat de lange variabelenamen alleen ter illustratie dienen. Vanzelfsprekend kunnen deze variabelen zo lang of zo kort zijn als je wilt, en kortere variabelen zorgen voor kleinere bestandsgroottes.
In het bovenstaande voorbeeld hebben we basisvariabelen gebruikt om een monochroom kleurenschema in te stellen dat vervolgens door de hele website in andere stijlen kan worden gebruikt. Deze variabelen hadden gemakkelijk kunnen worden uitgewisseld met $ color01, $ color02, $ color03, enz. Om vergelijkbare effecten te produceren. Ontwerpers en front-end webontwikkelaars worden vaak gevraagd door klanten: "Hé, kun je de hele tekst een beetje donkerder maken?" of "Kun je alle tekst net iets groter maken?" Hoewel het gebruik van variabelen als dit niet altijd de beste oplossing is, zou het vaak de onderhoudstijd verkorten wanneer veel sjabloningsystemen en blogplatforms (WordPress, Moveable Type, Expression Engine, enz.) Of zakelijke CMS's (Drupal, Joomla, Bitrix, enz.) Worden gebruikt. ).
Een alternatieve methode voor het opslaan van de variabelen is om de gegevens in gekoppelde arrays op te slaan (wat mijn voorkeursmethode is), die code meer als volgt produceert:
'# 000', 'color02' => '#fff', 'color03' => '#ccc', 'color04' => '# 555', 'baseTextSize' => '10'); ?> body kleur: ; achtergrond: ; lettertypegrootte: px; div # inhoud achtergrond: ; lettertypegrootte: px; div # zijbalk color: ; achtergrond: ; lettertypegrootte: px; div # footer color: ; achtergrond: ;
Zodra je dingen hebt ingesteld voor het gebruik van PHP met je CSS, kun je wat leuke dingen doen zoals berekeningen. Laten we aannemen dat je een systeem wilt opzetten door een aantal DIV's op het scherm aan te bieden, elk met een ander type element binnenin. Elk elementtype (d.w.z. img, p, blockquote, enz.) Heeft een unieke hoogte en breedte bestuurd via CSS, en u wilt dat de hoeveelheid marge als volgt van deze waarden wordt gebaseerd:
In dit scenario wilt u een gestandaardiseerd raster instellen dat drie verschillende soorten elementen bevat (img, p en blockquote) ingekapseld in twee verschillende containers (div en li). Elke DIV moet 550px breed en 250px groot zijn, elke LI moet 600px breed en 300px hoog zijn en elk van de elementtypen heeft een verschillende hoogte en breedte. De plaatsing van de elementen aan de binnenkant moet in het midden liggen. Na verloop van tijd zullen de hoogtes en breedtes van de verschillende DIV's / LI's en elementen waarschijnlijk moeten worden gewijzigd. U kunt handmatig de hoeveelheid marge invoeren voor elk van de verschillende elementen en / of extra klasseninformatie gebruiken op de containerdivisols om de juiste hoeveelheid opvulling toe te voegen, maar dit is niet zo handig voor snelle wijzigingen, zoals die worden gezocht door iemand die prototyping in de browser of wie heeft 200 van deze verschillende elementen waarvoor zij gegevens moeten wijzigen.
Eerst stellen we de XHTML-inhoud in die we gaan stijlen zoals:
Lorem ipsum dolor zit amet tellus.
Etiam quis nulla pretium et.
Lorem ipsum dolor zit amet tellus.
Etiam quis nulla pretium et.
Vervolgens stellen we het PHP / CSS-bestand in dat we gaan gebruiken om de XHTML te stylen. Hier geven we de standaardgroottes van de verschillende elementen voor gebruik op de hele pagina aan.
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'); ?> Vervolgens gaan we verder met het PHP-bestand van stap 2 en gebruiken we de variabelen die we in berekeningen hebben ingesteld. Bovendien stellen we de berekende MarginX- en MarginY-waarden van de verschillende elementen in om het benodigde aantal berekeningen te verminderen.
div width: px; hoogte: px; li width: px; hoogte: px; div blockquote width: px; hoogte: px; marge: px px; div img width: px; hoogte: px; marge: px px; div p width: px; hoogte: px; marge: px px; li blockquote width: px; hoogte: px; marge: px px; li img width: px; hoogte: px; marge: px px; li p width: px; hoogte: px; marge: px px;
Wat we nu kunnen doen, is de grootte van de elementen één keer bovenaan het bestand wijzigen en 12 margriseringen niet opnieuw berekenen (24 als de margewaarden asymmetrisch waren). Begrijp dat ik niet suggereer dat dit in alle toekomstige projecten zal worden gebruikt, maar dit soort techniek heeft duidelijke voordelen ten opzichte van de standaard "statische" CSS-methode.
Zoals eerder vermeld, kan CSS behoorlijk groot worden. Een ding dat u kunt doen om de CSS-grootte te verkleinen, is door uw CSS-bestanden automatisch te gzippen. Om dit te doen, heb je twee opties om dit te doen: rechtstreeks vanuit Apache met mod_gzip / mod_deflate of gebruik PHP's ingebouwde compressiemethoden, die we hier zullen doen.
Binnen in ons CSS-bestand hebben we al een fragment van PHP dat de header instelt:
Het enige dat we nu moeten doen, is een enkele regel code toevoegen die een uitvoerbuffer instelt om ob_gzhandler vóór de headerverklaring te gebruiken, zoals zo:
Er moet worden opgemerkt dat er andere manieren zijn om gzip-compressie te doen en ze hebben allemaal hun voordelen en tekortkomingen. Mijn voorkeursmethode is het gebruik van mod_deflate zoals eerder vermeld, maar niet alle ontwerpers en ontwikkelaars hebben die optie.
Programmeerlogica toevoegen aan een stijlbladtaal is niets nieuws. Veel websites bepalen welke stylesheets ze gebruiken op basis van URL, inlogstatus of zelfs de datum. Hier is een eenvoudig voorbeeld dat gemakkelijk kan worden toegepast op onder andere blogs en e-commercesites. Laten we aannemen dat je een h1-tag hebt die is vervangen met behulp van de Phark-vervangingsmethode voor afbeeldingen die wordt beschreven door de volgende CSS:
h1 width: 300px; hoogte: 80 px; text-indent: -9999px; achtergrond: url (images / logo.png) no-repeat;
Door een beetje PHP in de mix toe te voegen om de datum te bepalen waarop de CSS is geladen, kunt u een andere afbeelding opgeven voor een vakantie zoals Google dat vaak doet met Google Doodles (hoewel ze daarvoor een andere technologie-oplossing gebruiken):
h1 width: 300px; hoogte: 80 px; text-indent: -9999px; achtergrond: url () geen herhaling;
Dit is slechts een super simpel voorbeeld. Je CSS wacht gewoon om te worden versterkt door PHP. Wat je ermee doet, kan van persoon tot persoon verschillen. Een van mijn persoonlijke toepassingen is om het te gebruiken als een manier om @ font-face-bestanden te verduisteren en in te bedden met behulp van gegevens-URI-reeksen en de verwijzende partij te controleren die het bestand verzoekt, vergelijkbaar met delen van de technologie die Typekit gebruikt:
@ font-face font-family: FontName; src: local ("FontName"), url () formaat ("opensype"); Het gebruik van variabelen in CSS, ongeacht de voor- en nadelen, is al jaren een controversieel onderwerp. Zoals ik aan het begin van dit artikel al zei, ga ik niet pleiten voor of tegen het concept van CSS-variabelen of CSS-constanten. Sommige zeer gerespecteerde ontwerpers en ontwikkelaars hebben ertegen geprotesteerd, terwijl anderen er voor hebben gepleit. Ik hoop, in het belang van een beter web, dat een effectieve CSS-only oplossing eerder dan later plaatsvindt. In de tussentijd kunnen degenen onder ons die CSS-variabelen en -constanten ondersteunen, vertrouwen op onze serverzijde-talen, terwijl degenen die ze niet ondersteunen gewoon doorgaan zoals normaal.
Ik ben altijd op zoek naar nieuwe en innovatieve manieren om mijn CSS te verbeteren met PHP. Wat zijn enkele van je favoriete use-case scenario's voor het mixen van CSS met PHP?
