Tag: css

About Author:

換theme

替blog換了個theme，理論上比較Mobile friendly。不過Google Analytics中數據說其實75%的流量都還是桌面，換完了才覺得自己多此一舉。不過還是換一下吧，畢竟上一個theme已經是N年前開始寫blog時挑的了*。

[Continue reading]

[試] 重新定義Foundation 5 framework的media query breakpoint

相比常見的Twitter Bootstrap，另一個比較不普及HTML framework──Foundation 5更較為適合作為手機應用 Mobile app 的UI介面，不論是用HTML+CSS+Javascript再用Phonegap之類製作的App、還是用UIwebView作UI的原生App。 不過，當Foundation 用在mobile 上製作responsive的app時，我對Foundation 5的breakpoint就不特別滿意，尤其是iPhone 6和6 plus出現後，當要處理iphone 6/6+ landscape和iPad portrait 的同時，那個不論不類的”medium”，也就是641 pixels 至 768 pixels的那個屏寬breakpoint就令我超不爽。 這是Foundation 5的預設breakpoints： 最小寬度 Min-width (em) 最大寬度 Max-width (em) small 40 medium 40.063 64 large 64.063 90 xlarge 90.063 120 xxlarge 120.063 當然，這只是我的個人意見啦。 解決不爽的方法，是自行定義各mobile view的breakpoint。 首先，先要了解各iPhone的screen display pixels，我從Kyle J Larson的這篇blog文找到了下面的一幅參考圖： 這是整理後各iPhone 屏寬和屏高的matrix： Display pixels Resolution (portrait)…

[Continue reading]

如何以HTML和CSS堆砌出 1, 1.1, 1.1.1 的多重清單格式

有想過，有天某個客戶要你把他們的那篇由律師精心打造的使用條款、法律聲明放到網站上面，然後列表數縮排的各項目(1)、子項目(1.2)、孫項目(1.2.3)的編號格式都要按本子列出來，弄出一個多層次清單(multiple level list)？然後才驚現，w3c標準的HTML原來沒有這樣的功能！  你，不是世界唯一一個遇上這問題的人。

[Continue reading]

以CSS消滅IE 10的文字框的「消除」功能

微軟推出了IE 10一段時間，在試用過後，這個新的IE比先前的IE 9性能上更快，CSS3的對應也優於先前的版本，雖然我對強制在Windows 7的IE 10套用個人覺得全不討好的Windows 8 Metro UI風格一事上真的不敢恭維。 在Developer tool中IE 7 / 8 / 9 都用Metro UI，這算啥回事！ 另外，IE 10「溫馨地」在input單行文字框加了一個無敵的功能──當文字框裡有文字兼onfocus時，會出現一個消除框中內容的小交叉。 看圖（喔！前面的那一個才是）： 這可不是一個普通的「X」，而是用Wingding 2字款顯示出來的一個不折不扣的「交叉」！ 當然，世界不是只有IE，更不是只有IE 10… 不少網站早就用javascript在文字框加進了消除功能，結果…… 就是要找出個方法去消滅這個微軟IE團隊充滿愛心的雞肋交叉。於是IE 10又內建了有一個很有愛的vendor specific CSS，去供我們這些不懂愛的人去把這雞肋交叉解決掉： input[type=text]::-ms-clear { display: none; }

[Continue reading]