PNGHack 1.0 Presentation

PNGHackThe end of 13 years PNG issues on IE

13 Years ?

13 Years ?

• PNG was introduced in 1995

13 Years ?

• PNG was introduced in 1995

• IE 5.5 was released in 2000

13 Years ?

• PNG was introduced in 1995

• IE 5.5 was released in 2000

• IE 6 one year later in July 2001

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

What’s the problem ?

What’s the problem ?

• IE 6 supports PNG files only by using non-valid DirectX filters, or other namespaces like VML (Vector Markup Language).

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 ...

The actual solutions ?

lacks and fails on ...

The actual solutions ?

• easy maintenance,

lacks and fails on ...

The actual solutions ?

• easy maintenance,

• cross-browser DOM compatibility,

lacks and fails on ...

The actual solutions ?

• easy maintenance,

• cross-browser DOM compatibility,

• scalability and further developments ...

lacks and fails on ...

This means ...

This means ...

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

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.

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 ...

Why PNGHack ?

More than a “quick fix”

More than a “quick fix”

• It’s a light, unobtrusive and well documented JavaScript Library, meeting the needs of front-end developers.

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.

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 !

Lets you handle ...

Lets you handle ...

• Namespaces : it’s not only dedicated to valid HTML,

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, ...)

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.

With many tools ...

With many tools ...

• 3 hacking methods,

With many tools ...

• 3 hacking methods,

• 2 useful properties,

With many tools ...

• 3 hacking methods,

• 2 useful properties,

• 1 storing collection,

With many tools ...

• 3 hacking methods,

• 2 useful properties,

• 1 storing collection,

• 9 optional parameters partially supporting Regular Expressions,

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 !

The future ?

The future ?

• PNGHack is going to support W3C CSS 2.1 background specifications in version 2.

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.

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 ...

Not convinced ? There still are other solutions...

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 Goethemyves.vangoethem@gmail.com

Distributed under MIT X11 License