Kiel fari TTT-paghojn

Stilfolioj

Jam plurloke en la antauaj lecionoj mi skribis, ke oni povas uzi stilfoliojn por doni al la paghoj plachan aspekton. Nun finfine ni povas eklerni, kiel oni tion efektive faras. Vi lernos, kiel oni ligas stilfolion al XHTML-pagho. Vi lernos pri marghenoj, tekstostilo, borderoj, koloro, kaj pri multo alia. (Tiujn klarigojn mi verkis sur bazo de CSS-a enkonduko kreita de Dave Ragget: “Adding a touch of style”.)

En la fino de tiu chi sufiche longa leciono vi ankau lernos iomete pri problemoj pri CSS, kaj pri praktika metodo eviti tiajn problemojn, kaj iom pri testado de CSS en diversaj TTT-legiloj.

Unua provo

Ni komencu per simpla ekzemplo, kiu proponas verdan koloron de la teksto, kaj blankan koloron de la fono:

body {
  color: green;
  background-color: white;
}

Kopiu tiun regulon en tekstodosieron. Nomu la dosieron ekzemple “testo.css”, kaj konservu ghin kune kun viaj testaj XHTML-paghoj. En la dosiero estu nenio ajn krom la chi-antaua kodo. (Ne estu iaj ajn XHTML-aj elementoj kun <, > kaj / au similaj aferoj.)

Ligi la stilon al XHTML-pagho

Poste vi kreu simplan XHTML-paghon (au reuzu iun el viaj antauaj testopaghoj). Ghi trovighu samloke (en la sama dosierujo) kiel la dosiero “testo.css”.

Por indiki, ke vi volas uzi la stilon de “testo.css”, vi aldonu la jenan elementon al via testopagho:

<link rel="stylesheet" type="text/css" href="testo.css" />

Tiu elemento trovighu ie ene de la head-elemento, ekzemple jene:

<head>
 <meta http-equiv="Content-Type"
  content="text/html; charset=utf-8" />
 <title>Mia unua TTT-pagho</title>
 <link type="text/css" rel="stylesheet" href="testo.css" />
</head>

Aldonu tian kodon al via testopagho, kaj provu rigardi per TTT-legilo. Se chio funkcias ghuste, la pagho devus nun aperi kun verda teksto sur blanka fono.

Noto: Kompreneble oni ankau povas meti la stilfolion aliloken (en alian dosierujon, en alian servilon). Tiam oni skribu en la link-elemento la efektivan adreson de la stilfolio, per relativa adreso au per absoluta adreso. Vidu pri tiaj adresoj en la klarigoj pri img-elementoj.

Kiel funkcias stilreguloj?

Stilregulo en CSS komencighas per nomo de elemento en XHTML, ekzemple body. Poste sekvas, ene de kunigaj krampoj, { kaj }, aro da stildeklaroj.

Stildeklaro konsistas el nomo de eco, ekzemple color (= “tekstokoloro”), dupunkto (:), kaj valoro por tiu eco, ekzemple green (= “verda”). Post tia deklaro oni skribu punktokomon (;). (Post la lasta deklaro en tia aro oni tamen rajtas forlasi la punktokomon, se oni estas pigra.)

En nia ekzemplo estis du deklaroj: color: green; kaj background-color: white;. color signifas “koloro de la enhavo” (de la teksto); background-color signifas “koloro de la fono”. La unua deklaro do diras, ke la teksto estu verda. La dua deklaro diras, ke la fono estu blanka. Ambau deklaroj validas por la body-elemento, kaj sekve por la tuta legebla enhavo de la pagho.

Noto: Oni ankau povas inkluzivi stildeklarojn rekte en la XHTML-kodon, en diversaj manieroj, sed pri tio vi ne lernos chi tie. Estas multe pli bone teni la stilregulojn en aparta dosiero.

Noto: Rimarku, ke CSS skribighas tute alie ol XHTML. Multaj konfuzighas skribante ekzemple color = green; au color: "green"; au simile. Oni ne uzas egalsignojn (=) en CSS, kaj oni tre malmulte uzas citilojn. La ghusta formo de tia kolorodeklaro estas color: green; kun dupunkto kaj sen citiloj.

