2009 06 aprilie 2009

Cum Pentru a permite scrierea la bara de stare (window.status) în Firefox

O alta scoala veche de memorie suplimentar ...

De ce nu ne permite să windos.status?
Javascript-ar putea să fie un cosmar atunci cand ai ceva pentru a depana. Firefox are un addons câteva la îndemână, cum ar fi Firebug Asta face ca vieţile noastre uşor şi, de asemenea, votul pentru tehnica de depanare cel mai popular în Javascript trebuie să meargă la "alert ()". Anywaz! Există câteva cazuri când adăugarea ALERTĂ nu depana dvs. de mis-comportă Javascript este doar o idee nu este un bine. De exemplu! aveţi dragble element a cărui poziţie trebuie să fie avertizat .... NU NU! Nu-l fac! ... Va primi doar alerte infinit sau nu vei fi capabil drap de fapt dragable dumneavoastră. Ei bine! Există situaţii mai bune, în cazul în care s-ar putea scriind texte de depanare la bara de stare, cu mult mai mult usful ... Crede-mă! Experienţa ei!

IE implicit lăsat scrie la bara de stare browser-ul folosind sintaxa "," ceva pentru a depana "window.status =", dar Firefox nu. Deci, pentru a permite ferestre schimbarea de stare, te poate face oricare dintre următoarele.

Deschideţi about: config în browser (de tip "about: config" acest lucru în bara de adrese), şi de căutare pentru
Dom disable_window_status_change.. Schimbaţi-l la fals ... doar să faceţi clic pe intrarea pentru a comuta starea sa.

Sau, alternativ,

"Unelte → Opţiuni → → Conţinut Enable JavaScript / Advanced → Modificaţi starea bara de text"

Şi, reţineţi, de asemenea, că ... să scrie în bara de stare Javascript-ul tău, IE este ok doar dacă utilizaţi un scurt exemplu, statutul de sintaxă = 'un text debug ", dar în Firefox, trebuie să folosiţi în deplină sintaxa adică window.status =' ceva pentru a depana "


2009 12 martie 2009

Un design UI bun trebuie să fie conforme standardelor. sau ar trebui să-l? Mele TOP 10 UI elaboreze norme


Nici eu sunt foarte nou pentru User Interface (UI) de dezvoltare şi nici nu sunt eu un veteran si ca am pus întotdeauna, am încadrează în profilul de UI Developer mai mult decât cea a unui designer, cu nici un regret. Ei bine! Ceea ce am fost scris? Pentru un timp ... (trebuie să fie în ani, nu orice mai puţin) acum, de fiecare acum şi apoi, când am nu ajunge într-un pic de design UI (atunci când designer profesionist a plecat într-o vacanţă), ma opresc mereu cant gândesc dacă designul meu ar trebui să să fie în mod corespunzător complient sau nu (sincer, nu, că am putea achive 100% respectarea standardelor, dacă voiam prea). Apoi, îmi spun, ce rahat! ... De proiectare ar trebui să fie simplu, frumos şi în primul rând pare mai uşor de utilizat, acesta nu ar trebui să facă vizitatori fugi ... sau Bounce (să fie tehnic). Ce bun ar fi un aspect frumos tableless CSS să fie vizitator, care este uită la toate HyperText inteligentă şi Cascading Style Sheet sub pielea ta pagina web ... Zilch!
Ar trebui să arate frumos şi să fie uşor de utilizat ... apoi vine toate lucrurile standarde.

Am stumbbled din toata această intrare pe blog-ul de Jason Fried, de 37 de semnale (Pentru cei care nu sunt conştienţi de 37 de semnale sunt onces care au creat unele aplicaţii web cum ar fi minunat Basecamp, Foc de tabara, etc) care a scris ceva similar în 2004 şi crede-mă, aproape 5 ani şi nu sa schimbat mult de atunci ... am fost fericit pentru a citi postul lui, cum am total de acord cu ceea ce are de spus şi, de asemenea, faptul, ea nu este sigur cu privire la ceea ce se spune despre ei doar instinctul său şi aşa este a mea :)

Jason Fried: "Nu e prea mult vorbesc despre CSS şi XHTML şi standardele şi accesibilitate şi nu vorbim destul despre oameni. CSS şi Compliant Standardele Codului sunt doar instrumente - trebuie să ştii ceea ce pentru a construi cu aceste instrumente. Mare, mă bucur că interfaţa dvs. nu utilizează tabele. Deci, ce? Cui îi pasă dacă ea încă nu se lasa oamenii atingerea scopurilor lor. Standardele Web sunt mari, dar standardele oamenilor proprii includ obtinerea lucrurile (şi care este încă prea greu pentru a face on-line).

