Toch transparante PNG in IE < 7. the easy way
Ik liep bij het bouwen van mijn website ertegenaan dat de transparante png's niet goed werden weergegeven. De bestaande oplossingen vond ik niet netjes (javascript of csshack) omdat bij de eerste bezoekers zonder js enabled er niets aan hebben en de 2e je css niet meer valid is. Bij mijn manier word aan alleen gebruikers met IE < 6 de filter alphaimageloader voorgeschoteld.. alle andere browser hebben dit filter niet. Het gebruik is simpel. bij alle aanroepen van je css roep je dit bestand aan met ?file=jecsszonderextentie, dus als ik main.css wil en ik heb dit bestand getCSS.php genoemt roep ik getCSS.php?file=main op. (je kan zoals ik het heb gedaan met mod-rewrite de namen weer rechtzetten.. mijn server zet main.css om in getCSS.php?file=main op deze manier kan je dit dus toevoegen zonder je html aan te passen. Het is ook mogenlijk om in 1x meerdere css bestanden tegelijk te laden. De files moeten dan gescheiden worden met een , dus bijv: getCSS.php?file=main,home een extra feature is dat als je bijvoorbeeld een transparante achtergrond wil en je reapeat daarom een kleine PNG door in je css zoiets te zetten: background:plaatje.png repeat; je er /*SCALE*/ achter kan zetten, dan zorgt het filter ervoor dat het plaatje uitgerekt komt (anders laat hij alleen maar 1x je kleine plaatje zien), maar dit zou je zelf even moeten testen om het duidelijk te krijgen. LET OP: deze filter werkt alleen wanneer er in je css een afbeelding opgeeft.. dus op een normale img tag in je html heeft het geen invloed. en nog iets, het kan zo zijn dat door dit filter links niet meer werken, dit moet je zelf zien op te lossen door bijvoorbeeld een extra div te plaatesen met een andere position (even googlen dus)
<?php
// Include this function on your pages
function print_gzipped_page() {
if( headers_sent() ){
$encoding = false;
}elseif( strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'x-gzip') !== false ){
$encoding = 'x-gzip';
}elseif( strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false ){
$encoding = 'gzip';
}else{
$encoding = false;
}
if( $encoding ){
$contents = ob_get_contents();
ob_end_clean();
header('Content-Encoding: '.$encoding);
header('Content-type: text/css; charset=utf-8');
print("\x1f\x8b\x08\x00\x00\x00\x00\x00");
$size = strlen($contents);
$contents = gzcompress($contents, 9);
$contents = substr($contents, 0, $size);
print($contents);
exit();
}else{
ob_end_flush();
exit();
}
}
// At the beginning of each page call these two functions
ob_start();
ob_implicit_flush(0);
// Get the requested CSS and output it
$file = str_replace('\\','',$_GET['file']);
$file = str_replace('/','',$file);
$files = explode(',',$file);
$count = count($files);
foreach($files as $file){
$file = trim($file);
$file .= '.css';
if(file_exists($file)){
$contents = file_get_contents($file);
if($count > 1){
echo "\n\n/* <<<<<< FILE: ".strtoupper($file)." >>>>>> */\n\n";
}
// the nex code fixes the transparant PNG in IE version < 7, It adds the microsoft alpha image loader
$useragent = $_SERVER['HTTP_USER_AGENT'];
if (preg_match('|MSIE ([0-6]\.[0-9]{1,2})|',$useragent) && !preg_match('|MSIE ([7-9]\.[0-9]{1,2})|',$useragent)) { // is an old version of IE
// filter normal png pictures (pictures are cropped)
$pattern = '/(url\((.*\.png)\).*\n)/';
$replace = '$1'."\t".'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'$2\', sizingMethod=\'crop\'); background-image:none;'."\n";
$contents = preg_replace($pattern,$replace,$contents);
// filter png pictures that need to be scaled (when using background repeat for example)
$pattern = '/(\/\*SCALE\*\/.*\n.*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader\(.*, sizingMethod=\').*\'/';
$replace = '$1scale\'';
$contents = preg_replace($pattern,$replace,$contents);
}
echo $contents;
}
}
// Call this function to output everything as gzipped content.
print_gzipped_page();
?>
Reacties
0