[PER ESPERTI]Initial containing block, root element, body ecc(Lungo)...

**skyblaze** · 23-07-2005, 02:01

Dopo aver letto le relative parti che mi interessavano nelle specifiche css2.1 e googlato un po mi rimangono ancora delle perplessita a riguardo. Adesso spiego.

Dalle specifiche 2.1 leggiamo che il root element è sempre <html> il quale è l'unico ha non avere nessun padre/antenato. Il suo containing block (che cmq non è un elemento e quindi non ha niente a che vedere con il document tree che parte appunto dal root element ossia <html>) come è scritto sempre nelle specifiche puo essere deciso dall'user agent e potrebbe far riferimento al famoso "viewport" ossia la finestra del browser come tutti sappiamo. Poi se si prosegue leggendo si capisce che se un elemento posizionato in modo assoluto non ha nessun antenato posizionato in uno dei 3 modi(assoluto, relativo o fixed) a cui riferirsi come suo conaining block(quindi per poi avere il riferimento delle sue coordinate quando lo spostiamo in modo assoluto rispetto appunto al padre/containing block), fa sempre riferimento al INITIAL CONTAINING BLOCK che nella maggiorparte dei casi sara il viewport. Quindi concludo che in teoria secondo le specifiche 2.1 dei css se io ho ad es

codice:

<html>
                 <head></head>

                 <body>
                 <div id="div1">blabla</div>
                 </body>

           </html>

il mio "div1" avra le coordinate rispetto al viewport in quanto non ha nessun antenato(che poteva essere un altro div nel quale era annidato) con un posizionamento dei soliti 3 settato.

