Ilmaista sitä

Toinen vanha koulu muisti täydentävät ...

Miksi jotta windos.status?
JavaScript voisi olla painajainen, kun on jotain debug. Firefoxissa ei ole muutama kätevä lisät, kuten Firebug thats tekee elämästämme helppoa ja myös äänestää suosituin debug tekniikka Javascriptin pitää mennä "Hälytys ()". Anywaz! On muutamia tapauksia, kun lisäät ALERT ei debug teidän väärinkäytöksiltä käyttäytyy Javascript ei vain ole mikään hyvä idea. Esimerkiksi! Sinulla on dragble kohta, jonka asema on varoittanut .... EI EI! Älä tee sitä! ... Voit vain saada ääretön hälytyksiä tai sinulla tapana voi todella drap sinun dragable. No! On enemmän hyviä tilanteita, joissa voit kirjoittaa ulos debug tekstit tilarivillä paljon usful ... Uskokaa minua! Sen kokemus!

IE oletuksena vasemmalle kirjoitat selaimen tilarivillä käyttämällä syntaksia "window.status = 'jotakin debug", mutta Firefox ei. Joten jotta ikkunoiden tila muuttuu, voit tehdä jommankumman seuraavista.

Avoinna about: config selaimella (kirjoita "about: config" Tämä tulee osoiteriville) ja hae
dom. disable_window_status_change. Muuta se väärä ... klikkaa merkintä vaihtaa tilaansa.

Tai vaihtoehtoisesti

"Työkalut → Asetukset → Sisältö → Enable JavaScript / Advanced → Change status bar text"

Ja myös huomata, että ... kirjoittaa tilarivillä JavaScript, IE on aivan ok, jos käytät lyhyttä syntaksia eli status = 'jotkut debug text ", mutta Firefoxissa, sinun on käytettävä täysimääräisesti syntaksia eli window.status =' jotain debug "

Kumpikaan Olen hyvin uusi käyttöliittymä (UI) kehittäminen enkä veteraani ja olen aina laittaa sitä, minä sopii profiilia UI kehittäjä enemmän kuin suunnittelija, ilman pahoittelee. Oh No! Mitä minä kirjoittaa? ... Jonkin aikaa (pitää olla vuosina ei yhtään vähempää) nyt aina silloin tällöin kun en päästä vähän UI Design (kun ammattimainen suunnittelija on mennyt lomalle), olen aina cant stop-miettinyt olisiko minun pitäisi suunnitella asianmukaisesti complient vai ei (vilpittömästi, ei että voisin achive 100% standardien noudattamista, jos halusin myös). Sitten sanon, mitä paskaa! ... Suunnittelussa tulisi olla yksinkertainen, mukava ja ennen kaikkea näyttää käyttökelpoinen, se ei tee vierailijoita karkuun ... tai Bounce (on tekninen). Mitä hyötyä olisi kiva tableless CSS layout olla vierailija, joka ei piittaa kaikki fiksu HYPERTEKSTI ja Cascading Style Sheet ihon alle verkkosivusi ... Zilch!
Sen pitäisi näyttää mukava ja helppo käyttää ... sitten tulee kaikki vaatimukset kamaa.

Olen stumbbled accross tämän blogin merkintä Jason Fried of 37 Signals (Niille jotka eivät tiedä 37 signaalit ovat onces jotka ovat luoneet mahtavia Web apps kuten Basecamp, nuotio jne.), joka kirjoitti jotain vastaavaa 2004 ja uskokaa minua, melkein 5 vuotta ja ei ole paljon muuttunut, että ... olin iloinen lukea virkaansa, sillä olen täysin samaa mieltä siitä, mitä hänellä on sanottavaa, ja myös siitä, hän ei ole varma siitä, mitä kertovat sen vain hänen hänestä ja niin on minun

Jason Fried: "On aivan liian paljon puhua CSS ja XHTML ja standardit sekä saatavuus ja liian vähän puhua ihmisille. CSS ja standardit yhteensopiva koodi ovat vain työkaluja - sinun täytyy tietää, mitä rakentaa näillä työkaluilla. Hienoa, olen iloinen teidän UI ei käytä taulukoita. Mitä? Ketä kiinnostaa, jos se ei vielä anna ihmisiä saavuttamaan tavoitteensa. Web-standardit ovat suuria, mutta ihmisten omat standardit ovat Getting Things Done (ja on edelleen liian vaikea tehdä verkossa).

