Da li treba koristi * html CSS hack?

[ Nemke_BG @ 03.06.2008. 13:31 ] @

Pitanje za starije i iskusnije dizajnere, da li treba koristiti *html hack i vasa slobodna procena da li ce moci da se upotrebljava u sledecim verzijama browsera? Ako imate neko ekvivalentno a kvalitetnije in-CSS resenje recite.....

[ Mitrović Srđan @ 03.06.2008. 14:35 ] @

Ne vidim zasto ne bih koristio selektor * da bi ponistio npr neka default ponasanja
browsera tipa padding i margine. Ne vidim da je to neki hack. Mada mozda
propustam nesto :)

[ Nemke_BG @ 04.06.2008. 09:22 ] @

Pa ja nisam hteo da ga koristim zato sto sam nalazio preko google neke sajtove na kojima se ovo pominje kao hack i to kao prljav hack...pa sam se premisljao ali mi je na kraju zavrsio posao i to odlicno ga je zavrsio....

.....

[ Mitrović Srđan @ 04.06.2008. 10:06 ] @

* je univerzalni selektor i ne vidim zasto se ne bi koristio.

[ Aleksandar Ružičić @ 05.06.2008. 07:40 ] @

* jeste univerzalni slektor ali * html jeste hack jer pre html nema (po standardima) ni jednog elementa tj html je root. e kao sto svi znamo IE ne igra po pravilima pa kod njega postoji neki fantomski element koji je root i koji kao jedini child ima html element. ovo je ispravljeno u IE7 tako da tamo * html <neki selektor> ne vraca nista.

e upravo zbog toga sto IE7 ne vidi taj selektor dok svaki IE pre njega vidi (mislim na IE6 i IE5.5 ostali me ne interesuju) ja koristim * html hack kada treba nesto za IE6 da sredim (a da za IE7 bude drugaciji kod - uglavnom je u pitanju koriscenje AlphaImageLoader filtera za ucitavanje transparentnih PNG slika)

ali posto se trudim da sto manje hackova koristim tj da mi CSS fajlovi budu po standardima onda sve IE-related stilove ubacujem u kondicione komentare:

Code:

<link href="css/common.css" rel="stylesheet" type="text/css" media="all" />

i u common.ie.css "smem" da koristim hackove jer ih validatori ne vide ;) (dobro ovo jeste malo prljavo sa moje strane ali to je jedini nacin da svi budu zadovoljni)

naravno mogao sam da koristim razlicite fajlove za razlicite verzije IE-a sa [if lte IE6] (za IE 5.5 i IE 6) i [if gte IE 7] (za IE 7, IE 8 i sve naredne) ali posto sam ja dosta lenj onda sve to ubacim u jedan css i koristim * html hack da razdvojim IE6 od IE7 stilova :)

[ NeonDragon @ 05.06.2008. 20:28 ] @

hm, nekad sam koristion "underscore" hak, ali to je prevaziđeno:

Code:

height: 24px;
_height: 20px;

prvi je normalan, a drugog samo ie može da sažvaće. jedino css validator što balavi kad naiđe na ovo

[ Aleksandar Ružičić @ 06.06.2008. 09:34 ] @

ja sam underscore hack prestao odavno da koristim, a i kada sam ga koristio to je bilo samo unutar style atributa (u css-u sam oduvek koristio * html)

[ NeonDragon @ 06.06.2008. 21:48 ] @

Citat:

* jeste univerzalni slektor ali * html jeste hack jer pre html nema (po standardima) ni jednog elementa tj html je root. e kao sto svi znamo IE ne igra po pravilima pa kod njega postoji neki fantomski element koji je root i koji kao jedini child ima html element. ovo je ispravljeno u IE7 tako da tamo * html <neki selektor> ne vraca nista.

mene ne bi čudilo da ie čita doctype kao root element :D

[ dejanc @ 07.06.2008. 16:28 ] @

naravno da treba,
zasto bih ja pravio novi fajl (ie6 fix-hack) samo zbog par linija koda...