Designerii UI fac aceeaşi veche fundamentală ", uitând despre fiinţă umană de pe cealaltă parte" greşeli - de data aceasta, cu excepţia codul lor arată mai bine. Oamenii nu - cod de validare - interfeţe de utilizare ".

Plateste Jason lui Fried articolul complet

DISCALIMER: Aceasta nu înseamnă că nu trebuie să ne pese de standarde la toate. Standardele sunt bune de a avea şi de a le rămânem cât mai mult posibil. Noi doar trebuie să înţelegem că designul UI bun nu înseamnă întotdeauna 100% complience standarde sau vice-versa ....

Din lista mea de lecţii învăţate meu, am urmat un design UI câteva reguli de aur şi de dezvoltare ... Heres TOP 10 ... nu ca ai să le urmaţi prea ... :)

1. Aveţi grijă de utilizatori. Utilizatorii pot face sau de a sparge site-ul tau. Donot face sa arate ca un utilizator idoit total, absolut incapabil de a folosi site-ul dumneavoastră. Asta este rău!

2. Păstraţi Simplitatea si usurinta de utilizare cu ghidul dvs. principal. Prea multe lucruri de pe ecran, mai mare probabilitatea ca un utilizator vor fi confuz sau distras de la misiunea lor de origine.

3. Fii în limitele ... donot răsfăţaţi-vă prea mult în UTILIZARE, accesibilitate şi standarde. Utilizaţi în mod eficient standardele şi să le facă înţeles de echipa. Acest lucru va asigura coerenţa chiar în produs

4. Prototip cerinţă. Întrucât, în aceste zile a interfeţelor de utilizare sunt bogate, Prototyping este întotdeauna mai bine decât a face doar wireframes simple şi acesta din urmă este lipsit de interacţiuni decente, acesta ar eşua pentru a oferi clientului o imagine clară a produsului final, care este în curs de dezvoltare. Întotdeauna, este mai uşor de a converti prototipuri în rezultatele finale. De asemenea! cu prototipuri de orice probleme de interacţiune ar putea fi eliminate mai devreme în ciclul de dezvoltare.

5. Consecvenţa în design-ul şi de interacţiune este foarte important. Donot confunda utilizator cu interacţiuni imprevizibile şi gizmos.

6. Înţelegeţi dumneavoastră "Misiunea Design". Cadouri concentreze pe acţiunea principală a paginii beign proiectat. De asemenea, face o listă de acţiuni seconday pe pagina, şi prioritizarea acestora.

7. Furnizarea de feedback-ul adecvat pentru utilizatorii site-ului. Cu cele mai multe dintre site-urile proiectate în jurul valorii de AJAX, oferă indicii vizuale pentru a utilizatorului cu privire la modificările pagina. Utilizatorul trebuie să se acorde o recunoaştere a realizării de orice sarcina el execută. Donot face utilizatorul, aşteptaţi şi ghici, de ex. furnizează indicatori de progres pentru uplaods de fişiere.

8 Utilizaţi controale în mod corespunzător.. De exemplu, utilizarea Selectaţi lista derulantă pentru listele de mici, doar, donot permit utilizatorului să aleagă una din 200 de oraşe folosind cutii selectaţi. Înţelegerea diferenţa dintre un buton şi un link. Un link şi butonul au scopuri diferite, donot folosi unul pentru celălalt. Furnizarea de control dreptul de a face interactiunea cu o pagină mai uşor. Evitaţi utilizarea meniurilor, care sunt mai mult de două niveluri de adâncime. Nu reinventa roata. Utilizaţi controale standard, le particularizaţi numai în cazul în foarte necesar. Definirea toate controalele vamale necesare pentru site-ul dvs. prima mana, astfel ca acestea ar putea fi create si testate independent, pentru site-ul gata de utilizare din toata.

9. Donot repeta prea mult pe design. Amintiţi-vă! Produsul constă în ansamblu mai mult de design singur. Construiţi termene adecvate în planificarea proiectului dvs. pentru iteraţii de proiectare şi de stick la el. Repetare ne ajută pentru a afla ce funcţionează şi ce nu, alege petele probleme. Ca o interfaţă bună are nevoie de timp, să ofere timp de iteraţii în începutul ciclului de dezvoltare, astfel încât iteraţii de proiectare doesnot echivala direct la rework. Prea mult de reprelucrare ar putea jeopradize termenele.

10 Stai pe spate şi cred că, uneori, ca un utilizator..


