Dark Wood

De mult timp, webmasterii  se chinuie sa optimizeze site-urile web pentru invechitele IE6 si IE7. La inceputul anului erau circa 20% utilizatori de IE6, pentru ca in momentul de fata sa mai ramana 17%. Vestea buna este ca, incepand cu 15 septembrie 2010, se lanseaza Internet Explorer 9, ocazie cu care Facebook va sista suportul pentru IE6!
Cu toate vestile bune, momentan inca trebuie sa ne consumam nervii cu variantele vechi de Internet Explorer. Asa ca, in randurile ce urmeaza, vom aborda cateva metode de “pacalit” cele doua versiuni de browsere.
Prima metoda, cea clasica, are de a face un css separat, pentru IE6 in special. Se creea un fisier css diferit (explorer.css de exemplu) si se integra cu bine cunoscutul cod:

<!–[if IE 6]>

<link rel=”stylesheet” type=”text/css” href=”css/explorer.css” />

<![endif]–>

Metoda functioneaza perfect si pentru IE7 sub forma:<!–[if IE 7]> …etc. etc.
Insa mult mai la moda pare sa fie, in ultima vreme, metoda hack-urilor integrate direct in css-ul “de baza”. Spre exemplu, multe probleme in css sunt provocate de faptul ca uneori, IE6 “dubleaza” proprietatea “margin”.
De exemplu:
#nume_div{width: 100px; height: 100px; float: left; margin-right: 10px;}
In anumite cazuri, IE6 va calcula proprietatea margin-right ,din exemplul de mai sus, la valoarea de 20 px. Ei bine, in acest moment avem o problema, care poate fi rezolvata , totusi, foarte usor:
#nume_div{width: 100px; height: 100px; float: left; margin-right: 10px; _ margin-right: 5px; }
Explicata e simpla: proprietatea css scrisa cu underscore in fata este interpretata numai de IE6. In cazul de fata, am pus margin-right la jumate din valoarea initiala, pentru ca site-ul sa se afiseze correct in browser.
Daca problemele apar in IE7, atunci hack-ul se schimba putin:
#nume_div{width: 100px; height: 100px; float: left; margin-right: 10px; * margin-right: 5px; }
In loc de underscore vom folosi steluta, dar atentie, acest hack actioneaza si asupra IE6, suprascriind proprietatile cu underscore in fata:
#nume_div{width: 100px; height: 100px; float: left; margin-right: 10px; _ margin-right: 5px; * margin-right: 8px;}
In cazul exemplificat mai sus, in care sunt folosite cele doua hack-uri concomitent, proprietatea margin-right va lua valoarea data de steluta, adica 8 px.
Totusi sunt rare ocaziile in care un webmaster se va vedea nevoit sa foloseasca ambele hack-uri deodata, asa ca nu va ramane decat sa le folositi pe rand.
Atentie! Folositi-le numai cand situatia o impune neaparat, si nu faceti abuz de ele! Mai trebuie retinut ca un astfel de css nu se va mai valida xhtml.

Spor la treaba si la web design!

Efectul PowerClip se refera in principal la posibilitatea de a folosi o forma vectoriala drept container, in care sa introducem unul sau mai multe elemente grafice, ca in exempul de mai jos, unde am introdus o poza in steaua vectoriala.

Pentru a realiza asa ceva in Corel, sunt necesari urmatorii pasi:
Dupa ce am adus cele doua elemente pe scena, selectam obiectul ce trebuie adus in container, in cazul de fata poza. Dupa ce l-am selectat, mergem la meniul “Effects”, “PowerClip”, si apoi selectam optiunea “Place Inside Container…”.

Imediat cursorul mouse-ului se va transforma intr-o sageata neagra, pe care o vom aduce deasupra containerului, unde vom da un click.

Dupa ce ati facut acest lucru, se poate ca poza sa dispara si sa ramana doar steaua goala. Acest lucru se datoreaza unei setari a Corelului, care va lasa sa alegeti daca obiectul introdus in container va fi centrat cu acesta automat sau nu. Pentru a modifica setarea, intrati in meniul “Tools”, apoi selectati “Options”. Va va aparea o caseta cu niste optiuni in partea stanga. Alegeti “Edit” si va va aparea setarea. Bifati sau debifati optiunea “Auto Center new PowerClip contents” dupa cum doriti.

Daca ati bifat casuta, poza se va centra automat cu containerul. Daca nu, trebuie sa o “cautam” in acesta. Pentru asta selectati containerul si dati click dreapta;

din meniul care apare, pe noi ne vor interesa doar primele trei optiuni:
- “Extract Contents” va extrage din container poza;
- “Edit Contents” va scoate la iveala poza si va afisa si conturul containerului. Acum puteti aseza poza in power clip dupa cum doriti (eu am asezat-o la jumatate ca sa se vada si containerul). Cand ati terminat apasati pe butonul “Finish Editing Object” din stanga jos. Atentie, cand modificati ce este in container nu veti putea edita containerul in sine, decat cand ati terminat.

- “Lock Contents To PowerClip” are rolul de a lega containerul si continutul atunci cand le redimensionati.
In incheiere trebuie retinut ca se pot include un container in altul, creand astfel un numar de nivele cu care puteti “jongla”, desi nu recomand mai mult de trei.

Spor la treaba si la web design!