UI suunnittelijat tekevät samaa vanhaa laatua "unohtaminen ihminen toisella puolella" virheitä - paitsi tällä kertaa koodiaan näyttää paremmalta. Ihmiset - ei koodia validators - käyttöliittymät. "

Kassalle Jason Fried n koko artikkeli

DISCALIMER: Tämä ei tarkoita, että meidän pitäisi vaivautua vaatimuksia lainkaan. Standardit on hyvä olla ja pitäytyä niissä mahdollisimman paljon. Meidän on vain ymmärrettävä, että hyvän käyttöliittymän suunnittelu ei aina tarkoita 100% standardeja Complience tai päinvastoin ....

Minun lista minun opetukset, minä seuraan muutamia käyttöliittymän suunnittelu ja kehittäminen kultaiset säännöt ... Tässäpä TOP 10 ... ei, että sinulla on seurata niitä liikaa ...

1. Huolehdi käyttäjille. Käyttäjät voivat tehdä tai rikkoa sivuston. Antaja antaa käyttäjä näyttää koko idoit, täysin kykenemätön sivuston käytössä. Se on huono!

2. Pidä Yksinkertaisuus ja helppokäyttöisyys ensisijainen guidlines. Liian monia asioita ruudulla, sitä suurempi todennäköisyys, että käyttäjä saa sekoittaa tai häiritsee niiden alkuperäinen tehtävä.

3. Ole RAJAT ... antaja hemmotella liikaa KÄYTETTÄVYYS, saavutettavuutta ja standardeja. Käytä standardeja tehokkaasti ja ne ymmärretään joukkue. Näin varmistetaan oikea yhdenmukaisuuden tuote

4. Prototyyppi vaatimuksen. Koska näinä päivinä käyttöliittymät ovat rikkaita, prototyypit on aina parempi kuin vain yksinkertaisia ​​kehyksiä viivoina, ja jälkimmäinen on vailla kunnollista vuorovaikutusta, se ei anna asiakkaalle selkeä kuva lopputuotteen, jota kehitetään. Aina on helpompi muuttaa prototyyppien lopullisiin tuloksiin. Myös! ja prototyyppien tahansa vuorovaikutusta asioita voitaisiin korjataan aikaisemmin kehityksen aikana.

5. Johdonmukaisuus suunnittelua ja vuorovaikutus on erittäin tärkeää. Antaja sekoita käyttäjää arvaamattomia yhteisvaikutuksia ja vempaimia.

6. Ymmärrä "Design Mission Statement". Aways keskittyä ensisijaisesti toiminnan sivun beign suunniteltu. Varmista myös, listan seconday toimia sivun, ja priorisoida niitä.

7. Anna asianmukainen palaute sivuston käyttäjille. Kun useimmat sivustot suunniteltu noin AJAX, tarjoavat visuaalisia vihjeitä käyttäjälle muutoksista sivulle. Käyttäjän on annettava tunnustus loppuun mitään tehtävää hän suorittaa. Antaja tekee käyttäjä odottaa ja arvaa, esim.. tarjota edistystä indikaattoreiden tiedoston uplaods.

8. Käytä tarkastukset asianmukaisesti. Esim. Käytä Valitse pudotusvalikosta pieniä luetteloissa ainoastaan, antaja antaa käyttäjän valita yhden 200 kaupunkia käyttäen valitse laatikot. Ymmärrä ero painiketta ja linkki. Linkki ja nappi on erilaiset käyttötarkoitukset, antaja käyttää yksi muilla. Anna oikea ohjaus tehdä vuorovaikutuksessa sivun helpompaa. Vältä Valikot, jotka ovat yli kaksi tasoa syvä. Älä keksi pyörää. Käytä standardiohjausten, muokata niitä vain, jos erittäin tarpeellista. Määritä mukautetut tarvittavien tarkastusten sivuston omakohtaisesti, jotta ne voitaisiin luoda ja testata itsenäisesti, käyttövalmis accross sivuston.

