---

Hej

Jeg roder med et lille hobby projekt omkring noget webudvikling i et
forsøg på at udvide min horisont lidt. Jeg har taget udgangspunkt i LAMP
basen, mest fordi det var forholdsvis nemt at sætte op på den Ubuntu box
jeg allerede havde kørende.
Jeg har været ved at researche diverse teknikker for at strukturere
websites og der er nogle ting jeg kunne bruge lidt bedre forståelse for,
mest i forbindelse med brug af style sheets. Jeg lister lige et par ting
her, håber der er nogen her der kan hjælpe:

1. Jeg har en vag idé om nogle af fordelene ved style sheets kontra
inline HTML attributes, men det er klart at jeg ikke har det fulde
overblik endnu. Er der nogen her der har links til dokumenter/guides der
beskriver brug af style sheets i forbindelse med PHP-generet kode?
Det jeg har kunnet finde online bruger normalt eksempler på problemer
der bliver løst ved at skifte til et dynamisk sprog som PHP.
Den eneste klare ting som er forholdsvis logisḱ er at brug af style
sheets vil gøre data mængden mindre, og derved reducere load tiden.

2. Hvad findes der af guides og tommelfingerregler for hvilke ting der
puttes i et style sheet? Den del kan godt virke lidt uoverskuelig.

3. Jeg har fundet lidt forskellige udsagn om inline vs. embedded vs.
external style sheets, men det giver ikke så meget mening for mig, så
jeg spørger lige her:
inline: Hvornår er de overhovedet brugbare?
embedded vs. external: External stylesheets beskrives som værende at
foretrække lige så snart der er tale om noget der skal bruges på flere
sider. Der hentydes meget til maintainability her, men det argument
falder jo væk hvis man strukturerer sin PHP kode ordentligt.
Et andet argument peger på caching af style sheets, men så render vi ind
i noget med throughput vs. latency. Et external style sheet kræver jo en
ekstra request fra browser til server, om det så bare er for at bekræfte
cache hit, hvor et embedded style sheet til gengæld ikke kan udnytte
cache på samme måde. Der vil altid være et tradeoff her, så jeg kunne
godt tænke mig at vide om der er nogen der kender til interessante
artikler om det emne på nettet. Eller drejer det sig om selv at gå i
gang med en lommeregner?
Andre betragtninger?

/Jacob

---

Jacob Larsen wrote in dk.edb.internet.webdesign.serverside.php:
> Hej
>
> Jeg roder med et lille hobby projekt omkring noget webudvikling i et
> forsøg på at udvide min horisont lidt. Jeg har taget udgangspunkt i LAMP
> basen, mest fordi det var forholdsvis nemt at sætte op på den Ubuntu box
> jeg allerede havde kørende.
> Jeg har været ved at researche diverse teknikker for at strukturere
> websites og der er nogle ting jeg kunne bruge lidt bedre forståelse for,
> mest i forbindelse med brug af style sheets. Jeg lister lige et par ting
> her, håber der er nogen her der kan hjælpe:

Der er ingen forskel om du bruge CSS i HTML eller PHP

Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Kim Schmidt Wind wrote:
> Jacob Larsen wrote in dk.edb.internet.webdesign.serverside.php:
>> Hej
>>
>> Jeg roder med et lille hobby projekt omkring noget webudvikling i et
>> forsøg på at udvide min horisont lidt. Jeg har taget udgangspunkt i LAMP
>> basen, mest fordi det var forholdsvis nemt at sætte op på den Ubuntu box
>> jeg allerede havde kørende.
>> Jeg har været ved at researche diverse teknikker for at strukturere
>> websites og der er nogle ting jeg kunne bruge lidt bedre forståelse for,
>> mest i forbindelse med brug af style sheets. Jeg lister lige et par ting
>> her, håber der er nogen her der kan hjælpe:
>
> Der er ingen forskel om du bruge CSS i HTML eller PHP

Kan jeg få dig til at uddybe det lidt?
Som jeg ser det, så ændrer de grundlæggende forudsætninger for at bruge
CSS sig når man går fra statisk HTML til dynamisk generet via PHP. I
statisk HTML får du nogle meget klare modulariserings fordele ved at
bruge CSS, men i PHP blive disse fordele udvandet, da man kan klare
meget af det samme med noget struktureret PHP kode. Det jeg efterlyser
er de gyldne tommelfingerregler for hvornår det er smart at bruge CSS
sammen med PHP, samt argumenterne for inline vs. embedded vs. external.

/Jacob

---

Jacob Larsen skrev:

> Kan jeg få dig til at uddybe det lidt?