[ Aleksandar Ružičić @ 07.06.2008. 18:01 ] @

@NeonDragon: ne bih rekao da je doctype taj root element iz razloga sto doctype ne sadrzi html element, a i ukoliko ne stavis doctype open * html hack radi u ie ;)

@dejanc: pa ako radis zahtevniji "web 2.0" sajt onda tih "par linija" obicno predje 100 linija, a css validatori ne vide fajlove unutar uslovnih komentara tako da mozes u jednom fajlu da drzis css kod koji prati standarde a samo za IE da pises nestadardni css kod

[ dejanc @ 07.06.2008. 18:48 ] @

pa ako tebi treba 100 linija fixova onda bolje da se manes css koda... ;)

[ Aleksandar Ružičić @ 07.06.2008. 22:24 ] @

dejanc: ja sam govorio o velikim sajtovima, tipa social networka i slicnih obimnih sajtova, evo npr jednog ie-only css-a:

Code:

* html #mrlja
{
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/mrlja.png', sizingMethod='image');
}

* html #mrlja2
{
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/mrlja2.png', sizingMethod='image');
}

* html #eyg
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/eyg.png', sizingMethod='image');
}

* html #search-bar { margin-top: -5px; }

* html #menubar-l
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menubar.png', sizingMethod='image');
}

* html #menubar-r
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menubar.png', sizingMethod='image');
}

* html #menubar-g
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menubar-g.png', sizingMethod='image');
}

* html #menubar-m
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menubar.png', sizingMethod='scale');
}

#menu-bar a
{
    filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=1);
}

* html #menu-bar a
{
    filter:none;
    padding-right: 21px;
    margin-right:-3px;
}

* html #menu-bar li div
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menubar-hm.png', sizingMethod='scale');
}

* html #menu-bar li div.l
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menubar-hl.png', sizingMethod='image');
}

* html #menu-bar li div.r
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/menubar-hr.png', sizingMethod='image');
}

* html .submenu-holder .l
{
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-l.png', sizingMethod='scale');
}

* html .submenu-holder .r
{
    right:-1px;
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-r.png', sizingMethod='scale');
}

* html .submenu-holder .bl
{
    background: none;
    bottom:-1px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-bl.png', sizingMethod='image');
}

* html .submenu-holder .b
{
    bottom:-1px;
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-b.png', sizingMethod='scale');
}

* html .submenu-holder .br
{
    right:-1px;
    bottom:-1px;
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-br.png', sizingMethod='image');
}

* html .submenu-holder .tr
{
    background: none;
    right:-1px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-tr.png', sizingMethod='image');
}

* html .submenu-holder .t
{
    top:-1px;
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-t.png', sizingMethod='scale');
}

* html .submenu { background: none; }
* html .submenu-ie6 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/submenu-c.png', sizingMethod='scale'); }

* html .arrow { top: 28px; }

* html #footer .text-right { position: relative; }

* html .shadow-r { background-image: none; }

* html .ie6-shadow-r
{
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    height: 100%;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/shadow-v.png', sizingMethod='scale');
}

* html .shadow-t { background-image: none; }

* html .ie6-shadow-t
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 7px;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/shadow-h.png', sizingMethod='scale');
}

* html bar .shadow-r { display: none; }

* html .haragei { bottom: 0; }

* html .ie6fix
{
    zoom: 1;
    margin-right: -3px;
}

.darkerbg
{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=35);
}

to je nekih 150 linija koda, i kao sto mozes da vidis 90% toga je AlphaImageLoader... a kada bi video o kakvom dizajnu se radi bilo bi ti jasno zato je potrebno toliko transparentnih slika

[ dejanc @ 08.06.2008. 10:04 ] @

nista sporno, ovo su naravno stvari koje drugacije ne mogu da se rade
ali ja vise volim da radim sa jednim fajlom...

[ Aleksandar Ružičić @ 08.06.2008. 10:34 ] @

pa ja vise volim da postujem standarde :)

i nije mi neki problem da po potrebi pritisniem Ctrl+N...