Kiel fari TTT-paĝojn

Stilfolioj

Jam plurloke en la antaŭaj lecionoj mi skribis, ke oni povas uzi stilfoliojn por doni al la paĝoj plaĉan aspekton. Nun finfine ni povas eklerni, kiel oni tion efektive faras. Vi lernos, kiel oni ligas stilfolion al XHTML-paĝo. Vi lernos pri marĝenoj, 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 ĉi sufiĉe longa leciono vi ankaŭ 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 ĝin kune kun viaj testaj XHTML-paĝoj. En la dosiero estu nenio ajn krom la ĉi-antaŭa kodo. (Ne estu iaj ajn XHTML-aj elementoj kun <, > kaj / aŭ similaj aferoj.)

Ligi la stilon al XHTML-paĝo

Poste vi kreu simplan XHTML-paĝon (aŭ reuzu iun el viaj antaŭaj testopaĝoj). Ĝi troviĝu 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 testopaĝo:

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

Tiu elemento troviĝu ie ene de la head-elemento, ekzemple jene:

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

Aldonu tian kodon al via testopaĝo, kaj provu rigardi per TTT-legilo. Se ĉio funkcias ĝuste, la paĝo devus nun aperi kun verda teksto sur blanka fono.

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

Kiel funkcias stilreguloj?

Stilregulo en CSS komenciĝas 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. Ambaŭ deklaroj validas por la body-elemento, kaj sekve por la tuta legebla enhavo de la paĝo.

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

Noto: Rimarku, ke CSS skribiĝas tute alie ol XHTML. Multaj konfuziĝas skribante ekzemple color = green; aŭ color: "green"; aŭ simile. Oni ne uzas egalsignojn (=) en CSS, kaj oni tre malmulte uzas citilojn. La ĝusta formo de tia kolorodeklaro estas color: green; kun dupunkto kaj sen citiloj.

Paĝomarĝenoj

TTT-paĝoj aspektas multe pli bone, se oni aldonas marĝenojn. Vi povas proponi maldekstran marĝenon per la eco margin-left, kaj dekstran marĝenon per margin-right, ekzemple:

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

Tiuj deklaroj aldonas marĝenojn larĝajn je 10 procentoj de la tuta fenestrolarĝo. Tiaj procentovaloroj estas relativaj, kaj tial la marĝenoj reskaliĝas, se la leganto ŝanĝas la grandecon de la fenestro de la TTT-legilo.

Deŝovoj

Oni povas aparte elstarigi titolojn, se oni metas ilin ene de la marĝeno 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 marĝenoj de la titoloj adiciiĝas al la marĝenoj de body. Ni donis negativajn maldekstrajn marĝenojn por la titoloj (-8%, -4%). Tial la titoloj moviĝas maldekstren kompare kun de la ĝenerala marĝeno. Faru testan paĝon kun multaj titoloj, kaj ankaŭ alineoj (p-elementoj). Ligu ĝin al CSS-dosiero kun tiuj stilreguloj, kaj rigardu, kiel la paĝo prezentiĝas.

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 ankaŭ 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 uziĝas la unuo em. Unu em egalas al la alteco de unu (mezuma) signo en la aktuala tiparo kaj la aktuala tipargrandeco. Ĝi ebligas flekseblan stilon, kiu adaptiĝas al la tekstograndeco. La unuo em estas multe pli sekura ol ekzemple px (bildero) kaj pt (punkto), ĉar tiuj unuoj estas pli-malpli fiksaj. Ĝenerale oni ĉiam evitu stilaranĝojn, kiuj ne flekseble adaptiĝas al variaj cirkonstancoj.

Klasoj

En la leciono pri Helpelementoj kaj atributoj ni pase konatiĝis 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 antaŭ aŭ post la punkto, ĉar tiam la regulo ne funkcias.)

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

Subtilaĵo pri spaco

Kiam titolon sekvas alineo, la valoro por margin-bottom de la titolo ne adiciiĝas al la valoro por margin-top de la alineo. Anstataŭe la pli granda el la du valoroj uziĝas por la spaco inter la du elementoj. Tiu subtila regulo validas ĉiam por margin-bottom kaj margin-top sendepende de la nomoj de la elementoj.

Deŝovo de la unua linio

Foje oni volas krei deŝovon de la unua linio de ĉiu alineo. Tia aspekto estas ofte uzata en tradicia librotipografio. La ĉi-posta stilregulo provas rekrei tian aspekton:

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

Tiu regulo aldonas per la eco text-indent deŝovon je 2 em-oj al la unua linio de alineo. La regulo ankaŭ 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 ĉiam devas aldoni unuon. Ekz. 10 estas sensenca per si mem. Oni devas skribi, ĉu oni celas 10%, 10em, 10px aŭ ion alian. Sed kiam la valoro estas ĝuste 0, ne gravas la unuo, kaj oni povas ĝin forlasi.

Tiparoj kaj tiparstiloj

Tiparstiloj

La plej kutimaj tiparstiloj estas kursivo kaj grasa stilo (kun dikaj strekoj). Multaj TTT-legiloj aŭtomate prezentas em-elementojn kursive, kaj strong-elementojn grase. Ni supozu, ke vi anstataŭe 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” (“ĉeflitere”).

Eble vi volas, ke ĉiuj h2-titoloj aperu tutminuskle:

h2 { text-transform: lowercase; }

lowercase signifas “minuskle” (“malĉeflitere”).

Tipargrandeco

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

La ĉi-posta ekzemplo stiras la grandecon de titoloj per procentaĵoj relative al la grandeco de ordinara teksto:

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

Oni povas indiki tekstograndecon ankaŭ por ordinara teksto, ekzemple por teksto de p-elementoj, sed ĝenerale estas preferinde lasi tian tekston je normala grandeco. Ĉiu leganto mem elektu, kiel granda estu ordinara teksto. Oni do skribu por p normale nur font-size: 100% aŭ font-size: 1em aŭ font-size: normal. Ĉiuj tri variantoj simple esprimas, ke la tekstograndeco estu kiel normale (laŭ la baza elekto en la TTT-legilo).

Tiparfamilio

Indiki uzon de certa tiparo estas ĉiam tikla afero. Oni ne povas scii, kiuj tiparoj estas haveblaj ĉe 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 ankaŭ ĝeneralajn nomojn. Ekzistas kvin tiaj ĝeneralaj nomoj de tiparspecoj, kaj principe ĉiu komputilo devas havi tiparon por ĉiu el tiuj ĝeneralaj nomoj:

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

Jen ekzemplo:

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

Laŭ tiu ekzemplo gravaj titoloj (h1, h2) prezentiĝu prefere per la tiparo Garamond, kaj, se tiu ne haveblas, per Times New Roman, kaj, se ankaŭ 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. Ankaŭ rimarku, ke la tiparnomo “Times New Roman” estas inter citiloj, dum la aliaj estas sen citiloj. Oni uzu citilojn nur ĉe tiparnomoj, kiuj enhavas spacetojn. Ĉe aliaj tiparnomoj oni nepre ne uzu citilojn!

Bordero kaj fono

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

La eco border-width indikas la larĝecon de la bordero. Krom la kodvortoj thin (mallarĝa), medium (mezlarĝa) kaj thick (larĝa), oni povas ankaŭ 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 larĝeco de la tuta div-elemento. 100% signifas, ke ĝi estu larĝa 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;
}

Ĉi tie la fonkoloro (background-color) estas indikita per precizaj valoroj de ruĝo, verdo kaj bluo (rgb = “red”, “green”, “blue”). La eblaj kvantoj estas de 0 ĝis 255.

La eco padding (remburo) aldonas spacon inter la rando de la elemento kaj la teksta enhavo. En la ekzemplo estas ĝenerala remburado je duona em. Eblas ankaŭ 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 ankaŭ povas elekti meti borderon nur ĉe iuj flankoj de blokelemento. Tion oni faras per border-top (supre), border-right (dekstre), border-bottom (sube) kaj border-left (maldekstre). Post ĉiu el tiuj vortoj eblas aldoni -width (por larĝo), -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 ruĝan borderon laŭ la maldekstra flanko.

Koloroj

