39
PNGHack The end of 13 years PNG issues on IE

PNGHack 1.0 Presentation

Embed Size (px)

DESCRIPTION

A quick presentation of the PNGHack project.

Citation preview

Page 1: PNGHack 1.0 Presentation

PNGHackThe end of 13 years PNG issues on IE

Page 2: PNGHack 1.0 Presentation

13 Years ?

Page 3: PNGHack 1.0 Presentation

13 Years ?

• PNG was introduced in 1995

Page 4: PNGHack 1.0 Presentation

13 Years ?

• PNG was introduced in 1995

• IE 5.5 was released in 2000

Page 5: PNGHack 1.0 Presentation

13 Years ?

• PNG was introduced in 1995

• IE 5.5 was released in 2000

• IE 6 one year later in July 2001

Page 6: PNGHack 1.0 Presentation

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

Page 7: PNGHack 1.0 Presentation

What’s the problem ?

Page 8: PNGHack 1.0 Presentation

What’s the problem ?

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

Page 9: PNGHack 1.0 Presentation

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

Page 10: PNGHack 1.0 Presentation

The actual solutions ?

lacks and fails on ...

Page 11: PNGHack 1.0 Presentation

The actual solutions ?

• easy maintenance,

lacks and fails on ...

Page 12: PNGHack 1.0 Presentation

The actual solutions ?

• easy maintenance,

• cross-browser DOM compatibility,

lacks and fails on ...

Page 13: PNGHack 1.0 Presentation

The actual solutions ?

• easy maintenance,

• cross-browser DOM compatibility,

• scalability and further developments ...

lacks and fails on ...

Page 14: PNGHack 1.0 Presentation

This means ...

Page 15: PNGHack 1.0 Presentation

This means ...

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

Page 16: PNGHack 1.0 Presentation

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.

Page 17: PNGHack 1.0 Presentation

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

Page 18: PNGHack 1.0 Presentation
Page 19: PNGHack 1.0 Presentation

Why PNGHack ?

Page 20: PNGHack 1.0 Presentation

More than a “quick fix”

Page 21: PNGHack 1.0 Presentation

More than a “quick fix”

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

Page 22: PNGHack 1.0 Presentation

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.

Page 23: PNGHack 1.0 Presentation

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 !

Page 24: PNGHack 1.0 Presentation

Lets you handle ...

Page 25: PNGHack 1.0 Presentation

Lets you handle ...

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

Page 26: PNGHack 1.0 Presentation

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

Page 27: PNGHack 1.0 Presentation

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.

Page 28: PNGHack 1.0 Presentation

With many tools ...

Page 29: PNGHack 1.0 Presentation

With many tools ...

• 3 hacking methods,

Page 30: PNGHack 1.0 Presentation

With many tools ...

• 3 hacking methods,

• 2 useful properties,

Page 31: PNGHack 1.0 Presentation

With many tools ...

• 3 hacking methods,

• 2 useful properties,

• 1 storing collection,

Page 32: PNGHack 1.0 Presentation

With many tools ...

• 3 hacking methods,

• 2 useful properties,

• 1 storing collection,

• 9 optional parameters partially supporting Regular Expressions,

Page 33: PNGHack 1.0 Presentation

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 !

Page 34: PNGHack 1.0 Presentation

The future ?

Page 35: PNGHack 1.0 Presentation

The future ?

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

Page 36: PNGHack 1.0 Presentation

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.

Page 37: PNGHack 1.0 Presentation

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

Page 38: PNGHack 1.0 Presentation

Not convinced ? There still are other solutions...

Page 39: PNGHack 1.0 Presentation

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 [email protected]

Distributed under MIT X11 License