家儒的筆記 » css http://ka-yue.com/blog 網頁設計、開發、SEO 優化 Fri, 27 Aug 2010 06:22:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 IE 也支援的 Inline-block http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block#comments Sun, 15 Aug 2010 08:13:34 +0000 kayue http://ka-yue.com/blog/?p=686 Continue reading →]]> .inline-block { display: inline-block; zoom: 1; *display: inline; }

CSS 中最常用的 display properties 一般有 block、inline、none。而 Inlin-block 是另一個極好用的屬性，卻因為 IE 不太支援，所以常常被忽略掉。而只要用上面這段 css snippet ，就能令 IE 也支援 inline-blcok 了。

如果不知道 inline block 有甚麼特點的話，很簡單 － inline-block 在 inline 之餘，還有 block 的屬性 － 可以設定 height 和 margin-top、 margin-bottom。

]]> http://ka-yue.com/blog/ie-%e4%b9%9f%e6%94%af%e6%8f%b4%e7%9a%84-inline-block/feed 0 HTML5 預設模版頁 http://ka-yue.com/blog/html5%ef%bc%8dboilerplate http://ka-yue.com/blog/html5%ef%bc%8dboilerplate#comments Wed, 11 Aug 2010 05:39:40 +0000 kayue http://ka-yue.com/blog/?p=681 Continue reading →]]> A rock-solid default for HTML5 awesome.

自從沒有再用 Dreamweaver 以後，每開始一個新頁面我就煩惱 doctype 該要寫甚麼，jQuery 的 Google CDN 網址又是甚麼……以往這些都包括在 Dreamweaver 的預設 HTML 網頁模版裡。

現在可方便了，有人整理了一整套 HTML5 空白模版，內容包山包海，甚麼都有 － 從 HTML 基本模版、CSS Reset、jQuery CDN 這些最基本的就不用提了，連 .htaccess 也準備妥當，實在很好很強大。嗯，web developer 最注重的一點，IE 向後支援，也沒有問題，連 PNG fix 也準備好，簡直完美啊，捨我其誰呢？

如果用不上全部功能，大可意把用不上的地方 delete 掉，因為官方聲稱 delete-key friendly，沒有 dependency 的問題。即使用不上，光讀一次 source code 也能學到不少 best practices。畢竟人家花了很長時間整理，source code 裡也都附上詳細註解與出處。

唯一的小不滿就是 CSS Reset 部份，不過這就涉及個人喜好了，非戰之罪也。

]]> http://ka-yue.com/blog/html5%ef%bc%8dboilerplate/feed 0 常用 CSS Hack 再整理 http://ka-yue.com/blog/common-css-hack http://ka-yue.com/blog/common-css-hack#comments Sat, 26 Jun 2010 19:11:11 +0000 kayue http://ka-yue.com/blog/?p=659 Continue reading →]]>

瀏覽器越來越多，舊的未去，新的又來，CSS hacks 亦需定時整理。

CSS Hack

IE hacks

雖然 IE 對 CSS 的支援不堪入目，可是卻有方便的屬性 hacks！把下列 hacks 記下來即可輕鬆應付各版本的 IE！

.selector {
    padding: 10px;
    padding: 9px\9; /* all ie */
    padding: 8px\0; /* ie8-9 */
   *padding: 5px;   /* ie6-7 */
   +padding: 7px;   /* ie7 */
   _padding: 6px;   /* ie6 */
}

Firefox hacks

/* Target Firefox 2 and older */
body:empty .selector {
    color: red; 
}
/* Target FireFox 3 */
html>/**/body .selector, x:-moz-any-link, x:default {
    color: red;
}

來源：CSS Hacks for Different Versions of Firefox

WebKit hacks

針對 Chrome 和 Safari 的 hack

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .selector { padding:11px; }
}

Javascript

