PE SCURT: meniu cu submeniuri, CSS-only (fara JS)

Orice browser modern (si de aici exclud de la bun inceput IE-ul), daca respecta specificatiile CSS, are prezent suportul pentru pseudo-clasa dinamica “:hover” pe TOATE elementele, nu numai pe jalnicul si singuraticul < a >.

Nota: Stii deja ca, in CSS, exista o serie de pseudo-clase dinamice (:hover, :active si :focus), pe care, in mod traditional, le asociezi cu “a” ca sa creezi stiluri diferite pentru cele 3 stari ale unui link, sub forma a:hover de pilda.

Browserele moderne, dupa cum ziceam, avand suport complet pentru asta, permit asocierea acestor pseudo-clase la orice element html. Cu alte cuvinte, pot foarte bine sa definesc ceva de genul:

td       {background-color: #cccccc;}
td:hover {background-color: #336699;}

ceea ce va avea ca efect un o schimbare de culoare de background pe td-urile respective, la roll-over evident, fara nici un pic de javascript care sa incarce codul HTML.

Pretty neat, huh? E un feature excelent, pe care pana si super-blamatul de IE7 a inceput sa-l suporte. Numai IE-urile mai vechi inca umbla cu ciunga-n par… Asa ca recomandarea mea e sa urmaresti atat tutorialul cat si exemplele linkate intr-un browser _modern_.

Noah, trecand mai departe, sa vedem la ce poate folosi treaba asta dragutza: Sa ne imaginam ca vrem sa tinem un element html “ascuns” si sa-l facem vizibil atunci cand trecem cu mouse-ul peste “parent-ul” lui. E un scenariu super-cunoscut pentru cine a incercat vreodata sa construiasca un meniu cu submeniuri. Ca sa exemplific, o sa revin la un exemplu cu < li > -uri:

<ul id="menu">
  <li><a href="#">Element 1</a></li>
  <li><a href="#">Element 2</a></li>
  <li><a href="#">Element 3</a></li>
</ul>

Asta ar fi un meniu clasic, simplu (i-am dat un “id” dintr-un motiv relativ simplu: pentru a putea controla mai bine felul in care voi aplica CSS-urile mai tarziu – cu alte cuvinte, daca in acelasi document voi avea si alte ul-uri care vreau sa se comporte normal, atunci voi restrictiona de la inceput felul in care aplic stilurile de redefinire a ul-urilor si li-urilor in css).

Sa zicem ca vrem sa mai bagam in el niste elemente de nivel 2, tot sub forma de < ul > cu < li > -uri:

<ul id="menu">
  <li><a href="#">Element 1</a>
    <ul>
      <li><a href="#">Sub-element 1</a></li>
      <li><a href="#">Sub-element 2</a></li>
      <li><a href="#">Sub-element 3</a></li>
    </ul>
  </li>
  <li><a href="#">Element 1</a>
    <ul>
      <li><a href="#">Sub-element 1</a></li>
      <li><a href="#">Sub-element 2</a></li>
      <li><a href="#">Sub-element 3</a></li>
    </ul>
  </li>
  <li><a href="#">Element 1</a>
    <ul>
      <li><a href="#">Sub-element 1</a></li>
      <li><a href="#">Sub-element 2</a></li>
      <li><a href="#">Sub-element 3</a></li>
    </ul>
  </li>
</ul>

(Poti vedea ce am facut pana acum aici).
Hai sa incepem sa introducem niste stiluri acum! In primul rand voi vrea ca orice < ul > care se gaseste in < ul > – ul cu id=”menu” sa fie ascuns:

#menu ul {display: none;}

Nota: De ce folosesc, pentru display, valoarea none si nu hidden? Pentru ca orice obiect are doua proprietati inerente: vizibilitatea si spatiul ocupat. In timp de hidden are efect doar asupra vizibilitatii (e ca un fel de transparenta: obiectul nu se mai vede, dar spatiul ocupat de el ramane ferm pe pozitii), none are efect asupra ambelor proprietati, ascunzand obiectul complet, si eliberand spatiul ocupat de el.

Gata, am ascuns meniul secundar. Acum vreau ca el sa redevina vizibil atunci cand fac mouseover peste < li > – ul in care se afla:

li:hover ul {display: block;}

(cu alte cuvinte: orice UL care se gaseste intr-un LI care are mouseover va fi afisat ca un block)
Dupa cum poti vedea aici, n-am rezolvat mare branza, desi logica iti spune c-ar fi trebuit s-o rezolvam.

Ce se intampla: fiecare regula CSS are o importanta precisa, pe care o poti calcula numarand pur si simplu elementele care o definesc. Iar fiecare element are la randul lui o valoare diferita in functie de ce tip de element este. Un nod simplu (.clasa_mea de pilda) are valoarea 1, o pseudo-clasa (un :hover de pilda) are valoarea 10, iar un id (#clasa_x de pilda) are valoarea 100. (hihi ce de pilde! 🙂 )

Acum, daca numaram cele 2 reguli de mai sus, pentru prima avem #menu ul (100+1=101) iar pentru a doua avem li:hover ul (10+1=11). Din calculul asta simplu poti sa intelegi acum cum de o regula “mai generala” poate fi mai slaba in importanta decat una “mai privata”, chiar daca logica iti spune in aparenta contrariul. Ce e de facut: simplu, marim “valoarea”celei de-a doua reguli:

#menu li:hover ul {display: block;}

Acum avem #menu li:hover ul (100+10+1=111>101) ceea ce rezolva problema (vezi rezultatul aici).

Daca mai adaugam si niste stiluri ca sa “infrumusetam” toata treaba,

#menu   {width: 10em;}
ul      {margin: 0px; padding: 0px;}
ul ul   {padding-left: 10px;}
li      {list-style-type: none;}
#menu a {display: block; margin: 0; padding: 2px 3px;}
a       {background-color: #CCCCCC; text-decoration: none;
        font-family: Verdana; font-size: 11px;}
a:hover {background-color: #EAEAEA;}

obtinem ceva ce chiar incepe se semene a meniu. Si asta FARA pic de javascript, cu un cod simplu, curat, care la nevoie (in browsere mai retarde) se degradeaza clar si structurat, deci usor de folosit in orice mediu. De-aici incolo (pentru exemplul asta) restul tine de imaginatia ta, ca sa-l faci sa arate cum vrei tu.

IE5/6?

Astea n-o sa inteleaga in veci ce-am discutat pana acum. Noroc ca, in aroganta lor, domnii de la M$ ne-au permis sa redefinim modul in care functioneaza anumite tag-uri HTML folosind seturi de reguli in fisiere de genul htc. Cum asta e deja cu totul alta discutie, o sa te trimit sa citesti mataluta ce zic altii mai destepti, aici, daca ai rabdarea pe care eu pana la urma am avut-o. Bottom-line e ca baietii din linkul cu pricina au programat un astfel de fisier perfect pentru ce avem noi nevoie, si care emuleaza 99% comportamentul lui :hover.

Ca sa faci ca exemplul nostru sa mearga bine si in IE5/6, ia matalutza fisierul asta si salveaza-l in acelasi folder in care ai lucrat tutorialul pana acum, dupa care foloseste comentariile conditionale ca sa fortam IE-ul (si numai pe el) sa “citeasca” neste treburi in plus, si anume:

<!--[if IE]>
<style type="text/css" media="screen">
body          {behavior: url(csshover.htc); font-size: 100%;}
</style>
<![endif]-->

(il instruim pe body sa joace dupa cum ii canta behavior: url(csshover.htc);) Cum NUMAI IE o sa inteleaga treaba asta, celelalte browsere nu vor fi afectate, iar noi obtinem exact ce am vrut. Cum toata treaba de mai sus este in “comentariu”, se valideaza perfect 😀 ceea ce iar e bine.

Evident, lista de probleme de compatibilitate intre browsere nu se opreste aici… Asa ca atat IE7 cat si IE5/6 o sa faca varza din meniul nostru, daca incercam sa-l facem sa arate cat de cat ok.

Solutia? Un alt “hack” de la M$ – posibilitatea de a crea definitii CSS conditional, in functie de browserul detectat. Dupa un pic de tweaking, am obtinut urmatorul set de reguli conditionale, atat pentru IE5/6 cat si pentru IE7:

<!--[if IE]>
<style type="text/css" media="screen">
body        {behavior: url(csshover.htc);}
#menu ul li {float: left; width: 100%;}
li          {border-bottom: solid 1px #CCCCCC; margin-bottom: -1px;}
</style>
<![endif]-->

<!--[if gte IE 7]>
<style type="text/css" media="screen">
#menu ul li {float: none;}
li          {border-bottom: none 0px; margin-bottom: -4px;}
</style>
<![endif]-->

Fisierul final il puteti vedea aici.
Pentru inspiratie, citeste ce-am citit si eu.

Pentru cine n-are somn… o pagina facuta exclusiv din CSS… desi nu pare… Ghici cum au facut-o.

English Version of this article here.

Alex imi arata o treaba faina tare: un test menit sa arate cat de bun este suportul pentru CSS intr-un browser. Se pleaca de la o randare considerata corecta / de referinta, si se compara acea randare cu pagina de test propriu-zisa, asa cum se vedea ea in browserul fiecaruia. Super-interesant pentru un CSS geek 😀

Acid Test 2

English Version of this article here.

De multe ori se intampla, cand mai lucrezi cu tabele, sa “uiti” unele celule fara continut… fara nici macar un & nbsp ; in ele. Asta le face sa arate ciudat in browser (ciudat = fara border), si, mai ales, sa para greseli de codare, ceea ce poate fi neplacut. Pentru cine nu are chef sa mai ia odata tot codul la mana doar ca sa impaneze TD-urile lasate fara continut, exista o solutie: definirea in CSS a urmatoarei proprietati pentru tabele:

{ empty-cells: show }

Asta va obliga toate celulele de tabel sa aiba border, chiar daca sunt goal. (celelalte valori posibile pentru proprietatea asta sunt: hide si inherit)

English Version of this article here.

Daca ai incercat vreodata sa obtii un table cu border de 1px, primul lucru pe care l-ai facut a fost sa scrii asta: < table border = ” 1 ” bordercolor = ” #000000 ” > etc. Dar daca incerci sa vezi asta intr-un browser, borderul e de fapt intotdeauna de 2px. DE CE? Pentru ca, atunci cand definesti borderul de 1px, el este mostenit automat si de td-uri, si din alaturarea celor 2 pixeli adiacenti (1 de la table si 1 de la td) rezulta borderul ala deranjant de 2px grosime. Ca sa intelegi mai bine ce se intampla, poti folosi la definirea table-ului si proprietatea cellspacing=”5″ – abia atunci o sa vezi cum, de fapt, borderul este de 1px… Cele 2 situatii arata cam asa:

Ce e de facut, daca vrei totusi sa obtii un border fin, de fix 1px? Folosesti un mic truc:

< table cellspacing = ” 1 ” bgcolor = ” #000000 ” > … urmand ca apoi, din CSS, sa faci in asa fel incat celulele tabelului sa AIBA un background-color. In felul asta, ne-avand un border la tabel, dar avand un cell-spacing de 1px, acel spacing (spatiul dintre celule) va fi exact ceea ce se va vedea in spatele celulelor tabelului, printre ele: adica background-ul tabelului. Care va arata exact ca un border, doar ca de data asta va fi de fix cat ii zicem noi: de 1px.

Cand lucrezi cu DIV-uri (cum fac eu de ceva vreme), daca vrei sa obtii un layout care sa se lungeasca in jos atat cat il forteaza continutul, esti obligat sa lucrezi cu FLOAT-s. Adica cu DIV-uri pozitionate RELATIVE si care au setat float:left sau float:right.

Problema
Problema este ca modelul de redare vizuala al FLOAT-ului este unul arhaic, de pre vremea cand un float se limita la proprietatea align:left / align:right pentru < IMG >-uri, care permitea textului sa curga pe langa o imagine (sa faca “text-wrap”). In perioada aceea, notiunea de float se limita la < IMG > si < P >. Ce rezulta din modelul gandit atunci? Ceva cam ca in urmatoarea imagine:

Daca te uiti atent, vezi ca imaginea inclusa in primul < P > (figurata cu magenta in desen) are align = ” left ” (echivalentul functional al lui float: left; in CSS), ceea ce face ca < P > -urile (inclusiv cele ulterioare) sa curga fluent pe langa ea. Foarte bine si frumos.

Dar ce te faci cand vrei ca imaginea/floatul respectiv sa “forteze” inaltimea holderului in care se afla? Ce te faci daca vrei ca < P > -ul care contine imaginea sa se intinda in jos in asa fel incat sa includa complet imaginea? Asta la un tabel era usor, dar la un DIV nu mai e la fel de usor.

De ce? Poi, am zis mai devreme: pentru ca, atunci cand au conceput si creat specificatia pentru modelul de FLOAT, dragii de baieti de la W3C asa au considerat ca e mai natural si firesc comportamentul de mai sus. Ce rezulta pentru coder? Durere de cap, pentru ca nu numai ca e o problema destul de serioasa, dar trebuie rezolvata si cross-browser…

Solutia?

In urma testarii a tot felul de nebunii, s-au observat diverse solutii pentru diverse browsere.

De pilda, in IE era suficient sa setezi un height al DIV-ului, ca s-o rezolvi. Si, ca sa nu afectezi layoutul, cel mai bine era sa setezi height-ul respectiv la 1% – ca oricum IE isi intindea DIV-urile cat ii trebuia, trecand peste acel height ca prin branza.

Dar asta nu mergea in FF – ba, mai mult, nu avea nici un efect. In schimb in FF era swuficient sa itroduci de mana, la sfarsitul DIV-ului cu pricina, un element care sa aiba proprietatea CSS clear:both. Asta forta DIV-ul sa se intinda dincolo de acel element bagat cu forta, pentru ca clear-both nu permite nici unui alt element sa se gaseasca pe linie cu el, si deci forta DIV-ul sa se intinda dedesupt. Ca sa intelegi mai bine, am mai prestat un desen:

(borderul acela albastru din jurul acelui punct semnifica efectul lui clear-both;)

Dar cum e destul de ne-elegant sa te apuci sa inserezi cod de mana in HTML doar ca sa rezolvi o problema, atunci s-a gasit o alta solutie: sa se profite de o proprietate CSS specifica FF-ului, si anume content: “”;. Ce face asta? poi iti permite sa bagi in HTML cod din CSS. Evident, merge doar in FF, dar e foarte utila.

Cum putem aplica cele 2 solutii de pana acum, aici?

FF:

.clearfix:after {content: "."; display: block; height: 0;
                 clear: both; visibility: hidden;}

IE:

* html .clearfix {height: 1%;}

Dupa care, in HTML, ii adaugam DIV-ului pe care vrem sa-l extindem clasa clearfix. Si asa ajungem la vestita solutie “CLEARFIX”, care a scos multi html-isti din cacao pana acum:

.clearfix:after  {content: "."; display: block; height: 0;
                  clear: both; visibility: hidden;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Dar ce te faci ca a aparut IE7 pe piata… Care IE7 nu se mai intelege bine cu CLEARFIX… Ce te faci? Iei toate site-urile facute pana acum la mana si le re-codezi doar pentru ca au inceput sa apara clienti care “nu vad bine sinte-ul pe IE7”???? MULTA carne si-a mai luat in gura, in frigider, in congelator si in familie nenea gates cu porcaria asta de ultima versiune… Asta dupa ce-au mai avut si tupeul sa anunte ca e versiunea finala, ca dupa asta – gataa! – nu vor mai implementa nimic nou in materie de suport CSS.

Noroc ca s-au gasit (IAR) testeri de bine care au calarit problema pe toate fetele, si-au descoperit solutia: modifici DOAR CSS-ul, si de-acolo DOAR sectiunea de CLEARFIX, dupa cum urmeaza:

.clearfix:after {content:"."; display:block; height:0;
                 clear:both; visibility:hidden; }
.clearfix       {display:inline-block;}
/* Hide from IE Mac */
.clearfix       {display:block;}
/* End hide from IE Mac */

Odata re-definita doar bucatica asta de cod CSS, totul revine la normal si functioneaza OK in IE, IE7 si FF. Bravo, baieti! M-ati salvat de MULTE transpiratii inutile.

Exista unele situatii cand ai nevoie de o structura tabelara, dar esti obligat s-o faci din DIV-uri (a lucra pentru un tip ca mine poate impune uneori si situatii de-astea aparent absurde 😀 ). Ce faci atunci?

Poi… DACA FOLOSESTI FF, atunci poti sa reproduci structura tabelului, doar ca in loc de

< table >
  < tr >
    < td >
    < / td >
    < td >
    < / td >
  < / tr>
  < tr>
    < td >
    < / td >
    < td >
    < / td >
  < / tr>
< table >

o sa scrii ceva de genul

< div class = " table " >
  < div class = " tr " >
    < div class = " td " > < / div >
    < div class = " td " > < / div >
  < / div >
  < div class = " tr " >
    < div class = " td " > < / div >
    < div class = " td " > < / div >
  < / div >
< / div >

…iar mai departe o sa te asiguri ca definitiile celor trei noi clase vor contine urmatoarele proprietati:

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
De ce? Pentru ca, setand proprietatile astea, latimile coloanelor se vor transmite in sus/jos exact ca intr-un tabel normal.
Dezavantaje:
1. treaba asta nu permite merging-ul (lipirea) de celule… cu alte cuvinte, colspan si rowspan ies din joc la abordarea asta.
2. codul html in mod cert rezulta mai lung
3. alinierea pe verticala este specifica doar celulelor de tabel real, cu abordarea asta deci o sa ai ca default numai valign=top;
4. proprietatile CSS din exemplul asta NU sunt suportate de IEx… nici nu stiu daca asta e un dezavantaj sau un avantaj 😀
Avantaje:
1. un mai bun control asupra celorlalte aspecte de design, prin CSS (nu mai e nevoie sa setezi float-left-uri ca la balamuc pentru div-urile astea, si nu-ti vor mai “sari” din rand din cauza continutului)
2. folosind abordarea cu DIV-uri poti implementa apoi lejer tot felul de minunatii drag&drop din familia AJAX.
O lista completa a proprietatilor CSS din familia TABLE-lor gasesti aici:

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

Pentru o documentare completa, mergi aici.

Pe vremea tabelelor era relativ usor sa obtii un layout centrat relativ in pagina: faceai un tabel cu un rand si o celula, setai celula respectiva sa fie aliniata centrat si pe orizontala si pe verticala, si in ea mai bagai un al doilea tabel in care faceai apoi varza cu carne. Usor si frumos. Dar treaba asta niciodata nu mergea in NS, pentru simplul motiv ca NS accepta 100% ca inaltime doar pentru primul nivel de tabelare. De la al doi-lea nivel de tabelare in jos NS o ia razna cu totul in ceea ce priveste inaltimea tabelelor. Ma rog, asta se intampla pe vremea cand maai existau oameni care sa foloseasca NS, si cand se facea caz pe seama lor. Not anymore.

Dar problema ramane. De ce? Pentru ca alinierea pe verticala este o proprietate specifica NUMAI anumitor elemente HTML. DIV-ul NU e unul din ele. Ce te faci atunci?

Pai… depinde. Ai nu una ci doua solutii, in functie daca vrei ca div-ul tau sa aiba inaltime fixa sau relativa la inaltimea paginii. Indiferent cum vine cazul, principiul de baza e ca div-ul cu pricina trebuie sa-l bagi intr-un context clar definit ca position, indiferent ca e relative sau absolute. Sa le luam pe rand…

1. DIV centrat vertical in pagina, cu inaltime relativa la inaltimea paginii.…

cam simplu 🙂 Se seteaza div-ul din css, cu urmatorii parametri:

position: absolute; height: x%; top: ((100-x)/2)%;

Bine, ce am scris eu aici e un EXEMPLU, fratilor. NU incerca asa ceva acasa, ca n-o sa mearga. Ca sa vezi cam cum ar arata ceva de genul asta in rea-l live, uite un exemplu mai exemplificator:

position: absolute; height: 40%; top: 30%;

Daca ai nelamuriri, baga un comentariu si le lamurim.

2. DIV centrat vertical in pagina, cu inaltime fixa.

Asta poate sa para mai tricky… dar e rezolvabil. Inainte de toate, cream un DIV “dummy”, pe care-l definim in modul urmator:

.dummy {position: absolute; top: 50%;}

Div-ul asta, in mod clar, va sta (va avea originea) exact la mijlocul verticalei paginii. Pasul doi este sa cream in interiorul lui dummy DIV-ul care ne intereseaza pe noi, si care sa zicem ca vrem sa aiba inaltimea X. Parametrii lui in CSS vor arata asa:

position: absolute; height: Xpx; top: (-X/2)px;

Repet, pentru ca mai sus: asta e un exemplu de tip formula. Acelasi lucru, exemplificat mai concret, ar arata cam asa:

position: absolute; height: 300px; top: -150px;

Problema rezolvata!

Nota 1: Pentru cine nu intelege cum merge treaba cu position:absolute si cam ce presupune aceeasi treaba, recomand cu caldura articolul Elemente pozitionate ABSOLUTE in context RELATIVE.
Nota 2: Pentru cine se loveste de probleme legate de alinierea pe orizontala sau de width, ia cu paine de-aici: DIV-uri centrate in pagina: atentie la MARGIN.
Nota finala: Parametrii pe care i-am dat in exemplele de mai sus reprezinta STRICTUL NECESAR functionarii trebii respective. Evident ca esti liber sa adaugi de la tine orice si oricati parametri suplimentari vrei, pornind de la banalul width si mergand pana la cele mai rele hackuri CSS pe care le stii tu. Evident, restul nu ma mai priveste si e treaba ta. 🙂

Ca sa lamurim de la (destul de) inceput de ce ma tot agit atata cu DIV-urile, si nu folosesc in schimb TABLE: este vorba de modul de incarcare a paginii, in primul rand.

Un TABLE este compus in TR-uri, compuse la randul lor din TD/TH-uri. Problema este ca IE nu poate afisa un TABLE pana cand nu a terminat de incarcat TOT continutul lui. Cu alte cuvinte, daca graffiti de pilda ar fi facut tot dintr-un singur TABLE, atunci ai sta si te-ai uita la o pagina goala, cum se tot incarca fara sa afiseze nimic, si abia la sfarsitul incarcarii s-ar afisa totul, brusc. Acum, sa fim seriosi, graffiti poate nu e cel mai bun exemplu… Du-te pe engadget.com de pilda, si vezi acolo batalie cu bandwidth-ul… Daca un site ca ala ar fi facut cu tabele, ar fi JALE.

DIV-urile in schimb, ca sa poata fi afisate, nu au nevoie de CONTINUT, ci doar de STRUCTURA.

Asta, plus eleganta CSS-ului, ma fac un fan declarat al DIV-urilor, sau, ma rog, al modalitatilor alternative de a “taia” un layout.