Prototype JS 的 Selector Expressions

學習 CSS 時就不得不認識 selector。

通常書上所提到的 selector, 大多為 Type selector、ID selector、Class selector 及 Pseudo-classes selector; 雖然這已經滿足大多的需求, 不過實務上還是需要其他的 selector 的支援,  而 maxdesign 的 Selectutorial 資訊可以供作參考 。

CSS selector 規則, 其中也包括了 Attribute selector, 在 CSS-Tricks web-site 中簡明扼要說明了一些實用範例。

一般運用時, 除了使用 CSS file 做頁面外觀的處理之外, 仍需要 JavaScript 來進行 DOM element 的動態控制或資料處理。個人會選用 Prototype JS 做為主要的應用工具, 是因為它的 utility methods 使用上很直觀, $$(cssRule...) 提供了一些在 CSS 支援上的說明。

但, 在範例中都只使用了特定 attribute selector 規則, 如果讀者眼尖的話, 在說明的開頭處就已經提到 "cssRule ...", 也就是說: 可以使用多個 attribute selector 規則。方法是使用逗點(,)將每個 attribute selector 隔開即可。

例如: 將畫面上輸入的欄位值串接成 query string:

var reqStr = "";

$$('select[name^="cri_"]', 'input[type~="hidden"]:not([name^="cri_"])').each(
  function(ele) {
    if (typeof ele.name != 'undefined' &&
        typeof $(ele.name).value != 'undefined' &&
        $(ele.name).value != '') {

        reqStr = (reqStr.length > 0 ? reqStr + '&' : '') + ele.name + '=' + $(ele.name).value;
    }
  }
);

學習 CSS 的過程

想要使用 CSS 的動機, 是因為這兩年 coding 的焦點由 server side 轉往 client side。
剛開始是買了一些書看, 關於 CSS 及 HTML tag 在不同 browser 上的共同之處與寫作技巧, 但多半沒有什麼進展。
直到工作上真要開動時, 才發覺不知如何下手; 幸運的, 在 Google 大神的搜尋下找到了 YAML builder:

在取得 CSS code 之後, 試著調整 HTML tag 來感受一下變化之外;
也試著去理解 @import CSS file 之間的關係, 去除掉一些不會使用到的檔案。

其中, 察覺到了幾個重要的 hack 技巧, 主要是衝著 IE 而來的, 並且還有 IE6、IE7、IE8 的分別:
[CSS Hack]解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題！

甚至, 在 HTML <link> tag 的使用上, 要稍加注意該 tag 前後的注解(Conditional Comments):

(待續)