Tehnici Web

Laboratorul 3

(Deadline: -)

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 ®.

Pozitionare

Exemple pentru pozitionari:

Z-index

Z-index-ul este practic coordonata pe axa Oz, care are directie perpendiculara pe ecran si e orientata cu sensul pozitiv spre utilizator. Astfel, cand avem doua obiecte care se suprapun, cel cu z-indexul mai mare va fi considerat mai in fata si va aparea deasupra celuilalt. Proprietatea z-index este ignorata cand este aplicata elementelor statice. In cazul in care avem un element container cu z-index precizat, care contine un element-fiu, elementul fiu nu va putea fi pozitionat sub elementul container (oricat de mic i-am pune z-indexul). Daca elementul container nu are z-indexul precizat(sau nu e luat in considerare din cauza ca avem containerul pozitionat static), atunci elementul poate fi pozitionat dedesubtul acestuia (de exemplu cand avem o imagine intr-un paragraf, si ii punem postion:relative si o plasam deasupra unei portiuni de text, daca ii punem z-index:-1 va aparea sub textul paragrafului container).

Pentru a intelege mai bine tipurile de pozitionari si z-index-ul, intrati pe pagina: http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

Tranzitii

Tranzitiile se pot aplica numai in cazul in care avem un element care are doua stari posibile (cea generala, statica, si cea determinata de aparitia unui eveniment din cadrul celor simbolizate de pseudoclase(de exemplu :hover).

http://www.css3.info/preview/css3-transitions/
Exemplu tranzitie

At-rules

http://www.htmldog.com/guides/cssadvanced/atrules/

Animatii, regula @keyframes

In CSS3 se pot realiza animatii cu ajutorul regulii @keyframes. La scrierii acestei pagini, animatiile functioneaza in firefox, chrome, opera, safari, dar nu si in Internet Explorer (probabil vor functiona intr-o versiune ulterioara). Forma generala pentru definirea unei animatii este:

@keyframes denumirea_animatiei
{
selector_temporal_1
{
prop_1:val1_1;
...
prop_n:valn_1;
}
... selector_temporal_n
{
prop_1:val1_n;
...
prop_n:valn_n;
}
}

Un selector temporal poate fi de forma: nr%, from(echivalent cu 0%) sau to(echivalent cu 100%). Acesta indica momentul din animatie cand elementele trebuie sa aiba proprietatile din setul de reguli corespunzatoare selectorului temporal. Animatia practic se realizeaza prin modificarea graduala a valorilor proprietatilor. Daca avem doua momente consecutive specificate in @keyframes, in cadrul carora avem proprietatea p:val1, respectiv p:val2(in al doilea moment de timp). Trecerea de la o valoare la alta a proprietatii se va face prin valorile intemediare dintre val1 si val2. Prin urmare nu orice proprietate CSS poate fi animata (lucru valabil si pentru tranzitii) ci numai cele care permit existenta acestor valori intermediare (in principiu, proprietati cu valori exprimate numeric). De exemplu de la text-decoration:overline nu prea avem cum trece gradual la text-decoration:underline, pe cand de la width:30px la width:70px, se poate (prin valori intermediare egal distantate in intervalul [30,70]).
O lista cu proprietatile care pot fi animate in CSS3 gasiti la http://oli.jp/2010/css-animatable-properties/.

Implicit, animatiile daca au un numar finit de iteratii, dupa ce se executa complet, elementul revine la starea statica indicata si deci nu ramane la ultimul frame al animatiei. Daca vrem sa ramana in starea indicata de ultimul frame (regulile de stil de la to sau 100%) folosim: -prefix-animation-fill-mode:forwards; unde prefixul este cel specific layout engine-ului folosit.

Regula @font-face

Cu ajutorul regulii @font-face puteti sa folositi si alte fonturi decat cele web safe, dar va trebui bineinteles sa faceti legatura cu fisierul de fonturi. Trebuie oferit fontul in mai multe formate pentru a asigura compatibilitatea.

Cum ne cream un font

De exemplu puteti folosi: http://fontstruct.com/. E un tool free, online, necesita insa inregistrare pe site. Dupa ce v-ati facut cont mergeti la opiunea FontStructor din meniu si acolo aveti editorul, apoi desenati fiecare litera si salvati din cand in cand (se salveaza la ei pe server). Dupa ce ati terminat, downloadati. Se va downloada un zip cu un licence, un readme si fontul efectiv in format ttf. Iata un exemplu scris cu fontul miau_font (da, stiu ca e urat dar l-am facut in graba). Div-ul care il cuprinde este contentediatble deci puteti scrie mai multe litere ca sa il testati. Nu are definite semnele de punctuatie, doar literele si cifrele. Observati ce se intampla pentru caracterele nedefinite.

Salut, acesta e un text scris cu un font custom.

(Nota: pe browserele mai vechi, care nu suporta CSS3 va aparea scris cu fontul default; sau daca s-ar fi specificat un alt font, web-safe, ca a doua optiune, ar fi aparut scris cu acel font).

Cand creati fontul acesta se va salva doar in format ttf, insa cum spuneam trebuie mai multe formate pentru compatibilitate. Acest lucru il puteti realiza cu ajutorul site-ului: http://www.font2web.com/. Veti incarca acolo fisierul ttf, si apoi veti downloada arhiva oferita. Aceasta contine fontul in formatele: eot, otf, svg, ttf, woff. De asemenea cuprinde si un fisier css generat automat, cu fontul vostru definit prin @font-face, si un fisier demo cu fontul respectiv.

Fisierul CSS, generat automat:
/** Generated by FG **/
@font-face {
font-family: 'Conv_miau_font';
src: url('fonts/miau_font.eot');
src: local('?'), url('fonts/miau_font.woff') format('woff'), url('fonts/miau_font.ttf') format('truetype'), url('fonts/miau_font.svg') format('svg');
font-weight: normal;
font-style: normal;
}

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