Il dubbio che mi rimane e che non trovo ancora da nessuna parte(forse ho cercato male) nemmeno sulle specifiche è : Che default value hanno <html> e <body> per la proprieta position? Ne deduco che hanno il default di tutti glia ltri elementi(daltronde anche questi sono elementi normali nel document tree) ossia "static" infatti cosi si spiega anche perche se un elemento posizionato in modo assoluto(come nell'es precedente) non ha nessun antenato posizionato in uno dei 3 modi entro l'elemento <body> va a finire a riferirsi al viewport.

Un altro dubbio(pero questo l'ho letto da qualche parte) riguarda il width e height del <html>. Come width dovremmo avere lo stesso width del viewport mentre come height iniziale sempre il viewport ma quando il suo contenuto cresce e vengono le barre ovviamente passa l'height del viewport.

E' un approfondimento ma che ihmo serve per avere le basi e capire poi molte cose.

Fatemi sapere la vostra

**blakwolf** · 23-07-2005, 09:42

Originariamente inviato da skyblaze
Il dubbio che mi rimane e che non trovo ancora da nessuna parte(forse ho cercato male) nemmeno sulle specifiche è : Che default value hanno <html> e <body> per la proprieta position?

In IE relative, negli altri static o fixed

Un altro dubbio(pero questo l'ho letto da qualche parte) riguarda il width e height del <html>. Come width dovremmo avere lo stesso width del viewport mentre come height iniziale sempre il viewport ma quando il suo contenuto cresce e vengono le barre ovviamente passa l'height del viewport.

Il problema è che in realtà in moltissimi browser questa logica della finestra viewport non è rispettata ma è semplicemente scritta "in duro", quindi dall'HTML in su non sono molto rispettate le regole nei browser

**skyblaze** · 23-07-2005, 14:13

In IE relative, negli altri static o fixed

Ma tutti e 2? Mi pare di aver letto da qualche parte che <html> è l'unico elemento a cui non si puo dare nessuna proprieta di posizioonamento. E cmq se fosse cosi vorebbe dire che allora sia in explorer(dove ha il posizionamento relative) sia negli altri(dove hanno pero un posizionamento diverso da static quindi il "fixed") quando ho un lemento che devo posizionare con absolute e non ho nessun antenato(fino al body) con uno dei 3 posizionamenti posso usare il body come riferimento per le sue coordinate visto che , avendo una proprieta di posizionamento diversa da static, diventa il suo "contesto di posizionamento". Pero questo contraddice cio che è scritto nelle specifiche dove (come ho scritto sopra) si dice chiaramente che se non sia ha un antenato con uno dei 3 posizionamenti l'elemento in questione da posiz. fa riferimento all'initial containing block che nella maggioparte dei casi è il viewport. Cioè mi sembra tutto un po approsimativo nel senso che le specifiche dicono una cosa ben precisa, tu mi dici che dipende dai browser ecc.....e io come faccio ad essere sicuro in mancanza di un antenato posizionato a cosa devo riferirmi per l'elemento che devo posizionare? Dovrei entrare nelle specifiche del brwoser attualmente in uso

Per quanto riguarda il viewprt non ho capito la tua risposta a riguardo...cosa intendi per "duro"

VVoVe:

E' giusto quello che ho letto che int eoria l'elemento <html> ha un width e height iniziale pari al viewport e poi al crescere del contenuto l'height ovviamente si adegua superando quindi l'height del viewport che poi sarebbe la finestra del browser?

P.S.
Quando scriviamo ad es

codice:

body {
           height: 100%;
           }

dovremmo aver detto di settare l'altezza del body(quindi tutto il contenuto della pagina) alla stessa altezza del suo elemento parente che è <html> che cmq come altezza è sempre uguale al contenuto della pagina quindi non cambia molto il senso specificando questa cosa.
Semmai una cosa che ha senso è scrivere invece la stessa cosa ma selezionando <html>; in questo caso siamo sicuri che l'elemento <html> avra sempre altezza pari al suo contenitore che è il viewport e quindi pari all'altezza della finestra del browser anche se si scrolla la pagina.
Quindi in definitiva ha senso fare un selettore html,body settando l'height al 100% cosi praticamente settiamo appunto l'<html> all'altezza del viewport cosi come pure il body visto che è il 100% del suo genitore che a sua volta è il 100% del viewport.

Il problema è che mi sembra di capire che per questo argomento non c'è una psecifica fissa varia molto da situazione a situazione....ma non è una cosa molto bella :rollo:

**blakwolf** · 23-07-2005, 14:28

Originariamente inviato da skyblaze
Ma tutti e 2? Mi pare di aver letto da qualche parte che <html> è l'unico elemento a cui non si puo dare nessuna proprieta di posizioonamento.

in alcuni browser fixed, in altri static

E cmq se fosse cosi vorebbe dire che allora sia in explorer(dove ha il posizionamento relative) sia negli altri(dove hanno pero un posizionamento diverso da static quindi il "fixed") quando ho un lemento che devo posizionare con absolute e non ho nessun antenato(fino al body) con uno dei 3 posizionamenti posso usare il body come riferimento per le sue coordinate visto che , avendo una proprieta di posizionamento diversa da static, diventa il suo "contesto di posizionamento".

esatto

Pero questo contraddice cio che è scritto nelle specifiche dove (come ho scritto sopra) si dice chiaramente che se non sia ha un antenato con uno dei 3 posizionamenti l'elemento in questione da posiz. fa riferimento all'initial containing block che nella maggioparte dei casi è il viewport.

mai detto che i browser rispettano le specifiche... le seguono al meglio quando vogliono

[QUOTE]Cioè mi sembra tutto un po approsimativo nel senso che le specifiche dicono una cosa ben precisa, tu mi dici che dipende dai browser ecc.....e io come faccio ad essere sicuro in mancanza di un antenato posizionato a cosa devo riferirmi per l'elemento che devo posizionare?[QUOTE]

Di principio essendo che l'antenato di posizionamento quando esiste corrisponde anche al body nella maggior parte dei browser tu ti riferisci direttamente al body.

tutta questa roba la noti perchè in moltissimi browser se provi a formattare tutti i figli * o il nodo root html questo non è concesso perchè ti permettono di partire solo dal body.

Altro modo per verificarlo gli oggetti js in memoria DOM che possiedono le varie proprietà anche perchè le specifiche della memoria dei browser non sono rilasciate, neanche da mozilla ove c'è solo il sorgente.

Per quanto riguarda il viewprt non ho capito la tua risposta a riguardo...cosa intendi per "duro"

VVoVe:

Vuol dire che non hanno formattato tramite DOM e CSS ma direttamente tramite programmazione C sul buffer di output.

Un esempio lampante è il fatto che non si può formattare come posizionamento il legend nelle fieldset in firefox perchè è stato programmato nel codice sorgente

dovremmo aver detto di settare l'altezza del body(quindi tutto il contenuto della pagina) alla stessa altezza del suo elemento parente che è <html> che cmq come altezza è sempre uguale al contenuto della pagina quindi non cambia molto il senso specificando questa cosa.

sempre se è presente nella logica del browser, infatti prova a settare una background image al body e dagli altezza al 100% poi guarda in ogni browser come si comporta inserendo più contenuto che l'altezza.

Il problema è che mi sembra di capire che per questo argomento non c'è una psecifica fissa varia molto da situazione a situazione....ma non è una cosa molto bella :rollo:

O studiato approfonditamente per 2 anni i browser compreso il sorgente, e ti assicuro che non ci sono due browser uguali nell'implementazione delle specifiche, e sopprattutto anche dentro un browser il comportamento cambia sulla base del renderer (guarda il quirsk mode e lo standard mode)

**skyblaze** · 23-07-2005, 14:57

in alcuni browser fixed, in altri static

no intendevo tutti e 2 gli elementi(html e body) possono avere nello stesso momento lo stesso valore per questa proprieta? Cioè fammi un esempio di cosa puo avere l'html da solo e il body da solo.

Cmq cioè è un bel casino veramente

Io in definitiva dovrei sapere ogni browser come ragiona. Quindi:

1) Sapere se quel particolare browser considera come root element <html> (come da specifica) o parte dal <body>(che in questo caso diventa il root element ed ha un suo initial containing block);

2) sapere quali valori da per il posizionamento ad entrambi(sempre se li considera bene tutti e 2 gli elementi da specifica o taglia fuori l'<html>);

Ma come faccio a saperle stes cose per ogni browser? e poi varia da browser a browser o all'interno di ognuno anche da ver. a ver.? Hai un link dove c'è un elenco-tabella dei vari browser e dic ome ragionano in questo ambito? Cioè è la cosa piu importante....parte tutto da questi elementi.

Come cavolo sviluppo se ogni browser cambia il modo di vedere <html> e <body>? Cioè cambiando il modo di vedere e i valori per la prorieta "position", per html e body, da browser a browser è impossibile fare un sito "giusto".

P.S.
Quando dici che ad es <html> puo avere o static o fixed facciamo riferimento(prendendo in considerazione che abbia il valore di fixed) al fatto che il suo initial containing block, con un valore di fixed, è il viewport in quanto da specifica il valore "fixed" si riferisce proprio al viewport no?

Concludendo come mi/ci consigli di comportarci nello sviluppo?
Faccio riferimento per la maggiorparte al fatto che il browser vede come root element il body? Anche se cosi fosse che proprieta per position gli faccio avere?

**blakwolf** · 23-07-2005, 15:19

Originariamente inviato da skyblaze
no intendevo tutti e 2 gli elementi(html e body) possono avere nello stesso momento lo stesso valore per questa proprieta? Cioè fammi un esempio di cosa puo avere l'html da solo e il body da solo.

beh considerando che spesso l'html non è neanche formattabile da CSS, tipo in firefox se io vado tramite dom inspector mi ritorna:

HTML > position static
BODY > position static

in IE mac non è accessibile HTML e body è position relative

ecc...

Cmq cioè è un bel casino veramente

benvenuto nel mio mondo

Io in definitiva dovrei sapere ogni browser come ragiona. Quindi:

o provare su molti browser per capire se hanno reali differenze... in ogni caso un lavorone

Ma come faccio a saperle stes cose per ogni browser?

testare è farsi esperienza è l'unico modo

e poi varia da browser a browser o all'interno di ognuno anche da ver. a ver.?

varia tra i browser, tra i sistemi operativi, tra le versioni e tra i renderer sulla stessa versione

Hai un link dove c'è un elenco-tabella dei vari browser e dic ome ragionano in questo ambito? Cioè è la cosa piu importante....parte tutto da questi elementi.

non esiste, in ogni caso se prendi la regola di principio che tutto sembra parta dal body vai tranquillo

Cioè cambiando il modo di vedere e i valori per la prorieta "position", per html e body, da browser a browser è impossibile fare un sito "giusto".

parti sempre da body ignorando HTML

Quando dici che ad es <html> puo avere o static o fixed facciamo riferimento(prendendo in considerazione che abbia il valore di fixed) al fatto che il suo initial containing block, con un valore di fixed, è il viewport in quanto da specifica il valore "fixed" si riferisce proprio al viewport no?

in firefox teoricamente si... in altri no... ignora tutta questa logica e parti sempre dal body considerandolo come il padre di tutto e non gli settare mai nulla del visual formatting model, così vai tranquillo

**skyblaze** · 23-07-2005, 15:30

1) Cosa significa che hai provato con il dom inspector? Sono niubbo su questo....c'è un modo per vedere su ogni browser come lui vede <html> e <body> con relativi valori di posizionamento come hai fatto tut? Se si dicci come fare gia quello sarebbe molto utile.

2) Ok come dici tu di vedere nella maggiorparte dei casi il body come root element ma sempre che poi dobbiamo sapere come il browser lo intende posizionato.

