Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

jedan ili vishe css

[es] :: Web dizajn i CSS :: jedan ili vishe css

[ Pregleda: 1491 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

ancipalci

Član broj: 289388
Poruke: 2
...148.91.adsl.dyn.beotel.net.



Profil

icon jedan ili vishe css21.08.2011. u 22:59 - pre 125 meseci
da li je bolje/pametnije pisati jedan css za ceo sajt ili za svaku html stranicu posebno?
recimo da imam potpuno razlichit sadrzaj na svakoj stranici sem header-a i sidebar-a
hvala unapred
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jedan ili vishe css21.08.2011. u 23:25 - pre 125 meseci
To je diskutabilno, svaki novi resurs (fajl) je dodatan zahtev koji browser salje serveru (a ti zahtevi umeju da potraju..), ali ukoliko ti svaka strana koristi druge stilove od ostalih (sto moze da znaci i da je lose napisan css) moze da se desi da bi kombinovanjem svih stilova u jedan css fajl dobio veliki fajl od koga svaka strana koristi samo mali procenat koda. E sad, ukoliko se kesiranje odradi kako treba to moze da prestavlja samo (manji) problem prilikom prvog ucitavanja bilo koje stranice koja koristi taj css fajl..
U svakom slucaju, to je nesto sto dosta zavisi i od samog css, sajta i servera, imas par alata za merenje brzine ucitavanja stranica (YSlow, PageSpeed) pa vidi sta ti oni predlazu da optimizujes.
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2246 Profil

icon Re: jedan ili vishe css22.08.2011. u 01:40 - pre 125 meseci
@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
 
Odgovor na temu

raaddd
Radoš Tošković
Front-end inženjer
Namics
Beograd

Član broj: 95198
Poruke: 29
..106.109.adsl.dyn.beotel.net.



Profil

icon Re: jedan ili vishe css22.08.2011. u 13:14 - pre 125 meseci
Sasvim je ok pisati jedan CSS fajl za ceo sajt, osim ukoliko želiš stilove razdvojiti po funkcionalnosti, kao npr. u nekim WP temama gde se posebno importuju reset, stilovi za tipografiju itd.

Možeš koristiti kontekstualne selektore na osnovu ID-a za body tag. Pazi sa ovim načinom rada jer lako može postati budženje.

Zaista nema potrebe opterećivati server sa ovakvim sitnicama.
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: jedan ili vishe css22.08.2011. u 14:29 - pre 125 meseci
@plus_minus:

Takvo resenje je veoma tesko za odrzavanje i sam kod nije bas najefikasnije moguce napisan.. Moja preporuka je da se ovakvo resenje zaobidje..
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2246 Profil

icon Re: jedan ili vishe css22.08.2011. u 15:56 - pre 125 meseci
Citat:
raaddd: Sasvim je ok pisati jedan CSS fajl za ceo sajt, osim ukoliko želiš stilove razdvojiti po funkcionalnosti, kao npr. u nekim WP temama gde se posebno importuju reset, stilovi za tipografiju itd.

Možeš koristiti kontekstualne selektore na osnovu ID-a za body tag. Pazi sa ovim načinom rada jer lako može postati budženje.

Zaista nema potrebe opterećivati server sa ovakvim sitnicama.


Koji server je u pitanju? Koji hardver zapravo?
Koliko su današnji serveri 'sporiji' i nesposobniji u odnosu na prethodnu liniju hardvera, da tako u globalu - postavim?
I jesu li sporiji i nesposobniji? :D Naravno da nisu.
Pogotovo ako se pojedinačan dokument sa svim varijantama iskešira na 5 sati, npr. Onda User-PC sam vuče iz svog keša.

Citat:
Aleksandar Ružičić: @plus_minus:

Takvo resenje je veoma tesko za odrzavanje i sam kod nije bas najefikasnije moguce napisan.. Moja preporuka je da se ovakvo resenje zaobidje..


Nekome je teško, nekome nije. :) A što se načina pisanja i efikasnosti tiče, to je sklepano tada kada sam i pisao poruku, ali bez obzira, ako kopira u svoj omiljeni editor, lako će se snaći i prepraviti. Pojaviće se i boje, itd. Sve u svemu, ja to praktikujem u svom radu, obavezno. I funkcioniše baš kako treba. Pogotovo za Google Page Speed tool, što pretpostavljam i jeste namera ancipalci. Da optimizuje >>shrinkuje<< svoj kod.

Ne vidim, dakle, zašto bi se zaobilazila ovakva rešenja. Ona možda jesu samo malo komplikovanija, ali, samo tako i ima i napretka i efekta.
about:networking
 
Odgovor na temu

[es] :: Web dizajn i CSS :: jedan ili vishe css

[ Pregleda: 1491 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.