Divitis. Ce semnifica si cum de evitat.

Atunci cind au inceput sa creeze layouturi cu ajutorul CSS, multi web-designeri au cazut in aceiasi capcana. In loc sa puna tabele peste tot in pagina, au incput sa puna div-uri peste tot :). Deci practicile care stateau la baza crearii layouturilor mai devreme, si care nu erau tocmai bune, au ramas neschimbate, iar imbunatatirile pe care trebuia sa le aduca div-ul shi CSS Box Model nu au fost intelese cum trebuie de multe persoane din acest domeniu. Acest articol va explica problema acestor obiceiuri, si va propune unele solutii practice.
Ce este un Div?
DIV este un HTML tag utilizat pentru a contine in el diferite parti a unui HTML document care sunt legate impreuna. Div de fapt raspunde pentru divizarea componentelor unei pagini HTML in blocuri. Cu ajutorul sau putem imparti layoutul in header, footer, sidebar, content sectiuni etc. El nu doar grupeaza elemenele din punct de vedere semantic, dar si permite sa definim reprezentareavizuala utilizind CSS.
Ce este Divitis?
Divitis se refera la utlizarea excesiva a tagului div in pagina, pentru alte scopuri decit divizarea layoutului in sectiuni semnificative.
Din aceste utilizari excesive fac parte:
  • Inserarea fiecarui HTML obiect din pagina intr-un div, indiferent daca este sau nu nevoie.
  • Manipulare cu structura paginii pentru a atinge obiectivele vizuale dorite
  • Folosirea tag-ului DIV pentru marcarea elementelor, care par sa nu corespunda la nici un alt component HTML.
Rezultatul final va fi un HTML pagina plina de div-uri care nu va fi cu nimic mai presus decit o pagina creata cu vechea metoda a tabelelor imbricate.
Acst obicei provine de la proasta intelegere a scopului predestinarii tagului div. Multi web designeri sunt tentati sa creada ca div-ul este un tag multi-scop si il utilizeaza pentru rezolvarea problemelor vizuale shi a obiectivelor propuse de multe ori din cauza lipsei de intelegere a HTML si CSS selectors. Uneori si din cauza ideilor gresite despre ce reprezinta CSS layoutul in realitate dar si din cauza unor abordari de lucru cu CSS creind similaritate cu HTML tabele(pur si simplu se schimba celulele din tabel cu div-uri :) ) ceea ce este
total gresit.
De ce Divitis este rau?
Sunt citeva motive:
  • Este partial eliminat unul dintre motivele cheie pentru care se trece la layouturile bazate pe CSS si anume: separarea partii vizuale de structura in sine. Aceasta structura nu mai este curata din punct de vedere semantic. Iar divurile care au fost adaugate ulterior nu servesc la nimic
  • Codul devine foarte complex si mult mai dificil de stilizat cu ajutorul CSS.
  • Codul devine mult mai dificil de citit iar erorile se infilitreaza mai usor.
Cum de evitat efectul Divitis?
Exista un numar de strategii pentru a scapa de extradivuri si anume:
1. Folosirea intregului arsenal de taguri HTML. Inainte de a incepe crearea layoutului trebuie sa ne gindim la semanticitatea codului si la ce reprezinta componentele viitorului layout de fapt. Ce este un navigation menu? Este de fapt o list de itemuri. Ce este aceasta propozitie? Nu este chiar un HTML paragraf, dar este tagul HTML cel mai apropiat prin care putem o reprezenta, si cu siguranta nu este un div HTML!
2. Decideti daca DIV este intradevar necesar. Uneori adaugam div-urile din obisnuinta sau din falsa presupunere ca este necesar pentru a accesa continutul din interiorul sau. De exemplu avem un navigation menu care arata cam asa:
<div id="nav">
      <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
         ... etc ...
     </ul>
</div>
Cu toate acestea div in aces caz nu e necesar, putem simplu sa reprezentam navigation menu in modul urmator:
<ul id="nav">
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        ... etc ...
</ul>

 
Acest menu se poate de accesat in CSS scriind ul#nav in loc de div#nav ul.
3. Folosirea la putere maxima a CSS selectors. Nu tot timpul e necesar un div container cu o  clasa sau ID specif pentru a formata elementele din interior. O recapitulare asupra modului de lucru CSS ne va face sa stilizam direct elementele fara sa le incadram in containere div.
4. Reconsiderarea standartelor pe care le suporta un browser. Nu tot timpul e necesar ca renderingul sa fie 100% egal in toate browserele, mai alescind vine vorba de IE6, uneori e foarte greu sa facem ca un component sa arate exact in toate browserele.
5. Reconsiderarea preferintelor designului. Suna cam dur dar, uneori merita de gindit asupra acestei optiuni. Cind vine vorba de rounded corners scalabile, sunt imposibile de transmis layoutului fara inserarea unor div-uri si span-uri adaugatoare, si atunci apare intrebarea, pe cit timp o sa fie stabil layoutul pentru care am folosit diferite trucuri pentru a reda componente de genul colturilor rotunjite? 

