My ignorance is bliss

O noua tema de wordpress. La asta am lucrat putin mai mult dar a iesit si mult mai bine.
Acum cred ca ar trebui sa pun tema asta si tema veche pe o pagina diferita sa poata fi si descarcate..

Dupa o noapte de munca am reusit sa fac si eu prima mea tema de wordpress.
Nu e chiar asa de greu pe cat credeam dar e mai greu pana inveti cum functioneaza si ce anume genereaza functiile alea

Am testat doar in Firefox 3 si Internet Explorer 7. In IE6 nu am testat dar in mare parte ar trebui sa mearga!

Nu de multe ori am dat peste aceasta problema si nu de multe ori am vazut oameni in toata firea care plangeau din cauza nenorocitului de Internet Explorer 6 care adauga ceva pixeli in box model.

Si datorita “scurtelor” mele cautari pe net si nopti pierdute in fata unui monitor am gasit cateva metode de a rezolva aceasta mica problema.

Prima metoda inseamna ceva mai multa munca deoarece inseamna sa se scrie minim 3 variante de cod css pentru fiecare browser.
In header se introduce chestia asta:

<!--[if gt IE 6]>
   <link rel="stylesheet" type="text/css" href="ie7.css"/>
<![endif]-->
 
<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css"/>
<![endif]-->
 
<![if !IE]>
   <link rel="stylesheet" type="text/css" href="altele.css"/>
<![endif]>


Prima declaratie se refera la Internet Explorer 7 si care vor mai urma. A doua declaratie se refera la Internet Explorer 6 si mai mici, iar ultima varianta la Firefox, Opera sau altele.
Asa ca eu unul scriu un css pentru Firefox apoi in functie de erori fac modificari pentru IE6 si IE7.

A doua varianta care o folosesc mult mai des pentru ca e mult mai usor de folosit si chiar mult mai practica e sa scriu asa in codul css:


#bottomTxt {
  clear:left;
  width: 880px;
  margin: 5px 0px 0px 10px;
}
 
html>body #bottomTxt {
  clear:left;
  width: 880px;
  margin: 5px 0px 0px 20px;
}


Singura diferenta intre declaratii este ca la a 2-a am adaugat inca 10px pentru distanta din partea stanga.
Dar smecheria e ca IE6 nu cunoaste child-selectors deci nu citeste html>body ci doar #bottomTxt.
Deci prima declaratie este citita de IE6 iar a 2-a de IE7, Firefox si altele.

Aceste metode mi se par mult mai omenesti de folosit si nu prezinta la fel de multe pericole ca si hack-urile serioase de css si cel putin ultima varianta m-a scos din multe probleme.

Sper ca va e de folos… si daca mai stiti si alte trick-uri nu va fie teama sa le spuneti .

html, body {
  overflow: hidden;
}

Daca pui bucatica asta de cod in css-ul tau.. vrei observa ca bara de scrool ar browserului tau nu mai apare.. desigur ca exista beneficii si probleme.. dar asta e.

Gata.. eu unul m-am saturat sa tot vad asa numiti “designeri” sau “programatori” care inca mai folosesc frame-uri cand fac un site. Da au avut si ele vremea lor..dar gata.. de ajuns.. sunt cel mai rau lucru care poti sa il faci (pe langa utilizarea culorilor stridente si/sau folosirea prea multor animatii) site-ului tau.

Da.. sa zicem ca nu incarci aceeasi parte din cod (un meniu de exemplu) de mai multe ori dar e doar singurul avantaj.

Pe cand dezavantajele sunt mult mai multe. De exemplu atunci cand salvezi un link spre acea pagina ca bookmark sau sa il trimiti cuiva.. de fapt nu trimiti link-ul spre toata pagina ci spre frame-ul paginii incarcate.. si astfel vizitatorul paginii nu mai vede nici un meniu.. decat pagina din acel frame.. si daca vizitatorul nu stie unde este a plecat imediat in urmatoarea secunda..

O alta problema foarte importanta este cu motoarele de cautare. Odata ajuns crawlerul va vizita paginile site-ului si daca sunt facute link-uri bune paginile vor fi indexate. Dar problema e ca acele pagini vor fi indexate separat de frame-uri si atunci cand se va da click pe rezulatele obtinute pe pagina motorului de cautare vizitatorii nu vor vedea tot site-ul ci vor vedea doar pagina fara frame-uri, la fel ca si cu bookmark-ul. Si asta inseamna inca un vizitator dezorientat care cu siguranta va iesi de pe site.