Paghomarghenoj

TTT-paghoj aspektas multe pli bone, se oni aldonas marghenojn. Vi povas proponi maldekstran marghenon per la eco margin-left, kaj dekstran marghenon per margin-right, ekzemple:

body {
  margin-left: 10%;
  margin-right: 10%;
}

Tiuj deklaroj aldonas marghenojn larghajn je 10 procentoj de la tuta fenestrolargho. Tiaj procentovaloroj estas relativaj, kaj tial la marghenoj reskalighas, se la leganto shanghas la grandecon de la fenestro de la TTT-legilo.

Deshovoj

Oni povas aparte elstarigi titolojn, se oni metas ilin ene de la margheno de body, ekzemple:

body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }

Tiu ekzemplo havas tri stilregulojn. Unu por body, unu por h1, kaj unu por la aliaj titoloj (h2, h3, h4, h5 kaj h6). La marghenoj de la titoloj adiciighas al la marghenoj de body. Ni donis negativajn maldekstrajn marghenojn por la titoloj (-8%, -4%). Tial la titoloj movighas maldekstren kompare kun de la ghenerala margheno. Faru testan paghon kun multaj titoloj, kaj ankau alineoj (p-elementoj). Ligu ghin al CSS-dosiero kun tiuj stilreguloj, kaj rigardu, kiel la pagho prezentighas.

Rimarku, ke la tria regulo koncernas kvin diversajn elementojn: h2,h3,h4,h5,h6. En tiaj reguloj oni devas meti komojn inter la elementonomoj.

Influi spacon super kaj sub elementoj

Oni ankau povas proponi kiom da libera spaco estu super elementoj (per margin-top) kaj sub elementoj (per margin-bottom). La posta ekzemplo proponas tiajn valorojn por h2-elementoj:

h2 { margin-top: 8em; margin-bottom: 3em; }

En la ekzemplo uzighas la unuo em. Unu em egalas al la alteco de unu (mezuma) signo en la aktuala tiparo kaj la aktuala tipargrandeco. Ghi ebligas flekseblan stilon, kiu adaptighas al la tekstograndeco. La unuo em estas multe pli sekura ol ekzemple px (bildero) kaj pt (punkto), char tiuj unuoj estas pli-malpli fiksaj. Ghenerale oni chiam evitu stilaranghojn, kiuj ne flekseble adaptighas al variaj cirkonstancoj.

Klasoj

En la leciono pri Helpelementoj kaj atributoj ni pase konatighis kun la class-atributo, per kiu oni povas deklari, ke elemento apartenas al certa klaso. Oni povas skribi stilregulojn, kiuj referencas al tiaj klasoj. Jen ekzemplo de tia stilregulo:

h2.subsekcio { 
  margin-top: 8em; 
  margin-bottom: 3em; 
}

Tiu regulo validas nur por h2-elementoj, kiuj apartenas al la klaso “subsekcio”. En la XHTML-kodo oni deklaras tian klason jene:

<h2 class="subsekcio">Titolo</h2>

Oni indikas, ke stilregulo validas por certa klaso, per punkto (.) sekvata de la stilnomo. Ekz. p.noto signifas p-elementoj de la klaso “noto”. (Ne metu spacon antau au post la punkto, char tiam la regulo ne funkcias.)

Ekzistas ankau aliaj manieroj limigi la celgrupon de stildeklaroj, sed klasoj estas la plej fleksebla rimedo por tio.

Subtilajho pri spaco

Kiam titolon sekvas alineo, la valoro por margin-bottom de la titolo ne adiciighas al la valoro por margin-top de la alineo. Anstataue la pli granda el la du valoroj uzighas por la spaco inter la du elementoj. Tiu subtila regulo validas chiam por margin-bottom kaj margin-top sendepende de la nomoj de la elementoj.

Deshovo de la unua linio