CSS Faux Columns

Una dintre intrebarile frecvente pe care si-o pun multe persoane incepetori in domeniul WEB Design este:
Cum de facut coloane extensibile cu ajutorul CSS astfel incit sa aiba o inaltime fixata dar sa se duca in jos odata cu marirea continutului. Este un concept destul de simplu, cu care multi dintre cititori sunt deja familiarizati, dar, pentru cei care inca nu stiu, acest truc se poate dovedi foarte util.

Internet Explorer si CSS box model

Una dintre diferentele dintre Internet Explorer si standartele de conformare a Web browserelor ce creeaza o serie de probleme incepatorilor CSS este CSS Box Model. Deoarece CSS box model este modul cum  browserele calculeaza asezarea in pagina si lungime, inaltimea un HTML element in pagina, este un pic mai usor de inteles de ce diferite browsere afiseaza diferit acelasi element ceea ce creaza frustrari si confuzii.
Cum functioneaza principiul CSS Box Model am explicat intr-o postare anterioara, dar totusi simt nevoia sa descriu su care sunt principiile dupa care Internet Explorer calculeaza afisarea in pagina.
Diagrama CSS Box Model
Mai jos este o simpla diagrama care demonstreaza cum dimensiunile unui element sunt interpretate in CSS:

Pentru a simplifica problemele accesate in aceasta postare vom considera ca proprietatea margin este interpretata de toate browserele in acelasi mod, si ne vom axa mai mult pe proprietatile  padding si border.












Dupa criteriile W3C, CSS box model la nivel: block level lungimea totala a unui HTML element in pagina se calculeaza dupa formula:
total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Acelasi concept de calculare se foloseste si pentru inaltime dar, de dragul pastrarii simplitatii nu ma voi opri la el.
IE Box Model
Modul de calculare la IE Box Model este similar cu cel de la W3C dar exista o importanta diferenta: padding si border nu sunt incluse in formula de calcul.
total width = margin-left + width + margin-right
Acest lucru semnifica ca daca elementelul HTML are si padding orizontal si/sau border-e suprafata se va micsora pentru a face loc acestor padding-uri si border-e.
Cum de rezolvat problema?
1. Evitarea situatiilor care cauzeaza problema
Acesta este modul meu preferat pentru rezolvarea problemei. Simplu, evit sa specific ambele proprietati width si padding sau border pentru acelasi HTML element. Acest lucru ne asigura ca toate browserele vor utiliza aceiasi lungime totala indiferent de box modelul pe care il folosesc.
Iata un exemplu al rezolvarii problemei prin metoda descrisa mai sus:
HTML Exemplu
<div id="news">
    <h2>News</h2>
    <ul>
        <li>
            <h3>Articol numarul 1</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <h3>Articol numarul 2</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
     </ul>
</div>
Pentru a face ca HTML lista aiba 250px width, border 1px, padding 10px, e nevoie de urmatorul cod CSS:
#news {
    padding:10px;
    border:1px solid;
    width:228px;
}
In browserele standarte, width total va fi 250px (1px border stinga, + 10px padding stinga  + width + 10px padding dreapta + 1px border dreapta). In IE 5.5 si versiunile mai vechi lungimea totala a blocului va fi doar 228px deoarece nu se adauga paddings si borders.
Deci cum se poate de evitat acest lucru? Se poate de pus div-ul cu id-ul news in alt container, in exemplul nostru sub forma de bloc lateral:
<div id="sidebar">
    <div id="news">
        ...
    </div>
</div>
In asa mod se poate de dat width la blocul sidebar:
#sidebar {width:250px}
#news {
    padding:10px;
    border:1px solid;
}
Deoarece #news este un element de tip block level, automat se va intinde pe  intreaga latime a elementului parinte, in cazul nostru #sidebar.

CSS Tip Nr. 2. CSS Postioning in citiva pasi.

In acest post, voi descrie diferite proprietati ale layout existente in CSS: position:static, position:relative, position:absolute, si CSS float.

1. position:static
Pozitionarea implicita a tuturor elementelor HTML este position:static, ceia ce inseamna ca elementul in realitate nu este pozitionat si apar in documentul  HTML unde vor, sau sunt impinse.
In mod normal n-am dori sa specificam aceasta regula CSS, numai cu exceptia cind dorim sa suprascriem regula unei pozitionari care a fost stabilita anterior.
CSS Exemplu:
#container {
   position:static;
}  

2. position:relative
Daca specificam position:relative, atunci putem folosi: top, bottom si left, right pentru a muta elementul HTML unde normal am dori sa apara.
Urmatorul exemplu va demonstra cum putem muta un HTML element in jos cu 20px, si la stinga  cu 40px.
CSS Exemplu:
#container {
 position:relative;
 top:20px;
 left:-40px;
}  

