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

2006-12-21

Firefoxis vormid ilusamaks

Filed under: CSS,Firefox — Sander @ 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!

Lisa kommentaar »

Kommentaare veel pole.

RSS feed for comments on this post. TrackBack URI

Lisa kommentaar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Muuda )

Twitter picture

You are commenting using your Twitter account. Log Out / Muuda )

Facebook photo

You are commenting using your Facebook account. Log Out / Muuda )

Google+ photo

You are commenting using your Google+ account. Log Out / Muuda )

Connecting to %s

Blog at WordPress.com.