Astăzi, să ne uităm la câteva tehnici practice pentru scrierea de CSS mai frumoase, corecte și mai rapide. Articolul va discuta despre utilizarea proprietăților scurte, a haldelor globale, a barelor de instrumente și a unor scripturi utile care vă vor face viața mai ușoară.
Proprietăți scurte
Dacă valoarea culorii este formată din trei perechi de simboluri identice, această valoare poate fi redusă la trei caractere.
Valoarea unor astfel de valori ca padding sau marginea poate fi setată diferit. Există oameni care scriu astfel:
Este lung și urât. Puteți specifica mai multe valori simultan și există mai multe moduri de a face acest lucru.
Apropo, puteți folosi cuvântul TRouBLe (Top, Right, Bottom, Left) pentru a vă aminti cu ușurință ordinea din ultima versiune.
Să presupunem că ați stabilit un accident vascular cerebral pentru un element ca acesta:
Toate aceste lucruri pot fi reduse astfel:
Cu un fundal există o astfel de situație:
Toate acestea pot fi cazate într-o singură linie:
De asemenea, este important să rețineți că, dacă specificați două valori de coordonate, trebuie să urmați una după alta. În acest caz, dacă utilizați em, px sau procente, atunci valoarea orizontală este prima.
Puteți face o mică bucată:
Aici din această descriere:
Puteți face acest lucru:
Descărcări globale și cutii de instrumente
După cum știți, valorile implicite ale câtorva proprietăți în CSS diferă de browserul de la browser și aceasta este o durere de cap constantă pentru codoarele HTML (fără a include IE, care este doar un fragment mare într-un singur loc). Pentru a repara acest lucru a fost inventat așa numitul "Resetare CSS" (Resetarea CSS). Primul și cel mai faimos dintre ele a fost propus de expertul recunoscut pe CSS Eric Mayer. În plus, am scris deja despre erori globale, astfel încât să puteți examina alte exemple.
Acum, luați în considerare căsuțele de instrumente. Aproximativ vorbind, acesta este un set de stiluri pe care le utilizați cel mai adesea atunci când faceți planuri. De exemplu, luați în considerare o mică casetă de instrumente de la CSS Tricks.
Este de dorit să aveți propriul set de instrumente - deci este mai convenabil și mai bun.
Clase pentru browsere și OS
Din nou, știm cu toții că unele proprietăți CSS sunt afișate diferit în diferite browsere. Ce să remediezi, folosiți diverse hack-uri CSS.
Dar recent, pe Habré a apărut o soluție excelentă care vă permite să definiți stiluri pentru orice browser sau sistem de operare.
Și acum avem clase pentru sisteme de operare:
- .win - Windows;
- .linux - Linux;
- .mac - MacOS.
Și clase pentru browsere:
- .adică - toate versiunile IE;
- .ie8 - IE 8.x;
- .ie7 - IE 7.x;
- .ie6 - IE 6.x;
- .ie5 - IE 5.x;
- .gecko - toate versiunile de firefox și alte geo-browsere;
- .ff2 - firefox 2;
- .ff3 - firefox 3;
- .opera - toate versiunile operei;
- .opera8 - opera 8.x;
- .opera9 - opera 9.x;
- .konqueror - konqueror;
- .safari - safari.
Asta este, dacă doriți să faceți un text roșu pentru un safari sub Windows, atunci trebuie să scrieți astfel:
Compresie CSS
După ce ați scris CSS frumos, este timpul să-l diminuați. Acest lucru vă va permite să reduceți ușor traficul dintre server și browser și, prin urmare, să accelerați încărcarea paginii.
De exemplu, Temporary .net colectează automat toate fișierele CSS (avem 4 dintre ele) și le comprimă utilizând biblioteca CSSMin.
Articole similare
Trimiteți-le prietenilor: