Menținerea marcajului de cod CSS3 subțire
Dezvoltatorii web pot economisi o mulțime de timp utilizând o sintaxă CSS3 mai sofisticată. Utilizatorii care vizitează pagina dvs. așteaptă timpul de încărcare cel mai rapid posibil - ceea ce face ca dvs. să rămâneți responsabilitatea dvs. să păstrați dimensiunile fișierelor în jos. Există o mulțime de trucuri cu CSS și mai ales sub noul model CSS3.
Am prezentat câteva din aceste idei în ghidul de mai jos. Ar trebui să atingem și alte domenii, cum ar fi minificarea codului dvs. CSS. Există instrumente disponibile în browser pentru a ajuta dezvoltatorii în procesul de styling, dar doriți să combinați codurile scurte cu această reducere a dimensiunii de fișier pentru a eficientiza în cele din urmă procesul de redare a site-ului dvs..
Sfaturi de bază privind formatarea
Înainte de a intra în sintaxa CSS reală, vreau să trec subiectul Cum pentru a scrie CSS. Dacă sunteți puțin familiarizat cu designul web, ați văzut probabil o foaie de stil înainte, probabil mai mult de o dată. Prima parte a fiecărei comenzi este numită selector. Acesta vizează tipul de element care va primi stilurile adăugate în interiorul coastelor curl, de asemenea, cunoscut sub numele de proprietăţi.
Nivel inline
Cu stiluri inline fiecare proprietate este scrisă una după alta, cu doar spații pentru a le separa. Această metodă este aplicată cel mai bine selectorilor în care aveți nevoie doar de câteva proprietăți. Acesta vă va economisi spațiu în pagină și derularea prin foaia dvs. de stil va fi mult mai rapidă. În cazul în care nu ați mai întâlnit niciodată CSS inline, am adăugat un mic exemplu de mai jos care vizează legăturile HTML anchor.
a culoare: # 648cc8; font-weight: bold; a: hover culoare: # 739cda; text-decorare: nici unul; a.alt culoare: # bd4949! important;
Nivelul blocului
Pe de altă parte, proprietățile în stil bloc sunt introduse într-o singură linie pentru fiecare pereche de chei / valoare și sunt adesea indentate pentru editări mai rapide la scanarea codului. Aproximativ 99% din foile de stil mai curățate folosesc această formatare și a devenit un standard industrial pentru mulți designeri. Dacă selectorul dvs. folosește mai mult de 6 sau 7 proprietăți, aceasta este cea mai bună formatare de aplicat.
Când țineți cont de multe proprietăți noi CSS3, realizați și cât de repede se umple foile de stil. Și multe dintre aceste proprietăți acceptă copii specifice pentru browser, care necesită intrări de cod aproape dublu (cum ar fi raza de graniță). Puteți să verificați exemplul meu de set de proprietăți de bloc care vizează mai jos un eșantion de divizare a eșantionului.
.wrap afișare: bloc; padding: 6px 10px; fundal: #FFF; raza de graniță: 4 pixeli; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px;
Nici modul de scriere a CSS nu este în mod specific mai bun decât celălalt. În cele din urmă, este alegerea dvs. ca dezvoltator care stilul pe care îl preferați, și chiar acest lucru va fi în funcție de proiectul pe care lucrați. Este chiar comun să găsești CSS unde designerii au amestecat ambele împreună! Eu personal simt asta “funcționează în desfășurare” au tendința de a fi mai ușor cu stilurile de blocuri, deoarece examinez în mod constant foaia de stil pentru a face editări sau adăugiri. Dar pentru domenii grele de trafic, minificarea fișierului dvs. CSS este cel mai bun mod absolut de a merge.
Păstrarea lor subțire
Utilizând numeroasele coduri scurte disponibile în CSS3 puteți salva o mulțime de timp de dezvoltare. Editarea elementelor HTML va deveni mult mai ușoară pe măsură ce înțelegeți acest limbaj de economisire a timpului. În plus, codul dvs. va apărea mai curat și mai ușor de văzut.
Singurul dezavantaj este că nu toate browserele suportă pe deplin aceste proprietăți. Există soluții pentru multe dintre problemele existente, cum ar fi Internet Explorer și Netscape. Din fericire, Web-ul progresează întotdeauna și, pe măsură ce CSS3 crește în popularitate, vom avea, fără îndoială, și o creștere a compatibilității cu browser-ul.
Transparență / opacitate culori RGBa
Noul RGBavalue nu este exact un CSS3 proprietate, dar Transparența alpha este specifică numai pentru CSS3. În loc de valorile comune "Red Green Blue" pe care le transmiteți pentru culoarea posibilă acum include oa patra opțiune de transparență a culorii. Din acest motiv, dezvoltatorii web se fac cu PNG transparente aproape în întregime.
Sintaxa de bază necesită o valoare de la 0-255 în primele trei (3) sloturi și 0-1.0 în poziția alfa. Intervalul de culori este specific pentru cât de mult din fiecare nuanță (RGB) este vizibil cu 0 fiind nimic și 255 plin.
/ ** sintaxă ** / fundal: rgba (nume_valoare, nume_valoare, nume_valoare, nume_valoare, opacitate_value); / ** exemplu ** / div fundal: rgba (255, 255, 255, 0,3);
Compatibilitate compatibilă cu browserul
O altă proprietate opacitate pot fi folosite în anumite circumstanțe. Cu toate acestea, acest lucru va afecta întregul element HTML și conținutul interior, nu doar fundalul așa cum ați văzut în exemplul meu.
Din păcate, Internet Explorer nu suportă încă valoarea de culoare RGBa. În general, trebuie să includeți o proprietate de rezervă cu opacitate totală pentru aceste browsere mai puțin standard. Ați stabilit acest lucru cu aceleași valori, dar excluzând cea de-a patra (opacitate). Ar arata ceva asemanator rgba (255, 255, 255)
În plus, Internet Explorer poate fi manipulat un pic mai grațios prin condiționări. De fapt, puteți verifica dacă browserul rulează IE și afișează un filtru propriu Microsoft CSS pe comandă. Am demonstrat acest lucru în exemplul meu de mai jos (rețineți că acest lucru ar apărea undeva în fișierul dvs. HTML):
CSS3
Am citit cateva subiecte confuze pe forum pentru a crea frontiere rotunjite cu CSS3 - nu atat de mult in ceea ce priveste modul in care se face, dar cu un sprijin ferm in browser, dezvoltatorii web se lupta pentru ca codul cel mai usor sa scada si sa functioneze asa cum era de asteptat.
/ ** sintaxă ** / rază de margine: sus-dreapta stânga-dreapta jos-dreapta jos-stânga;
border-radius proprietatea împarte sintaxa similară cu crearea unei frontiere standard, cu excepția cazului în care vizăm colțurile cutiei. Această proprietate va accepta de fapt 1 - 4 valori și fiecare va viza un set diferit de colțuri.
- 1 valoare: Toate cele patru colțuri sunt rotunjite la aceeași valoare
- 2 valori: Prima valoare este valabilă pentru
stânga susșidreapta-josîn timp ce a doua valoare atingesus în dreaptașistânga jos - 3 valori: În primul rând se aplică
stânga suscolțul, al doilea este ambelestânga jos&sus în dreaptaîn timp ce se aplică valoarea a treia și cea finalădreapta-jos - 4 valori: Toate cele 4 valori vizează colțurile în următoarea ordine: top-stânga, dreapta-sus, jos-dreapta, jos-stânga
/ ** exemplu ** / div limita-raza: 4px 4px 8px 4px; div limita-raza: 4px 4px 8px;
Deci, în codul de mai sus, folosim border-radius pentru a aplica un efect rotunjit de 4px pe orice altceva decât dreapta-jos care are o curbă netedă de 8 pixeli. Dacă ați observat-o, ambele dintre aceste coduri vor aplica efectiv același efect de stil.
Compatibilitate compatibilă cu browserul
Acum, problema principală este aceea border-radius este acceptat numai în câteva browsere. Internet Explorer 9 a adăugat recent un mare suport, iar Opera va face acest lucru. Totuși, chiar și Opera și-a creat propria proprietate -o-border-radius care vizează motorul specific al browserului. În plus, -Moz-border-radius este susținută de software-ul Firefox / Gecko și -webkit-border-radius pentru Google Chrome / Safari.
Codul de mai jos este un exemplu al șablonului meu goal pentru a crea colțuri rotunjite, cu cel mai mare suport de browser global.
div limita-raza: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px; -moz-raza de graniță: 4px 4px 8px 4px; -o-raza de graniță: 4px 4px 8px 4px;
Arată o umbră Drop?
Celălalt aspect foarte minunat al CSS3 este suportul pentru cutie și text umbre. Aceasta a fost o astfel de problemă pentru dezvoltatori în trecut, deoarece imaginile de fundal au fost singura opțiune realistă. Această sintaxă are de fapt un rol de stenografie care este mult mai ușor decât celelalte proprietăți pe care le-am acoperit. Este dificil să vă amintiți ordinea corectă a valorilor-cheie la început - dar cu cât veți pune mai multă practică, cu atât va deveni mai ușor.
Din păcate, Internet Explorer este din nou unul ciudat. Fiecare alt browser major, inclusiv Firefox, Google Chrome, Safari și Opera, suportă pe deplin text-shadow proprietate. Dezvoltatorii au încercat să-și construiască propriul suport pentru IE, dar este totuși foarte limitator. Sintaxa de bază este scrisă după cum urmează:
/ ** sintaxa ** / text-shadow: x-offset y-offset blur-radius color; / ** exemplu ** / div text-shadow: 2px 2px 1px # 111;
Distanțele X și Y indică browserului cât de mult ar trebui să apară umbra și partea dreaptă. Puteți utiliza valori negative pentru a poziționa umbra deasupra și respectiv stânga, respectiv. Dar acest lucru se pare că este foarte ciudat, așa că recomand întregi pozitivi. De asemenea, valoarea razei de neclaritate poate fi utilizată pentru a netezi marginile rigide, dacă umbra textului pare nefiresc.
Această sintaxă se uită doar la notația de bază atunci când creează un singur efect de umbră. Designerii extrem de avansați au studiat chiar pentru a crea mai multe umbre simultan! Referindu-mă la acest post minunat de blog din aprilie 2011, care se referă foarte mult la umbrele textului. Dacă aveți timp, treceți prin conținut doar pentru a obține o idee despre caracteristicile mai avansate și asigurați-vă că ați marcat-o ca o referință viitoare!
Compatibilitate compatibilă cu browserul
Cel mai mare detractor pe care l-am întâlnit este Internet Explorer. Din când în când, Microsoft și-a împins propriul motor de redare a browserului, care a realizat cel mai bine sub-par. Acum, chiar și cu CSS3 luând domnii la umbrele de text, IE este încă în urmă. Există un site web demo unde puteți găsi exemple de cod și comentarii tradiționale CSS condiționate.
În esență, căutați să verificați dacă browserul pe care îl rulează utilizatorul dvs. se potrivește cu orice versiune de Internet Explorer 9 sau de mai jos. Apoi, folosind filtre MS, putem aplica o umbră în orice element de text (de mai sus, folosim un paragraf).
Ameliorarea tranzițiilor
CSS3 tranziție este cea mai tare proprietate de pe piata de design de la flapjacks-ul bunicii! Dezvoltatorii de site-uri web au făcut o astfel de agitație cu privire la tranzițiile pur CSS, chiar dacă suportul este limitat în principal la browserele Webkit. Puteți utiliza, desigur, proprietăți secundare pentru Mozilla și Opera și altele asemenea. Dar notatia de stenografie este cu adevarat captivanta, mai ales daca sunteti impotriva animatiei JavaScript din orice motiv.
În primul rând, să aruncăm o privire asupra proprietății inițiale de tranziție. Acest lucru va necesita 4 valori pe care le puteți împărți și în proprietăți. Acestea corespund tranziției proprietate(care este efectul), durată(cat timp sa-l trag), calendarul-funcție(modificări ale vitezei în timpul animației) și întârziere(numărul de secunde de așteptare înainte de animație).
/ ** sintaxă ** / tranziție: durata proprietății întârziere funcție de timp; / ** exemplu ** / img tranziție-proprietate: opacitate; durată de tranziție: 2 s; funcția de tranziție-temporizare: ușurință; tranziție-întârziere: 0,5 s;
Ar trebui să înțelegeți intuitiv scopul pentru majoritatea acestor proprietăți, cu excepția posibilității funcției de sincronizare. Deși este confuz la început, această proprietate animă pur și simplu tranziția în mod diferit, astfel încât efectul să înceapă mai lent, să se termine mai lent sau ceva similar.
Școlile W3 au o funcție de sincronizare on-line, care enumeră toate valorile posibile pe care le puteți încerca. În mod constant mă găsesc pe Googling pentru acești ghizi, totuși ei fac astfel de marcatori la îndemână.
Compatibilitate compatibilă cu browserul
Acum, să aducem în joc suportul de browser complet. Implicit proprietatea de tranziție este numai susținut de versiunile mai noi ale lui Safari. Cu toate acestea, mulți utilizatori încă mai solicită acest lucru -WebKit prefix care se aplică și în cazul Google Chrome și în motoarele de randare similare. Mai jos este a “finalizat” șablon bloc de coduri Vă recomandăm să salvați și să utilizați dacă aveți nevoie de asistență de tranziție de la majoritatea browserelor web.
img tranziție: opacitate 2s easy-in 1s; -webkit-transition: opacitatea 2s ușurință în 1s; / * crom, safari, flock * / -moz-tranziție: opacitate 2s ușurință în 1s; / * mozilla + gecko * / -o-tranziție: opacitate 2s ușurință în 1s; / * opera * /
Efectele cu efectul textului
Această proprietate nu este imensă și nu veți găsi mulți designeri web care să o folosească astăzi. Dar poți folosi text-accident vascular cerebral pentru a construi unele efecte curate cu fonturile. Browserele Webkit, cum ar fi Safari și Chrome, sunt singurii adevărați susținători ai acestei proprietăți până acum. Opera și Firefox au dificultăți în redarea obiectelor text cu aceleași contururi.
/ ** sintaxa ** / p -webkit-text-stroke: width color; / ** exemplu ** / p -webkit-text-stroke: 1px # 222;
Compatibilitate compatibilă cu browserul
Dacă simțiți nevoia de efecte de curse text, ar trebui să includeți întotdeauna o culoare de rezervă. Mozilla și Opera pot obține, însă utilizatorii Internet Explorer nu au alte opțiuni. Din păcate, aceasta este una dintre cele mai noi proprietăți CSS3, care tocmai nu a obținut suficient sprijin din partea comunității dezvoltatorilor de browsere web. Ar trebui să vă petreceți ceva timp jucând în jurul valorii de acest instrument de web mare creat special pentru construirea acestor contururi text CSS3.
Box-dimensionare
Proprietatea de dimensionare a casetei vă oferă mai mult control asupra lățimii / înălțimii totale a oricărui element bloc. În mod prestabilit, lățimea / înălțimea + marginea + marginea + padding alcătuiesc dimensiunea totală a unei cutii. Cu toate acestea, folosind caseta de frontieră din conținutul dvs., vă împingeți toate materialele și margini interior pentru a păstra aceeași lățime. Există doar două valori pentru această proprietate, cu conținut-box fiind implicit.
div width: 550px; padding: 9px; dimensiunea cutiei: caseta de margine; / * lățimea va rămâne la 550px * /
După cum vă puteți imagina, acest lucru va fi util la un moment dat în timpul carierei dvs. CSS. Umflarea și marginile pot fi o adevărată durere și atunci când adăugați în granițe tendința de a pierde urma pixelilor.
Compatibilitate compatibilă cu browserul
Opera și IE 8 acceptă această nouă proprietate în mod implicit. IE7 și mai jos sunt blocate cu setarea casetei de conținut, cu excepția cazului în care vizitatorii dvs. folosesc modul quirks. Singurele adăugiri pe care ar trebui să le cunoașteți despre motoarele de navigare webkit și Mozilla.
div -webkit-box-size: border-box; / * Safari / Chrome * / -moz-box-size: caseta de margine; / * Firefox * / box-size: caseta de frontieră; / * Opera / IE8 + * /
Coloane pure CSS3
Coloanele sunt puțin complicate cu CSS3, dar pot fi realizate cu un cod minimal. Cele 2 proprietăți pe care doriți să le focalizați sunt coloană-count și coloană-gap. Numărătoarea face referire la numărul total de coloane pe care doriți să le aplicați, în timp ce diferența creează o marjă între fiecare.
div # cols coloană-număr: 3; coloană-decalaj: 10px;
În exemplul meu, putem vedea ID-ul #cols utilizat ca container. În interiorul nostru am împărțit Div în 3 coloane cu un decalaj de 10px între fiecare. În plus, ați putea să vă stabiliți lățimea coloanei care este folosit pentru a seta lățimea totală a fiecărei coloane în loc să menționeze un număr solid.
Compatibilitate compatibilă cu browserul
Orice înainte de IE8 pur și simplu nu va putea să utilizeze această proprietate. Dar, așa cum am văzut în fiecare exemplu, Mozilla și Webkit oferă propriile soluții pentru mai multe browsere. Dacă aveți nevoie de un șablon, verificați exemplul de mai jos:
div # bara laterală width: 210px; -moz-coloană-număr: 3; -moz-coloană-decalaj: 7px; -webkit-numărul de coloane: 3; -webkit-gap-column: 7px; numărul de coloane: 3; coloană-decalaj: 7px;
Custom @ font-face
Trebuie să fi auzit despre entuziasmul privind fonturile personalizate CSS3. Ei bine, folosind proprietatea @ font-face, putem importa stiluri externe de fonturi și le putem folosi ca orice altă familie. Sintaxa este oarecum complicată și va trebui să petreceți ceva timp pentru ao face corect. Blocul pentru @ Font-face este folosit pentru a defini un nume de familie, după care puteți folosi acest lucru în dvs. familie de fonturi proprietăți oriunde!
@ font-face font-family: "MyNewFont"; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Numai Internet Explorer * / Deci, vedeți mai sus că nu vizez niciun tip de font specific, dar sintaxa este ceea ce ar trebui să iasă în evidență. Observați că Internet Explorer acceptă numai .EOT în timp ce .ttf și .OTF sunt opțiuni populare pentru celelalte browsere. De asemenea, de importanță, trebuie să înțelegeți că puteți transmite URL-uri de fonturi din link-uri directe, adică. URL-ul ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
Nu există o problemă reală cu acest browser, deoarece toate motoarele de randare pot să analizeze aceste tipuri de fișiere de fonturi. Doar amintiți-vă că pentru suportul IE trebuie să includeți o versiune eot precum și originalul. Cred că articolul W3 Schools conține un catalog cu cele mai importante informații pe care ar trebui să le verificați.
Conversia în CSS miniatural
Acest subiect este dezbătut frecvent deoarece servește unui scop diferit pentru fiecare proiect. Pe de o parte, dezvoltatorii web își petrec mult timp scriind foile de stil. Nu există nici o modalitate de a cripta acest tip de date plaintext și de a le ascunde de ochii snooping. Dacă încerci să-i ții pe ceilalți să-ți fure cu blândețe codul, cel mai bun lucru pe care îl poți face este să aglomerezi stilurile și să elimini întreruperile / spațiile liniei.
Acest proces poate fi etichetat ca Miniaturizarea Codul tau. În general, dezvoltatorii vor scrie CSS în format standard și apoi vor elimina întregul spațiu alb înainte de a fi încărcați pe serverul web. Apoi, aveți o copie locală pentru a edita rapid, oferind de asemenea o versiune mai mică pentru proiectul live. Această metodă poate fi, în mod evident, utilă pentru a reduce încărcările de pagini, împreună cu păstrarea atacatorilor de cod la distanță.
Linkul pe care l-am postat de mai sus, care duce la Minify CSS, are un material teribil de lectură pe această temă. Site-ul oferă, de asemenea, un instrument bazat pe browser pentru eliminarea acestor spații albe și a returnărilor cheie din codul dvs. Compresorul CSS este o altă opțiune ce oferă o interfață simplă, care rulează direct în browserul dvs. Web. Am auzit, de asemenea, lucruri bune despre Clean CSS, deși nu am folosit niciodată aplicația.
Link-uri conexe
Pentru a vă menține în continuare, am oferit șase linkuri utile din întreaga lume. Acestea includ nu numai note notte de scurtă durată, dar și ghiduri utile și tutoriale de acces la practicarea acestui nou cod scurt CSS.
- Ghidul începătorului pentru CSS3
- Ghidul pentru cotidianul CSS
- Folosiți în mod corespunzător CSS3?
- Conținutul CSS și diagrama compatibilității browserului
- CSS3 + Îmbunătățire progresivă = Design inteligent
- Completați indexul de proprietăți CSS / CSS3
Concluzie
Este nevoie de o mulțime de dedicație și practică de scriere a codului CSS pentru a construi un program concret pe care îl puteți urma pentru fiecare proiect. Majoritatea designerilor web sunt bucuroși să ridice noi proiecte și idei, astfel încât veți găsi cu siguranță timpul să vă folosiți aceste sfaturi utile de codificare. Încercați să copiați o mică foaie de referință pentru propria dvs. conveniență, în cazul în care nu puteți găsi nici un fel de cheat-sheets sau chiar mai rău pierdeți conexiunea la Internet!
Știți despre alte proprietăți CSS3 sau comenzi rapide? Ne-ar plăcea să vă auzim gândurile și ideile în comentariile de discuție. Dezvoltatorii web impun o mai mare standardizare în cadrul W3C și clar că tranziția a devenit mai ușoară. CSS3 oferă avantaje fantastice și, dacă puteți stăpâni codificarea stenografiei, acest lucru va menține dimensiunile fișierelor scăzute și va împiedica copiatoarele să vă fure codul.
