今天很高興的運用 Firefox 裡用 Firebug 做 css 的修改, 還對自己修改得比較順手沾沾自喜時, 突然想到老婆都是用 IE6, 所以用 IE Tab 來檢視一下, 結果慘不忍睹, 果然高興不了太久. 痛定思痛, 決定要更深入瞭解 CSS, 並克服跨瀏覽器的問題.
馬上就跑到金石堂買了這本: 超越式CSS-網頁視覺設計の王道. 吸引我的原因是這本書是以親和力為核心價植(當然還是免不了討論到技術面), 而非以技術面為核心價值. 再來是整本書的設計感增加了整本書的價值, 這讓我有了更深刻的領悟:
不論做什麼網站, 若是沒辦法使網站瀏覽者感受到價值存在(無論是文字,版面,配色,影像,互動性等各層面), 再優秀的技術也是枉然. 設計者用充滿價值的心來製作, 客戶也能感受得到它的價值, 自然就與低價的產品有所區隔.
最後就是譯者在這領域也是專家, 自然更能表達出作者的精神了.
總之, 開始超越 CSS 吧.
(咦 ? 好像離 Ruby,RoR 愈來愈遠了...)
在製作彩油的展示與選取頁面時, 遇到不少問題, 在此記錄:
* Blogger 使用的是 UTF8 格式的檔案, .js 檔案內可能會有中文資料, 若不是以 UTF8 存檔, 可能會造成執行時期的錯誤.
* Blogger 內的文章可以貼入 <script>....</script>, 但卻不可貼入 <style>...</style>, Blogger 會自動將 <style> 及其內的所有資料全部移除, 所以放了也沒用. 因此 <style> 變成只能靠修改 template 置入. 但 template 卻是所有文章共用的區域, 久了不但 template 會變得複雜混亂, 也會使整體網頁顯示變慢. 拜這個問題所賜, 讓我找到了動態讀取 css 及 javascript 檔案的方法:
function loadCSS(css_filename) {
var css=document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.setAttribute('type', 'text/css');
css.setAttribute('href', css_filename);
document.getElementsByTagName('head')[0].appendChild(css);
}
function loadScript(script_filename) {
var js = document.createElement('script');
js.setAttribute('language', 'javascript1.2');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', script_filename);
document.getElementsByTagName('head')[0].appendChild(js);
}