Archipelagi pełne <div>-ów. Czyli o html i semantyce słów kilka.

W związku z tym, że obecnie siłą rzeczy mam dużo styczności z HTML zainteresowałem się z nie rozerwalnie z nim związaną semantyką.

Temat daleki od Java, ale zawsze to coś technicznego, a i myślę, że jest warte poruszenia. Z tego co zauważyłem dla większości webmajstrów w naszym kraju tworzenie nowocześnie, tworzenie wg standardów W3C to głównie totalna anihilacja większości mających semantycznego znaczenie dozwolonych znaczników na rzecz chyba obdarzanego jakimś kultem <div>,a dla przykładu <table> to samo zło. Poza tym mało kto posiada aktualną wiedzę na temat HTML, no bo po co się go uczyć skoro jest taki prosty. Oprócz tego i sam walidator nie jest w stanie sprawdzić strony pod kątem semantyczności, a więc sama wlepka na stronie potwierdzająca zgodność to w dużej części przypadków pic na wodę fotomontaż, bo standardy to nie tylko valid w3c.

W polskim internecie ciągle mało jest stron poprawnych semantycznie, nie wspominając już o zgodności z takim standardem jak WAI, których praktycznie u nas nie ma

Pomysł na ten post wziął się całkiem przypadkiem. Otóż przeglądałem sobie pewną stronę i podglądnąłem sobie kod źródłowy takiego o to kawałka tejże strony:

Kiedy zobaczyłem jakie spaghetti kryje z taką pierdołą, jak wyświetlenie 4 obrazków…

<div class="last_rows"><div class="thumb">
          <div class="outer">
              <div class="middle">
                <div class="inner">
                  <div class="avatar_photo">
<a href="">
<img alt="miniaturka zdjęcia" class="thumb" src=""></a>
                 </div>
                </div>
              </div>
            </div><div class="desc"><div class="author">
<a href="/profile/31521844">XXXXX YYYYYY</a><br>dzisiaj 20:31</div></div>
</div>
<div class="thumb">
            <div class="outer">
              <div class="middle">
                <div class="inner">
                  <div class="avatar_photo"><a href="/profile/22620947/gallery/39">
<img alt="miniaturka zdjęcia" class="thumb" src="http://photos.nasza-klasa.pl/22164904/39/thumb/44d11daf6a.jpeg"></a>
                  </div>
                </div>
              </div>
            </div><div class="desc"><div class="author">
<a href="/profile/22620947">LLLLLLLL ### ~~~ CCCCCCCC ~~~</a><br>dzisiaj 20:31</div></div>
</div>
<div class="thumb">
            <div class="outer">
              <div class="middle">
                <div class="inner">
                  <div class="avatar_photo"><a href="/profile/19763376/gallery/145">
<img alt="miniaturka zdjęcia" class="thumb" src="http://photos.nasza-klasa.pl/19984140/145/thumb/3719f89981.jpeg"></a>
                  </div>
                </div>
              </div>
            </div><div class="desc"><div class="author"><a href="/profile/19763376">***SLODKA  BLONDI***</a><br>dzisiaj 20:31</div></div>
</div>
<div id="last_photo_td"><div class="thumb">
           <div class="outer">
              <div class="middle">
                <div class="inner">
                  <div class="avatar_photo"><a href="">
<img alt="miniaturka zdjęcia" class="thumb" src=""></a>
                  </div>
                </div>
              </div>
            </div><div class="desc"><div class="author">
<a href="">XXXXXX KKKKKK (95 SUPPORT)</a><br>dzisiaj 20:31</div></div>
            </div>
</div> 41 linii
<div class="clear"></div></div></div>

…to wiedziałem, że poruszę w końcu ten temat.
Całą tę stronę trafią skazy o których wspomina Jeffrey Zeldman w swojej książce Designing With Web Standards, a mianowice classitis i divitis w jednym. A chyba jedna z najpopularniejszych stron w polskim internecie powinna trzymać poziom, zwłaszcza jeśli chodzi o tę część na którą twórcy mają największy wpływ, bo sama zawartość to inna kwestia. Tymczasem semantyka leży, ułatwienie dostępu też praktycznie tam nie istnieją, ale to już temat na osobny post.
Zresztą nie tylko o semantykę tu chodzi, taka nadmiarowość znaczników to zapchane łącze itd, co w przypadku tejże strony ma ogromne znaczenie. Prawdopodobnie spokojnie dałoby się zmniejszyć liczbę znaczników całej strony o połowę.

Czas na refaktoryzację

Dokładnie, skoro można zrobić to z kodem źródłowym stricte programowym to czemu nie z html?
Ekspertem w tej dziedzinie to ja na pewno jestem, ale postanowiłem posprzątać ten syf i sprawdzić czy mi się to uda dla własnej satysfakcji, a jak:). Całą strukturę obrazków postanowiłem oprzeć na liście definicji <dl>, wg fachowców od semantyki (m.in. Dan Cederholm w książce Kuloodporne strony internetowe str. 101), może być ona wykorzystywana do tworzenia galerii, zresztą od początku wiedziałem, że ją wykorzystam, chociaż nawet i zwykłe, tak znienawidzone <table> byłoby wydajniejsze niż ten makaron co tam jest…

