2009年10月25日 星期日

Firefox插件推薦：CSS Usage

css usage是一個基於firebug的firefox擴展，可以用來查看頁面中的CSS的使用情況，可以清楚的查看css文件中所有的規則在你的網站中的真實的使用情況。可以查看一個網站中多個頁面中的css使用情況——這個很好，可以看到CSS的在網站中的全局使用情況。
預覽：
下載地址：https://addons.mozilla.org/en-US/firefox/addon/10704 主頁地址：http://spaghetticoder.org/cssusage/
用法：
打開你想要掃描的網站的頁面，打開Firebug，切換到CSS Usage標籤，然後點擊”scan”按鈕。
如果是用了大量ajax或者dhtml的網站中，打開盡可能多的隱藏的div/窗口/tab，以使CSS Usage爬取盡可能多的內容。
然後訪問你的網站的其它頁面。
每訪問一個新的頁面，請按一次”scan”按鈕。當然，也可以選擇autoScan按鈕，這樣就不用每次按Scan按鈕了。
掃描的結果中，綠色的規則表示當前頁面中有用到，黑色表示其它頁面中用到，紅色表示沒有被掃描到(至少在當前頁面)，灰色是偽類(:hover之類)
一些特性：
可顯示規則的行數
自動掃描(autoScan)
鏈接到CSS文件(可以在新tab中打開該CSS文件)

文章提供Baystars Design網頁設計公司
張貼者： K+U=N&E 於 晚上7:10 0 意見
標籤： , , , , , ,

網路行銷由OUT轉IN，「入境行銷」(Inbound Marketing)受資金青睞

