Villu

Trikk: sisuga võrdse kõrgusega külgpaan

Või siis külgpaaniga (sidebar) võrdse kõrgusega sisu.

Väga raske saavutada, paljud annavad enne õiget lahendust leides alla ja:

• kasutavad tabelit
• sõimavad lolli kujundaja läbi
• kasutavad taustapilti
• puhkevad südantlõhestavalt nutma

Kuid lahendus on tegelikult väga lihtne ja vahva – suur padding-bottom ja samasuur negatiivne margin. Lisaks veel overflow: hidden kogu selle krempli ümber.

Ehk…

… HTML:

<div id="container">
	<div id="sidebar">
	...
	</div>
	<div id="content">
	...
	</div>
</div>

ja CSS:

#container {
	overflow: hidden;
}
	#sidebar {
		padding-bottom: 10000em;
		margin-bottom: -10000em;
	}

Nota bene! Teada on, et seda trikki kasutades peab eemale hoidma ankrustest, sest overflow: hidden; peidab muidu ära kõik, mis eelneb ankru viidatud sisule.

Bon appetit!

Kommentaarid: puuduvad

Target _blank-i ei tohi kasutada

Iidamast-Aadamast on HTML-i alles jäänud võimalus avada linke uues aknas, lisades selleks lingile atribuudi target ja andes sellele väärtuse _blank. Et klikid lingil ja link avab uues aknas. Uhke värk! Või siis mitte.

Nii ei tohi teha! Sest:

1. Target on keelatud atribuut xHTML1.1-s
2. Uus aken katkestab nn normaalse sirvimise, sest inimene ei saa kasutada enam “Tagasi”-nuppu. “Tagasi” nupp on üks peamisi nuppe sirviku kasutamisel.
3. Ideaalses maailmas on uue akna avamine pigem JavaScripti töö, sest HTML, kui informatisooni kirjeldamise keel, ei pea sellega tegelema. Tiluliluga tegeleb meil ju ikkagi enamasti JavaScript

Ilusat veebi!*

**********
selleks peate küll .ee lõpuga domeenidest eemale vaatama :P

Kommentaarid: üks

I save people from Internet Explorer – vahva FB leheke

Facebooki leht, mis kogub kokku infot, mis avalikustab Internet Exploreri valetamised, inimese mõnitamised ja propaganda. Lükkame ühekoos asja käima!

http://www.facebook.com/pages/I-save-people-from-Internet-Explorer/135357179850125

Kommentaarid: puuduvad

b vs strong vs font-weight: bold

Teretulemast tagasi, tore teid jälle siin näha!

Täna on temaks paksud. Kolm paksu. Naist. Kui tahate. Ehk siis märgend b, märgend strong ja CSS-i käsk font-weight ja tema väärtus bold;.

Esimene, kõige vanem, on b. B nagu bold. Inglise keeles võidakse teda küll viisakusest julgeks (bold ing. k) kutsuda, eestlased, julmad nagu nad on, ütlevad kohe tõe näkku — rasvane. Ehk siis märgend, mis ei oma mitte mingit semantilist väärtust, teeb teksti lihtsalt rasvaseks. Julgeks, boldiks, kui tahate. Puhtkujunduslik. CSS-iga tema kujundust muuta ei tohiks saada.

Teine naine, kes kah peidab end valeliku nime taha, on strong ehk tugev. Eestlased nimetavad jällegi nii, nagu kohane — rasvane. Mhmh. Omab semantilist tähendust — kasutatakse rõhutamiseks. Matemaatikatunnis kasutades on võrdväärne tugeva joonega reegli all. Ehk siis annab teada, et tegemist on väga olulise infoga. See, et ta teksti tavaliselt rasvaseks teeb, on tegelikult vaid nibin-nabin, ta võib selle vabalt teha ka punaseks, selle alla joonida või üldse erilisest kujundusest ilma jätta — kannatab CSS-ga kujundamist.

Viimane, vast ehk kõige noorem — font-weight: bold. Lihtne CSS-i effekt, mis teeb teksti rasvaseks. Nagu CSS ikka, ei oma semantilist väärtust. Märgendi b kaasaegne versioon.