Struktura

        <div>
            <dl>
                <dt><a href="#"><img src="img/nk1.jpeg" alt="miniaturka-zdjęcia" /></a></dt>
                <dd>
                    <a href="#">Xxxxx Yyyyyyyyyyy</a><br />Dzisiaj 17:44
                </dd>
            </dl>
            <dl>
                <dt><a href="#"><img src="img/nk2.jpeg" alt="miniaturka-zdjęcia" /></a></dt>
                <dd>
                	<a href="#">Uuuuuu Nnnnn (Jjjjjj)</a> <br />Dzisiaj 17:44
                </dd>
            </dl>
            <dl>
                <dt><a href=""><img src="img/nk3.jpeg" alt="miniaturka-zdjęcia" /></a></dt>
                <dd>
                	<a href="#">Aaaa Kkkkkkkkkk</a> <br />Dzisiaj 17:44
                </dd>
            </dl>
            <dl>
                <dt><a href=""><img src="img/nk4.jpeg" alt="miniaturka-zdjęcia" /></a></dt>
                <dd>
               		<a href="">Uuuuu Ppppppp</a> <br />Dzisiaj 17:44
               </dd>
            </dl>
        </div>

Co nam daje:

Pierwsze szlify CSS

* {
	padding: 0;
	margin: 0;
}
body {
	font-size: small;
	font-family: Tahoma, Geneva, sans-serif;
	padding: 50px;
	text-align:center;
}
div, dd, dl, dt {
	float: left;
}
div {
	border: 1px solid #ccf;
}
dd {
	clear: left;
	font-size: 75%;
}
dl {
	padding: 7px 14px;
}
a {
	text-decoration: none;
	font-size: 110%;
	font-weight: bold;
	color: #369;
	border: none;
}
img {
	padding: 5px;
	border: 1px solid #ccf;
}

Co tu się dzieje, znającym style nie muszę wyjaśniać. Najważniejszą częścią jest ustawienia elementy <dd>, w którym znajduje się podpis pod zdjęciem, aby znajdował się poniżej elementu <dt>, który to przechowuje nam zdjęcie. Aby uzyskać poziomy kierunek obrazków użycie <dl> z deklaracją float: left załatwia sprawę.

Efekt pierwszych zabiegów CSS

Następnie dodaje deklarację z wziętym wymiarem bezpośrednio z nk:

dt {
	height: 112px;
}

Ustawienie wysokości znacznika przechowującego obrazek, powoduje, że podpisy pod obrazkami znajdują w jednej linii:

Ostateczny arkusz

* {
	padding: 0;
	margin: 0;
}
body {
	font-size: small;
	font-family: Tahoma, Geneva, sans-serif;
	padding: 50px;
	text-align:center;
}
div, dd, dl, dt {
	float: left;
}
div {
	border: 1px solid #ccf;
	height: 160px;
}
dl {
padding: 7px 14px;
}
dd {
	clear: left;
	font-size: 75%;
	width: 120px;
}
dt {
	width: 120px;
	height: 112px;
	display: table;
}
a {
	text-decoration: none;
	font-size: 110%;
	font-weight: bold;
	color: #369;
}
dt a {
	border: none;
	display: table-cell;
	vertical-align: middle;
}
img {
	padding: 5px;
	background: #fff;
	border: 1px solid #ccf;
	-moz-box-shadow: 1px 1px 0 #ccf;
	-webkit-box-shadow: 1px 1px 0 #ccf;
     box-shadow: 1px 1px 0 #ccf;
}

Musimy wycentrować obrazek w pionie, o tym zabiegu można przeczytać np. tutaj
Aby po tym zabiegu uzyskać wyśrodkowanie tekstu względem obrazka, trzeba dodać właściwośćwidth
dla <dt> i <dd>.

No i pozostaje kwestia cienia pod obrazkiem. Znam dwa rozwiązania:

• Dodać <div> za obrazkiem (nadrzędny do obrazka) i ustawić obrazek relatywnie względem niego
• Użyć dobrodziejstw CSS 3

Pierwsze rozwiązanie burzy układ obrazków, ponieważ wyśrodkowanie obrazka w poziomie wtedy idzie w łeb, a z tej racji, że nie ma określonej długości dla pojemnika otaczającego, a co za tym idzie ustawienia marginesów dla niego nic nam nie dadzą. Użycie JavaScript-u, obliczanie szerokości obrazka i dodawanie go do stylu pojemnika pomogło by rozwiązać ten problem.

Ja użyłem właściwości box-shadow efekt jest bardzo fajny, obecny wszędzie poza IE…
Brak tego efektu z IE i tak pewnie nie byłby zauważony przez większość użytkowników tak prześladowanej przeze mnie strony…

Mimo sprawy cienia pod obrazkiem, uważam, że takie rozwiązanie jest warte świeczki, ale pozostanie pewnie tylko na tej stronie, a kod tamtej strony będzie dalej cuchnął i zapychał łącza…

A i zapomniałbym;), efekt końcowy: