Kiel fari TTT-pagxojn

Stilfolioj

Jam plurloke en la antauxaj lecionoj mi skribis, ke oni povas uzi stilfoliojn por doni al la pagxoj placxan aspekton. Nun finfine ni povas eklerni, kiel oni tion efektive faras. Vi lernos, kiel oni ligas stilfolion al XHTML-pagxo. Vi lernos pri margxenoj, 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 cxi suficxe longa leciono vi ankaux 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 gxin kune kun viaj testaj XHTML-pagxoj. En la dosiero estu nenio ajn krom la cxi-antauxa kodo. (Ne estu iaj ajn XHTML-aj elementoj kun <, > kaj / aux similaj aferoj.)

Ligi la stilon al XHTML-pagxo

Poste vi kreu simplan XHTML-pagxon (aux reuzu iun el viaj antauxaj testopagxoj). Gxi trovigxu 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 testopagxo:

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

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

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

Aldonu tian kodon al via testopagxo, kaj provu rigardi per TTT-legilo. Se cxio funkcias gxuste, la pagxo devus nun aperi kun verda teksto sur blanka fono.

Noto: Kompreneble oni ankaux 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 aux per absoluta adreso. Vidu pri tiaj adresoj en la klarigoj pri img-elementoj.

Kiel funkcias stilreguloj?

Stilregulo en CSS komencigxas 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. Ambaux deklaroj validas por la body-elemento, kaj sekve por la tuta legebla enhavo de la pagxo.

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

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

Pagxomargxenoj

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

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

Tiuj deklaroj aldonas margxenojn largxajn je 10 procentoj de la tuta fenestrolargxo. Tiaj procentovaloroj estas relativaj, kaj tial la margxenoj reskaligxas, se la leganto sxangxas la grandecon de la fenestro de la TTT-legilo.

Desxovoj

Oni povas aparte elstarigi titolojn, se oni metas ilin ene de la margxeno 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 margxenoj de la titoloj adiciigxas al la margxenoj de body. Ni donis negativajn maldekstrajn margxenojn por la titoloj (-8%, -4%). Tial la titoloj movigxas maldekstren kompare kun de la gxenerala margxeno. Faru testan pagxon kun multaj titoloj, kaj ankaux alineoj (p-elementoj). Ligu gxin al CSS-dosiero kun tiuj stilreguloj, kaj rigardu, kiel la pagxo prezentigxas.

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 ankaux 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 uzigxas la unuo em. Unu em egalas al la alteco de unu (mezuma) signo en la aktuala tiparo kaj la aktuala tipargrandeco. Gxi ebligas flekseblan stilon, kiu adaptigxas al la tekstograndeco. La unuo em estas multe pli sekura ol ekzemple px (bildero) kaj pt (punkto), cxar tiuj unuoj estas pli-malpli fiksaj. Gxenerale oni cxiam evitu stilarangxojn, kiuj ne flekseble adaptigxas al variaj cirkonstancoj.

Klasoj

En la leciono pri Helpelementoj kaj atributoj ni pase konatigxis 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 antaux aux post la punkto, cxar tiam la regulo ne funkcias.)

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

Subtilajxo pri spaco

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

Desxovo de la unua linio

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

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

Tiu regulo aldonas per la eco text-indent desxovon je 2 em-oj al la unua linio de alineo. La regulo ankaux 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 cxiam devas aldoni unuon. Ekz. 10 estas sensenca per si mem. Oni devas skribi, cxu oni celas 10%, 10em, 10px aux ion alian. Sed kiam la valoro estas gxuste 0, ne gravas la unuo, kaj oni povas gxin forlasi.

Tiparoj kaj tiparstiloj

Tiparstiloj

La plej kutimaj tiparstiloj estas kursivo kaj grasa stilo (kun dikaj strekoj). Multaj TTT-legiloj auxtomate prezentas em-elementojn kursive, kaj strong-elementojn grase. Ni supozu, ke vi anstatauxe 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” (“cxeflitere”).

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

h2 { text-transform: lowercase; }

lowercase signifas “minuskle” (“malcxeflitere”).

Tipargrandeco

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

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

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

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

Tiparfamilio

Indiki uzon de certa tiparo estas cxiam tikla afero. Oni ne povas scii, kiuj tiparoj estas haveblaj cxe 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 ankaux gxeneralajn nomojn. Ekzistas kvin tiaj gxeneralaj nomoj de tiparspecoj, kaj principe cxiu komputilo devas havi tiparon por cxiu el tiuj gxeneralaj nomoj:

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

Jen ekzemplo:

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

Laux tiu ekzemplo gravaj titoloj (h1, h2) prezentigxu prefere per la tiparo Garamond, kaj, se tiu ne haveblas, per Times New Roman, kaj, se ankaux 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. Ankaux rimarku, ke la tiparnomo “Times New Roman” estas inter citiloj, dum la aliaj estas sen citiloj. Oni uzu citilojn nur cxe tiparnomoj, kiuj enhavas spacetojn. Cxe aliaj tiparnomoj oni nepre ne uzu citilojn!

Bordero kaj fono

Oni povas aldoni borderon (ornaman randon) al ekzemple titolo, listo, alineo, aux 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 ankaux la valoro none (= nenia bordero).

La eco border-width indikas la largxecon de la bordero. Krom la kodvortoj thin (mallargxa), medium (mezlargxa) kaj thick (largxa), oni povas ankaux 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 largxeco de la tuta div-elemento. 100% signifas, ke gxi estu largxa 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;
}

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

La eco padding (remburo) aldonas spacon inter la rando de la elemento kaj la teksta enhavo. En la ekzemplo estas gxenerala remburado je duona em. Eblas ankaux 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 ankaux povas elekti meti borderon nur cxe iuj flankoj de blokelemento. Tion oni faras per border-top (supre), border-right (dekstre), border-bottom (sube) kaj border-left (maldekstre). Post cxiu el tiuj vortoj eblas aldoni -width (por largxo), -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 rugxan borderon laux la maldekstra flanko.

Koloroj

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

Ekzistas en CSS 16 normigitaj kolornomoj. Ili aperos cxi-poste. Oni ankaux povas doni dekumajn valorojn por rugxo, verdo kaj bluo (0 - 255), ekzemple rgb(0,255,128), tiele precize miksante la deziratan koloron. Oni povas anstatauxe uzi deksesumajn valorojn, sed tiam oni skribas la signon # kaj poste la valorojn sen krampoj per tri aux ses deksesumaj ciferoj, ekzemple #99f aux #ffddaa. Vidu pli cxi-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 sercxilojn kiel Google, kiuj tiam pensas, ke vi volas trompi per kasxitaj (kaj eble falsaj) sxlosilvortoj. Tio povas kauxzi, ke la sercxilo plene forjxetos viajn pagxojn 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, ankoraux alian koloron por ligoj, kiuj estas alklakataj, kaj ecx 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 antaux visited k.t.p.