Javascript 的解決方案都不外乎先在 Javascript 做版本檢測，之後在 html 或 body 上加上相應的 class。這樣做的好處是不用在 css 裡加入各種奇形怪狀的 hack，也不用處理日後 css hack 的相容性問題。缺點是它要依賴 Javascript，反應也可能比較慢…

jQuery

這一段 code 可以自動在 body tag 上加入 IE6 class

if( jQuery.browser.msie && parseInt(jQuery.browser.version) === 6 ) {
    $("body").addClass("ie6");
}

請各位自行舉一反三，詳情請閱 http://api.jquery.com/jQuery.browser/

Modernizr

如果你常常在網站上用到 CSS3 的話，又同時要支援舊瀏覽器，Modernizr 可能對你有用。Modernizr 會就瀏覽器支援的 css3 屬性在 <html> 加入相應的 class。

例如我想用多背景圖的話：

.multiplebgs div p {
    /* properties for browsers that support multiple backgrounds */
}
.no-multiplebgs div p {
    /* optional fallback properties for browsers that don't */
}

更多例子請見 http://www.modernizr.com/docs/。雖然我覺得這樣做有點多餘啦，如果要完美支援舊時代瀏覽器的話不如直接放棄 CSS3 好了。

HTML Conditional Comments

最近我還學到了這種不用 Javascript 而又可以在 <body> 加 class 的寫法：

<!--[if IE6]--><body  class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->

很好很強大，長得醜一點就是了。

]]> http://ka-yue.com/blog/common-css-hack/feed 3 跨瀏覽器 CSS3 代碼生成器 http://ka-yue.com/blog/cross-browser-css3-rule-generator http://ka-yue.com/blog/cross-browser-css3-rule-generator#comments Tue, 09 Mar 2010 22:27:13 +0000 kayue http://ka-yue.com/blog/?p=586 Continue reading →]]>

可憐天下 web developers 不知花了多少光陰在支援不同瀏覽器上。Internet Explorer 就甭提了，即使 Safari、Firefox 都支持的陰影（box-shadow）效果，偏偏都有不同寫法。結果就是同一件事情要寫好幾次，不幸要修改數值的話又要連續改數次。杯具啊……（還是都習慣了？）

原本簡單一個陰影效果往往要六行 code 才可以搞定：

.box_shadow {
     -moz-box-shadow: 1px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 1px 0px 4px #ffffff; /* Saf3.0+, Chrome */
          box-shadow: 1px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
              filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
          -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=0px, Color='#ffffff')"; /* IE8 */
}

為了解決這個問題，我在此隆重介紹～ CSS3 Please.com－ 一個網上 跨瀏覽器 CSS3 代碼生成器。以後寫 CSS3，只需修改一處地方，網站自動幫你更新其他瀏覽器的代碼。支持的效果有圓角 border-radius、陰影 box-shadow、漸變、移動 transform等，而且還會最大限度地支援各個瀏覽器：Internet Explorer, Safari, Chrome, Firefox, Opera。比較意外的是，原來有不少效果在 Internet Explorer 下可以靠 filter (DXImageTransform) 來達成，如果要自己寫的話，大概要花不少時間查文檔吧。

]]> http://ka-yue.com/blog/cross-browser-css3-rule-generator/feed 1 less – CSS 本應如此簡單 http://ka-yue.com/blog/less http://ka-yue.com/blog/less#comments Sun, 07 Feb 2010 05:02:41 +0000 kayue http://ka-yue.com/blog/?p=535 Continue reading →]]>

寫 CSS 最痛苦的是要搞定一堆 browser bugs ，其次就是要面對 CSS 不是 programming language 這現實，不存在其他程式語言常見的 變數、運算、繼承 等概念，使原本簡單的工作變得冗長，並且使維護工作變得麻煩。

less 的出現便是為了解決這個問題：在現有 CSS syntax 的基礎上，為 CSS 加入程式語言的特性，包括變數、scope、nested rules、運算、繼承。