Foje oni volas krei deshovon de la unua linio de chiu alineo. Tia aspekto estas ofte uzata en tradicia librotipografio. La chi-posta stilregulo provas rekrei tian aspekton:

p { 
  text-indent: 2em; 
  margin-top: 0; 
  margin-bottom: 0; 
}

Tiu regulo aldonas per la eco text-indent deshovon je 2 em-oj al la unua linio de alineo. La regulo ankau forprenas (per la ecoj margin-top kaj margin-bottom) la kutiman spacon inter alineoj.

Noto: Rimarku, ke margin-top havas la valoron 0 sen unuo. Normale oni chiam devas aldoni unuon. Ekz. 10 estas sensenca per si mem. Oni devas skribi, chu oni celas 10%, 10em, 10px au ion alian. Sed kiam la valoro estas ghuste 0, ne gravas la unuo, kaj oni povas ghin forlasi.

Tiparoj kaj tiparstiloj

Tiparstiloj

La plej kutimaj tiparstiloj estas kursivo kaj grasa stilo (kun dikaj strekoj). Multaj TTT-legiloj automate prezentas em-elementojn kursive, kaj strong-elementojn grase. Ni supozu, ke vi anstataue volas, ke em-elementoj aperu grase kaj kursive, dum strong-elementoj aperu grase kaj majuskle:

em { 
  font-style: italic; 
  font-weight: bold; 
} 
strong { 
 text-transform: uppercase; 
 font-weight: bold; 
}

Rimarku la kodvortojn font-style (tiparstilo), font-weight (tipardikeco) kaj text-transform (teksto-transformado). italic signifas “kursive”, bold signifas “grase” kaj upper-case signifas “majuskle” (“cheflitere”).

Eble vi volas, ke chiuj h2-titoloj aperu tutminuskle:

h2 { text-transform: lowercase; }

lowercase signifas “minuskle” (“malcheflitere”).

Tipargrandeco

Se vi volas influi la grandecon de teksto, vi prefere chiam faru tion per relativaj unuoj.

La chi-posta ekzemplo stiras la grandecon de titoloj per procentajhoj relative al la grandeco de ordinara teksto:

h1 { font-size: 200%; } 
h2 { font-size: 150%; } 
h3 { font-size: 100%; }

Oni povas indiki tekstograndecon ankau por ordinara teksto, ekzemple por teksto de p-elementoj, sed ghenerale estas preferinde lasi tian tekston je normala grandeco. Chiu leganto mem elektu, kiel granda estu ordinara teksto. Oni do skribu por p normale nur font-size: 100% au font-size: 1em au font-size: normal. Chiuj tri variantoj simple esprimas, ke la tekstograndeco estu kiel normale (lau la baza elekto en la TTT-legilo).

Tiparfamilio

Indiki uzon de certa tiparo estas chiam tikla afero. Oni ne povas scii, kiuj tiparoj estas haveblaj che diversaj legantoj. Tial oni povas indiki tutan liston de tiparoj en unu sama stildeklaro. Tia listo montras tiparnomojn en ordo de preferado.

Krom precizaj tiparnomoj kiel Times New Roman, Helvetica k.t.p., oni povas en tia listo uzi ankau gheneralajn nomojn. Ekzistas kvin tiaj gheneralaj nomoj de tiparspecoj, kaj principe chiu komputilo devas havi tiparon por chiu el tiuj gheneralaj nomoj:

`serif`	= serifa tiparo (“Times”, “Bodoni” au simila)
`sans-serif`	= senserifa tiparo (“Arial”, “Helvetica” au simila)
`cursive`	= kursiveca tiparo (“Caflisch Script”, “Adobe Poetica” au simila)
`fantasy`	= dekoracia tiparo (“Alpha Geometrique”, “Critter” au simila)
`monospace`	= fikslargha tiparo (“Courier”, “Courier New” au simila)

Jen ekzemplo:

body {
  font-family: Verdana, sans-serif;
}
h1,h2 {
  font-family: Garamond, "Times New Roman", serif; 
}

