LinkWithin 與簡單的 CSS hack

Posted By 非典型文字工作者 / October 5, 2009 @ 2:30 AM



當了奇緣旅行誌的潛水讀者已久,直到最近才發現奇緣格主在某個文章的角落放置了 LinkWithin 這個部落格小玩意。 LinkWithin 是類似於「相關文章」輪播的部落格外掛,安裝方法非常簡單快速,我不到一分鐘就安裝成功了(英文苦手也行!),而且網路上早有許多安裝教學的文章流傳,例如以下兩則篇文章連結,我想就不必在本格獻醜教學了。(現在花太多時間寫部落格會被罵的!)

相關文章

LinkWithin 用縮圖顯示部落格「相關文章」 [重灌狂人]

以下介紹的這個LinkWithin網站,可以透過標籤、文章標題等相關資訊幫我們篩選跟目前網頁相關的文章,並將網頁中的任意圖片用縮圖展示出來,讓我們可以放在網頁下方或側邊欄,展示其他類似的文章讓網友點選。

LinkWithin網站的設計相當簡單,不用註冊帳號也不用作複雜的設定,只要把你的網站網址貼上並將Widget程式碼放到你的網頁中即可。不過初步測試,也許是因為LinkWithin網站還需要一段時間的彙整、分析,或者是它對中文處理比較不在行或啥啥原因,「相關文章」的相關度並不高,常常跑出來的都是不相干的文章,不過還算是一個讓網友可以看到更多文章的好用工具。

利用LinkWithin 新文、舊文同時瀏覽 [il Giardino Romantico]

相信每位優質文章的背後,都有一段辛苦的整理圖片+寫文的辛酸史。或許沒那麼嚴重,不過每篇文章所需要花費的時間與精神,只有筆者自己才知道。現在是一個講究新潮的時代。很多部落格瀏覽客,不是因為要逛的blog實在太多或是只為了搶沙發而成為快閃族。而舊文雖然花費的時間或許一樣多,當他的時限已到,很少人會特地去翻舊文出來參考。要如何輕鬆的讓自己blog的瀏覽者看到筆者自己花盡心思寫出來收藏在blog某個角落裡的精彩舊文呢?


最近我終於搞懂怎樣去分別設定 Firefox 與 IE 這兩大瀏覽器的 CSS hack,而以下兩篇文章也輕鬆地解釋出我的某些困惑,深感覺到自己這種半吊子程度還是乖乖讀書或寫文章就好。

相關文章


简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera
[齐萌的个人空间]


跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多,具体可以查看:

本文据说的主要是通过“.”,“>”,“*”,“_”来区分。以下是本人对这四种符号的测试结果:
———————IE6—— IE7——IE8——FF2——FF3— Opera9.5
>property—— Y—— Y—— Y—— N—— N—— N
.property—— Y—— Y—— Y—— N—— N—— N
*property—— Y—— Y—— Y—— N—— N—— N
_property—— Y—— N—— N—— N—— N—— N


我们可以看到>property、.property、*property在各浏览器中的表现是一致的,只有_property在IE6和IE7、IE8中有所区别。另外还要注意的,IE6是不支持!important的,而其他几款浏览器都识别。

Hack-free CSS for IE [Arve Bersvendsen]

Conditional comment syntax

The conditional comment is just a specially formatted HTML comment that is picked up only by various flavors of Internet Explorer for Windows. You could for instance use this to apply the PNG Behavior

The following conditional comment is being picked up by IE5, IE5.5 and IE6:



CSS Hacks:FireFox, IE6, IE7, IE8 [Jas9 Taipei.]

也許可以參考以下我整理出來的「FireFox, IE6, IE7, IE8 CSS Hacks」寫法:

.jas9{ color: #000 }/* 給所有明門正派的瀏覽器 */

.jas9{ color: red\9 }/* 給IE所有版本 */

.jas9{ color /*\**/: orange\9 }/* 給IE8 (IE7&IE8能讀) */

.jas9{ *color: yellow}/* 給IE7 (IE6&IE7能讀) */

.jas9{ _color: green }/* 給IE6 (僅IE6能讀) */

如果你只需要區別「FireFox」跟「IE」,就只要使用「給所有明門正派的瀏覽器」跟「給IE所有版本 」。

如果你需要區別「FireFox」、「IE6」跟「IE7 IE8」,就只要使用「給所有明門正派的瀏覽器」「給IE所有版本 」跟「給IE8 (IE7&IE8能讀)」。

如果要分別指定不同宣告值,就用「給所有明門正派的瀏覽器」「給IE8 (IE7&IE8能讀)」「給IE7 (IE6&IE7能讀) 」跟「給IE6 (僅IE6能讀)」。

由於繼承的關係,CSS Hacks進行時,也要注意其間的順序問題。




 

2 Comment:

歡迎您回覆與本篇文章的寶貴意見,但請勿回覆內容與文章本身無關、人身攻擊或其他不適當的言論。本板將會提出嚴重警告以及保留法律上的任何權利。

請訪客您在「Comment as」處選擇個人身分(Open ID)回應。若訪客您尚無法登入身份,請選「Name/URL」留下回應資料,再次謝謝您的回應 :)

  1. 真有趣,原來我們互相潛水這麼久:)
    奇緣默默欣賞weihsi的文章許久,
    這時上浮來報到。

    使用LinkWithin的心得是簡單、不用費心,
    適用於影像多的部落格,
    雖然有時抓要自覺沒有太大關連的文章,
    卻可當作一種驚喜。

    ReplyDelete
  2. @奇緣
    讓我們一起加油吧!

    ReplyDelete

ShareThis

Copyright 2009 春如月筆記. Powered by Blogger Blogger Templates create by Deluxe Templates. WP by Masterplan