這星期看到一篇奇文，在昨晚的NET-MBA網路流量提升成功案例課程也有提及，由OnStartups.com的印度裔美國部落客所寫的，他所開的一間公司「HubSpot」最近再次取得了創投資金，雖然他一直說他不是在這部落格裡臭屁，但所有讀者想必都聞到了他充滿興奮的味道。畢竟，在這個年代，一間網路公司可以從一開始的幾百萬美元，到去年就成功增到1700萬美元（台幣5.6億），最近再增資成功，整個公司已經到了3300萬美元（台幣11億）的水準，據創業家稱，單單放在銀行帳戶裡定存的就有600百萬美元（2億台幣），這個「錢太多」的狀態令所有創業家一邊流口水一邊讀他這篇文章。
該篇「不臭屁」的文章通篇都在解釋到底他怎麼拿到這些資金，為何他可以成功拿到這些資金，這傢伙是MIT畢業，夥伴也都是MIT的同學，他說他現在其實完全不需要資金，但就是在不需要資金的時候來找錢，錢才找得多啊……之類。但我今天的重點不想放在那邊，我想來研究一下，哇塞，這間「HubSpot」到底是做什麼的？
這種募資的速度，肯定是一個趨勢指標，這一是某個新發起的趨勢。但，這個趨勢是什麼？
看一看，竟然是關於「網路行銷」的趨勢，而且和我目前在做的、在計畫的差不多──
先看看HubSpot這間公司的歷史，它只創立兩年多，一開始就「只是」一間專門做搜尋引擎優化、社群行銷的「工具公司」。這樣的公司其實已經四處都是，有的小至個人、小團隊、小部落客，做出一兩個小「工具」，先給自己的客戶用看看，不錯用，就拿出來試著賣給其他客戶。通常這種工具公司一定要搭配「顧問服務」，為每間企業做客製化的行銷專案，在必要的時候，使出他們的「工具」。我們很好奇的是，為何這位印裔創業家的HubSpot，以優化工具起家，就可以募這麼多錢？
嗯，先再來看看他的「工具」，也許真的與眾不同──的確，HubSpot一開始打江山的工具叫「Website Grader」，它會自動跑來分析你的網站，然後給這個網站一個優化的成績。這樣的工具省了HubSpot很多上門拜訪的功夫，它只要不斷四處去「爬」、去分析所有大中小企業的「官方網站」，不斷的產生自動分析的成績，然後拿去告訴每個企業官網的service小老鼠或admin小老鼠email帳號，哇哈哈，你的網站的排行在這30萬個網站中排行在倒數20%！我們不能保證它的這個名次到底「誤差」有多大，但這種爬蟲的行銷法向來很有效，到一個網站，算出成績，成績太爛，就寄出信件，對方收到信件，一定會緊張，想要更好？就來使用HubSpot吧！
但，這是一種行銷手段，若説在最熱時募得一些錢就算了。不可能再繼續募錢。而且，如圖表所示，HubSpot的付費客戶在去年短短半年內就有750間，而從去年到今年又增加了近1000間，而且據這位印度裔創業家所說，每個客戶的平均付費還增加中，這樣可怕的成績，我很難想像，竟然是靠這麼一隻「優化」的工具？
我們再看一下，終於發現，哦，原來……
原來，HubSpot有一個新概念在後面！通常一間行銷公司天天見客戶，聽客戶的需求，和其他傳統行銷管道一起爭客戶的行銷預算，聽多了以後，HubSpot就練出了新的方向。這個新方向是什麼？
HubSpot不知何時已經微調了它的定位，現在，整個HubSpot網站已經將自己定位成一種特殊的行銷手法「入境行銷」(Inbound Marketing，應亦可翻成「入向行銷」)的專門提供商，使得這間顧問公司，目前以非常快的速度在拉進新的付費企業客戶！而這位聰明的印裔創業家，這個暑假都在寫一本書，就叫做《入境行銷》(Inbound Marketing)，不確定亞洲這邊會不會進這本書。
什麼叫「入境行銷」？以往的行銷手段，都是對「外」下廣告、請工讀生到「外面」去發傳單、在「外面」的公車貼廣告、到「外面」的展場秀產品……。但是，網路行銷世代，大家發現這個「OUT」已經有點不同。表面看起來，好像仍然是到「站外」去「拉客」，比如你使用「站外」的部落客行銷，要部落客寫什麼心得文章；比如你去「站外」買廣告，要網友點擊到什麼地方……，不過，由於這些網路行銷往往一定會夾帶一個超連結，而這個超連結就是連到某個官方的網站（站「內」），然後亦由於網路上的數字太容易偵測，所以，行銷人員已經漸漸習慣以這些點進官網的人口，來判斷這整場行銷活動的效益。
用白話一點的方式來講上面這段話，以前行銷人員強調的是「OUT、OUT、OUT」，盡量把話說出去、讓愈多人知道愈好！以後的品牌知名度、到底在展場賣多少東西，再去量一量就好。但現在行銷人員強調的，卻已經變成了「IN、IN、IN」。
買了關鍵字廣告，點下去的人還不夠高！有沒有辦法再增加這個比例，讓更多人「IN」？
有人點進來了，但是他們留下資料的機會不怎麼大，有沒有辦法再提高這個量，讓更多人「IN」得更深一點？
留下了資料，卻好像若即若離，有沒有辦法再讓他們做二度回訪，這時候買下產品，讓這些人「IN」到把錢都塞「進」來吧？
你會發現，「入境行銷」並不是新概念，而是以往「出境行銷」的更極致、更追求效率的版本，之所以會有「入境行銷」，是因為現在誰都可以買關鍵字廣告，誰都可以下Facebook廣告，所以這些「出境行銷」已經沒什麼了，很會「出境」的人，甚至可以靠貼文什麼的做到四處曝光完全不花一毛錢就有流量過來，所以，行銷人員不看「OUT」，只愈來愈用放大鏡來看這個「接下來」，所以「In、In、In」的需求也愈來愈大。
因為這個需求，現在HubSpot的網頁已完全說他們是一套「入境行銷系統」，透過網路找來正確的受眾，將他們拉進來成為lead或正式付費客戶，將行銷預算報酬率最大化。注意，這個說詞已經和去年HubSpot的說詞「差很大」，原本HubSpot強調的是「被找到」(get found)，也就是想辦法為企業鋪更多的被看到的點，但現在它強調的是「被找到，還要進來一路最大化」！而這個版本的需求已經被養出來在這邊，造成包括HubSpot這樣公司的生意愈來愈接不完！
更有趣的是，我認為不只是行銷人員，所有創業家都應該再研究「入境行銷」，因為以下兩點：
一、這個需求還在「現在進行式」，還沒全部搞定哩：企業對「入境行銷」的解決方案，絕對還沒到最後一步，我們單單看目前的官網並沒有很大調整就知道了。而，還有很多很多可以做的事情，已經不只是行銷顧問公司可以做的，也是軟體公司、新網站的新機會，到底「入境行銷」還可以做什麼事情、加入什麼工具 ?
二、這個需求即將改變更多的實體商業模式，這些都還沒出現咧：以往有很多商業模式至今依然是以「出境行銷」為底子的，譬如直銷產業，強調的依然是如何將一個產品透過朋友關係「out、out、out」，如果像這樣的方法變成「入境行銷」，會是怎樣的狀況？創業家不妨別把心全放在行銷，想一想當這些行銷公司為企業操作了下一步以後，下下一步可能對現有業界一些商業模式造成怎樣的影響，早一步先做個平台或什麼「等」在那邊！
由「OUT」轉「IN」，還有什麼好機會？下一期的NET-MBA即將在下下周六舉行，有興趣的請速報名先訂位，我們會跟著這個月最新的行銷趨勢，進行成功案例分享，也一起試著操作。