看例子你便會明白：

@brand_color: #F0F;

#container {
    div {
        color: @brand_color;
        border: none; }
    p {
        color: @brand_color;
      }
}

這例子應該很容易理解吧，相等於以往的：

#container div {
    color: #F0F;
    border: none;
}
#container p {
    color: #F0F;
}

壞消息是，用 less 寫成的檔案需要在 Unix based 的電腦上編譯過後方能變成真正的 CSS；好消息是，有人寫了個小工具 less.app 可以完成這項工作，使不懂得用 terminal 的用戶也能夠使用。在 window 下貌似沒有簡單的解法…

less 官方網站：http://lesscss.org/
less.app (GUI): http://incident57.com/less/

]]> http://ka-yue.com/blog/less/feed 0 Internet Explorer 6 Bugs http://ka-yue.com/blog/internet-explorer-6-bugs http://ka-yue.com/blog/internet-explorer-6-bugs#comments Fri, 11 Dec 2009 11:33:49 +0000 kayue http://ka-yue.com/blog/?p=517 Continue reading →]]> IE6-denial-message

每參與一個新 project，我總會第一時間問用不用支援 Internet Explorer 6，答不用支援的一般都是不憂財源的公司。所幸某公司一直沒有支援 IE6 的傳統，加上自從轉用了 Mac 以後，開 IE 變得很不方便，已經很久沒 debug IE 了。

最近看見有人寫了篇 IE6 bug 大全，整理收集了一堆 IE6 bugs。其實要找 IE CSS bugs ，我推薦一個好地方：Explorer Exposed 。這個網站收集了很多常見的 IE CSS bugs 及其解法（不限 IE6），對工作極有幫助。另外，在《Ultimate IE6 Cheatsheet》這篇帖子裡，也介紹了多種方法去補足 IE6 功能上的缺陷，例如半透明的 png、圓角等。

老實說，不提複雜一點的 floating、positioning ，Microsoft 要怎樣寫才能寫出 double margin 這些不合邏輯的 bugs 呢？與其說 bugs，倒不如說是瘟疫更為貼切。

不知道當年的 IE6 developers 敢不敢在自己的 resume 上寫自己曾經開發過 IE6 呢? XD

PS: 有人會為 IE 8 debug 嗎？還是都是強行轉成 IE7 算了？

上圖出自：IE6 denial message for Momentile.com

]]> http://ka-yue.com/blog/internet-explorer-6-bugs/feed 3 網頁設計收藏站80個 http://ka-yue.com/blog/web-design-pick http://ka-yue.com/blog/web-design-pick#comments Sun, 25 Nov 2007 18:45:31 +0000 kayue http://ka-yue.com/blog/web-design-pick Continue reading →]]> 香港網頁設計服務

總有人認為網頁設計工作跟去汽水機買汽水一樣，付個錢，按幾下，產品就會從天而降。要知道網頁設計師也是人，我們的靈感也是有限的，秒殺工作談何容易。

這裡收集了共七十個網頁設計好站，對網頁設計師來說絕對是一大好物。它們收集了各式各樣設計優秀的網頁，質量並存。以後各位網頁設計師靈感空虛時不防到這些網站散散心，可能會有意外所得。

排名不分先後，有些我 Bold 了的是我比較喜歡的。

最後更新: 2010 Feb

以顏色分類的網頁設計收集站

香港網站設計

顏色的問題經常讓網頁設計師頭痛，就讓我們看看其他設計師怎樣為網頁配色吧。

  1. CSS Clip:香港網頁設計CSS clip
    CSS Clip: 一個以顏色分類的 CSS 設計收集站
  2. die Kunst:網站設計師die Kunst
    die Kunst: 來自日本的設計網站
  3. strangefruits:網頁設計作品收集http://www.strangefruits.nl/
    SF art & design
  4. blueidea:國內網頁設計師Pages – blue idea
    pages，來自內地的網頁設計作品收藏站。
  5. Design bombs.com
    按網站風格作分類。

