Embrio

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!

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 ;)

Po SEO kvizu vam predstavljam še en zanimiv kviz, kjer boste osvežili oz. pretestirali svoje znanje HTML-ja (sicer 4.0, duh): Koliko HTML elemntov lahko poimenuješ v 5 minutah kviz ;)

Sam sem poimenoval 42 elementov in ker je cifra res kul, tale test delim z vami!

42

P.S.: Obstaja tudi Koliko CSS property-ev lahko našteješ v 7 minutah. Had, zdej ti pa ne bo dolgčas vsaj 12 minut ;)

Nate Koechley je na letošnji spletni konferenci @media 2007 govoril o tem kako pohitriti njegovo, tvojo, mojo spletno stran. Nate je predstavil 12 pravil za hitrejše spletne strani (na njegovem blogu boste našli zapis skupaj s .pdf in .ppt dokumentom iz konference, vendar je po konferenci dodal še dve pravili, tako da jih je zdaj 14).

Bistvenega pomena je to, da spletni razvijalci uporabljamo čim manj HTTP zahtevkov (requestov), ker po merjenjih Yahoo!-evih inženirjev le ti najbolj upočasnjujejo čase nalaganja spletnih strani.

Po tem nasvetu je Nate končal predavanje, nas poslal domov in rekel, da če naredimo "samo" to, da HTTP requeste spravimo na minimum z:

• CCS škrati (beri CSS Sprites na ALA),
• kombiniranimi / združenimi JS in CSS datotekami,
• image mapami,

bodo naše strani 20-30% hitrejše.

Seveda se je predavanje nadaljevalo, tako da smo slišali še ostalih 11 pravil vmes pa je omenil, da bodo pri Yahoo!-ju razvili orodje za analiziranje spletnih strani, ki vam bo povedalo, kaj je z vašo stranjo narobe in kako bi jo lahko pohitrili.

Konec julija pa je Nate objavil zapis, da se je zgodilo: fantje pri Yahoo!-ju so za popularni Firefoxov dodatek Firebug razvili dodatek YSlow, čudovito orodje, ki vam pove, kaj je s hitrostjo vaše strani narobe in zakaj ...

Predlagam, da si najprej preberete slajde Nate-ovega preavanja, si dol skotalikate YSlow, in ko boste že na Y! Developer Networku, še malo pobrskajte naokoli, se najde kakšna zanimiva reč za spletne mojstre.

Håkon Wium Lie, oče CSS-ja se je ob 10. obletnici CSS-ja na A List Apart razpisal o tem kakšna je prihodnost CSS-jev, predvsem se je razhudil o pereči problematiki, ki spletne oblikovalce spremlja že od vsega začetka: zakaj v CSS-jih ne uporabljamo nesistemskih tipografij (fontov), kje in kako v zgodbo pride CSS, ali bodo spletni (TTF) fonti naslednja velika stvar v spletnem oblikovanju, kakšni so argumenti proti uporabi fontov (večinoma legalni, ker so vsi custom fonti intelektualna lastnina in so plačljivi) ...

Håkona sva poslušala na letošnji @mediji in že tam je govoril o zgornji problematiki, pa tudi o "multi-column layoutu", oblikovanju za male ekrane (dlančniki, mobilci, ...), CSS-ju za tisk in še čem.

Noga (ang.: footer) na dnu strani dela veliko ljudem, ki se ukvarjajo s CSS-jem, veliko problemov. Ryan Fait je našel odlično rešitev, na njegovi strani najdete CSS Sticky Footer that just works.

Odlična rešitev, dela povsod, sem jo že zakopal in posladkal ;)

Na strani CSS3.info sem prebral zanimiv zapis o željah po izumrtju Internet Explorerja 6.

If we want to move the web forward, we need to encourage people to drop IE6 as soon as possible.

I’m assuming that a reader of this article is a web developer interested in CSS3. If we want to start using all the new opportunities that it creates, we need to kill off legacy browsers that don’t support it. If you’re using IE6 and you have any option whatsoever, switch to a better browser; IE7 at the very least. If you know someone who still uses IE6 and has any option whatsoever, get them upgraded. Evangelise all the options; Firefox, Opera, Flock, whatever; get people switching. Let’s kill this dinosaur off and let the fast mammals evolve to take its place.

Strinjam se s Petrom Gasstonom: "Ljudje, ne uporabljajte več IE6, raje deskajte srečneje!"

P.S.: O vseh novih funkcijah CSS3 sem že pisal!

Dustin Diaz je lani predlagal, da je 5. april CSS Naked Day in da so vse strani narejene s CSS-ji na ta dan razgaljene do zadnjega stila. Ker imamo radi goloto bomu tudi na Em3r10.com danes pokazati svoj <body> ;)

Je na sončni strani spleta še kdo, ki prazuje Dan CSS nagcev?!

Letos sem vam za Novo leto zaželel dobro mrežo za 960px, danes pa bom omenil še tri koristne zapise za še boljše mreženje spletnih strani.

XHTML column frameworks

Paul Evans je na svojem blogu izračunal koliko sta široka 2, 3, 4, 5, 6 stoplcev pri oblikovanju za različne resolucije (oz. varne robove (eng.: safe margins) različnih resolucij ekranov), in nekaj variacij na temo: 2 stolpca v razmerju 1:2, 1:3, 2:3 in trije stoplci v razmerju 1:2:2 in 1:2:1.

Se sliši zakomplicirano? Spodnji primer bo razbremenil procesor, ne?

Introducing GridMaker

Andrew Ingram je na svojem blogu objavil Photoshop vsadek (eng.: plug-in), s katerim si hitro postavite mrežo. Zelo uporabno, če uporabljate Photoshop (deluje samo na CS2 ali CS3 beta).

Grid systems in Web Design

Zadnji, a ne zadnji zapis o sistemu mrež v spletnem oblikovaju je najbolj obširen in izčrpen (ter seveda ima največ povezav na druge spletne strani, ki govorijo o mreženju). Fantje iz Tutorial Bloga so se res izkazali!

Še enkrat: dobro mrežo ;)

16. letni mulc iz Argentine, ki sliši na ime Guillermo Rauch je na svojem blogu DevThought.com objavil zelo sjaksi*, fjansi** in sploh kul CSS+Javascript hover za navigacijske menije ...

Zadeva je zelo preprosta, standardna navigacijska koda <ul> <li> ... <li> </ul>, ščepec Javascripta in je ...

Zelo, zelo uporabna skripta za vse spletne razvijalce, ki bi od standardnega CSS menija želeli malo več ... najdete ga v zapisu CSS+Javascript power. Fancy menu

* sjaksi = seksi
** fjansi = fancy