文章來自mr6
文章提供Baystars Design網頁設計公司
張貼者： K+U=N&E 於 晚上7:06 0 意見
標籤： , , , , , ,

BeatCancer上周創下20萬人提及的金氏世界紀錄，快閃行銷(Mob Marketing)加入行銷正規選項？


Facebook剛剛修改了「社團」功能，為社團加了一面塗鴉牆，最新動態可以給所有人看到，許多人看到有些面向可以經營社群的，又多了一項武器可用。其實在社群經營這一塊，大家都注重「慢慢的經營」，社群是急不得，慢慢變大、慢火熬煮、幾個月後再「收割」。不過，網路上除了這些慢火熬煮的社群慢慢興起，我們也發現網路上一直會「閃出」一些更短暫、更熱門的主題，搜尋引擎每日最熱門關鍵字中這些主題其實佔了一大部份，只是，大部份的關鍵字好像飛碟掃過去，幾小時就消失了，這些熱潮也四處「閃」了一下就不見了！但，最近已經漸漸有了一些可以「抓熱潮」的機制，這，可能會是下一波行銷的絕佳機會，比那些慢火熬煮的社群還要厲害！
以往，我們用「快閃行銷」(mob marketing)來形容那些瞬間的行銷噱頭(stunt)，如同Nike在2007年某天晚上，秘密召集131位網友衝出紐約的Nike商店跑一圈，但在這周末，又出現了另一版線上「快閃行銷」，值得注意──
上周五據Mashable報導，有一個抗癌組織發動了一個叫「打敗癌症」(Beat Cancer)的行銷活動，這個活動目標很大膽，他們目標朝著「金式世界記錄」而來，希望成為24小時內「發動最多社群討論」的線上活動！注意，它的目標並不是募得最多款項，而是招來最多的社群討論。果然－－心想，事就成！據Mashable再報導，周六過後，就吸引了全世界209,771次的「提及」，並且估計有大約1億隻眼球看到，真是大成功！他們說，每提及一次，就會要企業捐1分錢，因此周六為止，募到的大約是7萬美元，分給四間抗癌的公益組織，其實只是一筆「小錢」，但，它卻進了金氏世界記錄！
重點來了，如何在24小時內，在沒有打什麼廣告的情況下，創下金氏世界記錄？當然美國的部落客很幫忙，寫了這麼幾篇文章，讓所有人都看到，但更重要的是藉由「朋友傳朋友」的方式，是吧？
「朋友傳朋友」，這五個字好像鎮店之寶，講出來就一定是最終的答案，但講出來又不必負責任。當我們真的在操作「朋友傳朋友」就知道，這件事就像家裡水槽的排水孔一樣，通的時候還算很通，突然不通的時候你也不知道到底是怎麼回事，是不是過一會就會通了…。而且，請注意，這是一場在「星期六」辦的活動，以美國人的習慣，周六並不是「宅日」，待在電腦前的時間並不長，所以如果我辦此活動，應該要選在平日，或是晚上，而不是周六！那麼，那麼，那麼，「打敗癌症」是怎麼辦到24小時內超多提示的？
雖然提到Facebook，但真正的功臣還是Twitter，因為，它的「＃」再次發揮了功能，我們看看它的官網「BeatCancerEverywhere.com」，它有一個很棒的功能，可看到目前「推特」上面正在寫「#BeatCancer」的人，很多人現在活動已經結束但他們還不知道、還在寫，從周六到今天又已經多了三倍的提及，已達633,943次了。我們仔細看看這些人到底都怎麼寫？到底都怎麼幫「打敗癌症」宣傳？可看出到底發生什麼事──
第一，天啊！原來，很多人根本就只寫了一封短短的「#BeatCancer」，有些人則是將「#BeatCancer」寫了十幾遍（我猜這些應該都算進去在那20萬個「提及」之中）。這些像龍捲風無故捲來的「#BeatCancer」，完全沒有寫明來由，也沒有註上任何官方網址，這好像在MSN前面莫名就裡加一個什麼東西，不過用Twitter遠比MSN暱稱高招，因為前者的動作很像逛街的時候看到僧人念經給他一些硬幣，輕鬆自在；若僧人出現在周一到周五的上班區，我們不會理他，但在周六，我們就很輕鬆又瘋狂的，#BeatCancer、#BeatCancer、#BeatCancer！
第二，也真的要感謝Twitter網站的功能，它將這些熱門被「#」的主題通通都會排列出來，這個「#BeatCancer」被剛剛這些網友一直故意提及，目前就成了最大的題目了，就算沒被朋友傳到的網友也會看到這個BeatCancer。一直到今天（請見上圖），「#BeatCancer」依然當天最多人提及的，若以周來看，也是當周第四多人在提及的；以分鐘來看，則是今天早上台北時間七點多第二多人在提及的。目前在台灣或大陸做行銷，由於Twitter不紅，沒辦法使用到這種功能，反而是一個創業家的機會──我們在想，有沒有可能在Facebook或其他網站或自己開的網站中，將「快閃行銷」的功能做起來？
最近，矽谷的八卦部落格「Gawker.com」宣告作了大改版，這個新版，號稱是部落格的下一代；它竟然將部落格圈的那個已經不常用的「標籤」功能，再次拿了出來，而且讓它……取代了八卦媒體常常很注重的「副標」！而且，在所有的留言區，除了用現在常用的「@留言者」的方式，也開始促使大家用「#主題」的模式來留言。譬如我看到網路趨勢主題，那我就寫道「#網路趨勢 今天看到Gawker新改版」。如果我要寫Tips，以前都是用「@Tips」，現在也變成「#Tips」，打的就是「快閃行銷」的這塊肥肉，這樣一來，它就和Twitter上面所有正在發生中的事情可以串在一起，有機會的話亦直接在Twitter上面發起某個新話題！
「快閃行銷」，打的是現在人上網的一個「新習慣」──一現在的網民，每次看到某則新聞、某個商品，已經習慣「馬上就上網查查看」。這「馬上」有多麼立刻呢？每次上NET-MBA網路行銷募資流量提升成功與社群經營五堂課，帶電腦來上課的，每聽到同學提及一個案例，就會聽到其他帶電腦的同學已經在「喃喃自語」：「嗯，這個網站看起來已經有1700萬人在看了……。」這喃喃自語，可能連操作者自己已經不自覺，已成為一個很自然的動作；因為是很自然的動作、一氣呵成，它很容易被「快閃行銷」給「利用」到──行銷人員不能不保證網友會衝動到可以立刻拿出信用卡買下東西，但至少會衝動到搜尋、閱讀、然後馬上告訴其他旁邊的友人……這動作，已經絕對足夠讓任何一場「快閃行銷」，瞬間爆發出去，就像「#BeatCancer」一樣！
可惜的是，現在只有Twitter有這玩意，Facebook正式說來還沒有。有沒有人可以做這麼一個APP？或，是否還有機會做一些其他的平台，來更強化當下的活動，或者，做一個「日行一善網」之類的讓這一群人天天都有一件公益事可做？大家可以想一想「快閃」的下一波機會。