Lau tiu ekzemplo gravaj titoloj (h1, h2) prezentighu prefere per la tiparo Garamond, kaj, se tiu ne haveblas, per Times New Roman, kaj, se ankau tiu ne haveblas, kiel lasta elekto per tiu tiparo, kiu por la TTT-legilo servas kiel serif-tiparo. Alia teksto (ekzemple teksto de p-elementoj) aperu en Verdana, se eble, kaj alie per sans-serif-tiparo.

Rimarku, ke estas komoj inter la diversaj tiparnomoj. Ankau rimarku, ke la tiparnomo “Times New Roman” estas inter citiloj, dum la aliaj estas sen citiloj. Oni uzu citilojn nur che tiparnomoj, kiuj enhavas spacetojn. Che aliaj tiparnomoj oni nepre ne uzu citilojn!

Bordero kaj fono

Oni povas aldoni borderon (ornaman randon) al ekzemple titolo, listo, alineo, au al grupo de tiaj elementoj kunigitaj per div-elemento. Ekz.:

div.box {
  border-style: solid;
  border-width: thin;
  width: 100%;
}

La eco border-style indikas la specon de bordero. La eblaj valoroj estas solid, dotted, dashed, groove, ridge, inset kaj outset. Testu ilin por vidi la efikon. Ekzistas ankau la valoro none (= nenia bordero).

La eco border-width indikas la larghecon de la bordero. Krom la kodvortoj thin (mallargha), medium (mezlargha) kaj thick (largha), oni povas ankau uzi precizajn valorojn kiel 0.1em, 5px k.s.

Per border-color eblas indiki la koloron de bordero.

La eco width en la ekzemplo, estas por la largheco de la tuta div-elemento. 100% signifas, ke ghi estu largha je la tuto de la havebla spaco.

Povas esti konvene doni fonan koloron al la tuta “skatolo” de blokelemento. Jen ekzemplo:

div.color {
  background-color: rgb(204,204,255);
  padding: 0.5em;
  border: none;
}

Chi tie la fonkoloro (background-color) estas indikita per precizaj valoroj de rugho, verdo kaj bluo (rgb = “red”, “green”, “blue”). La eblaj kvantoj estas de 0 ghis 255.

La eco padding (remburo) aldonas spacon inter la rando de la elemento kaj la teksta enhavo. En la ekzemplo estas ghenerala remburado je duona em. Eblas ankau precizigi per valoroj por remburado de la kvar flankoj aparte: padding-top (supra flanko), padding-right (dekstra), padding-bottom (suba) kaj padding-left (maldekstra).

Oni ankau povas elekti meti borderon nur che iuj flankoj de blokelemento. Tion oni faras per border-top (supre), border-right (dekstre), border-bottom (sube) kaj border-left (maldekstre). Post chiu el tiuj vortoj eblas aldoni -width (por largho), -style (por speco) kaj -color (por koloro). Ekzemple:

p.speciala {
  border-left-style: solid;
  border-right-style: none;
  border-top-style: none;
  border-bottom-style: none;
  border-left-width: thin;
  border-color: red;
  padding-left: 0.2em;
}

Tiu regulo koncernas p-alineojn de la klaso “speciala”. Ili havu rughan borderon lau la maldekstra flanko.

Koloroj

Ni jam vidis plurajn ekzemplojn de kolorindikado chi-antaue, per deklaroj kiel color: green, background-color: white, border-color: red k.s.

Ekzistas en CSS 16 normigitaj kolornomoj. Ili aperos chi-poste. Oni ankau povas doni dekumajn valorojn por rugho, verdo kaj bluo (0 - 255), ekzemple rgb(0,255,128), tiele precize miksante la deziratan koloron. Oni povas anstataue uzi deksesumajn valorojn, sed tiam oni skribas la signon # kaj poste la valorojn sen krampoj per tri au ses deksesumaj ciferoj, ekzemple #99f au #ffddaa. Vidu pli chi-poste.