2009 07 martie 2009

Apelarea funcţiilor multiple de Windows onload in JavaScript

Heres un alt peice puţin de înşelăciune Javascript pe care am avut de a săpa în jurul, deoarece situaţia se commaned. Într-una din site-ul meu, am avut această situaţie în care am avut de a pune în aplicare "windows.onload" de două ori. Primul lucru pe care ar fi ajuns la o minte lipsit de experienţă ca a mea (eu trebuie să spun sincer că, din moment ce am fost cu ajutorul cadrelor javascript şi biblioteci, am uitate de a face lucruri simple, pe propria mea ... trist dar adevarat), este următoarea metodă ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 , etc ..

Ne pare rau sa spun, dar, acest lucru obiceiul de lucru ... nu vreau pentru a discuta despre stiinta executarea de Javascript mult ... dar în funcţie de experienţa mea recentă, doar ultima funcţie (onloadfn3) va bolnav se de fapt executate.

În situaţii normale, spre deosebire de a mea (pe care voi vorbi despre un pic mai târziu) ... ai putea face una dintre următoarele pentru a executa funcţiile mutliple onload ....

Sau ceva de genul asta

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Pentru situaţia mea actuală, eu nu pot folosi oricare dintre cele de mai sus ...
De ce am nevoie pentru a apela windows.onload de două ori, mai degrabă, că de asteptare două funcţii într-o funcţie onload singur? Aici este un aspect rapid la declaraţia problema mea ...

"Paginile site-ul meu sunt structurate ca temă WordPress .... adică nu este un header.php comune şi Footer.php care devine incluse în toate paginile site-ului. Există o funcţie implementaion onload în Footer.php pentru a face unele funcţii comune onload. Şi acolo sunt câteva pagini care au nevoie de ceva de ONLOAD lor, în afară de cele făcute de funcţia de onLoad comun. Dacă aş atribui funcţie de apel invers direct la handler window.onload, se va merge pe-callback atribuite anterior în Footer.php "

.... Este problema mea a înţeles :) ?

Ei bine! există puţine soluţii pe care am găsit. Ele toate sunt foarte asemănătoare şi, în principal implementions de o soluţie dată de Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Soluţie:

