Toch transparante PNG in IE < 7. the easy way

Door Henkjan , 20 jaar geleden, 5.316x bekeken

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)

Gesponsorde koppelingen

PHP script bestanden

  1. toch-transparante-png-in-ie-7-the-easy-way

 

Er zijn 6 reacties op 'Toch transparante png in ie 7 the easy way'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Elwin - Fratsloos
Elwin - Fratsloos
20 jaar geleden
 
0 +1 -0 -1
Hoop werk als je het ook gewoon met conditional comments kan doen.

Voordeel is dat je dan ook nog eens per IE een andere CSS er in kan hangen. Bijvoorbeeld de volgende code in je <head>:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<link href="/style/screen.css" rel="stylesheet" type="text/css" />

<!--[if IE 6]>
<link href="/style/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 5]>
<link href="/style/ie5.css" rel="stylesheet" type="text/css" />
<![endif]-->
Op deze manier heb je ook 'gewone' CSS-bestanden die op een ongewone manier worden toegevoegd, maar zowel je HTML als CSS zal valideren (behoudens andere fouten).

Verder ziet je script er wel goed uit!
Henkjan
henkjan
20 jaar geleden
 
0 +1 -0 -1
Op die manier moet je elk plaatje dus dubbel er in gaan zetten.. 1 voor de normale browsers en daarna nog een met het alphaimage loader.

Ik hoef daar helemaal niet meer naar te kijken bij het verder ontwikkelen van mijn website, en dus is mijn manier minder werk (want ik heb in 30 seconden een bestandje getCSS.php aangemaakt.. maar elke keer een alphaimageloader er bij zetten kost meer dan 30 seconde)

en ik heb meer overzicht want ik heb niet een apparte IE5 of 6 css bestand maar gewoon 1 css waarmee het allemaal ook werkt
Elwin - Fratsloos
Elwin - Fratsloos
20 jaar geleden
 
0 +1 -0 -1
In zoverre, dat je uiteindelijk toch nog aparte CSS moet gaan gebruiken als je lay-out pixel-precies gemaakt moet worden in alle browsers.

Grootste probleem wat mij betreft is dat de marges en paddings in IE anders zijn. Dan maak ik dus al andere CSS bestanden en is het ook een 'pies-of-keek' om de filters er in te hangen en de achtergrond te verwijderen.

Edit:
Ondanks dat er veel CSS beschikbaar is om de paddings en marges van de (gangbare) elementen in HTML allemaal op nul te krijgen (gebruik ik overigens ook) is het in IE nooit hetzelfde. Vaak zit dit verschil in formulier-elementen.


Overigens in beide gevallen geen manier om alpha-transparante afbeeldingen op de voorgrond te gebruiken in IE >= 6.
Henkjan
henkjan
20 jaar geleden
 
0 +1 -0 -1
Ik heb geen problemen met paddings en margins hoor.. mijn site ziet er in IE7, FF, Safari en IE6 met de alpha image loader precies hetzelfde uit.

ik heb dus wel echt maar 1 css waar voor elke browser hetzelfde staat en in dat geval is het heel fijn dat ik niet hoef op te letten als ik ergens een transparante png plaats..
Elwin - Fratsloos
Elwin - Fratsloos
20 jaar geleden
 
0 +1 -0 -1
Dan heb je, volgens mij, puur mazzel als je site(s) er in al die browsers precies hetzelfde uitzien. Dat is mij toch echt nog geen een keer gelukt.

Nou hoef ik niet altijd veel te doen om hetzelfde resultaat te krijgen in alle browsers (in IE7, nog steeds tot mijn verbazing, hoef ik meestal alleen maar buttons apart te doen), maar ik moet (bijna) altijd CSS voor IE6 en IE5 gebruiken om het goed te krijgen.

Maar goed, heb je geen aparte CSS-bestanden nodig voor je margin en padding, dan heb je wel een mooie oplossing bedacht. Daar is echt niets mis mee. Maar heb je wel extra IE-only CSS nodig, dan maakt die filter ook niet meer uit.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Arend a
Arend a
20 jaar geleden
 
0 +1 -0 -1
@elwin: sinds ik de reset.css uit de blueprint css framework gebruik hoef ik nauwelijks nog css fixes per browser te doen, tussen ie6, ie7 en ff.

Onderstaande fix kan pngs in ie > 5.5 fixen, zonder png. Alleen een bestandje opnemen in je broncode.

http://www.twinhelix.com/css/iepngfix/

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. toch-transparante-png-in-ie-7-the-easy-way

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.