9. Antaja toistaa liikaa suunnittelua. Muista! Koko tuote sisältää enemmän kuin suunnittelu yksin. Rakenna sopiva aikataulut projektiisi aikataulu suunnittelussa toistojen ja pysyä siinä. Iterointi auttaa meitä selvittämään, mikä toimii ja mikä ei, poimia kriisipesäkkeissä. Koska hyvä käyttöliittymä vie aikaa, antaa aikaa toistojen ja aloittamalla tuotekehitysprosessin nopeuttamista, jotta suunnittelu toistojen doesnot suoraan merkitse muokata. Liika työstää voisi jeopradize määräaikoja.

10. Istu alas ja ajattele käyttäjä joskus.

Tässäpä toinen vähän peice Javascript kikkailu, että minun piti kaivaa noin, koska tilanne commaned sitä. Yhdessä minun sivustoja, minulla oli tämä tilanne, jossa minun piti toteuttaa "windows.onload" kahdesti. Ensimmäinen asia, joka tuli kokemattomalle mieleen kuin minun (Täytyy rehellisesti sanoa, että koska olen käyttänyt javascript puitteisiin ja kirjastot, olen forgotton tehdä yksinkertaisia ​​asioita itse ... surullista mutta totta), on seuraavan menetelmän ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 jne. ..

Ikävä sanoa, mutta tämä tapa toimia ... dont halua keskustella toteuttamiseen tiede Javascript paljon ... mutta oman viimeaikaisten kokemusten, vain viimeinen toiminto (onloadfn3) on sairas todella saada teloitettiin.

Normaaleissa tilanteissa, toisin kuin minun (jonka minä puhua hieman myöhemmin) ... voisit jollakin seuraavista suorittaa mutliple onload toiminnot ....

Tai jotain tällaista

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

Minun nykyinen tilanne, en voi käyttää kumpaakaan edellä ...
Miksi minun pitää soittaa windows.onload kahdesti, vaan että soittaa kaksi tehtävää yhden onload funktio? Tässä vilkaista minun ongelmani ilmoitus ...

"Oman sivuston sivut on rakennettu kuten WordPress teema .... eli ei yhteistä Header.php ja footer.php, joka sisällytetään kaikkiin sivuille. On onload funktio implementaion vuonna footer.php tehdä joitakin yhteisiä onload toimintoja. Ja on muutamia sivuja, jotka tarvitsevat jotain omaa lataustapahtuman, lukuun ottamatta tehnyt yhteisiä onload toimintoa. Jos liittää takaisinkutsufunktio suoraan window.onload ohjaaja, se ohittaa aiemmin määritetty kutsuja on footer.php "

.... Onko minun ongelmani ymmärtää ?

No! on olemassa muutamia ratkaisuja, en löydä. Ne kaikki ovat hyvin samanlaisia ​​ja pääasiassa implementions ja liuoksen annetaan Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Ratkaisu:

Lisää vain tämä javascript-koodin sivusto ...

 toiminto addLoadEvent (FUNC) {
     var oldonload = window.onload;
     if (typeof window.onload! = 'toiminto') {
        window.onload = FUNC
     } Else {
        window.onload = function () {
            Jos (oldonload) {
                   oldonload ()
           }
           FUNC ()
        }
    }
 }

Ja kutsuvat sitä sen sijaan, että "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Lisää koodin suorittamisen sivunlatauksella *
 }); 

Edut Tämän koodinpätkän ...
1. Ensisijaisesti se voit olla useita windows.onload tapahtumia, soitti erillistä osiin koodia ilman overridding edellinen määritelmä
2. Se on todella huomaamaton. Se voidaan sijoittaa tiedoston sinun on skriptejä tai erilliseen tiedostoon.
3. Se toimii vaikka window.onload on jo asetettu.