Ni jam vidis plurajn ekzemplojn de kolorindikado ĉi-antaŭe, per deklaroj kiel color: green, background-color: white, border-color: red k.s.

Ekzistas en CSS 16 normigitaj kolornomoj. Ili aperos ĉi-poste. Oni ankaŭ povas doni dekumajn valorojn por ruĝo, verdo kaj bluo (0 - 255), ekzemple rgb(0,255,128), tiele precize miksante la deziratan koloron. Oni povas anstataŭe uzi deksesumajn valorojn, sed tiam oni skribas la signon # kaj poste la valorojn sen krampoj per tri aŭ ses deksesumaj ciferoj, ekzemple #99f aŭ #ffddaa. Vidu pli ĉi-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 serĉilojn kiel Google, kiuj tiam pensas, ke vi volas trompi per kaŝitaj (kaj eble falsaj) ŝlosilvortoj. Tio povas kaŭzi, ke la serĉilo plene forĵetos viajn paĝojn 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, ankoraŭ alian koloron por ligoj, kiuj estas alklakataj, kaj eĉ 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 antaŭ visited k.t.p.

(En tiu ekzemplo estas aldonitaj komentoj. CSS-komentoj estas skribataj per /* antaŭe, 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 aŭtomate substrekas ligilojn. Se oni ne volas tian substrekadon, oni povas ĝin forigi per CSS. Jen ekzemplo, kiu forigas la substrekadon ĉe 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 troviĝas la afero).

Ĝenerale estas tamen konsilinde lasi la substrekadon de ligiloj. Homoj alkutimiĝis al tiaj substrekoj, kaj rekonas ligilojn laŭ tio. Multaj opinias, ke oni prefere lasu ankaŭ la implicitajn kolorojn de ligiloj.

Problemo «

Estas unu problemo pri la antaŭa kodo por almontrataj ligiloj: a:hover { ... }. Se oni skribas tiel, tio validas ne nur por a-elementoj kun href-atributo (alklakeblaj ligiloj), sed ankaŭ 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 ĝi, ankaŭ ĝi estas almontrata, kaj do devas ricevi la indikitan stilon. Tion oni preskaŭ 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 ĉiuokaze 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 ruĝo kaj verdo, aŭ inter flavo kaj bluo. Ĝenerale 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 ankaŭ 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 ruĝo, verdo kaj bluo. La unuaj du signoj post # donas la valoron por ruĝo, 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 ankaŭ 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 ankaŭ povas skribi minuskle, a, b, c, d, e, f, se oni preferas.)

TTT-sekuraj koloroj «

Ne ĉiuj komputiloj povas redoni ĉiujn 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 sufiĉe sekura, ke plej multaj legantoj vidos tion, kion vi intencis, anstataŭ ion tute strangan kaj neantaŭplanitan. 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

Ĉi-antaŭe vi konatiĝis kun kelkaj bazaj aferoj, kiujn oni povas fari per CSS. Vi ne lernis ĉiujn detalojn, kaj mi esperas iam povi aldoni plian lecionon kun pli detalaj instruoj pri CSS.

CSS estas sufiĉe ampleksa lingvo, kaj ĝi estas daŭre vastigata. Interalie ĝi enhavas ankaŭ eblojn difini stilojn por alia prezentado ol la kutima ekrana legado de TTT-paĝoj. Oni povas difini stilojn por presado surpapere, por projekciado sur ekrano, kaj ankaŭ por voĉlegado de TTT-paĝoj (sed kredeble ankoraŭ ne ekzistas voĉlegiloj, 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 ĉiuj legiloj. Nuntempe tiaj problemoj aperas praktike nur en malnovaj, sed ankoraŭ 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 ĉiuj legiloj, kiuj entute komprenas CSS-on. Sed eĉ ne ĉiuj simplaj aferoj klarigitaj en tiu ĉi leciono estas tute sekuraj. Ni havis ekzemplon kun negativaj valoroj por marĝenoj.
Oni povas uzi ĉian ajn CSS-on libere laŭ la reguloj de la CSS-normoj, tute ignorante, ĉu la paĝoj vere estas legeblaj kaj uzeblaj en ĉiuj legiloj, dirante, ke tiuj, kiuj uzas malnovajn kaj eraroplenajn TTT-legilojn, kulpigu sin mem, ĉar ili ne instalis pli bonan legilon.
Oni povas fari diversajn stilfoliojn aŭ diversajn stilregulojn por diversaj legiloj, kaj aranĝi, ke ĉiu legilo ricevu nur tian stilon, kiu taŭgas por ĝuste tiu legilo. Kiel mi skribis ĉi-antaŭe, temas praktike nur pri donado de apartaj stilreguloj al la problemaj legiloj Esplorilo 6 kaj Esplorilo 7. Bonŝance eblas tion fari relative facile per t.n. kondiĉaj komentoj.

Oni ĉiuokaze ĉiam faru XHTML-paĝojn, kiuj funkcias tute bone ankaŭ sen stilfolio. La stilo estu aldona lukso, aldona ornamo. (Iuj legantoj ĉiuokaze preferas legi TTT-paĝojn en simpla senstila maniero. Ili aŭ uzas legilon, kiu ĉiam tute ignoras CSS-on, aŭ uzas legilon, en kiu ili elŝaltis la uzadon de stilfolioj.) Kelkaj do vidos la paĝojn en simpla senornama prezento, dum aliaj vidos la paĝojn bele stiligitajn per CSS. Ĉiuj estos tute kontentaj.

Tamen oni devas testi

Eĉ se oni uzas la ĉi-antaŭe 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 paĝojn en pluraj legiloj.

Mi rekomendas uzi la TTT-legilon Fajrovulpo kiel ĉefan laborilon, dum oni ellaboras siajn paĝojn, ĉar tiu legilo tre bone komprenas CSS-on. Sed ankaŭ aliaj modernaj TTT-legiloj, kiel Chrome, Safari kaj Operao, estas tute taŭgaj. Fakte versio 9 de Esplorilo estas nun tiom bona, ke oni povas ankaŭ ĝin uzi tiucele. Poste oni testu la paĝojn en “Internet Explorer 8” kaj “Internet Explorer 7” en Vindoza komputilo, kaj laŭbezone iom poluru la kodon, se tiuj legiloj havas problemojn. Se oni estas tre ambicia, oni testu ankaŭ en "Esplorilo 6", kaj eĉ adaptu la kodon al tiu legilo, kiu nun tamen estas tiom malnova kaj mankohava, ke oni tute rajtas ĝin ignori, kvankam ankoraŭ relative multaj uzas ĝin. Pli malnovaj versioj de Esplorilo estas nun tiom maloftaj aŭ eĉ plene formortintaj, kaj oni neniel bezonas pri ili zorgi. Ankaŭ la siatempe tre populara legilo “Netscape Navigator” estas nun tute malaperinta.

Estas tre inde testi la paĝojn ankaŭ en legilo, kiu tute ne uzas CSS-on, ekzemple en “Lynx”, por certiĝi, ke la paĝo estas bone legebla ankaŭ sen stilo. Estas konsilinde fari tion eĉ antaŭ ol oni komencas verki stilfolion. Kompreneble, se oni ankoraŭ ne aldonis stilfolion, oni povas fari tian teston per ĉiu ajn TTT-legilo.

Oni ankaŭ memoru, ke oni testu kun diversaj agordoj de la TTT-legilo. Oni povas ŝanĝi la bazan tiparon kaj tipargrandecon, provante ekstremajn agordojn (treege malgranda tiparo, treege granda tiparo), oni povas (se eble) elŝalti uzadon de koloroj, oni povas variigi la grandecon de la fenestro (tre granda fenestro, tre malgranda), oni povas ŝanĝi la ekranfajnecon (multe da bildopunktoj, malmulte da bildopunktoj), k.t.p. Tiam oni povas vidi, ĉu la stilaranĝo funkcias en ĉiuj diversaj kondiĉoj. XHTLM-paĝoj estu flekseblaj kaj legeblaj (kiom entute eble) por ĉiuj uzantoj, en ĉiuj diversaj komputiloj, sub ĉiaj kondiĉoj.

Kontroli CSS-on

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

Al la sekva leciono