文章來自MR6
文章提供BAYSTARS DESIGN網頁設計公司

張貼者： K+U=N&E 於 晚上7:02 0 意見
標籤： , , , , , , , , ,

「最低可行產品」(MVP)，比焦點團體(focus group)還要棒的概念

知名網路人Eric Ries曾經提出一個理念叫「最低可行產品」(Minimum Viable Product，簡稱MVP)。整個概念就是，在一個商品被量產、甚至被設計出來前，應該先「試著」賣賣看這個商品，再決定要不要繼續花錢開發、量產、進貨！
什麼意思？
一個產品，怎麼可能在還沒開發出來前，就先「賣賣看」呢？
所謂MVP，只是一個產品的最最最基本的「雛型」，不必太多功能，不必太炫麗的外表，只要勉強可用，然後拿來測試一下客戶喜不喜歡這樣的產品，這樣一來，就不會出現企業花好多錢做一個產品，結果客戶竟然不喜歡的窘境！他們說，MVP雖然不一定是個網站，但永遠可以用網站來測試。通常的做法是：企業先默默推出一個假網站，這個網站不對外公開，企業跑去默默購買關鍵字廣告，將流量默默的導過來，導過來的以後，再對這些不明就裡的網友當白老鼠測試，網友在這個網站裡面所點的每一個連結，都會被記錄下來；有些連結甚至叫客戶直接買下東西，看看有幾個客戶真的會點「買下」。注意，這和「焦點團體」(focus group)有所不同，焦點團體注重以問答、問卷、或親手測試去改善產品，但MVP的概念則非常專注在「成交」這件事情上。
MVP的概念，曾經「救」過很多商人。譬如曾經有個程式設計師自行開發了一套專門測試程式的軟體叫「JUnit Max」，他將這個軟體大概的寫出來以後，就遵照MVP的原則，先將他的產品送到他的Linkedin和Twitter上面宣傳，要網友用PayPal買。他馬上就發現，此產品好像還賣得出去，不過，客戶最多只願意付到一個月二美元，而且客戶有限，這時候，他趕緊再加了一些功能上去，發現客戶並沒有再買單，於是，他立刻停產，不繼續製作了。
今天之所以提到MVP，是因為根據MVP提出者Eric Ries發現，這個想法，已經開始被主流企業所接受──這個月，《INC》雜誌提到一個重要案例，指出MVP已經被用在一些中型公司上面。這讓當初發明人Eric Ries高興的寫了一篇回應在他的部落格裡－－《INC》雜誌提到一間叫「TPGTEX Label Solutions」的案例，這間公司專做化學藥品的包裝與標籤、條碼機等等，這間公司就是遵照「MVP」的原則，每次開發一個新產品之前，都會先做一個「假網頁」（注意：他們並不是網路公司），這網頁上，會列滿他們即將做的新產品，然後附上一個價錢，再附上一個「購買請聯絡我」，然後，默默的針對每一個產品，在網路上購買關鍵字廣告，通常每個產品會花幾百美元（大約一萬台幣）就足以測試。
隔天，就會有人開始點了關鍵字廣告進來網頁看看，進來看的人很多，但不一定每次都有人按下「購買請聯絡我」按鈕。這間公司的原則很簡單，若沒人買，他們就「紋風不動」、繼續等候；一旦有人下單購買，先確定這個人不是競爭者或來搗蛋的，如果一切ＯＫ，這間公司就會立刻開始生產這個產品！這招，這間公司從2002年來都履試不爽，而今公司6個人，穩穩的賺錢。他們說，開發一個產品對他們而言其實不花很多時間，但是這樣一來，每次都做「對的事」。目前他們的明星產品是一台用資料庫直接餵出來的標籤製造機，當初曾經放在他們的測試網站達三年之久，一直都只是一段文字而已，連圖片都沒有，也一直都沒人購買，直到最近，可能是科技成熟了，終於有人真的按了「我要買」，這時候他們就告訴這個客戶：「我們會有一點點遲給」，客戶OK，他們就開始製造，到了今天，這個產品就已經成為他們賣得最好的產品！
MVP並不是只給網路創業家用，卻是網路創業家可以多想想的，因為，在以往這件事也只有透過網路才可能發生。之前在NET-MBA課程中有提到，網路上最大的不同，在於「第一次進入過程很簡單」，它就像站在一個你從沒看過的史上超熱鬧大街，裡面萬頭鑽動，只要肯買廣告，就有機會讓其中一些人看到，看到後，只要點幾下，就進來了，不必找住址、不必停車……這些進來的人都可以馬上試試這產品。或許，網路不能是某些產品的通路，但它永遠可以是所有產品的測試母床！
注意，所有產品！
不過，我的看法是，MVP概念不只是「安全」，「有單才製造」而已，它其實幫助企業「測試到極限」。這位發明人在他的回應中寫得很好，他說，MVP的概念，是適合這些「想做大產品」的公司。如果你想做一個可以改變全世界的產品，除了「作夢」以外，僅次於作夢的實際方法就是MVP了！網路上的長尾理論告訴我們，網路的陳列空間「無限大」，因此你愛放多少產品就放多少產品。一間公司可能半年才能設計研發一個新產品，你儘管在網站上面放100個新產品，看看哪一個被喜愛，再研發生產也還不遲！
看到這個MVP有案例，其實非常興奮，早就是MVP的追隨者，我認為不只是網路產品，所有高科技產品或新的嘗試都應該採用此法，一方面安全，一方面也可以真的把所有荒誕的怪創意都拿過來試試，而且對於公司內部治理，也可以激發員工的靈感，最後看看誰能讓客戶買單，就做誰的產品。但，並不是每間公司都會做網站，或者有這麼大的使用者族群在那邊等著用產品，如果有興趣來做做看MVP的，也可以通知我，我們這裡可想辦法安排。