Ajattelin tämä on doodle löytää google, niin monta meitä UI ja käsikirjoittajat pitäisi tehdä tämän päivittäin, että on myös hieman peice PHP-koodinpätkän (. Php) tulee Smarty Template (. TPL). Tajusin, että helpompi / suosittu hakua, vielä vaikeampi löytää tarkkaa vastausta ... miljoona hakutulokset mutta useimmat reffered "File" sisältää Smarty ... jossa on seuraava syntaksi

{Include tiedosto = "include / header.php"}

Tämä todella tullakseen otetuksi tiedosto hieno, mutta tekstinä, mitä halusin johtui sisällytetty tiedosto. (Huomaa yllä on käytetty mm malli sisällä mallitiedosto). Lopuksi hieman persiverance .... Olen törmäsi slighty muutettu syntaksia, joka oli vastaus minun vaatimuksesta ... joten tässä se on ... jos havn't löytänyt kuin jo

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

Toinen nopea TTY. Tässä on jotain yksinkertaista ja mukava käyttää POWER CSS ... mutta oli vaikea concieve (ja se varmasti ollut minä), aluksi. Lisääminen Dropshadow, saattaa olla peice kakkua monille meistä, käyttäen joitakin kuvankäsittelyn työkalut, kuten Photoshop ANF Ilotulitus jne.
Syy miksi olen valinnut varjon CSS on, että yleensä luotaessa sivujen suunnittelu / html hakemuksen, vaatimukset pitää iteroimalla. Tällä tarkoitan sitä, In olemassa sivusto, jossa paljon kuvia, kuten ne näyttävät freinds luetteloa tai kuvagalleria, on vaikea käsitellä uudelleen koko kuorma kuvia, jotka oli jo purettu lisätä tai poistaa varjoja, sillä asia.
Joten jos olet tehnyt hieman eteenpäin ajattelua luotaessa HTMLS lisätä nämä ylimääräiset osastojen tai yleensä tilanne on se, että sinulla on Loop Logic tuottaa näitä kuvakkeita / miniatyyrit XSL, PHP. JAVA tai muu ohjelmointi / skriptikieli, voit lisätä sen milloin tahansa, niin on vain kysymys näyttää ja piilottaa nämä varjot käyttämällä CSS-ominaisuutta display, kohti asiakkaiden alati muuttuviin tarpeisiin ... En havn't tehnyt tällaista eteenpäin ajattelu ennen tätä ... mutta ahev jo nyt!

Alla olevassa esimerkissä, alkuperäinen kuva on varjo vapaa ja dropshadows sovelletaan tarpeen mukaan! Lisäksi olen mennyt vähän ylimääräistä, käyttämällä temppuja minun aiemmin Tut (Well! nämä luultavasti on lyhin erilaisia ​​Tutorials, joten se on perusteltua vain kutsuen heitä "Tut": n) noin CSS Clip Property for leveillä vain

Alkuperäinen kuva

CSS DropShadow Tulokset

Katso esittely | Lataa sourcefiles

Miksi haluan ymmärtää tämän??? ... Humm!!

Useimmat CSS kirjoittajat samaa mieltä siitä, että CSS Clip omaisuus on luultavasti yksi kaikkein un käytettyjä CSS-ominaisuuksia. Se oli niin totta minullekin ja oli erittäin iloinen jättää huomiotta sitä, kunnes aloitin muokkaamalla MooTools KAKSI Knob (Pin) Slider Komponentti (Alueen Indicator) .

Oli hyvä ehdotus yhdestä komponentin käyttäjät voivat muokata Slider Component käyttäen leikattu taka kuvia (vasten muuttuja leveys jako) osoittamaan liukusäädintä alue. Näin tuli minun aikani tulla hauska, mutta un-charter (minulle tietysti) vedet CSS Clip omaisuutta.

No! kuinka vaikeaa voi olla? Ei paljon ollenkaan ... Kyllä ja ei. Syntaksi käyttää CSS Clip omaisuus on melko pystyssä, mutta merkitys / usuage on vähän croocked. Kun muisti kuin minun, Everytime I istua muokata minun Slider Script ... Minulla tokeep viittaa takaisin käyttöön tämän CLIP omaisuuden muistuttaa itseäni logiikkaa, että olen luonut minun script .... Näin! ajattelin kynä alas ja toivoa muistaa se tulevaisuudessa (ja myös Niille, jotka näyttävät boggled jota CSS Clip Property)