Kokkuvõtteks — kui tahate midagi rõhutada, sest see on informaatilises mõttes oluline, kasutage strong-i. Kui soovite midagi rasvaseks teha, et see ilus oleks, kasutage font-weight: bold;-i. Või siis b-märgendit.

Nii lihtne see ongi.

Minge nüüd, mu lapsed, värvilisi lehti korjama.

Kommentaarid: puuduvad

Mul on unistus…

Kui Martin Luther King, Jr., oleks veel elus ja ta teeks veebi, tõstaks ta hetkeks silmad HTML-lt ja teataks pettunult, kui kindlalt: “Mul on unistus — et tuleb aeg, mil veebidisain tähendab sisu kujundamist, mitte sisu kujundusse sobitamist”.

Kommentaarid: puuduvad

Pildid veebilehel. Mõned veel.

Suure hurraaga ja eneseimetlusest täitununa unustasin ma eelmisel korral rääkida tegelikult üldse sellest, millest ma tegelikult tahtsin rääkida. Määä!

Graafilised elemendid versus pildid.

Kujunduslikud elemendid versus pildid.

Alatihti on nii, et veebileht on küll graafikast lookas, kuid lehel pole tegelikult mitte ühtegi pilti, mis tegelikult ka pildi eesmärki täidaks — et oleks visuaalseks infokandjaks. Pahatihti on leht täis obstsöönnseid ümmargusi ääri (sest internetiturundajad ei saa ikka veel aru, et veebileht on infokandja, mitte plagu ja see, et leht on erinevate brauseritega pisut erinev, ei huvita mitte kedagi peale internetiturundaja enda. Ehk siis border-radius *) mistõttu on lehe kood täis img-märgendeid. Lisaks veel ikoonid, nupukesed, raamid, varjud jne.. Need ei ole sellised pildid, mis tuleks kirjutada koodi img märgenditega. Need on visuaalsed jubinad ja peavad rangelt olema hoitud kujundusest lahus. CSS-s. Seal on nede kodu, kindlus ja varjupaik. Muidugi võib nad saata ka kibuvitsa põõsasse nagu kaasaegne maailm. Aga millal enne oleme me milleski eesrindlikud olnud :P

Nüüd saan rahuliku südamega magama minna.

Kommentaarid: puuduvad

Pildid veebilehel

Minimalism ruulib. White space ruulib. Aga mitte kõigi arvates.

Paljudes kujundustes, eriti just kodumaal, on veebilehed graafikast lookas — lehe koodi vaadates tundub, et enamik koodist moodustavad div-id ja img-d. Noh, maitse asi… Aga kui tõesti ei ole võimalik seda graafilist virr-varri tagasi tõmmata, siis tuleks kasutada sellist lähenemist, et need graafikatükikesed, mis ei oma mitte mingisugust informatiivset väärtust, meile ette ei jääks. Ehk — hoiame kujunduse ja sisu lahus. Ehk siis — kujundusliku graafika koht ei ole HTML-is.

Nagu mis mõttes?!

jah, just nii ongi.

Vaadakem näidet aegunud, kuid oh! kui popist, ümmarguste äärtega kastikesest (reaalsest elust):

<div style="background: url(graafika/bg-kastikene.gif) repeat-y 0 0">
	<div><img src="graafika/p2is.gif" alt="" /></div>
	<h1>Pealkiri</h1>
	<p>Sisutekst</p>
	<div><img src="graafika/jalus.gif" alt="" /></div>
</div>

Mida me näeme? Et lehel on pealkiri, sisu, mille ees ja järel on pildid. Mis pildid? Ei tea, sest seda pole märgitud. Mina tean, et ma ei tahagi teada, mis pildid, aga otsimootorid ja ekraanilugejad ei tea, nemad arvavad siiani sinisilmselt, et tegemist on oluliste piltidega.

Kuidas siis teha seda asja viisakamalt?

1-2-3:

<div class="kastikene">
	<div class="p2is"></div>
	<h1>Pealkiri</h1>
	<p>Sisutekst</p>
	<div class="jalus"></div>
</div>

CSS:

