Weil heute so ein toller Tag ist, erquicke ich euch mal mit ein paar Browser-Hacks ;)
Nachfolgend eine Zusammenstellung von verscheidenen Internetseiten.
Selector hacks:
/* IE6 and below */
* html #ID
{
color:
blue
}
/* IE7 */
*:first-child+html #ID
{
color:
blue
}
/* IE7, FF, Safari, Opera */
html>body #ID
{
color:
blue
}
/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/body #ID {
color:
blue
}
/* Opera 9.27 and below, Safari 2 */
html:first-child #ID
{
color:
blue
}
/* Safari 2-3 */
html[xmlns*=""] body:last-child #ID
{
color:
blue
}
/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:nth-of-type(1)
#ID
{
color:
blue
}
/* Safari 3+, Chrome 1+, Opera9+, FF 3.5+ */
body:first-of-type #ID
{
color:
blue
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #ID
{
color:
blue
}
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""]
#ID
{
color:
blue
}
/* Everything but IE6-8 */
:root *>
#ID
{
color:
blue
}
/* IE7 */
*+html #ID
{
color:
blue
}
/* Firefox only. 1+ */
#ID,
x:-moz-any-link {
color:
blue
}
/* Firefox 3.0+ */
#ID, x:-moz-any-link, x:default {
color:
blue
}
/* FF 3.5+ */
body:not(:-moz-handler-blocked)
#ID
{
color:
blue;
}
Attribute hacks:
/* IE6 */
#ID
{ _color:
blue
}
/* IE6, IE7 */
#ID
{
*color:
blue;
/* or #color: blue */
}
/* Everything but IE6 */
#ID
{
color/**/:
blue
}
/* IE6, IE7, IE8 */
#ID
{
color:
blue\9;
}
/* IE7, IE8 */
#ID
{
color/*\**/:
blue\9;
}
/* IE6, IE7 -- acts as an !important */
#ID
{
color:
blue !ie;
}
/* string after ! can be anything */
/* IE8, IE9 */
#ID
{color:
blue\0/;}
/* must go at the END of all rules */
Property Prefix hacks:
/* IE6 only - any combination of these characters */
_ - £ ¬ ¦
/* IE6/7 only - any combination of these characters */
! $ & *()= % +@ , . / ` [ ] # ~ ? : < > |
Media hacks:
/* Safari 3+, Chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#ID
{
color:
blue
}
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#ID
{
color:
blue
}
}
/* IE6/7 only */
@media screen\9 { }
/* IE6/7/8 */
@media \0screen\,screen\9 {}
/* IE8 */
@media \0screen { }
/* IE8/9 */
@media screen\0 { }
Quellen:
http://snipplr.com/view/48670/browserhacks/
http://blog.pixelmash.de/code/css/browser-css-hacks
http://paulirish.com/2009/browser-specific-css-hacks/
https://snipt.net/ivanator/css-browser-
hacks/?key=847bdbe96173b0f81a39a62a1814b65a