CSS 網頁設計作品

用css設計的網頁

CSS, XHTML, Web Standard, what ever you call it. 這部份是我的最愛。

  1. cssvault:Web Standard DesignCSS Vault .com
    CSS Vault: 其網站本身的設計就很優，藏品更棒。
  2. css import:香港網頁設計服務CSS import .com
    CSS Import: CSS 界著名的網頁設計收集站。
  3. css collection:網站製作香港CSS Collection.com
    CSS Collection
  4. css mania:香港css網頁設計師CSS mania .com
    CSS Design: 頗不錯的一個站。
  5. css remix:網頁設計師CSS remix .com
    CSS Remix: 收錄的網站設計都不錯，還有投票功能。
  6. design snack:Hong Kong Web Designerdesign snack .com
    Design Snack: 除了 Web standard site gallery 外，還有 Flash design showcase。
  7. faveup:香港網頁設計服務http://faveup.com/
    Faveup: 除了收集網頁設計作品外，還有 Logos, Business Cards, Flash showcase。
  8. css clip:網站設計香港http://www.cssclip.com/
    CSS Clip: 上面有提過，是一個以顏色分類的設計收集網站
  9. css elite Web Designhttp://www.csselite.com/
    CSS Elite: 所收集的網頁還可以
  10. css-design-yorkshire 網頁設計師http://www.css-design-yorkshire.com/
    CSS Design Yorkshire: 藏品興眾不同 (不同不代表特別好…)
  11. w3c sites: 香港css網頁設計師http://www.w3csites.com/
    W3C Site，即 Web standard 網站收集
  12. css zen garden: Web Standard Designerhttp://www.csszengarden.com/
    Css Zen Garden: 有用 CSS 的網頁設計師都知道的禪意花園。
  13. http://www.webstandardsawards.com/
    Web Standards Awards: 只有自己承認自己的 Web Standards Awards…
  14. http://www.cssallstar.com/
    CSS All Star: 好像程式出錯…
  15. http://standardsreboot.com/
    於 7 Dec 2007 加入。
  16. http://www.cssprincess.com/
    此網站的宗旨是: 支持與宣揚女性的網頁設計師。所以其收藏甚女性化。
  17. http://cssmachine.com/
    收集大量 CSS 網頁設計，並按顏色、CMS 系統、網頁排版、網站類型作分類，推薦。

甚麼都收的網頁設計收藏站

香港網頁設計服務