.kastikene {
	background: #FFFFFF url(graafika/bg-kastikene.gif) repeat-y 0 0;
}
.kastikene .p2is {
	background: #FFFFFF url(graafika/bg-kastikene-hf.gif) no-repeat 0 0;
	height: 10px;
}
.kastikene .jalus {
	background: #FFFFFF url(graafika/bg-kastikene-hf.gif) no-repeat 0 100%;
	height: 5px;
}

Mis siis nüüd muutus — kadus ära graafika, seega ei näe neid ebaolulisi pilte enam masinad. Inimesed aga küll, sest pildid on lisatud päise ja jaluse taustaks. Hundid söönud, lambad terved.

Kui te tähelepanelikult vaatate, kujundatakse kastikene kahe failiga:
bg-kastikene-hf.gif — see on pilt, milles on kastikese päisekujundus ja jalusekujundus. neid kasutatakse vajalikus kohas tausta positsioneerimisega (0 0 = 0 pikslit vasakult, 0 ülevalt versus 0 100% = 0 pikslit vasakult, 0 pikslit alt äärest). See on selline vahva nõks, millega hoitakse kokku natuke lehe laadimise aega, sest serverisse ei tehta kahte päringut, vaid üks.

Kokkuvõttes — kui pildil ei ole mitte mingisugust sisulist väärtust, pangem ta CSS-i! Muidugi on inetu tekitada tühjasid div-e igale poole, aga sinna pole midagi parata :( Jääb vaid loota, et meie kujundajad hakkavad jälgima kaasaegseid kujundustrende :) Märke sellest juba on!

Kommentaarid: puuduvad

Inputide kujundusest ja kujundamisest

Kui ma saaks iga korra eest kaks rubla, mil ma tõden, et input[type=text] ja input[type=submit] tõlgendavad neile omistatud CSS-i kuidagi erinevalt (olenemata sellest, et nad kõik on inputid), oleksin ma juba miljonär! Ma tean, et paddingute ja borderitega saab nad ajada pea-aegu et ühesuuruseks, aga igas brauseris see korraga ei õnnestu.

Ühel kuumal suvapäeval, eila, võtsin kätte ja hakkasin uurima, et no mis kuradi kamm sellega siis ikkagi on — kas brauserid lisavad salamahti mingeid kõrguseid ja laiusi või mida paganat? Ja ahaa! Ma sain jälile suurimale häbipekile, mis peale IE6-te on kunagi välja lastud!

Nimelt — Veebikonsortsium ei ole täpsustanud, mis moodi peab arvutatama input-ide suurust — kas kümne piksli kõrgune kastike on 10 piksline ka siis, kui tal on ühe piksline raam ümber või on ta siis 12 piksline (10px + 1px ülemine raam + 1px alumine raam) jääb kõigi endi otsustada — ja brauseritootjad käsitlevadki asja nii nagu nemad heaks arvavad. Häbiväärne on selle kõige juures aga brauseritootjate tegevus — nimelt on nad implementeerinud erinevatele inputide tüüpidele erinevad reeglid. Näiteks input[type=text] kõrgusele arvutatakse kõik paddingud ja raamid juurde, seevastu input[type=submit] puhul aga seda ei tehta — suurus jääb samaks ka siis, kui lisatakse paddingud ja raame. Ehk siis:

input[type=text] {
	height: 10px;
	padding: 2px;
	border: 1px solid #000000;
}

Kui kõrge on ülalolev kastike? 10px või 16px? Just, 16px.

Aga kui kõrge on see sisestusnupp:

input[type=submit] {
	height: 10px;
	padding: 2px;
	border: 1px solid #000000;
}

10 pikslit. Vahva, kas pole?

Miks see nii on, ma ei tea.

Mis on lahendus?

Õnneks on olemas CSS-s käsk box-sizing, millel on olemas kaks erinevat väärtust: border-box ja content-box.

border-box tähistab meetodit, mil elemendi kõrgus jääb alati defineeritud kõrguseks, see saavutatakse raamide ja paddingu (polsterduse?) lisamisel nii, et sisu suurus väheneb nende suuruse võrra (10 pikslisele kastile 1 pikslise raami lisamisel on sisu 9 piksline).
content-box tähistab meetodit, mil kõik lisavidinad lisatakse defineeritud kõrgusele (10 pikslisele kastile 1 pikslise raami lisamisel on sisu 10 piksline, kuid kogu element suureneb 1 piskli võrra igast küljest; elemendi kõrgus ja laius suureneb 12 pikslini).

