Categorie: CSS

Selectivzr

Selectivzr este o biblioteca JavaScript realizata de Keith Clark care simuleaza pseudo-clasele CSS3 si selectorii de atribute in versiunile de la 6 la 8 ale IE. Printre multitudinea de utilizatori sunt site-uri celebre precum Dixons, Audio-Boo si MagCloud.

Pentru a configura Selectivzr, trebuie sa incarcati o biblioteca JavaScript existenta ca jQuery, MooTools sau Dojo si sa amplasati scriptul in elementul head al paginii intr-un comentariu conditional astfel incat sa fie incarcat doar pentru Internet Explorer. Avand 5kb compresat nu o sa adauge mult paginii dumneavoastra, insa ganditi-va ce inseamna sa includeti si o biblioteca daca nu aveti una incarcata.

Din nefericire, la momentul actual, nu simuleaza toti selectorii sau combinatorii de atribute pe care i-am discutat in acest articol a...

Vezi articol

Taguri si dojoType

Motorul de procesare a sabloanelor din Dojo va permite sa obtineti o functionalitate avansata fara a scrie nici un fel de JavaScript. Pur si simplu includeti fisierul de baza dojo.js in antet si cereti orice fisiere JavaScript suplimentare necesare pentru ca widgeturile de sabloane sa functioneze. Apoi creati elemente HTML cu atribute dojoType si oferiti atribute configuration daca este necesar. Pe masura ce Dojo proceseaza documentul HTML, converteste toate elementele intr-o interfata decorata cu widgeturi. Este de asemenea o modalitate nemaipomenita de a crea widgeturi care trebuie sa fie configurate cu date pe partea de server, cum ar fi un calendar cu o data preselectata sau un editor de text avand continut extras dintr-o baza de date.

Totusi, odata cu constientizarea tot mai mare a b...

Vezi articol

Tranzitii si transformari

Transformarile rotesc, redimensioneaza, translateaza si distorsioneaza elementele. Tranzitiile definesc un comportament pentru a trece de la o stare la alta(w3.org/tr/css3-transitions). Iar animatiile folosesc cadre cheie pentru a modifica multiple proprietati de-a lungul unui interval de timp(w3.org/tr/css3-animations).

Tranzitii

transition: <proprietate><durata><functia de atenuare><durata>

Exemplu: cand opacitatea se modifica(de exemplu, la hover de la 0,5 la 1 sau inapoi), face tranzitia de la o valoare la urmatoarea, in mod liniar, pe parcursul a 50 ms:

-webkit-transition: opacity 50ms linear;

-moz-transition: opacity 50ms linear;

Transformari

transform: <functia de transforamre>[<functia de transformare>]

Aveti la dispozitie un numar de functii de transformare, cele mai folositoare f...

Vezi articol

Sintaxa interogarilor despre mediul de prezentare

O interogare despre mediu acopera un anumit mediu de prezentare pe care multi il cunoastem atunci cand folosim¬† type=”screen” sau type=”print” pentru a atasa fisierele de stiluri. Interogarea despre mediu adauga caracteristici logice acestor tipuri de medii de prezentare si in efect ne permite sa cream declaratii conditionale – precum cele relative la dimensiunea ecranului unui dispozitiv pe care este afisata pagina.¬† Atunci cand aceste declaratii sunt adevarate, sunt aplicate regulile de stil continute in interogare. Interogarile despre mediu au urmatoare sintaxa:

@media[not|only] type [and] (expression) }

rules;

}

Sa examinam dclaratia in detaliu: cuvantul cheie not (optional) neaga interogarea, practic spunand “daca ceea ce urmeaza nu este adevarat, aplica aceste stiluri”. Cuvantul n...

Vezi articol

Sfaturi pentru scrierea CSS

  • Scrieti HTML semantic rational si folositi denumiri logice pentru proprietatile class sau id
  • Pastrati-va curat codul CSS
  • Folositi refactoring ori de cate ori este nevoie
  • Stergeti imediat codul CSS de care nu mai aveti nevoie
  • Alegeti un stil pt CSS si folositi-l consecvent
  • Evitati definirea aceluiasi lucru de doua ori(de exmplu, intr-un a si a:hover)
  • Daca ati facut ceva un pic mai inteligent scrieti un comentariu pentru a explica(altcineva ar putea edita acest lucru in viitor)
  • Definiti cea ce puteti pe cel mai larg selector cu putinta si apoi fiti din ce in ce mai specific pe masura ce inaintati in structura de HTML.
Vezi articol