這部份的網站都很炫酷，因為收錄的網站大都是用 Flash 來設計，設計得天花龍鳳，甚麼都有，就是可用性不高。

  1. http://www.thefwa.com/
    Favourite Website Awards: 所有網頁設計師都聽過它的大名。
  2. http://webrsque.com/
    Webrsque: 以網站類型 (Web、Blog)、語言、配色和樣式等等分類。
  3. http://www.newwebpick.com/
    New Web Pick: 站長好像是華人，定期推出電子設計雜誌，網路上名氣頗大。
  4. http://www.screenalicious.com/
    Screenalicious: 收集各類網頁設計，藏品一般但更新速度快。
  5. http://screenfluent.com/
    Screen Fluent: 收錄了近七千個設計優秀的網站。
  6. http://www.webcreme.com/
    Web Creme
  7. http://irie.be/
    每天為你送上最新的 Flash 網站
  8. http://www.bestwebgallery.com/
    Best Web Gallery: 是不是 Best 就見人見志囉。
  9. http://faveup.com/
    Logos, Business Cards, Flash web design and CSS web design showcase
  10. http://www.designsnack.com/
    CSS, XHTML and Flash design showcase
  11. http://slightshow.com/
    Slight Show: A Silverlight design showcase
  12. http://webrsque.com/
    Web design gallery
  13. http://www.73dpi.net/
    73dpi: 這只是某網頁設工作室的作品集。
  14. http://www.may1reboot.com/
    Web design award
  15. http://strangefruits.nl/
    Art and Design portal
  16. http://www.thebestdesigns.com/
    The Best Design: 網頁設計藏品一般般
  17. http://beautifully-webdesign.net/
    Beautiful Web Design: 主要收集 Flash web site design
  18. http://www.coolsitecollection.com/
    Cool site collection: Digg 形式的網頁設計
  19. http://www.flickr.com/photos/splat/sets/981332/
    Flickr? 看網址就知道是個收集網頁設計作品的 Flickr 相集
  20. http://www.highfloater.com/
    High Floater: 收集 Flash web page design 為主，藏品特別
  21. http://www.websitedesignawards.com/
    Web Site Design Award
  22. http://www.e-motionaldesign.com/
    e-motional Design: version 2.0 soon，期待一下
  23. http://www.designmeltdown.com/
    Design Meltdown: 藏品一般
  24. http://www.gouw.nu/
    Gouw: 收集 Flash web page 為主，頗特別。
  25. http://www.dailyslurp.com/
    Daily Slurp: 收集各類網頁設計作品，藏品一般。
  26. http://screenfluent.com/
    Screen Fluent: 收集各類網頁設計作品，藏品尚算OK。
  27. http://styleboost.com/
    Style Boost: 一個不錯的網頁設計收集站。
  28. http://www.unmatchedstyle.com/
    Unmatched Style: 收集各類網頁設計作品，藏品一般。
  29. http://www.stylegala.com/
    Style Gala: 收錄各種網站，個人認為藏品一般
  30. http://designshack.co.uk/
    Design Shack: 英國的收集站
  31. http://www.e-creative.net/
    e-Creative: 一般一般
  32. http://www.linkdup.com/
    Link dup: 沒落了的網頁設計收集站
  33. http://www.netinspiration.com.ar/
    Inspiration for Web Designer
  34. http://www.designtaxi.com/
    Design Taxi
  35. http://www.xpaider.com/
    XPDR
  36. http://www.moluv.com/
    Moluv (關站中). After 7 years in the trenches, it’s time for a break.
  37. http://www.lookom.com/
    Lookom
  38. http://www.res72.com/
    RES72，頗有名氣的收集站
  39. http://www.crossmind.net/
    Cross mind
  40. http://www.designcollector.ru/
    Design Collector 俄國的網頁設計收集站
  41. http://cartfrenzy.com/
    按網站內容類型

非英文系的網頁設計收集站

  1. http://www.sj63.com/
    設計路上
  2. http://www.die-kunst.com/
    die Kunst
  3. http://phpspot.org/wst/webshot.php?m=alls
    日本
  4. http://www.designlinkdatabase.net/
    日本網頁設計 Gallery
  5. http://www.webneta.net/
    日本的網頁設計 Gallery
  6. http://www.ikesai.com/
    日本 Web design showcase
  7. http://anjo.dekiteharu.jp/
    另一個日本網頁設計 Gallery
  8. http://www.dezinspiration.com/browse/sites
    來自歐洲的網頁設計收集站

其他網頁設計相關

  1. http://www.alvit.de/handbook/
    Web Developer’s Handbook: 網頁設計師必備的手冊。
  2. http://www.opensourcetemplates.org/
    The Open Source Design Community: 有用 CSS 設計網站的人注意了，這裡有免費下載的 CSS Templates 啊。
  3. http://web2.0slides.com/
    Web2.0 Slides is a self-running slide show of over 1,400 of the best Web2.0 sites. It’s categorized by tags and sorted alphabetically.
  4. http://www.smileycat.com/miaow/archives/typography-for-headlines.html
    Typography for Headlines
  5. http://zeniltuo.com/

相關文章

]]> http://ka-yue.com/blog/web-design-pick/feed 60