Homme, 9. aprillil 2009. aastal on rahvusvaheline CSS Naked Day! 2009. Üritus leiab aset veebiavarustes ning kõik osavõtta soovijad peaks esmalt registreeruma CSS Naked Day! veebis asuva vormi abil ja seejärel 9. kuupäeva kukkudes oma veebilehelt css seljast koorima.

Korrektsuse mõttes tuleks .css fail eemaldada kuni 48 tunniks, sest just niikaua kestab kokku 9. aprill kui erinevate ajatsoonide kaupa järge pidada.

Ja, et Uus-Meremaal ja Austraalias on tegelikult juba 9. kuupäev alanud, siis tuleb ka alustada...

Meenutusi 2008. aastast

Üks väike näpunäide neile kes vaevlevad Google Chrome poolt ümber input elemendi tekitatava piirjoone pärast:



Küll on tüütu, kuid lahendus õnneks lihtne:

:focus {outline: none}

Või siis kindlale elemedile määrates:

input.kindel_klass:focus {outline: none}

Ja voilaaa:

Lihtsate onmouseover ja onmouseout tabeliridade (ei mingeid tabeleid enam) värvide vahetamiseks tavalise primitiivse ja talupoegliku lahenduse:

<dl onmouseover="this.style.backgroundColor='#F8F8F8';"
onmouseout="this.style.backgroundColor='#FFF';">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>

asemel kasutada hoopis jQuery pakutavat lahendust (mitme muutuva css attribuudi korral):

<dl class="row;">
<dt>Veerg 1</dt>
<dd class="competion">Veerg 2</dd>
<dd class="place">Veerg 3</dd>
<dd class="organizer">Veerg 4</dd>
</dl>

$(function(){$("dl.row").hover(function (){$(this).css({ "background": "#DFFFFF",
"color": "#00a7d8","border-bottom": "1px solid #9EE9FF" });
}, function (){var cssObj = {"background": "#FFF",
"color": "#2C2C2C", "border-bottom": "1px solid #CBCACA" }$(this).css(cssObj);
});
});

või pisut lihtsustatud varianti (ühe muutuva css attribuudi korral):

$(function(){$('dl.row').hover(function(){$(this).css("background","#DFFFFF"); },
function(){$(this).css("background","#FFF");});
});

Puhtam, kergem ja mugavam tunne :)
Peaks ka "Unobtrusive" olema!

Seekord vaatluse all javascripti raamistik MoreCSS. Erinevalt mõnest teisest teegist (jQuery, Prototype, Moo Tools, Dojo Toolkit, Yahoo! UI Library, Ext JS) peaks see olema veelgi enam disaineritele meelepärasem, sest erinevate funktsioonide loomiseks kasutatakse css'iga sarnast koodi süntaksit ja ülesehitust ning ka kood kirjutatakse css faili, mida siis javascriptiga hiljem töötlema asutakse.

Raamistiku arendaja on yellowgreen designbüro ja see on välja antud MIT Litsents'i all.

Nüüd ka erinevatest attribuutidest ja võimalustest. Ametlikult on attribuutide nimekirjas ligi 25 elementi.

Nüüd ka mõni näide:

1. style - lihtne hover süsteem

a) CSS

#just_a_table td {
border: 1px dotted gray;
}

b) HTML

<table id="just_a_table">
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
<tr><td>Move your mouse over this</td></tr>
</table>

c) MoreCSS

#just_a_table td:hover {
style:
backgroundColor: #90B329,
color: white
;
}#just_a_table td:leave {
style:
backgroundColor: white,
color: black
;
}