Noto: Atentu, ke vi ne donu la saman koloron al teksto kaj fono. Kompreneble tio malebligas entute legi la tekston, sed tio povas krome kolerigi serchilojn kiel Google, kiuj tiam pensas, ke vi volas trompi per kashitaj (kaj eble falsaj) shlosilvortoj. Tio povas kauzi, ke la serchilo plene forjhetos viajn paghojn el sia indekso!

Koloroj de ligiloj «

Oni povas per CSS proponi kolorojn por ligiloj. Oni povas ekzemple doni unu koloron por nevizititaj ligoj, alian por jam vizititaj ligoj, ankorau alian koloron por ligoj, kiuj estas alklakataj, kaj ech specialan koloron por ligoj, al kiuj la musmontrilo aktuale montras:

a:link { color: rgb(0, 0, 153) } /* nevizititaj */ 
a:visited { color: rgb(153, 0, 153) } /* vizititaj */ 
a:active { color: rgb(255, 0, 102) } /* alklakataj */ 
a:hover { color: rgb(0, 96, 255) } /* almontrataj */

Rimarku la dupunktojn antau visited k.t.p.

(En tiu ekzemplo estas aldonitaj komentoj. CSS-komentoj estas skribataj per /* antaue, kaj */ poste. Ofte povas esti utile aldoni tiajn komentojn, kiuj memorigas, kion oni celis per iu parto de la CSS-kodo.)

Plej multaj TTT-legiloj automate substrekas ligilojn. Se oni ne volas tian substrekadon, oni povas ghin forigi per CSS. Jen ekzemplo, kiu forigas la substrekadon che a-elementoj de la klaso “simpla”:

a.plain { text-decoration: none }

La eco text-decoration (teksto-dekoracio) povas havi la valorojn: none (nenia dekoracio), underline (substreko), overline (superstreko), line-through (trastreko), blink (palpebrumanta) kaj inherit (heredita = sama kiel la gepatra elemento - la elemento, ene de kiu trovighas la afero).

Ghenerale estas tamen konsilinde lasi la substrekadon de ligiloj. Homoj alkutimighis al tiaj substrekoj, kaj rekonas ligilojn lau tio. Multaj opinias, ke oni prefere lasu ankau la implicitajn kolorojn de ligiloj.

Problemo «

Estas unu problemo pri la antaua kodo por almontrataj ligiloj: a:hover { ... }. Se oni skribas tiel, tio validas ne nur por a-elementoj kun href-atributo (alklakeblaj ligiloj), sed ankau por a-elementoj, kiuj nur estas celpunktoj de ligiloj, kaj kiuj tute ne havas href-atributon. Se tia a-elemento havas ian enhavon, kaj se oni musumas super ghi, ankau ghi estas almontrata, kaj do devas ricevi la indikitan stilon. Tion oni preskau neniam volas.

Oni povas eviti tiun problemon, se oni skribas jene:

a:link:hover { color: rgb(0, 96, 255) }

Tiel oni indikas, ke la afero validas nur por a-elementoj, kiuj estas ligiloj, kaj super kiuj oni musumas. Aliflanke nuntempe estas preferinde tute ne uzi a-elementojn, kiuj estas nuraj celpunktoj de ligiloj. Se oni agas tiel, la problemo chiuokaze ne povas aperi. En la klarigoj pri ligiloj estas priskribo, kiel krei celpunktojn por ligiloj.

Koloraj handikapoj

Memoru, ke multaj homoj havas kolorvidan handikapon, kiu malfaciligas al ili distingi inter ekzemple rugho kaj verdo, au inter flavo kaj bluo. Ghenerale oni evitu kolorkombinojn (teksto kaj fono), kiuj povas malfaciligi la legadon al tiaj homoj.

Nomitaj koloroj

La normigita aro de kolornomoj en CSS estas: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. Iuj TTT-legiloj komprenas ankau kelkajn aliajn tiajn nomojn, sed tiaj nenormaj kolornomoj estas evitendaj.

Jen la precizaj difinoj de tiuj koloroj, per deksesumaj valoroj:

