Tag Archives for css
Dan CSS nagcev, tretjič
Prvič smo praznovali predlani, drugič lani in tretjič letos. Želim vam vesel dan CSS nagcev (ali po angleško CSS Naked Day), več o tem zakaj in kako na zgornjih povezavah ali na Hadovem zapisu … P.S.: Za tiste, ki vas … Continue reading
ŽVPL 3.0 – oblikovalski proces
Nedavno splavljeni ŽVPL smo začeli risati že daljnega leta 2003, ko smo se prvič začeli pogovarjati o prenovi (zakaj je prenova trajala toliko časa je druga zgodba, ki pa naj ostane zavita v tančico mistike). Prvi je svoj predlog narisal … Continue reading
Dan CSS nagcev
Tako kot lani, tudi letos praznujemo Dan CSS nagcev, ki letos začuda ni 5. aprila, ampak 9. aprila (hvala, Had).
Vesel CSS Naked Day vsem! Continue reading
Transparentni PNG, CSS in Internet Explorer
PNG je odličen format in normalni brskalniki (Mozilla Firefox, Opera, Flock) ga z lahkoto prikazujejo, vključno s transparencami, ki so mogoče celo najboljša stvar, ki se je zgodila spletnim grafičnim formatom.
Problematičen je “le” Internet Explorer 6, nezasluženo najbolje uporabljen brskalnik na “modri kugli” (po W3Counterju ima kar 43,33 % delež, po TheCounterju pa grozljivi 50 % delež), ki transparence zaradi (večini spletnih razvijalcev) neznanega razloga* ne prikazuje kot je potrebno.
In ker sem danes ponovno našel “transparency hack”, ki zagotovo deluje, ga delim z vami (prvič sem ga uporabil na Hudih bejbah).
Za uspešen izris PNG-ja v IE-ju potrebujete:
- poljubno PNG sliko (lahko je tudi transparentna), paziti morate le, da je PNG slika široka toliko kot element v katerem ga boste prikazovali (
<div>, <h1>, ponavljanja po X oz Y osi hack v IE 6 ne podpira (na žalost)), - ščepec CSS kode,
- dve žlici Vegete …
… in vaš PNG bo deloval kot se šika. Tudi v IE6. Zagotovo.
Primer
Na strani, ki jo pravkar berete imamo <h1> kot transparenten PNG, ki pa v IE6 do danes ni deloval:
Pobrskal sem po starih CSS dokumentih in v nekaj minutah apliciral “hack”, ki omogoči transparenco v I-fuckin’-E-ju 6, koda pa se glasi:
h1 {
background: transparent url(img/h1.png) no-repeat 0 0 !important;
filter:progid:DXimageTransform.Microsoft.AlphaImageLoader(src='http://www.em3r10.com/sites/all/themes/em3r10-rc3/img/h1.png',sizingMethod='crop');
margin: 0;
padding-left: 70px;
height: 136px;
text-indent: -9999px;
display: block;
overflow: hidden;
background: none;
}
Da vam bo hack deloval, pazite na naslednje haklce: prvi background je za normalne brskalnike, ki PNG znajo prikazati, tisti !important na koncu vrstice je nujen, da ga bodo taisti brskalniki prikazali, ker imamo v zadnji vrstici background: none, ki je tam samo zaradi klinčevega IE6, vendar bodo normalni brskalniki zaradi !important za tapravo vzeli prvo vrstico.
V drugi vrstici je neka čudna kobasa (v zgornji kodi je vrstica cela) filter:progid:DXimageTransform..., ki jo noben razvijalec pri zdravi pameti ne bi metal v svoj CSS (CSS ne bo več validen, če dodate to vrstico kode), ampak če bo IE6 prikazoval transparentne PNG-je se splača (lahko uporabite t.i. conditional commenting in za brskalnike starejše od IE6 uporabite posebno CSS datoteko).
Potrebno je dodati, da naj bo pot do PNG-ja v drugi vrstici absolutna, ker drugače hack ne bo deloval. To je to, žlico Vegete posujte po tipkovnici, če vam stvar ne bo delovala, a je verjetnost za to precej nizka.
Po apliciranju zgoraj opisanega CSS hacka se PNG lepo izpisuje tudi v IE-ju 6. Komentarji dobrodošli 
Continue reading