@ancipalci
U slučaju da neki sajt ima više css fajlova ili je jedan ogroman a gabaritan u pitanju, najbolje je koristiti pomoć samog servera i uvek do tačnina reći serveru koji deo css-a treba da se prikaže na zahtev iz samo jednog fajla.
U pitanju je php kao jedno od rešenja za tvoj problem. A jeste dobro što se interesuješ za ove 'sitnice', izuzetno bitan faktor ako govorimo o performansama samog sajta. :)
Ne znam koliko si upoznat sa istim, svejedno, ovo što ću ispisati je zaista lagano za praksu.
Css dokument je dakle moguće prezentovati kroz php fajl. Isto tako i javaskriptu.
Preduslov za ovu metodu jeste osposobljen
localhost i pravilno instaliran php.
Neka bude da imaš wamp ili lamp ili xamp prethodno instaliran.
Ovo je npr. konstrukcija nekog dokumenta odakle linkuješ css fajl.
Code (html):
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Naziv stranice
</title>
<link rel="stylesheet" media="all" type="text/css" href="css/style.css" />
</head>
<body id="index">
<h1>BIg one
</h1>
<p>bla, bla, truć..
</p>
</body>
</html>
Preimenuj sami style.css dokument u style.
php pre nego što promeniš sami source u ovako nešto:
Code (html):<link rel="stylesheet" media="all" type="text/css" href="css/style.php?mode=index" />
css/style.php?mode=index
Gde je mode (proizvoljna reč ili misao) a 'index' recimo naziv same web stranice, opet proizvoljno, bez obzira na naziv stranice.
Nakon toga, ubaci naredni deo u sami css/php fajl.
Ovako nekako bi to trebalo da izgleda...
Code (php):
<?php
header('Content-type:text/css');
$mode = filter_input(INPUT_GET
, 'mode', FILTER_SANITIZE_STRING
);
?>
@charset 'utf-8';
* {margin:0; padding:0; outline:0 none;}
html, body {font-size:10px;text-align:center;}
body {position:relative;margin:25px auto 0px auto;width:950px;}
h1, h2 {line-height:1.4;}
p {font-size:150%;}
#footer {clear:both;
background:White;
width:950px;height:50px;
margin-bottom:5px;
border:1px solid Lightgrey;}
Onoliko koliko stranica imaš gde se css ređa i menja u zavisnosti od same stranice i sadržine, toliko različitih
$mode varijanti ili naziva praviš. To jest, deliš, rasparčavaš.. i svaki zaseban deo poistovetiš sa proizvoljnim nazivom i sve to regulišeš iz jednog css/php fajla koji uz pomoć servera prikazuje samo odabrani
$mode.
Npr.
Code (php):
<?php
header('Content-type:text/css');
$mode = filter_input(INPUT_GET
, 'mode', FILTER_SANITIZE_STRING
);
$naslovna = "
body#index {background:Black url('src/image.png') no-repeat center top scroll;}
body#index h1 {font-size:300%;}
body#index h2 {font-size:280%;}
#leviDeo {width:200px; height:auto; float:left;}
#sredina {float:left;width:400px;}
#desniDeo {float:right; width:150px}
";
$about = "
body#about {background:none;}
body#about h1 {font-size:300%; color:Indianred;}
body#about h2 {font-size:280%; color:Navy;}
#leviDeo {width:200px; height:auto; float:left;}
#sredina {float:left;width:400px;}
#desniDeo {float:right; width:150px}
fieldset {box-shadow:0px 0px 3px Lightgreen;
-moz-box-shadow:0px 0px 3px Lightgreen;
-webkit-box-shadow:0px 0px 3px Lightgreen;}
";
?>
@charset 'utf-8';
* {margin:0; padding:0; outline:0 none;}
html, body {font-size:10px; text-align:center;}
body {position:relative; margin:25px auto 0px auto; width:950px;}
h1, h2 {line-height:1.4;}
p {font-size:150%;}
<?php
if ($mode=='index') {echo $naslovna;}
if ($mode=='oNama') {echo $about;}
?>
#footer {clear:both;
background:White;
width:950px;height:50px;
margin-bottom:5px;
border:1px solid Lightgrey;}
Ok. Ako imaš recimo samo ovakve 2 stranice, index i about, na index-u će biti kao i iznad
css/style.php?mode=index
dok će za about izgledati ovako →
css/style.php?mode=oNama
Ako odradiš sve kako treba, nebitno je hoće li tvoj css biti 100 ili više kilobajta.
Uz malu pomoć php-a, u samom css-u, između taga za paragraf i footer div elementa, po potrebi će se smenjivati
$about ili
$naslovna ili
$neka_druga - jednakost, te ćeš na taj način dobiti izuzetno mali css dokument. Svaki bit koji nije 'uokviren' php naznakom, neće biti vidljiv za browser.
Naravno, ako imaš volje i vremena, možeš i svaku stavku posebno pretvoriti u text-string i dobiti savršeno 'pogođeni' css dokument gde se nijedno pravilo ne ponavlja ili je viška.
Ne moraš kompletan blok koda preseliti u jedan string.
npr.
Code (php):
<?php
header('Content-type:text/css');
$mode = filter_input(INPUT_GET
, 'mode', FILTER_SANITIZE_STRING
);
$body = "position:relative; margin:25px auto 0px auto; width:950px;";
$red = "color:Red;";
$blue = "color:Blue;";
$hidden = "position:absolute; z-index:-100;";
?>
@charset 'utf-8';
* {margin:0; padding:0; outline:0 none;}
html, body {font-size:10px; text-align:center;}
body {
<?php echo $body; ?>}
h1, h2 {line-height:1.4;}
p {font-size:150%;}
nav {
<?php echo $red;?>}
noscript {
<?php echo $hidden; ?>}
#footer {
<?php echo $blue;?>
clear:both;
background:White;
width:950px;height:50px;
margin-bottom:5px;
border:1px solid Lightgrey;}
Ako je sve ovo bilo nejasno, biću voljan da otklonim sve kočnice.
Do not hesitate to ask.
[Ovu poruku je menjao plus_minus dana 24.08.2011. u 00:36 GMT+1]
about:networking