ยุคนี้  browser หลากหลายค่ายออกมาเยอะจริงๆ  ตราบใดที่แต่ล่ะ  browser ไม่มีมาตรฐานเดียวกัน มันจึงกลายเป็นงานหนักของ developer  ที่ต้องพัฒนา  web application  ให้สนับสนุนทุก browser ไม่นานมานี้ก็เป็นเรื่องน่ายินดีที่มีโครงการได้มองเห็นปัญหาตรงนี้และพยายามทำให้ทุก  browser มีมาตรฐานเดียวกัน  สามารถเข้าไปดู โครงการนี้ได้ืั้ The Acid3  หรือจะทดสอบดูว่า  browser  ที่เราใช้อยู่ได้คะแนนเท่าไหร่ จากคะแนนทั้งหมด 100 คะแนน ได้ที่ The Acid3 Test   มีการ test อะไีรบ้าง แน่นอนว่าเน้นในเรื่อง Performance

1.  DOM2
2.  ECMAScript
3.  HTML4 (<object>, <iframe>, …)
4.  HTTP (Content-Type, 404, …)
5.  Media Queries
6.  Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
7.  XHTML 1.0
8.  CSS2 (@font-face)
9.  CSS2.1 (’inline-block’, ‘pre-wrap’, parsing…)
10.  CSS3 Color (rgba(), hsla(), …)
11.  CSS3 UI (’cursor’)
12.  data: URIs
13.  SVG (SVG Animation, SVG Fonts, …)

และไปเข้าไปผลการทดสอบที่ผ่านมา ดูว่า  browser แต่ละตัวได้คะแนนเท่าไหร่ที่ http://en.wikipedia.org/wiki/Acid3  เท่าที่ดูการเริ่มมี  browser หลายตัวเริ่มพัฒนากันจนผ่านการ Test ได้คะแนนเต็มร้อยกันแล้วอย่างเช่น

   Safari 4 Developer , Opera  ,  Firefox 3 Beta 4  ..
  
    แต่ตอนนี้เท่าที่รู้เราก็  hack กันต่อไป ทั้งๆที่รู้ว่าจะขนาดของ css ในแต่ล่ะ case มีจำนวนมากกว่าเท่าที่จะเป็น แต่ก็ดีกว่าการเสียเวลานั้งเขียน css code  ตัวเดียวแล้วให้รันได้ทุก browser

   การ filter css เฉพาะ  css ที่สามารถรันได้ใน firefox3  สามารถทำได้โดย

	1 /* Firefox 2 */
	2 .foo {
	3   background-color: #fff;
	4 }
	5 /* Firefox 3  */
	6 html>/**/body .foo {
	7   background-color: #000;
	8 }
	9
	

  วันนี้นั้งทำงานและต้องการให้ข้อมูลชุดหนึ่ง มี background ใสๆบางๆ  แบบนี้
 
 

 ลักษณะแบบนี้ต้องใช้ filter ใน IE  และ opacity ใน  ตระกูล  Mozilla  หรือ -moz-opacity  ใน firefox  

แต่ก็มีปัญหาหนึ่งเกิดขึ้นมาก็คือ  รูปและตัวหนังสือจะจางลงไปด้วย  วิธีการแก้ไข ก็คือต้องกำหนด  position ของ element  ด้านในให้เป็น  relative แต่ก็ทำได้แค่ใน IE เท่านั้น  จำเป็นต้อง ซ้อน div กัน ดังตัวอย่าง code ด้านล่าง

 1 <div style="border-top: 1px dotted rgb(241, 241, 241); 
 2      position: relative; width: 172px;">
 3     <div style="background: rgb(250, 250, 250) none repeat scroll 0% 0%; 
 4         padding-bottom: 4px; width: 172px; height: 78px; top: 0px; 
 5         left: 0px; -moz-opacity: 0.17; opacity: 0.17; filter: alpha(opacity=17); "></div>
 6     <div style="overflow: auto; position: absolute; top: 0px; left: 3px; width: 172px;
 7         background-color: transparent; height: 140px;">
 8         <a id="AppGooRadio" title="Click to Listen GooRadio" href="#" 
 9         style="background-image: url(/noteb.gif);">
10             <span>Listen to GooRadio</span></a>
11         <a id="AppVergin" title="Click to View Virgin Ambassador"
12                 href="#" style="background-image: url(/vrt_logo.gif);">
13                 <span>Virgin Ambassador</span></a>
14         <a id="AppGooStation" title="Click to Listen GooMusic" href="#" 
15         style="background-image: url(/sound.gif);">
16                <span>GooMusic</span></a>
17     </div>
18   </div>