Pur şi simplu adăugaţi acest cod javascript pentru site-ul ...

 Funcţia addLoadEvent (func) {
     var = oldonload window.onload;
     în cazul în care (typeof window.onload = "funcţie"!) {
        window.onload = func
     } Else {
        window.onload = function () {
            dacă (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

Şi-l numesc în loc de "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Codul de mai mult pentru a rula pe pagina de încărcare *
 }); 

Avantajele acestui fragment de cod ...
1. În primul rând, Acesta vă permite să aveţi mai multe evenimente windows.onload, numit de părţi separate ale codului, fără a overridding definiţia anterioară
2. Este într-adevăr discret. Acesta poate fi plasat într-un fişier cu script-uri sau alte într-un fişier separat.
3. Ea funcţionează, chiar dacă window.onload a fost deja stabilit.


2009 24 februarie 2009

Cum de a include cod PHP în interiorul unui şablon Smarty

Am crezut că aceasta va fi o Doodle pentru a găsi în Google, cât mai multe ne-aţi scriitori UI şi script-ul ar trebui să facă acest lucru într-o zi de zi, care este includă un pic de peice de fragmentul de cod PHP (. Php) într-o Smarty Format (. TPL). Am dat seama că mai uşor / mai populare interogare, chiar mai dificil de a găsi răspunsul exact ... un milion de rezultate de căutare, dar cele mai multe dintre ele referit la "dosar" include, în ... Smarty, care are urmatoarea sintaxa

{Include fişierul = "include / header.php"}

Acest inlcuded de fapt fişierul amenzii, ci ca text, Ceea ce am vrut a fost rezultatul de fişier inclus. (Notă de mai sus este folosit includ şablon în interiorul unui fişier şablon). În cele din urmă cu un persiverance pic .... Am dat peste o sintaxă slighty modificat, care a fost răspunsul la cerinţa mea ... Deci, aici este ... dacă havn't găsit deja un


{Include_php FILE = "include / header.php"}


2009 18 februarie 2009

Adăugarea DropShadow Pentru imagini folosind CSS

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

original_image

CSS DropShadow Rezultate
css_dropshadow_results
Vezi Demo | Descarca fişierelor sursă


2009 17 februarie 2009

Understandng proprietate Clip CSS

De ce nu vreau să înţeleagă acest lucru??? Humm ...!!

Cele mai multe dintre scriitori CSS ar fi de acord că proprietatea CSS clipului este, probabil, unul dintre cele mai ne-utilizate proprietăţi CSS. A fost atât de adevărat pentru mine şi a fost cel mai fericit să-l neglijeze, până când am început modificarea mootools DOUA butonul (PIN) Componenta Slider (cu indicator de Range) .

Nu a fost o sugestie buna de la unul din utilizatorii de componente de a modifica componenta Slider folosind imagini tăiate o cercetare (faţă de o divizie de lăţime variabilă) pentru a indica gama slider. Astfel, a venit timpul meu pentru a intra distracţie, dar ne-Chartered (pentru mine, desigur), apele de proprietate Clip CSS.

Ei bine! cât de greu poate fi? Nu de mult la toate ... da şi nu. Sintaxa de a folosi proprietatea CSS clipului este destul de drept, dar sensul / usuage este un pic croocked. Cu o memorie ca a mea, de fiecare data cand stau de a prelucra pe Script Slider mea ... am tokeep de trimitere înapoi la utilizarea de această proprietate CLIP, pentru a reaminti mă logica pe care am creat în script-ul meu .... Prin urmare! gândit să-l stilou, cu o speranţă să-şi amintească că în viitor (şi, de asemenea, pentru beneficiul celor care par boggled de proprietate clipului CSS)

Ce face clipului CSS face?

Clipul este parte din modulul de efecte vizuale de CSS 2.1. Pur şi simplu pune, treaba lui este de a plasa o fereastră vizibil pe partea de sus a unui obiect care se tunde, tăiere, prin urmare, crearea de imagini şi miniaturi fără a crea fişiere suplimentare (am pus deja această funcţie pentru o mai bună utilizare în componenta Slider :) )

Utilizarea proprietăţii clipului CSS, se poate crea o decupare folosind forma de rect. Ca multe alte proprietăţi CSS (cum ar fi marja, etc padding), folosind rect nevoie de patru coordonate Sus, dreapta, jos, stânga (TRBL). Natura croocked a reflecta această proprietate, atunci când ia o privire mai atentă la modul în care calculează un clip regiunea de tăiere, utilizarea acestor patru coordonate (creierul trimite într-o aruncare pentru un timp). Acum, pentru a vă confunda partea de jos porneşte de la partea de sus, şi începe de la dreapta la stânga. :) . Puteţi vedea ce am spus? .... Prin urmare, acest post ...

Aceasta confuzie mica poate dispărea cu uşurinţă, cu această explicaţie vizuală a CSS Clip / rect proprietate de mai jos!!

CSS Clip Cerinţe

Sarcina am început este de a decupa imaginea în miniatură urmator intr-o imagine ovala caută (şi, de asemenea, o imagine cu unghi larg)

original_image clip_demo
Thumbnal original / imagine Cerinţe Clip pentru Sqaure Thumbmail

CSS Clip Rezultate

clip_results

Vezi Demo | Descarca fişierelor sursă


2009 02 februarie 2009

Cum să includă un blog WordPress într-un alt site-ul

Această întrebare a trecut prin minte de câteva ori înainte, când am fost de lucru pe site-uri mai devreme de asemenea, care a folosit pentru a arăta WordPress blog-uri sau nou tip de conţinut din o parte a site-ului / portal.Being un novice în PHP şi în jurul valorii de WordPress, am pastrat procastinating ea, gândire ", acest lucru nu este peice mea de tort". În sfârşit! această cerinţă a venit pana la nasul meu, atunci când a început diggin în jurul valorii de un pic de soluţie.
Am fost surprins să afle că într-adevăr a fost mai uşor decât am crezut ca a fost de fapt, pentru a afişa o listă de titluri sau ultimul mesaj pe orice altă pagină în afara secţiunii WordPress-electric, folosind doar un pic de PHP şi API WordPress .

Aici este ceea ce sa faci: -
Din motive de explicaţii, să presupunem că site-ul dvs. este http://www.inchembur.com/ şi aveţi secţiunea de ştiri de pe acest site http://news.inchembur.com/ (care se execută WordPress). Acum, cerinţa este de a arata ultimul mesaj de la http://news.inchembur.com/ pe pagina de start a site-ului principal, şi anume http://www.inchembur.com/index.php

Pasul 1: În index.php, adăugaţi următoarea peice de cod, includ WordPress fişier API. Puteţi adăuga acest la partea de sus a paginii pe care doriţi postul dvs. să apară în.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES ", false); de utilizare / / Disbable Theme WordPress
necesită ('/ var / news.inchembur.com / wp-blog de ​​header.php'); / / include WordPress API
; // Get Latest Post query_posts ("showposts = 1"); / / Get Ultimul mesaj
?>