3) tu mi dici che firefox restituisce sia <html> che <body> come static. Ma allora è perfettamente cio che intendono gli standard in quanto essendo tutti e 2 static non ci possiamo mai riferire a loro per posizionare un elemento (con position "absolute") che non ha un antenato (fino al body) con uno dei 3 valori di posizionamento....quindi andiamo a finire, giustamente come da specifiche, al famoso initial containing block e ci riferiamo quindi al viewport per posizionarlo. Giusto? Funziona davvero cosi allora in firefox anche praticamente?

4)Per quanto riguarda il width e height di <html> o solo <body> (in quanto tu mi dici che alla fine vedono quasi tutti body come root element), ma cmq sia del root element in questione, a cosa ci riferiamo se non sappiamo il browser quale initial containing block gli assegna? Ad es se gli da il viewport o altro? E' giusto come dicevo che, qualsiasi è, il root element parte con width e height del suo viewport(ovviamente se il viewport è il suo initial containing block....ma di solito lo è) per poi espandere il suo height con il contenuto? Potendo ovviare a questo settando il root element con height 100% cosi l'altezza diventa sempre quella del viewport?

**blakwolf** · 23-07-2005, 15:57

Originariamente inviato da skyblaze
1) Cosa significa che hai provato con il dom inspector? Sono niubbo su questo....c'è un modo per vedere su ogni browser come lui vede <html> e <body> con relativi valori di posizionamento come hai fatto tut? Se si dicci come fare gia quello sarebbe molto utile.

