…meie igapäevast IT’d anna meile igapäev…

2007-07-28

IBM’i (X)HTML DOCTYPE: plussid ja miinused

Rubriigid: CSS, Firefox, HTML, Infotehnoloogia — dukelupus @ 17:49:38

Ilmselt on ka paljudele profesionaalsetele veebiseppadele üllatuseks, et peale W3C‘poolt soovitatavatele DOCTYPE’dele – ehk siis siin nimekirjas olevatele – olemas ka muud, teiste organisatsioonide poolt loodud DOCTYPE’d. Nendest üks levinumaid on IBM’i XHTML’i versioon, mis on ka mitmes mõttes huvitav.

Kõigepealt – miks on DOCTYPE oluline ja misasi see üldse on?

DOCTYPE on üks instruktsioonidest, mis ütleb SGML või XML dokumendis – näiteks tavalises veebilehes – millist Document Type Definition‘i kasutada ja kuidas seda renderdada. Iga hästi tehtud veebilehe päisest võib leida sarnase teksti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

See ütleb brauserile, et tegemist on Transitional XHTML versioon 1.0 tüüpi dokumendiga, mida tuleb sellel aadressil oleva Document Type Definition faili instruktsioonide järgi käsitleda. Tegelikult on tegemist lihtsalt süntaktiliste reeglite koguga.

Mis siis on aga IBM’i XHTML DOCTYPE’s teistmoodi?

See baseerub tavalisel W3C XHTML 1.0 Transitional DTD‘l – aga järgmiste muudatustega:

  • <noscript></noscript> on lubatud <head></head> sees
  • border, width ja height on lubatud <input> tagile
  • <form> ja <input> võivad olla tagide <table>,<tr> ja <td> sees
  • Atribuudid marginheight, marginwidth, topmargin ja leftmargin võivad olla tagil <body>

Ei paista nagu midagi erilist? Kuid pööra tähelepanu esimesele punktile – <noscript></noscript> on lubatud <head></head> sees – ning tänu sellele saad sa teha:

<noscript>
<meta http-equiv="Refresh" content="0;URL=noajax.php">
</noscript>

Ehk teisisõnu saad sa teha soft redirect‘i kasutajatele, kellel JavaScript keelatud, juba lehe head‘is, suunates neid tähelepandamatult teisele lehele! Oh miks ometi ei luba seda W3C?

Muud kolm muudatust on eelkõige kujunduslikud, lubades teha asju mis on saavutatavad ka CSS’iga.

Miinused?

Eelkõige see, et eriti vähemlevinud brauserid ei oska IBM’i DTD’ga suurt midagi peale hakata. Mozilla Firefox’i on sisse kooditud konkreetne käsk, et IBM’i DTD tuleb renderdada quirks mode’s, IE6′l on nagunii viga XML’i deklaratsiooniga – ükskõik mis peale whitespace‘i enne doctype deklaratsiooni paneb lehe renderduma quirks mode’s, kuid IE on tuntud selle poolest et suudab igasugust pahna korralikult renderdada.

Peab tunnistama et ei tea, kuidas Opera – see pirtsakas renderduse priimabaleriin – ja Safari saavad IBM’i DTD’ga hakkama. Oletan, et probleemideta – see on siiski piisavalt levinud dokumenditüübi deklaratsioon. Samuti kasutatakse üsna tihti eelpool kirjeldatud soft redirect‘i veebilehtedes, mis tavalisi W3C DTD’sid kasutavad – peab tunnistama, et ka mu oma inglise-eesti sõnastik kasutab seda W3C loose DTD’ga.

2006-12-21

Firefoxis vormid ilusamaks

Rubriigid: CSS, Firefox — dukelupus @ 11:57:02

Tööga seoses tuli hiljaaegu kujundada HTML’is üks hiigelvorm – pealt saja erineva elemendi, mis said CSS’i ja JavaScripti abil nelja pseudo-tab’i lükatud. Testimiseks sai enesestki mõista kasutatud Firefoxi – ehkki kliendi enda soovi kohaselt pidi leht vaid IE’ga töötama. Mina ei virisemud (eriti), minu elu oli selle võrra kergem. ;)

Tegelikult tegi asja lihtsamaks ka asjaolu, et kuna kliendid pidid ID-kaardiga sisse logima, siis sai antud juhul hakkama vaid ActiveX’i pluginaga. Sellest ID-kaardi asjast saab blogitud kunagi edaspidi… igal juhul väärt oma posti.

Aga see selleks, tagasi vormide juurde. Kuivõrd tööl mul enesestki mõista Windowsi teemaks Classic, siis nägi vorm välja suhteliselt… lame – seda nii IE’s kui ka Tulirebases. Kui Internet Explorer võtab kujunduses üle Windowsi teema MFC elemendid, siis Firefox teeb seda vaid osaliselt – ma pole siiani aru saanud, miks.