PHP skal slet ikke beskæftige sig med CSS ud over at sætte de
rigtige klasser og id'er på diverse elementer. Glem PHP når du
vil spørge om CSS.

> Som jeg ser det, så ændrer de grundlæggende forudsætninger for at bruge
> CSS sig når man går fra statisk HTML til dynamisk generet via PHP.

Nej. CSS samler al opsætning og udseende i én fil, og det er
styrken ved det.

> I statisk HTML får du nogle meget klare modulariserings fordele ved at
> bruge CSS, men i PHP blive disse fordele udvandet, da man kan klare
> meget af det samme med noget struktureret PHP kode.

Man kan også undvære tabeller i PHP. Man skal bare lave nogle
kommandoer til at tegne grafiske bokse og fylde dem ud. Brugeren
kan ikke se forskel.

> Det jeg efterlyser er de gyldne tommelfingerregler for hvornår det
> er smart at bruge CSS sammen med PHP

Altid.

> samt argumenterne for inline vs. embedded vs. external.

Inline bruger jeg kun til hastige testsider eller midlertidigt
mens jeg finder ud af hvordan et element skal styles. Embedded
CSS laver jeg kun i testfiler. Alle mine sider - statiske såvel
som PHP-dynamiske - har en CSS-fil tilknyttet.

Genbrug er kodeordet.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

Jacob Larsen wrote:

> Det jeg efterlyser
> er de gyldne tommelfingerregler for hvornår det er smart at bruge CSS
> sammen med PHP, samt argumenterne for inline vs. embedded vs. external.

Der er en del parametre i det regnestykke.
Hvis man lægger CSS'et i en ekstern fil kræver det formentlig et kald til
serveren for at tjekke om cachen er 'up to date'.
Formentlig - her, fordi visse browsere er sat op til default ikke at tjekke
hver eneste gang.

Basalt er der kun sendt en GET /mit.style.sheet.css HTTP/1.x + lidt mere.
Hvis din server er hurtig, og kan tjekke If-Modified-Since, så er
retursvaret også kun de sædvanlige headers.

Med tanke i, at en Linux dunk, her en almindelig PC, med NPTL kan spawne
200.000 threads/sek. burde requestet ikke belaste voldsomt meget.

Men disk access, kan være en flaskehals (obtain last modified date).

Som du selv skriver, så er det et tradeoff mellem ekstra server load ctr.
ekstra wiredata på din side.

Hvis CSS'et er rimeligt stort, ville jeg nok vælge en ekstern fil, ellers
inline/embedded.

Jeg tror ikke man kan stille en tommelfingerregel op, da både båndbredde og
server capabilities indgår.

- Langsom server + høj båndbredde, ja så inline
- hurtig server + lav båndbredde, så må det være extern CSS.
.... osv
Du må selv finde den optimale løsning.

--
Med venlig hilsen
Stig Johansen

---

On Sat, 07 Mar 2009 10:00:09 GMT, Jacob Larsen <someone@somewhere.net>
wrote:

>Jeg har været ved at researche diverse teknikker for at strukturere
>websites og der er nogle ting jeg kunne bruge lidt bedre forståelse for,
>mest i forbindelse med brug af style sheets.

De fleste af dine spørgsmål hører bedre hjemme i:
dk.edb.internet.webdesign.html
eller
dk.edb.internet.webdesign
da de ikke er PHP-specifikke, og da du har større chance for et
kvalificeret svar dér.

>Jeg lister lige et par ting
>her, håber der er nogen her der kan hjælpe:
>
>1. Jeg har en vag idé om nogle af fordelene ved style sheets kontra
>inline HTML attributes, men det er klart at jeg ikke har det fulde
>overblik endnu. Er der nogen her der har links til dokumenter/guides der
>beskriver brug af style sheets i forbindelse med PHP-generet kode?
>Det jeg har kunnet finde online bruger normalt eksempler på problemer
>der bliver løst ved at skifte til et dynamisk sprog som PHP.
>Den eneste klare ting som er forholdsvis logis? er at brug af style
>sheets vil gøre data mængden mindre, og derved reducere load tiden.

Loadtid er vist kun et issue i f.t. CSS, hvis vi skal helt ud i
marginalerne.

Det vigtigste ved CSS er adskillelsen mellem struktur og form. Altså at
man bruger HTML til at angive dokumentets struktur (overskrift,
brødtekst, liste osv.) og CSS-erklæringer til at beskrive, hvordan
dokumentet skal præsenteres (skrifttype, farve, placering, størrelse
osv.)