Nomo	Kodo	Koloro
`black`	`#000000`
`silver`	`#C0C0C0`
`gray`	`#808080`
`white`	`#FFFFFF`
`maroon`	`#800000`
`red`	`#FF0000`
`purple`	`#800080`
`fuchsia`	`#FF00FF`
`green`	`#008000`
`lime`	`#00FF00`
`olive`	`#808000`
`yellow`	`#FFFF00`
`navy`	`#000080`
`blue`	`#0000FF`
`teal`	`#008080`
`aqua`	`#00FFFF`

Valoroj kiel #FF9999 difinas koloron per deksesumaj numeroj por rugho, verdo kaj bluo. La unuaj du signoj post # donas la valoron por rugho, la sekvaj du difinas la verdon, kaj la lastaj du la bluon. La valoroj povas esti inter 00 kaj FF (= 255 dekume). En CSS oni ankau povas skribi tiajn deksesumajn valorojn per nur tri ciferoj: #FFF = #FFFFFF, #123 = #112233, #ABC = #AABBCC, k.t.p. (La “ciferojn” A, B, C, D, E kaj F oni ankau povas skribi minuskle, a, b, c, d, e, f, se oni preferas.)

TTT-sekuraj koloroj «

Ne chiuj komputiloj povas redoni chiujn kolornuancojn. Inter la multegaj eblaj nuancoj oni trovis limigitan aron de nuancoj, kiujn plej multaj komputiloj kaj TTT-legiloj povas redoni. Oni nomas ilin “TTT-sekuraj koloroj”. Se vi uzas nur tiujn kolornuancojn, vi povas senti vin sufiche sekura, ke plej multaj legantoj vidos tion, kion vi intencis, anstatau ion tute strangan kaj neantauplanitan. Tute certa oni tamen neniam povas esti. La efektiva montrado de koloroj povas varii depende de multaj kapricaj faktoroj (ekzemple la kvalito de la ekrano).

Jen tabelo de “la TTT-sekuraj koloroj”.

Pli komplika CSS

Chi-antaue vi konatighis kun kelkaj bazaj aferoj, kiujn oni povas fari per CSS. Vi ne lernis chiujn detalojn, kaj mi esperas iam povi aldoni plian lecionon kun pli detalaj instruoj pri CSS.

CSS estas sufiche ampleksa lingvo, kaj ghi estas daure vastigata. Interalie ghi enhavas ankau eblojn difini stilojn por alia prezentado ol la kutima ekrana legado de TTT-paghoj. Oni povas difini stilojn por presado surpapere, por projekciado sur ekrano, kaj ankau por vochlegado de TTT-paghoj (sed kredeble ankorau ne ekzistas vochlegiloj, kiuj povas uzi tian stilon).

Eraroj en TTT-legiloj «

Unu problemo pri CSS estas, ke iuj TTT-legiloj enhavas multe da eraroj kaj mankoj en sia traktado de CSS. Oni do ne povas fidi, ke la stilreguloj estos same interpretataj de chiuj legiloj. Nuntempe tiaj problemoj aperas praktike nur en malnovaj, sed ankorau uzataj, versio de la legilo “Esplorilo”. Temas konkrete (en Majo 2011) pri versioj 6 kaj 7 de Esplorilo.

Kiel agi praktike?

Ekzistas kelkaj eblaj strategioj por eviti problemojn pri CSS:

Oni povas limigi sian uzadon de CSS al la plej bazaj kaj plej simplaj aferoj, kiuj funkcias en pli-malpli chiuj legiloj, kiuj entute komprenas CSS-on. Sed ech ne chiuj simplaj aferoj klarigitaj en tiu chi leciono estas tute sekuraj. Ni havis ekzemplon kun negativaj valoroj por marghenoj.
Oni povas uzi chian ajn CSS-on libere lau la reguloj de la CSS-normoj, tute ignorante, chu la paghoj vere estas legeblaj kaj uzeblaj en chiuj legiloj, dirante, ke tiuj, kiuj uzas malnovajn kaj eraroplenajn TTT-legilojn, kulpigu sin mem, char ili ne instalis pli bonan legilon.
Oni povas fari diversajn stilfoliojn au diversajn stilregulojn por diversaj legiloj, kaj aranghi, ke chiu legilo ricevu nur tian stilon, kiu taugas por ghuste tiu legilo. Kiel mi skribis chi-antaue, temas praktike nur pri donado de apartaj stilreguloj al la problemaj legiloj Esplorilo 6 kaj Esplorilo 7. Bonshance eblas tion fari relative facile per t.n. kondichaj komentoj.

