A quick presentation of the PNGHack project.

1. PNGHack
The end of 13 years PNG issues on IE

2. 13 Years ?

3. 13 Years ?
• PNG was introduced in 1995

4. 13 Years ?
• PNG was introduced in 1995
• IE 5.5 was released in 2000

5. 13 Years ?
• PNG was introduced in 1995
• IE 5.5 was released in 2000
• IE 6 one year later in July 2001

6. 13 Years ?
• PNG was introduced in 1995
• IE 5.5 was released in 2000
• IE 6 one year later in July 2001
• We are now in 2008 and IE 6 is still the
most used browser around the world

7. What’s the problem ?

8. What’s the problem ?
• IE 6 supports PNG files only by using non-
valid DirectX filters, or other namespaces
like VML (Vector Markup Language).

9. What’s the problem ?
• IE 6 supports PNG files only by using non-
valid DirectX filters, or other namespaces
like VML (Vector Markup Language).
• Most developers excepts IE to handle with
PNG files without these deprecated
technologies ...

10. The actual solutions ?
lacks and fails on ...

11. The actual solutions ?
lacks and fails on ...
• easy maintenance,

12. The actual solutions ?
lacks and fails on ...
• easy maintenance,
• cross-browser DOM compatibility,

13. The actual solutions ?
lacks and fails on ...
• easy maintenance,
• cross-browser DOM compatibility,
• scalability and further developments ...

14. This means ...

15. This means ...
• It’s every time hell when the designer
comes around with an über-sexy-glossy-
webdesign

16. This means ...
• It’s every time hell when the designer
comes around with an über-sexy-glossy-
webdesign
• The customer and the marketing team are
pissed off.

17. This means ...
• It’s every time hell when the designer
comes around with an über-sexy-glossy-
webdesign
• The customer and the marketing team are
pissed off.
• And you got frustrated once again about
the blue E ...

19. Why PNGHack ?

20. More than a “quick fix”

21. More than a “quick fix”
• It’s a light, unobtrusive and well
documented JavaScript Library, meeting the
needs of front-end developers.

22. More than a “quick fix”
• It’s a light, unobtrusive and well
documented JavaScript Library, meeting the
needs of front-end developers.
• It’s evolving and supported by a bunch of
developers.

23. More than a “quick fix”
• It’s a light, unobtrusive and well
documented JavaScript Library, meeting the
needs of front-end developers.
• It’s evolving and supported by a bunch of
developers.
• It’s open-source and free !

24. Lets you handle ...

25. Lets you handle ...
• Namespaces : it’s not only dedicated to
valid HTML,

26. Lets you handle ...
• Namespaces : it’s not only dedicated to
valid HTML,
• Elements : you’re able to hack what ever
element you want, (img, input, image, ...)

27. Lets you handle ...
• Namespaces : it’s not only dedicated to
valid HTML,
• Elements : you’re able to hack what ever
element you want, (img, input, image, ...)
• Attributes : you can define any attribute to
retrieve the image source.

28. With many tools ...

29. With many tools ...
• 3 hacking methods,

30. With many tools ...
• 3 hacking methods,
• 2 useful properties,

31. With many tools ...
• 3 hacking methods,
• 2 useful properties,
• 1 storing collection,

32. With many tools ...
• 3 hacking methods,
• 2 useful properties,
• 1 storing collection,
• 9 optional parameters partially supporting
Regular Expressions,

33. With many tools ...
• 3 hacking methods,
• 2 useful properties,
• 1 storing collection,
• 9 optional parameters partially supporting
Regular Expressions,
• a hundred of combinations .. and solutions !

34. The future ?

35. The future ?
• PNGHack is going to support W3C CSS
2.1 background specifications in version 2.

36. The future ?
• PNGHack is going to support W3C CSS
2.1 background specifications in version 2.
• We will also keep up the work on
PNGHack 1.0 by introducing new features.

37. The future ?
• PNGHack is going to support W3C CSS
2.1 background specifications in version 2.
• We will also keep up the work on
PNGHack 1.0 by introducing new features.
• And more ...

38. Not convinced ?
There still are other solutions...

39. The end.
Feel free to join our community by reporting
issues, filling demands and participate to our
discussion group.
http://png-hack.googlecode.com
© 2008 Yves Van Goethem
yves.vangoethem@gmail.com
Distributed under MIT X11 License