Dels "tilskynder" det til en mere *logisk* dokument-opbygning (som fx er
til gavn for brugere af skærmlæsere).
Dels er det - ved brug af klasser - langt nemmere at opretholde et
konsistent layout (og at vedligeholde/ændre det).
Dels giver det langt større muligheder for at portere det samme dokument
til forskellige platforme og user agents (fx printer, skærm osv.). Eller
til at lade brugeren vælge forskellige layout-muligheder for samme
HTML-dokument (se fx <url: http://www.csszengarden.com>).
Dels giver det bedre muligheder for brugere til at definere egen
foretrukken bruger-layout.

Så altså: Adskil form og indhold.

>2. Hvad findes der af guides og tommelfingerregler for hvilke ting der
>puttes i et style sheet? Den del kan godt virke lidt uoverskuelig.

Alt hvad der vedrører layout ("form") bør være deklareret i CSS.

>3. Jeg har fundet lidt forskellige udsagn om inline vs. embedded vs.
>external style sheets, men det giver ikke så meget mening for mig, så
>jeg spørger lige her:
>inline: Hvornår er de overhovedet brugbare?

I princippet så lidt som muligt. Brug klasser i stedet og deklarér
layout'et i et stylesheet.
I praksis: Når der er undtagelser fra den generelle layout (fx
billedstørrelser).

>embedded vs. external: External stylesheets beskrives som værende at
>foretrække lige så snart der er tale om noget der skal bruges på flere
>sider. Der hentydes meget til maintainability her, men det argument
>falder jo væk hvis man strukturerer sin PHP kode ordentligt.

Det er fsv. rigtigt - hvis det er samme person, som laver kode og
layout. På større sites er der oftest en arbejdsdeling mellem koder og
layouter.
Og for mig virker det lidt bagvendt, at man skal ind i en PHP/ASP
osv.-fil for at ændre en farve fra gul til grøn, når man kan gøre det i
en CSS-fil.
Adskillelsen mellem form og indhold gør det fx også muligt for
CMS-systemer at ændre layout på en meget enkel måde.

>Et andet argument peger på caching af style sheets, men så render vi ind
>i noget med throughput vs. latency. Et external style sheet kræver jo en
>ekstra request fra browser til server, om det så bare er for at bekræfte
>cache hit, hvor et embedded style sheet til gengæld ikke kan udnytte
>cache på samme måde. Der vil altid være et tradeoff her,

Det er rigtigt, at det er et tradeoff. Men igen er vi ude i marginaler.
Et ekstra request er fx sjældent noget man bekymrer sig om, når man skal
afgøre, om der skal være 2 eller 3 billeder på en side.
Ofte vil et stylesheet være relativt omfattende, så mit gæt er, at
caching "vinder" på større sites.

>så jeg kunne
>godt tænke mig at vide om der er nogen der kender til interessante
>artikler om det emne på nettet.

Det kan jeg ikke lige ryste op af ærmet.

>Eller drejer det sig om selv at gå i
>gang med en lommeregner?
>Andre betragtninger?

Jeg ville nok bekymre mig mere om logisk struktur og en konsistent
layout end de sidste marginaler i loadtiden.

XFUT: dk.edb.internet.webdesign
(Betyder: Dette indlæg sendes i begge grupper og svar henvises til
..webdesign, så diskussionen kan fortsætte dér.)


Mvh. Jørn

--
Jørn Andersen,
Brønshøj

---

Jacob Larsen skrev:

> Den eneste klare ting som er forholdsvis logis? er at brug af style
> sheets vil gøre data mængden mindre, og derved reducere load tiden.

De letter også dit overblik over opsætningen.

> 2. Hvad findes der af guides og tommelfingerregler for hvilke ting der
> puttes i et style sheet?

Det her er en god tommelfingerregel:

Put *alt* hvad der har med styling at gøre i en CSS-fil eller
evt. flere hvis det letter overblikket - men hvis du har brug for
flere filer, skal du overveje om ikke dit design er blevet
ustruktureret.

> 3. Jeg har fundet lidt forskellige udsagn om inline vs. embedded vs.
> external style sheets, men det giver ikke så meget mening for mig, så
> jeg spørger lige her:
> inline: Hvornår er de overhovedet brugbare?

Inline og embedded egner sig kun til test - og til hurtige hacks
hvis man midlertidigt ikke gider gøre det ordentligt.

At rette opsætningen på noget der er inline-stylet, er at vende
tilbage til stenalderen da HTML blev stylet med parameterværdier
til hvert tag. Det kan ikke rettes for mange elementer i ét hug.

Embedded er ikke så slemt, men da det er låst i én fil, kan
opsætningen ikke deles af mange filer der skal se ens ud. Kik
f.eks. på Fidusos mange sider. Der er én CSS-fil der styrer der
hele (til arkivfilerne er der en CSS-fil for hvert år).

> embedded vs. external: External stylesheets beskrives som værende at
> foretrække lige så snart der er tale om noget der skal bruges på flere
> sider.

Ja.

> Der hentydes meget til maintainability her, men det argument
> falder jo væk hvis man strukturerer sin PHP kode ordentligt.

Nej. At programmere det i PHP som CSS kan klare automatisk, er
tredobbelt arbejde til ingen nytte.

> Et andet argument peger på caching af style sheets, men så render vi ind
> i noget med throughput vs. latency.

Overlad caching og transfer til serveren. Tænk mest på dit
overblik og på nem vedligeholdelse.

> Et external style sheet kræver jo en
> ekstra request fra browser til server

Det samme gør en smiley på siden.

> Eller drejer det sig om selv at gå i
> gang med en lommeregner?

Ikke for at nedgøre dig, men du lyder som en der ikke har brugt
CSS ret meget. Jeg forstår ærlig talt ikke hvorfor du ikke
begejstret tager de lettelser til dig som CSS tilbyder. For mig
var det som at komme i himmerige da jeg opdagede hvad man kunne.

Definér én klasse og den kan bruges på tusindvis af sider hvor
der er elementer der skal se ens ud. Jeg har f.eks. en lille
manøvremenu på to forskellige sider. Da jeg skulle bruge nummer
to version, bestod opsætningen i at angive:

   <div class='alafabetvalg'>

Det tog to sekunder. Hvis jeg skulle finde det rigtige sted i PHP
at kalde den samme funktion, ville det tage meget længere tid -
og den kode der da skulle sendes til browseren, ville være større
da stylingen skulle angives på begge sider.

Og at forestille sig et PHP-program med en funktion til alle de
klasser jeg bruger i fiduso.css - det ville skyde overblikket
helt i smadder.

--
Bertel
http://bertel.lundhansen.dk/         FIDUSO: http://fiduso.dk/

---

Bertel Lund Hansen wrote:

> At rette opsætningen på noget der er inline-stylet, er at vende
> tilbage til stenalderen da HTML blev stylet med parameterværdier
> til hvert tag. Det kan ikke rettes for mange elementer i ét hug.

Ok. Var også ca. det jeg forestillede mig, men ville gerne lige have
andres input på den også.

> Ikke for at nedgøre dig, men du lyder som en der ikke har brugt
> CSS ret meget. Jeg forstår ærlig talt ikke hvorfor du ikke
> begejstret tager de lettelser til dig som CSS tilbyder. For mig
> var det som at komme i himmerige da jeg opdagede hvad man kunne.

Det har du skam ret i. Jeg sidder mest og roder med web design som
hobby-udvid-horisonten projekt, og jeg mangler stadig en del teori om
emnet. Derfor jeg spørger her. Jeg mangler nemlig stadig den
aha-oplevelse det kræver at forstå style sheets til bunds.
Min baggrund er embedded software, så min tilgang til tingene er en del
anderledes end hvad jeg har set her indtil videre. Det kan jo både være
godt og skidt, igen derfor jeg kommer her for at diskutere.

> Og at forestille sig et PHP-program med en funktion til alle de
> klasser jeg bruger i fiduso.css - det ville skyde overblikket
> helt i smadder.

Hmm. Jeg har vist ikke fået beskrevet alle detaljerne omkring hvad jeg
kunne tænke mig at opnå. Jeg kunne godt tænke mig at mit style sheet var
dynamisk i en lidt højere grad end det man kan opnå ved at skifte mellem
2 eller flere styles. Enten det så sker i klientens browser, eller
linket skiftes ud server side via PHP.
Mit mål har ikke som sådan været at fjerne style sheets fra mit design,
bare at forstå brugen lidt bedre, eller overhovedet. Mine overvejelser
går på at flytte style sheet parametrene for hver class ind i min
database, da det vil opnå en langt større fleksibilitet omkring layout,
og i hvert fald for mig ser det ud som om det kan give en bedre
adskillelse af kode og layout. Hvis jeg gør det, så vil jeg komme ud i
nogle helt andre overvejelser omkring embedded vs. extern style sheets,
da jeg kode mæssigt ikke ser den store forskel i at kalde en generate
funktion eller indsætte et link.

XFUT: dk.edb.internet.webdesign
- Prøver lige at se om jeg kan finde ud af at få denne gren flyttet til
den anden gruppe også

/Jacob