Exprimarea IT

Un alt rapid ah. Aici este ceva simplu si frumos folosind puterea de CSS ... dar a fost concieve greu (şi cu siguranţă nu am fost eu) pentru a începe cu. Adăugarea Dropshadow, ar putea fi o peice de tort pentru mulţi dintre noi, folosind unele unelte de editare a imaginilor ca Photoshop ANF focuri de artificii, etc
Motivul de ce, am optat pentru umbra folosind CSS este că, de obicei, creând în acelaşi timp un design pagină / HTML a unei cereri, cerinţele de tine iterarea. Ce vreau să spun este, intr-un site existent, cu multe imagini, cum ar fi cele care afişează freinds listă sau o galerie de imagini, va fi dificil să se reprocesează întreaga încărcătură de imagini care au fost deja descărcate de a adăuga sau elimina umbrele, pentru că chestiune.
Deci, dacă aţi făcut o gândire puţin înainte în timp ce crearea HTMLS pentru a adăuga aceste diviziuni suplimentare sau, de obicei, situaţia este că aveţi o logică Buclă generatoare de aceste icoane / miniaturi în XSL, PHP. Java sau orice altă programare / limbaj de scripting, îl puteţi adăuga oricând, atunci este doar chestiune de spectacol şi ascunde aceste umbre folosind proprietatea display CSS, ca pe clientii cerinţele în continuă schimbare ... am havn't făcut acest tip de gândire înainte înainte de acest lucru ... dar ahev a început acum!

