dnadesign.pl

Przeważnie niewielu web-designer’ów jest świadomych pewnych przydatnych funkcjonalności, które dostarczane są w technologiach przez nich używanych. Często wiedza ta jest tylko domeną profesjonalistów, którzy standardy znają na pamięć. Tak też jest z mechanizmem dziedziczenia w CSS.

Mechanizm dziedziczenia w CSS może być bardzo przydatną rzeczą, gdy w jednym elemencie (np. tagu) mamy zagnieżdżonych parę innych i każdy z nich musi wyglądać lub zachowywać się inaczej, zachowując jednak część cech elementu nadrzędnego (np. taga, w którym się znajdują).

Zacznijmy jednak od podstaw CSS i pewnych oznaczeń, które będą tutaj kluczowe:

    div { width: 100px; }
    .frame { width: 100px; }
    #element1 { width: 100px; }

Są to oznaczenia poszczególnych typów elementów, jakie mogą występować w arkuszach CSS:

• div – w ten sposób oznaczane są właściwości stylu dla konkretnego taga (czyli w tym przypadku dla wszystkich tagów DIV);
• .frame – w ten sposób oznaczane są tagi należące do pewnej klasy (np. <div class=”frame”>…</div>);
• #element1 – w ten sposób z kolei możemy adresować poszczególne tagi poprzez ich ID (np. <div id=”element1″ >…</div>);

Jak działa dziedziczenie w CSS? Zasadniczo wystarczy określić nazwy elementów zagnieżdżonych oddzielając je spacjami, więc mając kod:

<div>Main test</div>
<div>
    <span> Test 1 </span>
    <div class="frame"> Test 2 </div>
    <span class="frame">
    <input id="test" type="text" value="Test 3" />
    </span>
</div>

możemy określić charakterystyczne oraz wspólne zestawy elementów stylu:

div {
    width: 100px;
    background-color: red; }
/* styl dla pojedyńczego elementu */
 
div span {
/* span jest elementem liniowym, więc width
   nie jest dziedziczone */
 
    padding-top: 10px;
    padding-bottom: 10px;
    color: #FFFFFF;
    background-color: #000000; }
/* styl dla tagów span zagdzieżdzonych w tagach div */
 
div .frame {
/* width dziedziczone z wpisu div */
 
    margin-top: 10px;
    margin-bottom: 10px;
    color: #FF0000;
    background-color: #7F7F7F; }
/* styl dla tagów klasy frame zagdzieżdzonych w tagach div */
 
div span.frame {
/* padding dziedziczony z wpisu div span
   margin dziedziczony z wpisu div .frame
   reszta jest zastąpiona */
 
    color: #FF0000;
    background-color: #AFAFAF; }
/* styl dla tagów span klasy frame zagdzieżdzonych w tagach div */
 
div .frame #test {
/* margin dziedziczony z wpisu div .frame */
 
    color: #00FF00;
    background-color: #FFFFFF; }
/* styl dla tagów o id="test", zagnieżdżonych w tagach klasy
   "frame", które z kolei zagnieżdżone są w tagach div */

Jak widać kombinacji może być bardzo dużo. Należy jednak pamiętać, że nie wszystkie elementy mogą być dziedziczone w różnych sytuacjach. Przykładem jest wpis div span, w którym nie zostało odziedziczone pole width. Są to specyficzne przypadki, kiedy mamy do czynienia z elementami, które “z natury” nie obsługują pewnych właściwości (w przypadku <span> jest to np. width, który nie jest dziedziczony z uwagi na to, iż element <span> jest elementem liniowym).

Przejdźmy jednak do rezultatów. Pod Firefox’em 3 rezultat jest widoczny poprawnie:

IE7, (znany z kompatybilności ze standardami… NOT! ) też nie wypadł tak tragicznie, jednak widać różnice w sposobie renderowania stron: