Chrome and safari css hacks

@media screen and (-webkit-min-device-pixel-ratio:0) {
#div { properties:value; }
}

jquery - Create rollover image buttons | make rollover image buttons from single function using jquery

//make a duplicate image of each jpg or png and add "_over" behind the filename. Inside the img tag, put class name as "button" png button, and "jpgBtn" for normal jpg buttons

$(document).ready(function() {

if (!$.browser.msie || ($.browser.msie && $.browser.version > 6)) { //if not ie6 png buttons
//png button
$("img.button").hover(
function () {
ori = $(this).attr("src").split(".png");
src = ori[0];
$(this).attr("src",src + "_over.png");
},
function () {
$(this).attr("src",src + ".png");
}
);
}

//jpg button
$("img.jpgBtn").hover(
function () {
ori = $(this).attr("src").split(".jpg");
src = ori[0];
$(this).attr("src",src + "_over.jpg");
},
function () {
$(this).attr("src",src + ".jpg");
}
);

});

How to compress CSS files

The Reinhold Weber method

This is the best method for me do far and it's cool:

<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}

/* your css files */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');

ob_end_flush();
?>

CSS Hacks

The hacks:


e.g:

*html body { <- only ie6 sees this
color: #FF0000;
}


*:first-child+html body { <- only ie7 sees this
color: #FF0000;
}


body:nth-of-type(1) body { <- only safari and chrome see this
color: #FF0000;
}


body {
_color: #FF0000; <- only ie6 sees this
}

more info: http://www.webdevout.net/css-hacks