Cum să faci un site compatibil cu toate browserele populare

Ştim cu toţi avantajele de a avea o pagină web compatibilă cu toate browserele. Cu toate acestea, puţin web-designeri reuşesc să facă site-uri compatibile cu majoritatea browserelor populare.

Cauzele pentru lipse de compatibilităţi sunt multe:

  1. browsere proaste (multă “sănătate” creatorilor Internet Explorer)
  2. webdesigneri lipsiţi de experienţă (se lucrează pe bani puţini de obicei, cei buni preferă să se reprofileze şi astfel munca ajunge să fie făcută de persoane lipsite de experienţă)
  3. ignorarea standardelor şi  abuzarea de dirty trick-uri în design

Daca punctul 1 nu ţine de programator, şi nu se poate face mare lucru, restul cauzelor pot fi uşor înlăturare. De aceea, am să descriu paşi pe care eu îi urmez pe parcusul creării unui design html compatibil cu toate browserele.

1. Standardele W3C

Toţi cei care lucrează ca designeri web au pretenţia ca browserele să le citească gândurile şi să afişeza paginile create aşa cum vor ei, toate aste fără ca ei să ţină cont de regulile limbajului. Atunci când tu nu îţi validezi pagina, de ce ai pretenţia ca browserul să se comporte exemplar?

Din punctul meu de vedere, nu poţi da vina pe browser cât timp pagina ta nu e validă. Chiar dacă erorile nu ţin neapărat de eroarile tale. E o chestie de bun simţ şi după ce o să începi să o aplici o să conştientizezi multe din greşelile pe care le faceai fără să-ţi dai seama. Un motiv în plus, e faptul că e foarte uşor să crezi o pagină cu cod valid dacă eşti foarte puţin atent pe parcusul dezvoltării.

Mulţi preferă să îţi valideze paginile după ce au terminat de creat. Lucru pe care nu-l recomand nimănui, mai ales celor care sunt la început cu studiul standardelor. E foarte greu să validezi un cod gata creat, modificările pe care trebuie să le faci s-ar putea să necesită multă muncă.  Aşa că cel mai simplu e să-ţi validezi codul pas cu pas pe parcusul scrieri codului. Lucru deloc complicat, dacă ai instalat Html Validator. O să ai în permanenţă o iconiţă în bara de status a browserului care te avertizează când scrii prostii. Plus că îţi oferă nişte features extra în fereastră de vizualizare a codului sursă (înclusiv lista cu erorile descoperite şi explicaţi / sfaturi cu privire la fiecare eroare). So… creare de cod valid e joacă de copil cu extensia asta instalată.

2. XHTML sau HTML

Dilema asta are legătură punctul anterior, dar o consider destul de importantă aşa că merită să fie evidenţiată.
Momentan, în webdesing există trendul XHTML. Toată lumea e super mega încântată de acest standard dar uită nişte detalii. Nu are rost să dezbat problema care a fost dezbătută acum mult timp de către alţii. Detalii găsiţi aici. Ideea de bază e că de multe ori XHTML vine la pachet cu câteva issues pe care mulţi nu le ştiu, şi în practică nu ai nevoie de XHTML, putând folosi la fel de bine limbajul HTML corect formatat.

Personal recomand folosirea standardului HTML 4.01 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Sintaxa este la fel ca cea de la XHTML, exceptând faptul că în secţiunea head nu se mai închi tag-urile gen link. Adică în loc de <link … /> o să folosiţi doar <link …>.

Regulile CSS sunt aplicate cu aceiaşi stricteţe ca şi la doctype-ul xhtml, asta ca să nu las loc de întrebare pentru cei care folosesc doctype-ul de xhtml din cauza asta.

3. CSS Reset

