teamon.eu

blah blah blah

ie6png fix tool

14 lutego 2008

Kategorie:

Tagi:

  • CSS
  • IE
  • PNG
  • Ruby

Skończyłem pisać CSS dla strony. Użyłem dość sporo plików png z przeźroczystością. Szybki test, no tak - IE6 nie obsługuje kanału alpha. Rozwiązanie jest dość proste, osobny arkusz dla IE6 i wykorzystanie jego filtrów

 
selektor {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image', sizingMethod='crop');
}
 
Na dobra ale tych obrazków trochę jest i średnio mi się chcę ręcznie to zamieniać...
Rozwiązanie: chwilka z Ruby ;] 
 
#!/usr/bin/ruby
 
File.open(ARGV[0]) do |f|
  style = ""
  f.read.scan(/([^{}]+?)\{[^}]*background(?:-image)?:\s*url\((.*?)\).*?\}/m) do |sel, url|
    puts sel + " " + url
    style << "#{sel} {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{url}, sizingMethod='crop');
}"
  end
  File.open("style_ie6.css", "w") { |ie| ie.write style }
end
 

A potem tylko

ruby ~/ie6png.rb style.css

i mamy gotowy plik style_ie6.png. Nic tylko wrzucić w komentarz warunkowy :)

12 komentarzy

  • BTM 14 lutego 2008 13:25:53

    Hint który może Ci się przydać: jak dasz <A> na czymś co jest przeźroczyste, to w IE6 nie da się nań kliknąć. Dodanie position: relative do A pomaga ;-)

  • Teamon 14 lutego 2008 13:27:03

    Akurat w tym wypadku chodziło o elementy czysto dekoracyjne :)

  • Livio 14 lutego 2008 14:15:18

    A nie lepiej użyć pngOptimizera? Usunie z PNG to co niepotrzebne, zmniejszy rozmiar i spowoduje poprawne wyświetlenie pliku w MSIE.

    Żadnego zbędnego kodu w CSS.

  • Teamon 14 lutego 2008 14:17:14

    Nie słyszałem o tym, ale widze, że tylko pod winde...

  • Teamon 14 lutego 2008 14:19:33

    albo i nie http://weblog.404creative.com/index.php/2007/09/15/new-png-optimizer-for-macs/ ... [pobawie sie ;)]

  • D4rky 14 lutego 2008 17:51:08

    a nie prosciej uzyc do tego specjalnego .js ? http://homepage.ntlworld.com/bobosola/
    poza tym to rozwiazanie ma pewne wady - czasami IE gubi przezroczystosc i ma spore problemy z powtarzajacymi sei obrazkami

  • Teamon 14 lutego 2008 17:52:37

    @D4 - to twoje nie zamieni mi background-image....

  • blue 14 lutego 2008 21:46:03

    @Livio, oj chyba nie bardzo. Mówisz o tym sofcie:
    http://psydk.org/PngOptimizer.php
    ? Próbowałem potraktować nim jakiegoś .png i nie widzę różnicy w ie z obsługą. Nadal nie ma kanału alpha.

  • Teamon 14 lutego 2008 21:48:53

    tak samo w tym klonie pod os x niestety.

  • Dominik Porada 15 lutego 2008 09:07:48

    @Livio, nie IE<7 _po prostu_ nie obsługuje przezroczystości PNG, optimizery poprawiają tylko kolory, które IE nawet wyświetla lekko przyciemnione.

    @BTM, wystarczy tylko anchorom na tej warstwie zaaplikować @cursor: pointer;@.

  • Livio 04 marca 2008 20:47:53

    @Dominik Porada: sprawdź ten jeden konkretny, a przekonasz się, że IE zobaczy przezroczystość :> . Wiem, bo sam używam. Via Wine. Nawet DnD działa jak powinno.

  • Livio 20 lipca 2008 23:20:54

    I nie dałem Wam tego programu, kurde... Skleroza.

    http://up.wklej.org/download.php?id=b950ea26ca12daae142bd74dba4427c8

Zostaw komentarz

code