În exemplul de mai jos, imaginea originală este gratuit, iar umbra dropshadows sunt aplicate cum trebuie! De asemenea, am mers un pic extra, folosind trucuri de Tut mele anterioare (Well! acestea sunt, probabil, cel mai scurt varietate de tutoriale, asa ca este justificată doar numindu-le "Tut", "e) cu privire la utilizarea CSS proprietate clipului pentru a scoate în evidenţă doar

Imaginii originale

CSS DropShadow Rezultate

Vezi Demo | Descarca fişierelor sursă

Pune Stylesheets la Top

Dacă doriţi o pagină pentru a încărca în mod progresiv, care este, vrem browser pentru a afişa orice conţinut pe care îl are, cât mai curând posibil, a pus CSS la partea de sus a paginii interiorul capului documentului. Acest lucru face ca paginile par a fi de încărcare mai rapid, deoarece aceasta facilitează redarea progresivă a paginii. Acest lucru este important mai ales pentru paginile cu o mulţime de conţinut şi pentru utilizatorii de pe conexiuni internet mai lente.

Este un fapt documentat că, pentru a spori experienţa utilizatorului în general, este important să se asigure indicatori de progres şi de feedback-vizuale. Pentru a evita având în a aspira elemente ale paginii, în cazul în care stilurile lor de schimbare, unele browsere, IE inclusiv, blocuri de redare a paginii până la CSS este complet încărcată. Din acest motiv, utilizatorul este de ajunge la a vedea o pagină albă goală.

Cele W3 Specificatii HTML ', de asemenea, afirmă că CSS trebuie să mă includă în secţiunea HEAD a paginii HTML. at the bottom of the page, so it's best not to use it. De asemenea, reţineţi că, în IE @import se comporta la fel ca utilizarea <link> la partea de jos a paginii, asa ca nu este cel mai bine să-l folosească.

Evitaţi utilizarea Caracteristici anumit browser

Filtre: Filtru de utilizare a creşte consumul de memorie şi se aplică pe element, nu pe imagine, astfel încât problema se înmulţeşte. De asemenea, Filtrele sunt IE de proprietate, prin urmare, nu va funcţiona aşa cum este prevăzut în alte browsere. Dacă doriţi medii transparente sau gradientului, utilizaţi 1Pixel cu imagini.
Expresii: expresii CSS sunt o caracteristică frumos de a avea în CSS, dar încă mai este caracteristică specifică IE. De asemenea, este important de remarcat faptul că, aceste expresii sunt evaluat atunci când pagina este redat şi redimensionate, defilat şi chiar şi atunci când utilizatorul se deplasează mouse-ul peste pagina. Inutil să spun acest lucru ar putea afecta performanţa a paginii. Prin urmare, în cuvinte simple, folosind expresii Evitaţi CSS, cu excepţia cazului te simţi argumentele sale ", cantareste mai mult decat contra sale"

Externaliza ai CSS

Folosind CSS extern va duce la încărcarea mai rapidă a pagini, deoarece fişierele JavaScript şi CSS sunt memorate în cache de către browser. Inline CSS în documentele HTML se descărcate de fiecare dată când documentul HTML este solicitat. Acest lucru ar putea reduce de fapt, numărul de cereri HTTP facute, dar creşte ulterior dimensiunea documentului HTML. CSS extern sunt memorate în cache de către browser-ul, dimensiunea documentului HTML este redusă, fără a creşte numărul de cereri HTTP.

Vă rugăm să reţineţi că, în cazul în care utilizatorii de pe site-ul dvs. are mai multe vizualizări de pagini pe sesiune şi multe dintre paginile dvs. de re-folosesc script-urile şi aceleaşi stil, există un beneficiu mai mare potenţial de fisiere cache externe.

Ambalaj fişier CSS

Ambalare sau ronţăit CSS-ul este practica de a elimina caractere inutile de la codul pentru a reduce dimensiunea sa, prin urmare, îmbunătăţirea ori de încărcare.

CSS poate ma crunched prin eliminarea toate comentariile şi alte caractere nedorite, cum ar fi spaţii albe, rânduri libere, etc

Un Reset CSS este / sunt CSS pentru a seta un număr de stiluri element la o valoare de referinţă specific care creează coerenţă în browsere diferite.

Noi toţi am fost prin cosmaruri de scriere cross-browser CSS lui. Deci, atunci când am începe scrierea CSS nostru, este o practică de a reseta mai întâi pentru a elimina / reseta orice neconcordanta încrucişate browser. CSS Resetează, sunt cateva linii simple de CSS pe care le încep cu CSS, oferindu-vă o bază de curat pentru a începe construirea dvs. de pe.

Resetează CSS pe care am tendinta de a folosi în mod normal, arata ca acest

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol ul, {
Lista-stil: nici unul;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-greutate: normala;
}

Resetaţi dimensiunea fontului browser-ul
Reţineţi, de asemenea, de resetare, care a fost aplicat cu dimensiunea fontului browser-ul în următoarea linie ...

html {font-size: 76%;}

De mai sus CSS resetează dimensiunea fontului browser-ul de 10 de pixeli, iar acest lucru face posibil să se lucreze cu dimensiuni relative ale textului (ceea ce este important din fiecare o respectare WAI prespective)
De exemplu, în următoarea definiţie, font-size într-un interval este setat la 10 pixeli şi că, în paragarph este setat la 14 pixeli ...

span {font-size: 1em;}
p {font-size: 1.4em;}

De exemplu.
Specificarea o proprietate CSS ca aceasta,

Marja de: 5px 0;

înseamnă, de fapt,

margin: 0px 5px 5px 0px;

Această proprietate marja de prima înseamnă:

marginea de sus şi de jos = 5px | | Marja de stânga şi de dreapta = 0px

astfel "o prescurtare mai" ar fi

margin: 0px 5px 5px 0px; (T, R, B, L)

ai putea folosi chiar şi 3 valori

margin: 0 5px 5px;

ceea ce înseamnă

sus = 5px | | din dreapta şi din stânga 0px = | | = 5px de fund

Internet Explorer adaugă automat padding la butoane în forme HTML.
Acest spaţiu se întinde în funcţie de lungimea textului butonului.

Soluţia este să adăugaţi preaplin la stilul său .... de exemplu

. Butonul {
depăşire: vizibil;
padding-left:! 10px importante;
padding-dreapta: 10px importante;
... Orice alt stil pentru acest buton pe ...
}

SAU

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;