這篇用來整理一下與 F2E 相關的 tool，以供日後參考用（持續更新）：
Archive for the ‘CSS’ tag
[CSS] How to determine ‘Specificity’ ?
有在寫web方面的朋友，特別是視覺設計人員應該對於這個詞並不陌生吧，每當我們有一大堆CSS（Cascading Style Sheet）設定檔的時候，那種交織在一起的感覺真的是讓人又愛又恨，對我來說，因為這部分的設定有很多部分都是為了Cross-Browsers而寫出來的雜亂Hacking，如果沒有註解，那久而久之根本就不知道當初是在設定什麼東西，也就無從改起。
所以我一直都覺得CSS在某種程度上和Regex算是平等的，都是Write-Only的一種表示法，只有在寫的當下你會知道是什麼意思，但是下次之後就絕對看不懂。你說我唬你？那你知道下面這是什麼鬼嗎：
哈哈，我也不知道，那是從RegExLib.com隨便抓的例子，好像是在做email驗証的吧，管他的，太噁心了，阿你CSS寫大了又切割成數個檔案，每個檔案都在夾縫中求生存，一邊+5px，一邊-2px，這不就是Regex的再版嗎…
因為自己時常有這種問題產生，所以從中會衍伸出一個問題就是CSS覆寫的priority，通常如果像我這樣蠢的人，一開始一定以為就和寫程式一樣，是以sequential的方式由上往下跑，那就最後的設定一定會蓋過最先的設定呀，這還要說嗎？阿如果真的是這麼容易就好了，其實是有規則的：
所以如果以後對於其樣式的優先順序有什麼不確定的地方的話，就愛用CSS specificity calculator吧，這個網站是我尋覓了一陣子才發現的，而且似乎也有一直在更新，不妨試試看吧。
[閒聊] Just changed the appearance
It’s being a while for me to change the appearance of my blog. Because I like minimalism themes, I keep finding anything about this kind of skin. Not only because I can train my ability to modify CSS but like it. Finally, I got a satisfying one called ‘The Journalist template’ made by Lucian E. Marin just now.
Now, it’s time for me to tune my blog 
~ But I need to sleep first because it’s almost 3 am now … See you guys next time :]
[JS] jQuery.css() problem when using Firefox
最近在公司開發JS的程式的時候，很多時候都會利用到快速又方便的jQuery Library，而這次就很剛好的遇到了Bug，花了很多時間才解出來，以下為測試環境（FF 3.59 , 3.6 ）：
假設我現在有一個DOM的元素，是一個img，當我設定其CSS為「display:none;」時，在FF上就會沒辦法利用
「jQuery.css(‘left’) or jQuery.css(‘top’)」來把這個值取出。就算你已經設定好left或是top的值，都只會抓到0px。
範例程式碼：
所以為了要解決在元素被hidden時不能取值的問題，就只能用比較髒的手段來抓到這個值，就是利用「visibility」。
什麼是visibility？它和display不同的地方在於說，display:none會直接不顯示這個元素並不佔用空間；而visibilty:hidden則是不顯示這個元素但是卻仍存在並佔用空間。
所以這個很Tricky的方法可以參考下面：
這樣就可以成功的取到left的值（top亦同）而不會影響UI的部分了，算是這次遇到最無言的Bug吧。
下次見囉。
δ 2011/01/20： 又開始繼續維護這個專案，其實對 FF 3.6.8 來說（不確定其他版本是否也會有相同問題），就算是最新版本的 jQuery 1.4.* 都無法從 display:none 的元素中利用 .css() 來取得特定的屬性值，因此我利用 jsfiddle 寫了一組完整測試，包含 display:none 及 visibility:hidden 元素的各種可能，請自己用你的瀏覽器來測試一下吧。
[RoR] Prince + Princely = Princely Prince > Princess
每個童話故事最後面都是說王子和公主最後過著幸福美滿的日子，然後就沒了，但是我發現在RoR版的童話故事內，王子再也不需要公主在一起了，反而是自己一個人以高貴的身份自居!!
Read the rest of this entry »
