Comprehensive List of Browser-Specific CSS Hacks


SUBMITTED BY: Guest

DATE: May 1, 2013, 9:37 p.m.

FORMAT: Text only

SIZE: 1.9 kB

HITS: 1098

  1. /***** Selector Hacks ******/
  2. /* IE6 and below */
  3. * html #uno { color: red }
  4. /* IE7 */
  5. *:first-child+html #dos { color: red }
  6. /* IE7, FF, Saf, Opera */
  7. html>body #tres { color: red }
  8. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
  9. html>/**/body #cuatro { color: red }
  10. /* Opera 9.27 and below, safari 2 */
  11. html:first-child #cinco { color: red }
  12. /* Safari 2-3 */
  13. html[xmlns*=""] body:last-child #seis { color: red }
  14. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  15. body:nth-of-type(1) #siete { color: red }
  16. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  17. body:first-of-type #ocho { color: red }
  18. /* saf3+, chrome1+ */
  19. @media screen and (-webkit-min-device-pixel-ratio:0) {
  20. #diez { color: red }
  21. }
  22. /* iPhone / mobile webkit */
  23. @media screen and (max-device-width: 480px) {
  24. #veintiseis { color: red }
  25. }
  26. /* Safari 2 - 3.1 */
  27. html[xmlns*=""]:root #trece { color: red }
  28. /* Safari 2 - 3.1, Opera 9.25 */
  29. *|html[xmlns*=""] #catorce { color: red }
  30. /* Everything but IE6-8 */
  31. :root *> #quince { color: red }
  32. /* IE7 */
  33. *+html #dieciocho { color: red }
  34. /* Firefox only. 1+ */
  35. #veinticuatro, x:-moz-any-link { color: red }
  36. /* Firefox 3.0+ */
  37. #veinticinco, x:-moz-any-link, x:default { color: red }
  38. /***** Attribute Hacks ******/
  39. /* IE6 */
  40. #once { _color: blue }
  41. /* IE6, IE7 */
  42. #doce { *color: blue; /* or #color: blue */ }
  43. /* Everything but IE6 */
  44. #diecisiete { color/**/: blue }
  45. /* IE6, IE7, IE8 */
  46. #diecinueve { color: blue\9; }
  47. /* IE7, IE8 */
  48. #veinte { color/*\**/: blue\9; }
  49. /* IE6, IE7 -- acts as an !important */
  50. #veintesiete { color: blue !ie; } /* string after ! can be anything */

comments powered by Disqus