În peice de mai sus includ, primim doar după cea mai recentă. dacă doriţi să încercaţi mai multe variaţii să nu ezitaţi să sape în, query_posts() documentaţia .

Pasul 2: Acum, în partea a paginii de start / Pagina de start în cazul în care doriţi să afişaţi ultimul mesaj de la WordPress http://news.inchembur.com , utilizaţi codul de mai jos. Inutil să spun, nu ezitaţi să anunţ divizii de styling, se întinde şi a claselor ca pe nevoile dumneavoastra de design.

Pasul 3: Nu este un pas de 3 ... Asta e el ... ai terminat!


Desigur, puteţi încerca câteva variaţii ca pe cerinţele dumneavoastră (cum am menţionat mai devreme, se referă la query_posts() documentaţia ). Heres un degustător ...

Cum arată o anumită pagină post / ca spre deosebire de ultimul mesaj: -
Acest lucru poate uşor achived, prin modificarea argumentele pentru a query_posts() pentru a include ID-ul pagină sau pagina de melc

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = despre ");

sau Aveţi posibilitatea de a controla numărul de posturi:
) ; query_posts (showposts = 3);


2008 25 decembrie 2008

JavaScripts de încărcare dinamică

Uneori, pentru a menţine pageweight jos ... ne-am împărţit în fragmente de script-uri noastre ... Aceste fragmente JavaScript poate fi încărcat ca şi atunci când este necesar (la un eveniment sau la un clic pe un link sau buton, etc).

Javascripts dinamic de încărcare este simplă şi destul de drept înainte, ca de mai jos ...

= “text/javascript” > <Tip de script = "text / javascript">
Funcţia loadNewScript (sursa) {
var s = document.createElement ("script");
s.setAttribute ("tip", "text / javascript");
s.setAttribute ("src", sursa);
document.body.appendChild (e);
}
</ Script>

şi puteţi avea link-ul următor apel oriunde în corp, sau poti avea acest script "onLoad" a documentului în sine ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A href = "javascript: loadNewScript (" myDynamicScript.js '); "> Script Sarcină dinamică </ a>

sau

<body onload="loadNewScript('myDynamicScript.js');">


2008 17 decembrie 2008

Mis-care se comportă IE8: CSS layout (rupturi de direcţionare o versiune de browser cu ajutorul Meta Tag-uri în IE8)

Dacă sunteţi CSS persoană, ar trebui să ştii durerea în obţinerea de aspectele dvs. de lucru cross-browser. IE8 este încă o altă cheie în lucrările pentru dezvoltatori noi. Anywaz! dacă te-a lovit pe această problemă, aşa cum am făcut ieri, în cazul în care CSS-ul perfect de lucru în IE7 (şi mai devreme), şi brusc Firefox a început să arunce cu accese de furie în IE8, încercaţi acest ... Se părea bine pentru a remedia problemele mele pentru moment ....

Folosind declaraţie Meta, putem specifica motorul de randare ne-ar dori să folosească IE8. Deci, pentru a forţa IE8 pentru a face ca IE7 ... Introduceţi Tag Meta următoarele în capul a documentului: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

În mod implicit Meta IE ar fi: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
care ar face IE8 face de start, folosind noul mod de standarde.

Dacă este necesar, această sintaxă ar putea fi folosite pentru a gazdui pentru alte browsere ca de mai jos:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />


Mai multe despre doctypes:

Dacă nu sunteţi încă familiarizat cu fel de animal numit "doctype" ... aici este un rapid citit
Ce sunt doctypes? Care sunt quirks BROWSER si modul strict?
Setarea DOCTYPE în XSL

Pentru o mai înţelegere în profunzime despre doctypes, încercaţi să vizitaţi aceste link-uri ...
A List Apart: Fix site-ul cu DOCTYPE dreapta!
A List Apart: Dincolo de DOCTYPE: Standarde web, înainte de compatibilitate, şi IE8

Notă: Deşi mulţi dintre noi, HTML / CSS de persoane au fost neglija importanţa de decleration DOCTYPE în documentele noastre, Setarea DOCTYPE dreapta, este, de obicei, răspunsul la problemele browser-ului pentru cele mai multe.


2008 11 martie 2008

Ce sunt CSS Resetează?

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;}


NDK acasă | Exprimarea IT | Gust Exprimarea | Penmenship Exprimarea | Awe Exprimarea | a mă exprima