Ehk siis — input[type=submit] kasutab vaikeväärtusena border-boxi, seevastu input[type=text] aga content-boxi.

Nüüd, kui me saime teada, milles on asi, võime me ütelda stiililehes, et kõik elemendid kasutaks ühtset meetodit. Ehk siis:

input, button, textarea {
	box-sizing: content-box; /* Opera, Internt Explorer */
	-webkit-box-sizing: content-box; /* Safari, Chrome */
	-moz-box-sizing: content-box; /* Mozilla pere ja muuud loomad */
}

Ja ongi elu ilusam!

Ja üks asi veel!

Minu prohvesionaalne soovitus on kasutada content-box-i, sest sellisel juhul ei “lõigata” nuppude jne tekste poolikuks, kui nupu kõrgus on väiksem, kui teksti kõrgus — Opera on hetkel ainuke, kes teksti üritab igal juhul alati vertikaalselt keskele paigutada, teised lõikavad lihtsalt tähtedelt jalad alt, hoolimata sellest, et ruumi teksti üles oleks lükata. Kummalisel juhul on minu arust Opera käitumine vigane — kui mul on selge numbriga üteldud, et padding-top on 10px, siis miks ta sellele vilistab, kui mul on liiga madal nupp? Eksole?

さよなら

Kommentaarid: puuduvad

Aamen!

Kommentaarid: puuduvad

Linkide seisud (states) ehk LoVe/HAte, Fucker!

See tund pidi olema puhtalt lingiseisust focus ja kuidas see on täielikult tabusesisuses. Kuid kuna teema on tabu, siis peaksime vaatama asja natuke kaugemalt, et oleks vähem piinlikust.

Linkidel on 5 seisu, millest kaks on väga levinud, neli on saavutanud mõistliku leviku ja üks on täiesti seina äärde naelutatud — need on link, visited, hover, active ja focus. focus neist siis kõige vähem, link ja hover kõige enam levinud.

Tähistavad nad siis lingi tavaseisu ehk a:link, külastatud seisu (lehel on käidud, sirvik teab seda) ehk a:visited, kursor-üle seisu (kursor üle lingi) ehk a:hover, aktiivset seisu (linki on klõpsatud) ehk a:active ning fookuses seisu (tabulaatoriga vms on link fookusese püütud) ehk a:focus.

Fookus-seis võib esmapilgul tunduda väheväärtuslik, ebaoluline, kuid tegelikult on ta äärmiselt oluline — visake oma hiir vastu seina puruks ja katsuge veebilehel liigelda tabulaatorit, hääljuhtimist vms süsteemi kasutades… Raske? Usun. On inimesi, kes kasutavad tabulaatorit veebilehel ringi liikumisesks, sest nende parem käsi ei ole niipalju treenitud, kui enamikul. Rääkimata telefonidest, mis nooltega navigeerides hüppavad lingilt-lingile. Selleks ongi vaja fookus-seisu. See on kõik kasutusmugavus ja kättesaadavus, kallis! Ärgem unustagem, et veeb peab olema kättesaadav kõigile!

Vähesed teavad, et CSS määrab salaja ära CSS-käskude prioriteedi. Täpsemalt defineeritud element on alati tähtsamal kohal, kui üldiselt defneeritud:

p {
	color: #333333;
}
p.black {
	color: #000000;
}