Mitä CSS Clip tekee?

Clip on osa visuaalisia tehosteita moduulin CSS 2.1. Yksinkertaisesti sanottuna, sen tehtävänä on asettaa näkyvän ikkunan päälle esine, joka on leikattu, joten syväyspolku kuvia ja luoda pikkukuvia ilman luoda uusia tiedostoja (Olen jo laittaa tämän ominaisuuden käyttää paremmin Slider Component )

Käyttämällä CSS Clip ominaisuuden avulla voit luoda rajaavan käyttäen rect muodon. Kuten monet muutkin CSS-ominaisuudet (kuten margin, padding jne.) käyttäen rect vaatii neljä koordinaatit Top, Oikea, Ala, Vasen (HÄIRIÖ). Croocked luonne ominaisuus heijastaa kun otat tarkemmin miten clip laskee rajaavan alueen käyttäen nämä neljä koordinaatit (lähettää aivot heittää hetkeksi). Nyt hämmentää teitä pohja alkaa ylhäältä ja oikealla alkaa vasemmalta. . Näet mitä sanoin? .... Siksi tämä viesti ...

Tämä pieni sekaannus voi helposti kadota, tämä visuaalinen kuvaus CSS Clip / rect omaisuuden alla!!

CSS Clip Vaatimukset

Tehtävä olemme alkaneet on leikata seuraavat Pienoiskuva kuvan squarer näköinen kuva (ja myös laajakulma kuva)

Alkuperäinen Thumbnal / Image	Clip vaatimukset Sqaure Thumbmail

CSS Clip Tulokset

Katso esittely | Lataa sourcefiles

Tämä kysymys mieleeni muutaman kerran ennen, kun työskentelin sivustoissa aikaisemmin liikaa, joka käyttää WordPress näyttämään blogeja tai uudenlaista sisältöä osaan sivustoa / portal.Being noviisi PHP ja noin WordPress pidin procastinating sitä ajatellen "tämä ei ole minun peice kakkua". Vihdoinkin! Tämä vaatimus tuli upto nenääni, kun alkoi Diggin ympärille hieman liuosta.
Olin hämmästynyt, että se todellakin oli helpompaa kuin olin itse ajatellut oli, näyttää luettelon otsikoita tai viimeisin viesti jollakin muulla sivulla ulkopuolella WordPress-käyttöinen osassa, vain käyttää hieman PHP ja WordPress API .

Tässä on mitä tehdä: -
Syistä selitystä, oletetaan, että sivustosi on http://www.inchembur.com/ ja sinulla uutisosiossa Tämän sivuston http://news.inchembur.com/ (joka pyörii WordPress). Nyt vaatimus on osoittaa viimeisin viesti siitä http://news.inchembur.com/ on kotisivulle pääsivuston eli http://www.inchembur.com/index.php

Vaihe 1: Teidän index.php lisätään seuraava peice koodia, Sisällytä WordPress API tiedoston. Voit lisätä tämän sivun haluat postitse näkyvän.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES ", false); / / Disbable käyttö WordPress Theme
vaativat ("/ var / news.inchembur.com / wp-blog-header.php '), / / Sisällytä WordPress API
; // Get Latest Post query_posts (showposts = 1 '), / / Get Uusin viesti
?>

Edellä peice, kuuluvat, saamme vain yhden Viimeisin viesti. Jos haluat kokeilla enemmän vaihtelua vapaasti kaivaa, query_posts() asiakirjat .

Vaihe 2: Nyt osassa Index / Etusivu jossa haluat näyttää uusin WordPress viesti siitä http://news.inchembur.com , käytä seuraavaa koodia. Tarpeetonta sanoa, vapaasti mainoksen teidän tyyli rajapintoja, jännevälit ja luokat kohti suunnittelua tarpeisiin.

Vaihe 3: Ei ole Vaihe 3 ... Että se ... olet valmis!

Miten osoittaa erityinen virka / sivu toisin kuin viimeisin viesti: -
Tämän voi helposti achived muuttamalla argumentit query_posts() mukaan sivun tunnus tai sivu etana

) ; query_posts ("page_id = 7 ');
) ; query_posts (sivunimen = n. ');

tai voit hallita virkojen:
) ; query_posts (showposts = 3);