c'è solo per mozilla, per gli altri si capisce con l'esperienza e con js a volte

2) Ok come dici tu di vedere nella maggiorparte dei casi il body come root element ma sempre che poi dobbiamo sapere come il browser lo intende posizionato.

tutti i browser intendono il body come un elemento largo quanto la finestra, alto minimo quanto la finestra sennò quanto il contenuto posizionato in alto a sinistra a volte con 1em di padding a volte con 1 em di margin e sempre come contenitore (relative) per tutti i figli absolute

3) tu mi dici che firefox restituisce sia <html> che <body> come static. Ma allora è perfettamente cio che intendono gli standard in quanto essendo tutti e 2 static non ci possiamo mai riferire a loro per posizionare un elemento (con position "absolute") che non ha un antenato (fino al body) con uno dei 3 valori di posizionamento....quindi andiamo a finire, giustamente come da specifiche, al famoso initial containing block e ci riferiamo quindi al viewport per posizionarlo. Giusto? Funziona davvero cosi allora in firefox anche praticamente?

firefox si... IE no... opera no... safari no... sono tutti diversi alla fine... segui la regola che ti ho detto sopra e vai tranquillo

**skyblaze** · 23-07-2005, 16:35

ti ringrazio molto e spero proprio in un futuro dove gli standard regnino al 100%.....meno mal di testa per tutti...piu produttivita e piu progreso tecnologico

P.S.
Quindi se ad es voglio essere sicuro che in ogni browser(lo facciamo quindi per explorer che non rispetta gli standard) possa posizionare un lemento rispetto al viewport(senza usare fixed che non è supportato da ie) potrei fare sempre cosi:

codice:

html,body {
            height: 100%;
            }

in quel modo setto il body al 100% dell'altezza del suo contenitore(l'<html>) il quale setto a sua volta al 100% del suo ocntaining block che normalemte è il viewport(nel caso dei browser diversi da firefox-mozilla in realta sto settando il body, il quale vedono come root element, al 100% del suo initial contaning bloack che è il viewport).....quindi il body(al quale si rifersicono tutti meno che firefox) è ora settato al viewport.
E in questo modo cmq funzia anche in firefox che di suo rispetta gli standard ma in questo caso la regola sarebbe ridondante.
Giusto?

**blakwolf** · 23-07-2005, 17:01

no non devi proprio settarlo, se tu fai una cosa del genere alcuni browser vanno in crisi perchè non riconoscono html... non devi proprio settare altezze o larghezze ne sull'html ne sul body, ci pensa il browser a tenere il 100% già di default

Discussione: [PER ESPERTI]Initial containing block, root element, body ecc(Lungo)...

Strumenti discussione

Ricerca discussione

Visualizza

[PER ESPERTI]Initial containing block, root element, body ecc(Lungo)...

Re: [PER ESPERTI]Initial containing block, root element, body ecc(Lungo)...

Permessi di invio