文章來自MR6
文章提供BAYSTARS DESIGN網頁設計公司
張貼者： K+U=N&E 於 下午6:52 0 意見
標籤： , , , , , , , ,

2009年10月19日 星期一

CSS在Internet Explorer 6, 7和8中的差別

中文原文：CSS在Internet Explorer 6, 7和8中的差別譯自：CSS Differences in Internet Explorer 6, 7 and 8版權所有，轉載請註明出處，多謝！
關於瀏覽器的最離奇的統計結果之一就是Internet Explorer 版本6，7和8共存。截至本文，Internet Explorer各個版本總共佔據了大約65%的市場份額。在網站開發社區，這個數字要小很多，統計顯示大概只有40%。
這些統計中比較有趣的部分是，IE6、IE7、IE8之間的數值很接近，這防止了單個Microsoft的瀏覽器佔居統治地位——與過去的情況相反。根據這些令人遺憾的統計結果，在為客戶開發網站的時候開發人員對所有當前使用的IE瀏覽器做全面的測試是必要的，而且這樣在個人項目上也可以拉攏更多的用戶。
多謝那些JavaScript庫(框架)，跨瀏覽器的Javascript的測試已經像當前形勢所允許的那樣接近完美了。但在CSS開發中還不是這樣，特別是關係到IE目前存在的三個版本。
本文嘗試為希望了解CSS對IE6、IE7、IE8的支持的不同的開發者提供一份詳細的、易用的參考。本參考包含以下情況的概述和兼容情況：
三個瀏覽器中的一個支持而另外兩個不支持的條目
三個瀏覽器中的兩個支持而另外一個不支持的條目
本文不討論：
三個瀏覽器都不支持的條目
私有屬性
因此，本文的中心是三個瀏覽器中的不同，而不是必要的支持缺陷。該列表被分為五個部分
選擇器與繼承
子選擇器
示例
body > p {
color: #fff;
}
描述
子選擇器選擇一個特定父級元素的所有直接子級元素，在上面的例子中，body是父元素，p是子元素。
支持情況
IE6No
IE7Yes
IE8Yes
Bugs
IE7中，如果在父級標籤和子級標籤之間有一個HTML註釋，子選擇器將不會工作。
鏈類
示例
.class1.class2.class3 {
background: #fff;
}
描述
鏈類用於送一個HTML元素有多個class聲明的情況，就像這樣：