Ehk siis p.black käsud on alati tähtsamad, kui lihtsalt p omad, sest teda on spetsiifiliselt kirjeldatud. Ehk siis KÕIK lehel olevad paragrahvid on tumehallid (#333333), aga kui mõnel on täpsustav klass, id, seis (jah, seisud kehtivad igale elemendile, mitte ainult linkidele) või kui elemnti on täpsustatud kuidagi spetsiifilisemalt, kirjutatakse see üle.

Kuidas saab tähtsust muuta, kuulen ma publikust — kirjutage käsule järele !important ehk siis:

p {
	color: #333333;
}
p.gray {
	color: #666666 !important;
}
p.gray {
	color: #333333;
}

Näide, mida vahel harva vast ette tuleb, aga siiski näide; mis näites toimub? Defineeritud on kaks ühesuguse prioriteediga klassi ning vaikimisi saab kõrgema tähtsuse alati viimane esinev klass, kuid kuna me täpsustasime ära, milline väärtus on olulisem, sai meie täpsustatud väärtus kohe kõrgeima prioriteedi ja seetõttu on kõik tekstilõigud, millel klassiks gray värvikoodi #666666. Lihtne, eksole?

Aga miks ma sellest räägin?

Aga selleks, et aru saada, mis moodi tuleb kirja panna linkide seisud. Nimelt ei ole lingide seisudel erinevaid prioriteete — ei ole nii, et a:hover on alati kõvem, kui a:visited jne. Seetõttu tuleb linkide seisud kirjutada alati ühes järjekorras, et üks neist teist üle ei kirjuta ehk tekitame neile ise õiged prioriteedid.

Esiteks on meil täiesti tavaline link, millega pole veel mingeid trikke tehtud. Tema värv on must.

a:link {
color: #000000;
}

Teiseks paneme me külastatud lingi. Sest ta on juba pisut trikke teinud ja justnagu kord juba süütuse kaotanu, ei saa ta kaotust tagasi teha — st ta ei saa enam kunagi tagasi lihtsalt lingiks, ta saab minne vaid edasi. Värvime tema tumehalliks.

a:visited {
	color: #333333;
}

Järgmiseks on meil kursor-üle seis, sest nii link, kui ka visited saavad mõlemad omastada sellise seisu. Olgu tema meil lihtne hall.

a:hover {
	color: #666666;
}

Neljas, ehk aktiivne seis on tegelikult kõige prioriteetsem seis — teda ei saa miski üle kirjutada. Aga kuna me juba saime teada, et linkide seisudel ei ole prioriteeti, siis ikka saab küll. Aga meie paneme ta selle ohu vältimiseks viimaseks, sest nii muutub ta kõige tähtsamaks.

a:active {
	color: #333333;
}

Aga Focus!?
Rahu!

Siin on väike mööndus. Nimelt. Aegade algusest ei ole inimesed päris aru saanud, mis seis käib kuhu. Et asja väga selgeks teha, tegid inglise keelt kõnelevad veebimeistrid endale sprikri: nad võtsid kaks sõna mis vastandusid üksteisele ja lihtsalt meelde jäävad ning kasutasid neid alatult ära — LoVe/HAte. Saate aru? L(ink)oV(isited)e/H(over)A(ctive)te. Lihtsalt meeldejääv. Aga seal pole ühtegi F-i focus jaoks :(? Japp. Seep see on. Seega lisasid julgemad selle seisu kõige lõppu ja leidisd sõna, mis seda meeles aitaks pidada*. Kui tegelikult täiesti siiras olla, siis peaks focus tulema pärast hover seisu, sest sellises seisus link saab omastada kursor-üle seisu, kuid mitte active seisu. Saate aru? Tabulaatoriga fookusesse aetud lingist saab kursoriga üle sõita, erinevalt aktiivsest lingist.

Mida siis teha?

Tegelikult ei olegi see niiväga oluline — lingid muudavad enda välimust vastavalt seisule ja see on hea, sest nii saab külastaja aru, mis toimub. Kas fookus tuleb enne või pärast aktiivset seisu ei mängi tegelikult väga suurt rolli, sest aktiivset seisu me peaagu ju et üldse ei näegi niikuinii.

Kuidas kirjutada lingi seise, lihtsa elu näitel:

a:link, a:visited {
	color: blue;
	text-decoration: underline;
}
a:hover, a:active,  a:focus {
	color: red;
	text-decoration: underline;
}

Jõudu tarvis!

************

Tegelikult olin see inglise keelt kõnelev veebimeister mina, kes võttis julguse rindu ja kasutas fookuse seisu jaoks hirmsat ja roppu f-tähega algavat sõna.
Fucker, fucker, fucker, fucker! F-f-f-focus!

Kommentaarid: puuduvad