Používanie premenných v CSS

Published:

Add / read comments

Mnohí z vás určite používajú v kaskádových štýloch ako pozadie aj obrázky. Bez nich by to už dnes nešlo. Už zopárkrát sa mi však stalo, že som si obrázky ukladal do adresára s názvom napr. "img" a potom som zrazu potreboval súbor premenovať napr. na "pics", alebo sa zmenila cesta k tomuto súboru (čo sa stáva častejšie).

Napríklad som si vyvíjal u seba na localhoste, kde adresa mohla byt napr. takato:

#button {
  background: url(http://localhost/dubak/images/menu.png) left top no-repeat;
  text-align:center;
  padding-left: 50px;
}

Potom som to nahodil na komerčný server a mohol som veselo prepisovať cesty napr. na takéto:

#button {
  background: url(http://www.dubak.sk/images/menu.png) left top no-repeat;
  text-align:center;
  padding-left: 50px;
}

Ak som mal obrázkov viacero a aj CSS skriptov, bola to pekná otrava. Niekto môže povedať, že prečo som namiesto absolútnych ciest nepoužil cesty relatívne!? No lebo som sa niekde dočítal, že ak sa používajú cesty relatívne, server ju musí dohladať a to má vplyv na celkovú výkonnosť aplikácie.

Tak som to začal riešiť a dospel som s využitím rôznych zdrojov k riešeniu, ktoré mi veľmi vyhovuje. Mám napr. skript "style.css", ktorý si uložím ako "style.php" a doňho napíšem:

<?php
  // hlavicka suboru povie prehliadaču aký typ súboru to je 
  header("Content-Type: text/css; charset: utf-8");
  // zadefinujem premennu
  $site = 'http://www.dubak.sk';
?>

čiže som si zadefinoval premennú a teraz pokračuje zvyšok CSS súboru:

/* hlavny CSS subor*/
#button {
  background: url(<?php echo $site ?>/images/menu.png) left top no-repeat;
  text-align:center;
  padding-left: 50px;
}

Ako vidieť, keď budem chcieť zmeniť celú adresárovú štruktúru, môžem to urobiť zmenou na jednom riadku a od koreňového adresára aplikácie ponechám relatívne cesty nezmenené.

Inak keď som sa pozeral do rôznych knižníc veľkých PHP projektov ako napr. Smarty, tak tam majú niečo takéto:

define('SMARTY_DIR', dirname(__FILE__) . '/nejaky_adresa/');

a potom si v triede zadefinovanú konštantu veselo používali. Takto obchádzali zmenu adresárovej štruktúry na serveroch. Len dodám, že "dirname(__FILE__)" vráti absolútnu cestu k adresáru, kde je uložený súbor, v ktorom je funkcia dirname zavolaná. Viac tuto. Čiže sa dá rovnaký postup využiť aj pri písaní PHP skriptov aj CSS skriptov.

Published:

Add / read comments

FIND ME

Share, follow or connect with me.