Content here.



支持情況
IE6No
IE7Yes
IE8Yes
Bugs
IE6好像支持這種情況，因為它能匹配鏈中的最後一個class到使用該class的元素上，然而，它並不能限制一個使用鏈中所有class的元素。
屬性選擇器
示例
a[href] {
color: #0f0;
}
描述
該選擇器允許一個元素被定位只要它有指定的屬性。在上面的例子中，所有的帶有href屬性的a標籤都會被限定，而沒有href屬性的a標籤不會被限定。
支持情況
IE6No
IE7Yes
IE8Yes
臨近兄弟選擇器
示例
h1+p {
color: #f00;
}
描述
該選擇器定位臨近到指定元素的兄弟標籤。上面的例子將會限定p標籤，但是他必須是h1標籤的兄弟而且要直接尾隨在h1標籤的後面。比如：

heading


Content here.


Content here.


在上面的代碼中，CSS樣式將只對第一個p有效。因為它是h1的兄弟而且緊跟著h1。第二個p也是h1的一個兄弟，但是它沒有緊跟著h1。
支持情況
IE6No
IE7Yes
IE8Yes
Bugs
在IE7中，如果在兄弟之間有一個HTML註釋，臨近兄弟選擇器將無效。
普通兄弟選擇器
示例
h1~p {
color: #f00;
}
描述
該選擇器定位一個指定元素後面的所有兄弟元素。將此選擇器應用到上面的那個例子，將會對兩個p標籤都有效。當然，如果有一個p元素出現在h1之前，那個p元素不會被匹配。
支持情況
IE6No
IE7Yes
IE8Yes
偽類和偽元素
:hover後面的後代選擇器
示例
a:hover span {
color: #0f0;
}
描述
一個元素可以被:hover偽類後面的選擇器定位，就像後代選擇器一樣。上面的例子，在鼠標懸停的時候，將會改變a元素內的span元素中的文字的顏色。
支持情況
IE6No
IE7Yes
IE8Yes
鏈偽類
示例
a:first-child:hover {
color: #0f0;
}
描述
偽類可以鏈起來以縮小元素選擇。上面的例子會定位每一個父級元素下的第一個a標籤，並將hover偽類P應用到它上。
支持情況
IE6No
IE7Yes
IE8Yes
非錨點元素中的:hover
示例
div:hover {
color: #f00;
}
描述
:hover偽類可以應用到任何元素的懸停狀態，而不只是a標籤。
支持情況
IE6No
IE7Yes
IE8Yes
:first-child偽類
示例
div li:first-child {
background: blue;
}
描述
改偽類定位每一個指定的元素的父級元素的第一個子元素。
支持情況
IE6No
IE7Yes
IE8Yes
Bugs
IE7中，如果要定位的第一個子元素之前有HTML註釋，first-child偽類將會無效。
:focus偽類
示例
a:focus {
border: 1px solid red;
}
描述
該偽類定位有鍵盤焦點的所有元素。
支持情況
IE6No
IE7No
IE8Yes
:before和:after偽類
示例
#box:before {
content: "本段文字在盒子前面";
}