CSS Tip Nr. 1. Resetarea stilurilor cu CSS Reset

Aceasta este prima parte din seria de articole mentionate in postarea precedenta, in care voi vorbi despre sfaturi si practici in CSS care va vor ajuta la optimizarea lucrului.
Astazi, o sa ating tema resetarii stilurilor CSS. Resetarea stilurilor CSS, denumit in mod obisnuit CSS Reset sau Reset CSS  este procesul de resetare, sau mai bine zis de setare a stilurilor elementelor la o valoare initiala astfel incit sa evitam valorile implicite care le pun browserele HTML elementelor.
CSS Reset evita neconcordantele dintre browsere
De exemplu, folosim o ancora <a> in HTML document. De obicei browserele cum ar fi Firefox sau Internet Explorer afiseaza aceste ancore cu culoare albastra si subliniate. Dar, in urma cu citiva ani cineva crease un browser,nu le-a placut modul traditional de afisare a linkurilor asa ca au fcut ca ancorele sa fie de culoare rosie si fontul: bold. Daca vom folosi tehnica CSS Reset si vom alege noi valorile initiale a elementelor vom evita in asa mod surprizele neplacute pe care ni le ofera browserele prin afisarea unor linkuri de culoare rosie si fontul bold :)
Un simplu exemplu:
Cum sunt afisate paragrafele: <p> in browsere. Am plasat intr-un container div trei pargrafe carora nu le-am setat nici un stil CSS, doar containerului iam setat backgroung si border astfel ca sa fie evidentiat mai bine diferentele, priviti in imagine neconcordantele dintre 2 browsere:












Implicit, in Firefox este setat un spatiu intre primul rind al paragrafului si container. In Internet Explorer acest spatiu lipseste!
Deci, apare intrebarea: care browser afiseaza mai corect? Raspunsul: NU Conteaza! Conteaza doar faptul ca in dependenta de browser, daca nu folosim CSS Reset, pagina se va afisa in mod diferit si astfel nu mai avem cross browsing pentru pagina data. Normal, ca exemplul cu paragrafele este unul trivial, in realitate astfel de cazuri sunt mult mai multe, padding, margin, line-height si alte atribute sunt cauza pentru care pagina arata diferit de la browser la browser.

CSS reset, de unde a inceput...
Conceptul de CSS Reset a fost prima data pomenit cu mult timp in urma(pe cind inca dinozaurii traiau in Internet) de catre Andrew Krespanis intr-un articol de-al sau in care sugera de a utiliza un CSS selector universal la inceputul fisierului de stiluri pentru a selecta toate elementele si de a le atribui margin, padding: 0.
Cam asa ceva:

* {
  margin: 0;
  padding: 0;
} 
Selectorul universal (*) actioneaza ca un model, ca o expresie regulata in programare.
Astfel incit * nu este precedat de alt selector, toate margin si padding le sunt atribuite valoarea 0. Aplicind acest selector cu valorile salede mai pentru exemplul cu paragraful, o sa obtinem lichidarea spatiului dintre conatiner si paragraf.
Odata ce am scapat de spatiile neconsistente, putem sa trecem la stilizarea paragrafelor(ca sa nu ne departam de exemplu) asa cum dorim:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; } 



La scurt timp dupa Andrew Krespanis, un alt guru CSS, Eric Meyer a continuat dezvoltarea conceptului de CSS Reset pentru margins si paddings, pentru ca mai apoi sa cuprinda si line-height, font styles si list styles
Sfaturi pentru aplicarea CSS Reset
1. Incepeti prin a va decide cum, si stilurile caror elemente anume au nevoie de a fi resetate.
2. CSS Reset trebuie sa fie primul lucru pe care browserul trebuie "sa-l vada".
3. Creati un fisier CSS aparte pentru CSS Reset.
4. Evitati pe cit posibil utilizarea selectorului universal
5. Evitati redundanta stilurilor din CSS Reset si celelalte stiluri.

CSS 15 Articole - de stiut pentru incepatori. Intorducere

Urmatoarele postari pe blog vor fi 15 articole care eu am considerat ca trebuie citite si stiute de orice incepator CSS. O sa ma stradui sa le expun in decursul saptaminii viitoare. Dupa aceasta o sa ma redirectionez deja spre JavaScript si JQuery. Totusi nu o sa uit de CSS si HTML, iar daca cineva are intrebari la aceste tehnologii si nu numai, scrieti-le in comentarii, imi va face mare placere sa va ajut.
Cu timpul o sa ma stradui sa-mi sistematizez materialele postate pe blog, poate o sa trec la un domen comercial, dar aceasta cu timpul :) Pina atunci, lectura placuta, si astepta intrebarile voastre.