Toţi ştim că valorile default la atributele CSS diferă de la browser la browser. Aşa ca un CSS Reset te ajută să le aduci la un numitor comun. În plus de asta, te obligă uneori să defineşti unele atribute în mod express. De exemplu atributul margin la paragrafe este 0, şi dacă vrei ca textul tău să arate frumos, o să trebuiască să-l defineşti tu. În caz că nu foloseai CSS Reset, erai tentat să laşi valoare default, care diferă foarte mult de la browser la browser.

De asemenea te scuteşte de multe probleme de design apărute din cauza valorilor default a unor browsere. Exemplu: cine se gândea că tag-ul <form> are margin în IE? Adică un element invizibil care îţi strică designul şi pierzi o grămadă de timp să vezi care e buba.

Până acum am folosit numai CSS Reset-ul oferit aici. Se găsesc pe net mai multe variante, dar majoritatea au la bază acest css reset.

4. Probleme specifice Internet Explorer 6

Din toată familia de browsere Internet Explorer, cea mai veche versiune demnă de luat în calcul e Internet Explorer 6. Versiunile mai vechi chiar nu cred că mai sunt folosite, din moment ce Internet Explorer 6 vine gata instalat pe Windowx XP, deducem că ar trebui să ai Windows ’98 sau Millenium care vin cu versiuni mai vechi de Internet Explorer, ceea ce e foarte puţin probabil. Utilizatorii de Internet Explorer pe Mac nu cunosc, au deja Safari, nu văd de ce ar mai folosi Internet Explorer.

Dintre toate versiuniele 6, 7 şi 8, versiune 6 e cea mai problematică pentru designeri. Nu cunoaşte multe reguli de CSS, si cel mai grav nu afişează PNG-urile corect. Probleme însă sunt destul de vechi, şi între timp s-au descoperit rezolvări la majoritatea din ele, de exemplu:

  • PNG Fix: aici există mai multe soluţii, eu folosesc varianta asta. am observat că mai există şi alte metode, unele chiar puţin mai elegante aparent, dar nu am testat nimic altceva până acum, aşa că nu pot să recomand. Dacă ştiţi alternativă mai bună la asta, vă rog să-mi spuneţi.
  • min-height: printre tagurile nerecunoscute de IE 6 se numără şi acesta. Cea mai simplă şi elegantă soluţie pentru a rezolva lipsa acestui atribut e codul de mai jos, care se bazează pe faptul că IE6 nu ştie de !important şi că el redimensionează automat containerul chiar dacă are height-ul setat:
    • min-height: 100px;
    • height: auto !important;
    • height: 100px;

Dacă o să-mi mai amintesc, o să mai notez aici şi alte soluţii găsite pentru problemele Internet Explorer 6.

Şi ca să nu termin în ton pesimist acest capitol, menţionez că sunt mulţumit de felul cum Internet Explorerul se descurcă cu poziţionările absolute şi relative. Nu ştiu de ce, dar aveam o impresie foarte proastă despre el la capitolul ăsta. Se pare că nu e chiar aşa.

5. Testarea

Un lucru foarte important şi des neglijat sau făcut în grabă este testarea. Este foarte important să verifici designul în toate browserele cât mai des. După fiecare bucată de cod scrisă trebuie să testezi. Ştiu că pare un proces mâncător de timp, dar te scuteşte de timp pierdut cu debugging-ul atunci când apar probleme. De ce zic asta? Pentru că atunci când apare o eroare, eşti sigur că este în bucata de cod scrisă de la ultima testare. Cu cât testezi mai des cu atât bucata aia de cod va fi mai mică, deci econimiseşti timp cu căutatul erorii.

Ordine de testare, adoptată de mine este următoarea:

  1. Firefox: browserul de bază, aici testez prima dată codul scris. Nu încep testele în alte browsere înainte să meargă bine. De asemenea tot aici trebuie testată şi validitatea codului înainte de a merge mai departe cu testele.
  2. Internet Explorer, cele 3 versiuni importante: 6,7 şi 8
  3. Chrome – până acum nu am avut deloc probleme cu aici.
  4. Opera
  5. Safari, deşi nu mai este neapărat nevoie, din moment ce împarte acelaşi engine ca şi Chrome.