#box:after {
content: "本段文字在盒子後面";
}
描述
這兩個偽元素分別在指定元素的前面和後面添加生成的內容，結合content屬性一起使用。
支持情況
IE6No
IE7No
IE8Yes
屬性支持
由position產生的實際大小
示例
#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}
描述
定義top, right, bottom,和left 值到絕對定位的元素上將給這個元素實際的大小(寬度和高度)，雖然並沒有設定使寬度和高度值。
支持情況
IE6No
IE7Yes
IE8Yes
Min-Height與Min-Width
示例
#box {
min-height: 500px;
min-width: 300px;
}
描述
這兩個屬性分別指定元素的寬和高的最小值，允許一個盒子可以比指定的最小值更大，但是不能更小。它們兩個可以一起使用，也可以分開來用。
支持情況
IE6No
IE7Yes
IE8Yes
Max-Height和Max-Width
示例
#box {
max-height: 500px;
max-width: 300px;
}
描述
這兩個屬性分別指定元素的高和寬的最大值，允許一個盒子比這個指定的最大值小，但是不能更大。它們也可以同時使用或者單獨使用。
支持情況
IE6No
IE7Yes
IE8Yes
透明邊框顏色
示例
#box {
border: solid 1px transparent;
}
描述
一個透明的邊框色允許一個邊框和邊框色可見(或者不透明)時佔用一樣的空間。
支持情況
IE6No
IE7Yes
IE8Yes
固定位置元素
示例
#box {
position: fixed;
}
描述
position屬性的這個值允許一個元素絕對的相對於窗口定位。
支持情況
IE6No
IE7Yes
IE8Yes
固定位置的背景圖
示例
#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}
描述
background-attachment屬性的值為fixed允許一個背景圖片絕對地相對於窗口定位。
支持情況
IE6No
IE7Yes
IE8Yes
Bugs
就像position:fixed一樣，IE6同樣不支持background-positon的fixed值。然而，在IE6中只有在這個值用於根元素的時候才有效。
屬性值“inherit”
示例
#box {
display: inherit;
}
描述
將值inherit 應用到一個屬性那個允許一個元素從它的包含元素繼承計算的值。
支持情況
IE6No
IE7No
IE8Yes
Bugs
IE6和IE7不支持inherit 值除了direction 和visibility 屬性。
表格單元的邊框空白
示例
table td {
border-spacing: 3px;
}
描述
該屬性設置相鄰的表格單元的邊框之間的空白。
支持情況
IE6No
IE7No
IE8Yes
在表格中渲染空單元格
示例
table {
empty-cells: show;
}
描述
該屬性，只應用於元素的display屬性被設置為table-cell的元素，允許空單元格渲染他們的邊框和背景。否則，它們將不可見。
支持情況
IE6No
IE7No
IE8Yes
表格標題的水平位置
示例
table {
caption-side: bottom;
}
描述
這個屬性允許將一個表格的標題放到表格的底部——默認是頭部。
支持情況
IE6No
IE7No
IE8Yes
修剪區域
示例
#box {
clip:rect(20px, 300px, 200px, 100px)
}
描述
該屬性指定一個盒子的一個區域可見，剩下的部分修剪掉，或者不可見。
支持情況
IE6No
IE7No
IE8Yes
Bugs
有趣的是，該如果不使用隔開各個值的逗號，IE6和IE7也可以用這個屬性。 (比如，使用空格隔開剪切的值。)
打印頁面中的orphanes和widows
示例
p {
orphans: 4;
}

