唉～
是說標準常用的做法其實現在的瀏覽器，規格都有跟上了。
但就是有些不常用的東西，就開始各做各的＝_＝|||...然後就為此要一直被表...
-----------------------------------
border color
一般 border color 就是一般的純色 或是透明色（用 transparent）
若是用 rgba 來定 border color...
玩了一下 border 特效～
目前只有FireFox 可以正常的做到，且透明有正確疊加
Chrome 應該是直接不支援...
Safira 則是出現了一個不知道什麼邏輯的結果....
總之就是要玩 border 特效，要注意每家的支援～～
------------------------------------
不知道是不是我的錯覺～
總之～好像 os 更新後～在 Firefox 預設的字型 正黑體 跑掉了，試了一下，用英文的就不會有錯。 （至於 chrome 可以正確的讀到 中文名）
@font-face {
font-family: MyCustomFont;
src: local(WenQuanYi Zen Hei),
local(Heiti TC),
local(Microsoft JhengHei),
local("微軟正黑體");
}
-------------------------------------
js 裡給 0 的話 是 false...
有時候寫順了就開始混亂～囧/
--------------------------------------
background-color
FireFox default = transparent
Chrome defulat = rgba(0, 0, 0, 0)
Chrome 比較麻煩的是 他用透明度0，要小心 orz...
-------------------------------------
width: auto
FireFox default 會用原始圖片大小
Chrome 會給 width=0, height = 0...但如果你對視窗 resize 後就跑出來了，很妙的作法....
用 jquery load image 進來在chrome 也會 width=0, height=0...
所以要改用temp Image onload 的方式自己拿長寬給 Chrome...
------------------------------------
select option onclick
FireFox support option onclick event
Chrome NOT support
因為Chrome 裡的 onclick ，寫了是沒用的 <option onclick="abc()" >xxxx</option>
所以硬要寫就是...
<select id="myselect" onchange="this.options[this.selectedIndex].onclick()">
但是會有個缺點就是...
FireFox 會跑兩次(select onchange+option onclick)，Chrome 只會跑一次(select onchange)
如果跑兩次並不會造問題（只是效能差一點），那就將就點～
如果多跑會造成問題（counter...etc），那就哭著把寫法改掉吧～找別的觸發點...
-------------------------------------
動畫用 jqeury 好還是 css3...
先說沒有用額外的一些 動畫或 繪圖的 lib...只有標準的jquery(沒有 jquery-ui)
看情況吧，jquery 的 animate 只對某些 css 的屬性有用，像基本的 top, left, width, height, color...etc。但對於新的 css3 transform 之類的就無效，用jquery也不是不行，可以用css 屬性資料做進去，但有些css 我記得是有幾個css load進去不會被更新的，要強制到 refresh page的method 才會起作用（是很少。好像是動態去改 hover 的 css，正常人不會那樣做XD）
css3 的動畫不是不好，但不好做互動的部份（有按才反應的那種）。但可以用在一些系統面固定一直跑出來，或是hover 的效果 ，就還不錯。
因為 css3 動畫是用 addClass ，removeClass的方式進行。 addClass 是沒問題的。但 要 removeClass 時，其實是沒有辦法只移指定的那個.....只能全部移除，然後再把不該移除的class 加進來～ 像 xxx.removeClass().addClass('orgin')，但～就很蠢阿Orz..而且若是他的某些屬性是操作過程有被改過的(ex: top, left)就GG...硬要全用css 也不是不行，但就得玩 徹底的 MVC 來做～但...一_一a 目前不想～
所以互動性強的動畫，目前還是 jquery animate 跟 setTimeout 處理
（稍微可以理解為啥 flash 轉 html5 有難度）
-----------------------------------
這是舊ie 的問題， ie8 以下沒有 .trim() 的 function
沒有留言:
張貼留言