6. Don’t

Lucruri pe care nu ar trebui să le faci, atunci când dezvolţi o pagină compatibilă cu toate browserele este să scrii cod separat pentru fiecare browser în parte. Cei care fac acest lucru abuzează de conditional comments recunoscute de Internet Explorer pentru a rescrie aproape tot CSS-ul. Cea mai urâtă versiune de don’t design întâlnită folosea php ca să genereze cod html diferit pentru browserele cu probleme.

De asemenea, trebuie evitate dirty trick-urile. Încercaţi să scrieţi numai cod valid. Evitaţi probleme folosind tehnici elegante, cum este cea prezentată mai sus cu min-height. Nu folosiţi w_idth ştiind ca IE îl recunoaşte pentru a da dimensiuni diferite pentru IE.

De când am început să folosesc CSS Reset nu am mai folosit conditional elements şi nici un alt trick pentru a trata diferit browserele. Singura utilitate a conditional comments e folosirea PNG FIX-ului în Internet Explorer 6.

7 thoughts on “Cum să faci un site compatibil cu toate browserele populare”

  1. Foarte foarte bun articolul, bravo! Cu toate ca personal as sugera oricui ma intreaba sa nu ofere suport pentru ie6 ca deja e prea mult. o atentionare ca ie6 nu e suportat si gata.

  2. Mersi pentru încurajări.

    Şi eu făceam la fel cu IE 6, dar dacă o să urmezi tot ce am scris aici ai să observi că nu e deloc mare lucru să faci lucrurile să meargă şi pe IE6. Cu puţină răbdare la început şi ambiţie o să capeţi puţină experienţă şi în domeniul IE 6, şi o să te miri de ce nu îţi ieşeau lucrurile înainte.

  3. Primul pas: sa refaci toate paginile care ti le-a dat designerul gata taiate 🙂

    Cuprinzator articolul, desi, uneori, comentariile conditionale sunt recomandate ( vezi opacity versus Filter(alpha) )

  4. Primul pas, după mintea mea, e să concediezi designerul care face aşa ceva, sau măcar să-i zici să se rezume strict la partea grafică. Eu am făcut multe design-uri de la zero deşi se presupune că le-am primit gata făcute.

    Opacity e încă la început de drum momentan în webdesign. O să mai dureze până o să fie adoptat ca standard în toate browsere. Eu pentu aşa ceva folosesc jQuery, şi dacă e vorba doar de background-uri, PNG Fix-ul amintit mai sus îşi face treaba cu succes.

  5. Am tot discutat si eu despre acest subiect si intr-adevar este greu sa faci un website compatibil cu Internet Explorer 7,8 si chiar 9. Am preferat sa fac un redirect catre o pagina in care explic care este problema cu browser-ul si link-uri catre descarcare Firefox, Chrome, etc.

    Am intrat pe site-ul tau cu Internet Explorer 8 si se vede ciudat. Ar trebui sa faci acelasi lucru, un redirect catre o pagina secundara doar pentru IE7, 8 si 9.

    1. Nu cred că greu este cuvântul potrivit. E nevoie doar de mai mult timp. Articolul este destul de vechi, dar ideea de bază e încă valabilă (din punctul meu de vedere). Dacă testezi în IE pe parcusul dezvoltării, o să fie mult mai ușor de rezolvat problemele. Majoritatea preferă să dezvolte tot în Chrome/Firefox, apoi să testeze și în celălalte browsere. În felul ăsta problemele din IE sunt cu mult mai greu de identificat și reparat.

      În legătură cu redirectul pe care-l faci tu. Cred că o soluție mai elegantă, și pe care aș prefera eu să o folosesc este browser-update.org.

      Și în legătură cu tema blogului în IE8, am testat și eu și nu văd ce crezi tu că se vede ciudat.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.