od zera do webmastera

Sprawdzanie struktury dokumentu HTML i testowanie DIV-ów

Czasem trudno sie odnaleść w strukturze dokumentu, w nagromadzeniu DIV-ów w sobie wzajemnie pozagnieżdżanych. By przetestować strukturę dokumentu może być pomocna taka konstrukcja która pozwoli zobaczyć strukturę dokumentu, jeśli dodamy ją to naszego pliku CSS.

* { outline: 2px dotted white }
* * { outline: 2px dotted red }
* * * { outline: 2px dotted green }
* * * * { outline: 2px dotted orange }
* * * * * { outline: 2px dotted blue }

Lub gdy chcemy zbadać naszą strukturę DIVów którymi budujemy konstrukcję strony, to dopiszmy do pliku CSS coś takiego.
Poniżej 2 przykłady w jednym zastosowałem test do sprawdzania a w dolnej nie. I tak widać że 06 jest obrysowany na niebiesko co tu znaczy, że jest najgłębiej zakopany w strukturze moich DIVów (a starałem się ją porządnie zamotać)

div { outline: 2px dotted white }
div div { outline: 2px dotted red }
div div div { outline: 2px dotted green }
div div div div { outline: 2px dotted orange }
div div div div div { outline: 2px dotted blue }

01

02

03

04

05

06

07

08

09

10



01

02

03

04

05

06

07

08

09

10


Uwagi
Oczywiście możesz sobie tą piramidę selektorów (tu * i div) dalej rozbudowywać jeśli dokument który będziesz testował jest jeszcze bardziej złożony.
Czasem dla widoczności lepszej, można zmienić kolory linni
Dobrze taki test mieć cały czas w pliku CSS, a by czasem nieprzeszkadzał zablokować jego działanie znakami komentarza /* blokowany fragment pliku */
OUTLINE nie zadziała w InternetExporerze