Hacking CSS (17/06/2010

Một trong những vấn đề thường gặp trong lập trình stylesheet / css / html là sự không đồng nhất giữa các trình duyệt.

Có rất nhiều trình duyệt (IE, Chrome, Firefox, Opera, Safari) nên cách tốt nhất là các bạn nên tập chuẩn hóa theo dạng xhtml + hạn chế các cách thức như float, clear, position absolute khi dùng CSS thì sẽ tránh được sự không tương thích này.

Tuy nhiên trong trường hợp bất khả kháng và các bạn cần phải style cho các đối tượng các thuộc tính khác nhau cho từng trình duyệt thì các bạn nên tham khảo bảng sau:

Comprehensive List of Browser-Specific CSS Hacks

 
/***** Selector Hacks ******/
 
/* IE6 and below */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red } 
 
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
 
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
 
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
 
 
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
 
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
 
/* Everything but IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }
 
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
 
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
 
 
 
/***** Attribute Hacks ******/
 
/* IE6 */
#once { _color: blue }
 
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiet

 

Có thể xem bảng gốc tại đây: http://paulirish.com/2009/browser-specific-css-hacks/

 
Khách hàng mới nhất
Đăng ký nhận khuyến mãi
Tư vấn trực tuyến
Dịch vụ Tin học
Y!M:  
Skype:  Skype Me!
Mobile:  0903028978 (a.Long)
Dịch vụ Kế toán
Y!M:  
Skype:  Skype Me!
Mobile:  0983068614 (c.Uyên)
hoặc sử dụng trang liên hệ
CSS Font-Size: em vs. px vs. pt vs. percent (27/08/2012

One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.

CSS Arrows and Shapes Without Markup (22/08/2012

Often it’s useful to show an arrow or some sort of contextual indication of what element something is related to. We see this frequently with tooltips that use arrows to point to the item that is triggering them.

The IE border-spacing workaround (19/07/2012

Everyone knows these two HTML table tag attributes: cellpadding and cellspacing. And everyone hates the annoying necessity of these attributes in the CSS era. Well, developers, who has looked after what's up now about this issue, have learned that fortunately the cellpadding attribute is safely substitutable with the padding value of the table cells.

But what about cellspacing?

The differences between the GPL, LGPL and the BSD (22/08/2011

There are a lot of different open source licences out there, and it can sometimes be a bit confusing if you're not intimate with the details of each one. So here's a quick roundup of three of the most popular licenses and the difference between them.

Just a quick disclaimer - I'm not a lawyer, so don't depend on my explanations on the licences here. All the usual disclaimers apply.

Trang: 1 2 3 ››