Oni chiuokaze chiam faru XHTML-paghojn, kiuj funkcias tute bone ankau sen stilfolio. La stilo estu aldona lukso, aldona ornamo. (Iuj legantoj chiuokaze preferas legi TTT-paghojn en simpla senstila maniero. Ili au uzas legilon, kiu chiam tute ignoras CSS-on, au uzas legilon, en kiu ili elshaltis la uzadon de stilfolioj.) Kelkaj do vidos la paghojn en simpla senornama prezento, dum aliaj vidos la paghojn bele stiligitajn per CSS. Chiuj estos tute kontentaj.

Tamen oni devas testi

Ech se oni uzas la chi-antaue klarigitan artifikon, oni tamen devas testi sian CSS-kodon en la praktiko. Precipe se oni uzas tre altnivelan CSS-on (ekzemple poziciigadon kaj flosantajn elementojn), oni nepre devas testi la paghojn en pluraj legiloj.

Mi rekomendas uzi la TTT-legilon Fajrovulpo kiel chefan laborilon, dum oni ellaboras siajn paghojn, char tiu legilo tre bone komprenas CSS-on. Sed ankau aliaj modernaj TTT-legiloj, kiel Chrome, Safari kaj Operao, estas tute taugaj. Fakte versio 9 de Esplorilo estas nun tiom bona, ke oni povas ankau ghin uzi tiucele. Poste oni testu la paghojn en “Internet Explorer 8” kaj “Internet Explorer 7” en Vindoza komputilo, kaj laubezone iom poluru la kodon, se tiuj legiloj havas problemojn. Se oni estas tre ambicia, oni testu ankau en "Esplorilo 6", kaj ech adaptu la kodon al tiu legilo, kiu nun tamen estas tiom malnova kaj mankohava, ke oni tute rajtas ghin ignori, kvankam ankorau relative multaj uzas ghin. Pli malnovaj versioj de Esplorilo estas nun tiom maloftaj au ech plene formortintaj, kaj oni neniel bezonas pri ili zorgi. Ankau la siatempe tre populara legilo “Netscape Navigator” estas nun tute malaperinta.

Estas tre inde testi la paghojn ankau en legilo, kiu tute ne uzas CSS-on, ekzemple en “Lynx”, por certighi, ke la pagho estas bone legebla ankau sen stilo. Estas konsilinde fari tion ech antau ol oni komencas verki stilfolion. Kompreneble, se oni ankorau ne aldonis stilfolion, oni povas fari tian teston per chiu ajn TTT-legilo.

Oni ankau memoru, ke oni testu kun diversaj agordoj de la TTT-legilo. Oni povas shanghi la bazan tiparon kaj tipargrandecon, provante ekstremajn agordojn (treege malgranda tiparo, treege granda tiparo), oni povas (se eble) elshalti uzadon de koloroj, oni povas variigi la grandecon de la fenestro (tre granda fenestro, tre malgranda), oni povas shanghi la ekranfajnecon (multe da bildopunktoj, malmulte da bildopunktoj), k.t.p. Tiam oni povas vidi, chu la stilarangho funkcias en chiuj diversaj kondichoj. XHTLM-paghoj estu flekseblaj kaj legeblaj (kiom entute eble) por chiuj uzantoj, en chiuj diversaj komputiloj, sub chiaj kondichoj.

Kontroli CSS-on

XHTML-kodon oni chiam validumu por eviti erarojn. Simile oni povas kontroli ankau CSS-kodon (kvankam tia kontrolado estas iom alispeca). Vi povas ekzemple uzi la CSS-kontrolan servon de W3C.

Al la sekva leciono