Joskus pitää pageweight alas ... olemme jakaneet skriptejä palasiksi ... Nämä javascript fragmentit voidaan ladata ja kun tarvitaan (on tapahtuma tai napsauttamalla linkkiä tai painiketta jne.).

Ladataan JavaScript dynaamisesti on yksinkertainen ja melko suoraan eteenpäin alla ...

= “text/javascript” > <Script type = "text / javascript">
toiminto loadNewScript (lähde) {
var s = document.createElement ('script');
s.setAttribute ("tyyppi", "text / javascript");
s.setAttribute ("src", lähde);
document.body.appendChild (s);
}
</ Script>

ja voit olla seuraava kutsu linkkiä missä tahansa kehon, tai voit saada tämän script "onLoad"-asiakirjan itse ...

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

tai

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

Jos olet css henkilö, tietäisit kipua saada teidän asettelut toimivat rajat selaimen. IE8 on jälleen kapuloita teokset meille kehittäjille. Anywaz! Jos osut tätä kysymystä, kuten tein eilen, missä täydellisesti toimivat CSS IE7 (ja aiemmin) ja Firefox on yhtäkkiä alkanut heittää kiukuttelut IE8, kokeile ... Se kauniisti näytti korjata ongelmani tällä hetkellä ....

Käyttämällä Meta ilmoitus, voimme määrittää renderoija haluaisimme IE8 käyttää. Joten pakottaa IE8 tehdä kuin IE7 ... Lisää seuraavat Metakoodi osaksi pään sinun asiakirjan: -

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

Oletuksena IE Meta olisivat: -

<META http-equiv="X-UA-Compatible" content="IE=8" />
mikä tekisi IE8 tehdä sivulle uusia standardeja tilassa.

Haluttaessa syntaksi voidaan käyttää mahtuu muiden selaimien kuten alla:

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

MORE About DOCTYPES:

Jos et vielä tunne sellaista eläintä nimeltään "DOCTYPE" ... tässä on muutamia nopeita lukea
Mitä DOCTYPES? Mitkä ovat selain koukero & STRICT tila?
Asettaminen DOCTYPE on XSL

Saat syvällisempi ymmärrys DOCTYPES, voit käydä nämä linkit ...
List Apart: Fix sivustosi oikea DOCTYPE!
List Apart: Beyond DOCTYPE: Web Standards, Forward Compatibility, ja IE8

Huomautus: Vaikka monet meistä HTML / CSS ihmiset ovat laiminlyönnistä merkitys DOCTYPE decleration meidän asiakirjojen asettaminen oikea DOCTYPE, yleensä vastauksen useimpiin eri selaimet.

CSS Reset on / ovat CSS määrittää useita elementin tyylejä perusindikaattorit joka luo yhdenmukaisempia eri selaimissa.

Olemme kaikki olleet kautta painajaiset kirjoittamisen rajat selaimen CSS-luvulla. Joten kun alamme kirjoittaa myös CSS, se on käytäntö palauttaa se ensin poistaa / nollata cross selain epäjohdonmukaisuuksia. CSS Nollaa, ovat yksinkertaisia ​​muutaman rivin CSS aloitat CSS kanssa, antaa sinulle puhdas pohja alkaa rakentaa heti.

CSS nollaa, että olen yleensä käyttävät yleensä näyttää tältä

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 {
list-style: none;
}

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

Palauta selaimen fonttikokoa
Huomaa myös reset joka on otettu käyttöön selaimen fontin koko seuraava rivi ...

html {font-size: 76%;}

Edellä CSS nollaa selaimen fonttikoko on 10 pikseliä, mikä mahdollistaa työskennellä suhteellisen fonttikoot (mikä on aina tärkeää WAI noudattamisesta prespective)
Esim. seuraavassa määritelmässä, font-size in span on asetettu 10 pikseliä ja että paragarph on asetettu 14 pikseliä ...

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