Siis saigi CSS’iga vormi elemendid ilusamaks kujundatud – tekstiväljadele õhuke serv, mis muutis veidike värvi kui hiirega üle lohistad, nupud ilusamaks, raadionuppude label’itele kujundust (viimane on üks kõige alahinnatumaid HTML-elemente) jne. Kokkuvõttes sai nii minu kui ka teiste arust päris ilus vorm.

Sai siis vaadatud minu vormi – ja tavalisi veebivorme Firefoxis. Vahe oli üsna jube – ja siis äkki välgatas: ma saan ju muuta Firefoxis kuidas elemente renderdatakse!!!

Firefoxil on userChrome.css, userContent.css, user.js jt – meile pakub siinkohal huvi userContent.css. See fail määrab ära, kuidas veebilehed renderdatakse – see on igal kasutajal individuaalne. Leiab selle järgnevalt:

  • Windows XP/2000: %AppData%\Mozilla\Firefox\Profiles\xxxxxxxx.default\ Kirjuta lihtsalt Run’i %appdata%\Mozilla\Firefox\Profiles\ ja vajuta enterit – xxxxxxxx on siinkohal juhuslik string.
  • Windows 95/98/Me: C:\WINDOWS\Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\
  • Linux: ~/.mozilla/firefox/xxxxxxxx.default/
  • Mac OS X: ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/

Aga failile saab ligi ka lihtsamini – kasuta Firefoxi pluginat ChromEdit Plus. See võimaldab lihtsalt eelpoolmainitet failide muutmist; pole vaja neid mööda ketast taga ajada.

Ava chromEdit.css ja lisa järgmised lõigud:

input[type="text"], input[type="password"], textarea {
border-style: inset ! important;
color: #102132 ! important;
border: 1px solid #284279 ! important;
}

Mida see teeb? See võtab text ja password-tüüpi input-alad ning samuti mitmerealise teksti sisestamiseks kasutatava textarea ja lisab neile inset-tüüpi õhukese serva, mille värv on selline. !important tähendab, et veebilehe näitamisel kuvatakse väli tingimata nii, nagu meie seda ütlesime, mitte nagu autor seda on määranud. Kas seda !important-käsku kasutada või mitte sõltub suuresti sinu enda soovist.

Järgmise lõiguga lisame et antud väljade serv muudaks natukene värvi, kui hiir nende peale viiakse. See aitab kasutajal näha aktiivset elementi – ja serva värv muutub selliseks:

input[type="text"]:hover, input[type="password"]:hover,textarea:hover {
border-color: #CC00CC ! important;
}

Nüüd aga muudame ära nupud. Siinkohal ma !important käsku ei kasuta, kuna väga paljud veebilehed on nupud nagunii ära kujundanud – ja nende liigne mudimine võib veebilehe välimust liiga häirivalt mõjutada. See-eest on aga nuppudel nii :hover kui ka :active (so, milline on nupp selle murdosa sekundist millal teda klikitakse):
input[type="button"], input[type="submit"], input[type="reset"]
{
color: #000033;
background-color: #DDDDDD;
border-right: gray thin outset;
border-top: gray thin outset;
border-left: gray thin outset;
border-bottom: gray thin outset;
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover
{
border-right: silver thin outset;
border-top: silver thin outset;
border-left: silver thin outset;
border-bottom: silver thin outset;
background-color: gray;
color: maroon;
}

input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
background-color: black;
color: white;
}

Seejärel tuleb kindlasti Firefox restartida, sest muidu muudatused ei jõustu.

Mis siis tulemuseks on? Vaatame näiteks Google’t.

Enne:

Pärast:

(hoidsin hiirt “I’m Feeling Lucky” nupu peal, et oleks näha milliseks nupp hiire all muutub. Klikkimise hetkel muutub nupp mustaks ning kiri sellel valgeks.)

Ei tea kuidas teile, kuid minule meeldib teine versioon oluliselt rohkem. Ja kui sulle ei meeldi – eks siis muuda CSS’i selliseks nagu sulle meeldib. Midagi kohustuslikku siin ei ole – ja piiriks on ainult sinu enda fantaasia (ning muidugi CSS’i oskused).

Mida veel selle failiga teha annab? Väga paljutki – näiteks keelame ära vilkuva teksti ja paneme marquee (liikuv tekst) paigale – vaid kahe reaga:

blink { text-decoration: none ! important; }
marquee { -moz-binding: none; }

Keelame ära häirivad helitaustad veebilehtedel:

embed[src*=”.mid”] { display: none !important }
embed[src*=”.mp2”] { display: none !important }
embed[src*=”.mp3”] { display: none !important }
embed[src*=”.mp4”] { display: none !important }
embed[src*=”.wav”] { display: none !important }
embed[src*=”.wma”] { display: none !important }

(jah, kahjuks on veel ka aastal 2006 inimesi kes arvavad et vilkuv/liikuv tekst ja MIDI-pinin taustaks on head veebikujunduselemendid)

Head Firefoxi mudimist!

Blog at WordPress.com.