Tehnici Web

Nu esti logat.

Laboratorul 3

(Deadline: 10.12.2017 23:59:59)

Daca nu sunteti logati exercitiile nu se mai afiseaza.

Daca nu sunteti logati exercitiile nu se mai afiseaza.



CSS - continuare

Countere si continut generat

Counterele sunt un fel de variabile interne CSS, care, dupa cum le spune si numele, sunt folosite pentru a numara aparitiile anumitor elemente, dupa cum se va vedea. Consideram codul CSS care numara paragrafele de pe pagina, si inaintea fiecarui paragraf afiseaza un text de forma "paragraful nr_paragraf:":
body{
counter-reset: c1;
}
p:before{
counter-increment:c1;
content:"paragraful " counter(c1) ":"
}

Proprietatea counter-reset reseteaza counterul c1 la valoarea implicita 0. Valoarea la care se reseteaza un counter poate fi si precizata, de exemplu counter-reset:c1 2; va seta counterul la valoarea 2.

Proprietatea counter-increment creste in mod implicit cu 1 valoarea counterului pentru fiecare element intalnit in pagina care se potriveste cu selectorul in cadrul caruia apare proprietatea. Valoarea cu care creste un counter poate fi si precizata, de exemplu counter-increment:c1 3; va creste valoarea counterului cu 3. Atat in cazul valorii initiale cat si in cazul valorii precizate pentru incrementare se pot da si numere negative.

Pseudoelementele :before si :after sunt un fel de elemente care apar inainte, respectiv dupa elementul precizat in selector, care se comporta ca niste elemente fii ale acestuia (primesc proprietatile care pot fi mostenite) si au implicit un mod de afisare inline. Ele pot introduce text in cadrul paginii (asa-numitul generated content) care nu apartine html-ului, e generat de CSS. Aceasta se realizeaza cu proprietatea content specifica lor. Acesta propietate poate primi ca valori (separate prin spatii pentru a fi concatenate): siruri de caractere ori apeluri ale functiilor counter, counters, attr si url. Mai pot avea si cateva valori referitoare la tipul de ghilimele folosit. Mai multe despre aceasta proprietate puteti citi pe w3schools. In content nu pot fi inserate taguri html si nici codificarile specifice html pentru caracterele speciale. Totusi pentru caracterele speciale se pot folosi codurile unicode cu caracterul "\" inainte. De exemplu:

p:after{
content:"\00AE"
}
Va pune dupa fiecare paragraf simbolul ®.

Asezarea in pagina, layouturi

Proprietatile float si clear

Proprietatea float are efect pentru elemente de tip bloc, inclusiv imagini (pentru elemente inline nu functoneaza, cum ar fi elemente span, q, i, b etc.) pozitionate static sau relativ si are rolul de a face elementul sa se alinieze la stanga sau la dreapta. Restul continutului se va mula pe langa elementul asupra caruia s-a aplicat float. exemplu_float_simplu.html Surse: http://webdesign.about.com/od/advancedcss/a/aa010107.htm

Tipuri de layouturi


Comentarii conditionale

Au o forma asemanatoare cu comentariile HTML. Sunt interpretate doar de catre Internet Explorer. Sunt folosite pentru a indica faptul ca pentru una sau mai multe versiuni de InternetExplorer se va afisa textul incadrat de ele.

Exemplu:

<!--[if IE 7]>
Ai un browser IE, versiunea 7.
<![endif]-->
<!--[if IE]>
Ai un browser IE.
<![endif]-->
<!--[if gt IE 6]>
Ai un browser IE de o versiune mai mare decat 6
<![endif]-->
<!--[if !IE]> -->
Alt browser decat IE
<!-- <![endif]-->

In general sunt utilizate in stilizare pentru a indica un anume still css pentru o anume versiune de Internet Explorer. Aici aveti un exemplu.

Despre comentarii conditionale puteti citi mai multe la: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
http://reference.sitepoint.com/css/conditionalcomments

Pana unde este bine sa mergem cu compatibilitatea?

Observati statisticele w3schools pentru browserele utilizatorilor care le-au vizitat site-ul: http://www.w3schools.com/browsers/browsers_stats.asp. Pentru detalii asupra versiunilor fiecarui browser, folositi meniul din stanga. Observati versiunile folosite pentru Internet Explorer. Ce detaliu trist intrezariti acolo? (pe ultima coloana)

Idei interesante de aplicat pentru a asigura compatibilitatea intre browsere(in special pentru versiunile vechi de browsere):
http://reference.sitepoint.com/css/workaroundsfilters
http://reference.sitepoint.com/css/hacks