(En tiu ekzemplo estas aldonitaj komentoj. CSS-komentoj estas skribataj per /* antauxe, 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 auxtomate substrekas ligilojn. Se oni ne volas tian substrekadon, oni povas gxin forigi per CSS. Jen ekzemplo, kiu forigas la substrekadon cxe 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 trovigxas la afero).

Gxenerale estas tamen konsilinde lasi la substrekadon de ligiloj. Homoj alkutimigxis al tiaj substrekoj, kaj rekonas ligilojn laux tio. Multaj opinias, ke oni prefere lasu ankaux la implicitajn kolorojn de ligiloj.

Problemo «

Estas unu problemo pri la antauxa kodo por almontrataj ligiloj: a:hover { ... }. Se oni skribas tiel, tio validas ne nur por a-elementoj kun href-atributo (alklakeblaj ligiloj), sed ankaux 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 gxi, ankaux gxi estas almontrata, kaj do devas ricevi la indikitan stilon. Tion oni preskaux 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 cxiuokaze 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 rugxo kaj verdo, aux inter flavo kaj bluo. Gxenerale 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 ankaux 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 rugxo, verdo kaj bluo. La unuaj du signoj post # donas la valoron por rugxo, 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 ankaux 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 ankaux povas skribi minuskle, a, b, c, d, e, f, se oni preferas.)

TTT-sekuraj koloroj «

Ne cxiuj komputiloj povas redoni cxiujn 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 suficxe sekura, ke plej multaj legantoj vidos tion, kion vi intencis, anstataux ion tute strangan kaj neantauxplanitan. 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

Cxi-antauxe vi konatigxis kun kelkaj bazaj aferoj, kiujn oni povas fari per CSS. Vi ne lernis cxiujn detalojn, kaj mi esperas iam povi aldoni plian lecionon kun pli detalaj instruoj pri CSS.

CSS estas suficxe ampleksa lingvo, kaj gxi estas dauxre vastigata. Interalie gxi enhavas ankaux eblojn difini stilojn por alia prezentado ol la kutima ekrana legado de TTT-pagxoj. Oni povas difini stilojn por presado surpapere, por projekciado sur ekrano, kaj ankaux por vocxlegado de TTT-pagxoj (sed kredeble ankoraux ne ekzistas vocxlegiloj, 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 cxiuj legiloj. Nuntempe tiaj problemoj aperas praktike nur en malnovaj, sed ankoraux 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 cxiuj legiloj, kiuj entute komprenas CSS-on. Sed ecx ne cxiuj simplaj aferoj klarigitaj en tiu cxi leciono estas tute sekuraj. Ni havis ekzemplon kun negativaj valoroj por margxenoj.
Oni povas uzi cxian ajn CSS-on libere laux la reguloj de la CSS-normoj, tute ignorante, cxu la pagxoj vere estas legeblaj kaj uzeblaj en cxiuj legiloj, dirante, ke tiuj, kiuj uzas malnovajn kaj eraroplenajn TTT-legilojn, kulpigu sin mem, cxar ili ne instalis pli bonan legilon.
Oni povas fari diversajn stilfoliojn aux diversajn stilregulojn por diversaj legiloj, kaj arangxi, ke cxiu legilo ricevu nur tian stilon, kiu tauxgas por gxuste tiu legilo. Kiel mi skribis cxi-antauxe, temas praktike nur pri donado de apartaj stilreguloj al la problemaj legiloj Esplorilo 6 kaj Esplorilo 7. Bonsxance eblas tion fari relative facile per t.n. kondicxaj komentoj.

Oni cxiuokaze cxiam faru XHTML-pagxojn, kiuj funkcias tute bone ankaux sen stilfolio. La stilo estu aldona lukso, aldona ornamo. (Iuj legantoj cxiuokaze preferas legi TTT-pagxojn en simpla senstila maniero. Ili aux uzas legilon, kiu cxiam tute ignoras CSS-on, aux uzas legilon, en kiu ili elsxaltis la uzadon de stilfolioj.) Kelkaj do vidos la pagxojn en simpla senornama prezento, dum aliaj vidos la pagxojn bele stiligitajn per CSS. Cxiuj estos tute kontentaj.

Tamen oni devas testi

Ecx se oni uzas la cxi-antauxe 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 pagxojn en pluraj legiloj.

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

Estas tre inde testi la pagxojn ankaux en legilo, kiu tute ne uzas CSS-on, ekzemple en “Lynx”, por certigxi, ke la pagxo estas bone legebla ankaux sen stilo. Estas konsilinde fari tion ecx antaux ol oni komencas verki stilfolion. Kompreneble, se oni ankoraux ne aldonis stilfolion, oni povas fari tian teston per cxiu ajn TTT-legilo.

Oni ankaux memoru, ke oni testu kun diversaj agordoj de la TTT-legilo. Oni povas sxangxi la bazan tiparon kaj tipargrandecon, provante ekstremajn agordojn (treege malgranda tiparo, treege granda tiparo), oni povas (se eble) elsxalti uzadon de koloroj, oni povas variigi la grandecon de la fenestro (tre granda fenestro, tre malgranda), oni povas sxangxi la ekranfajnecon (multe da bildopunktoj, malmulte da bildopunktoj), k.t.p. Tiam oni povas vidi, cxu la stilarangxo funkcias en cxiuj diversaj kondicxoj. XHTLM-pagxoj estu flekseblaj kaj legeblaj (kiom entute eble) por cxiuj uzantoj, en cxiuj diversaj komputiloj, sub cxiaj kondicxoj.

Kontroli CSS-on

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

Al la sekva leciono