p {
widows: 4;
}
描述
orphans屬性設定在打印頁面底部顯示的最少行數。而widows 屬性用來設定打印頁面頭部至少顯示的段落的行數。
支持情況
IE6No
IE7No
IE8Yes
盒子內的頁面分割
示例
#box {
page-break-inside: avoid;
}
描述
該屬性設定分頁是否發生在一個指定元素內。
支持情況
IE6No
IE7No
IE8Yes
Outline屬性
示例
#box {
outline: solid 1px red;
}
描述
outline 是outline-style, outline-width,和outline-color的縮寫。該屬性要優於border屬性，因為它不會影響文檔流，因而u更有助於調試佈局問題。
支持情況
IE6No
IE7No
IE8Yes
display屬性的替代值
示例
#box {
display: inline-block;
}
描述
display 屬性通常設置為block, inline,或none。替代值包括：
inline-block
inline-table
list-item
run-in
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
支持情況
IE6No
IE7No
IE8Yes
處理可折疊空白
示例
p {
white-space: pre-line;
}

div {
white-space: pre-wrap;
}
描述
white-space屬性的pre-line值設定將多個空白元素折疊為一個空白，同時允許明確的設置斷行。white-space 屬性的pre-wrap 值不會將多個空白折疊為一個，不過也允許明確的設置斷行。
支持情況
IE6No
IE7No
IE8Yes
其它各種技術
@import的媒體類型
示例
@import url("styles.css") screen;
描述
就像上面的例子那樣，引入的樣式表文件的媒體類型聲明在文件地址的後面。在該例子中，媒體類型是”screen”。
支持情況
IE6No
IE7No
IE8Yes
Bugs
儘管IE6和IE7支持 @import，它們在媒體類型被指定的時候會無效，甚至會引起正@import規則無效。
計數遞增
示例
h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) ". ";
}
描述
該CSS技術允許你自動增加出現在指定元素前面的編號，結合before偽元素一起使用。
支持情況
IE6No
IE7No
IE8Yes
生成內容的引用字符
示例
q {
quotes: "'" "'";
}

q:before {
content: open-quote;
}

q:after {
content: close-quote;
}
描述
指定用於生成內容的引用呼號，用於q標籤。
支持情況
IE6No
IE7No
IE8Yes
重要bug和不兼容性問題
下面是在上文中沒有提到的IE6和IE7的眾多bug。當然這個列表不包括在這三個瀏覽器中都不支持的條目。
IE6 Bugs
不支持用樣式設置 元素
不支持以連字符和下劃線開頭的class和ID名