Autor Zpráva
joe
Profil
Hned vysvětlím, co jsem tím měl na mysli, při tvorbě webu, kde kombnuji CSS3 animace s JavaScriptem jsem docela narazil na problém při vykreslování a se zpožděním u některých prohlížečů - třeba Opera.

Pokud chci zobrazit nějaký element při najetí na jiný, můžu to napsat třeba takto:

#items .item .hover-box {
  /* tady bude dlouhý výčet vlastností */
  display: none;
}

/* při najetí budu element jen zobrazovat */
#items .item:hover .hover-box {
  display: block;
}

nebo naopak

#items .item .hover-box {
  display: none;
}

/* při najetí budu element zobrazovat a zároveň mu nastavím všechny požadované vlastnosti */
#items .item:hover .hover-box {
  display: block;
  /* tady bude dlouhý výčet vlastností */
}

Co, kdy a proč je podle vás lepší? Já už svoji odpověď mám a tuším, ale zajímalo by mě jak na to koukáte vy?
panther
Profil
joe:
je to celkem jedno, častěji se používá první verze.
Kcko
Profil
Nepamatuji se, že bych někdy viděl verzi #2.
joe
Profil
panther:
je to celkem jedno
Jedno to právě není. Hraje to klíčovou roli při animování a překreslování dalších elementů.

Až najdu chvilku, můžu ukázat příklad (mám to teď jen u projektu, který není ještě věřejný) kdy to jedno právě není. Nechám vás s tím se chvíli ještě "potrápit".
panther
Profil
joe:
nikoho s tim netrapis, spise rovnou ukaz, s cim konkretne mas problem. Idealne rovnou priprv obe ukazky, kde bude nejaky problem zjevny.
joe
Profil
panther:
Mě by spíš zajímala odpověď od někoho, jestli se najde, kdo se o CSS a renderování v prohlížečích zajímá trochu více do hloubky.

Příklad ukážu samozřejmě pošlu (zároveň si zakládám toto vlákno, abych se s tím podělil a nezapomněl na to, jen musim ten příklad ještě připravit)
preca1
Profil
Zdravim,
CSS guru nejsem, ale osobně mi přijde lepší první způsob a osobně ho i používám. Sem zvědavej na tvoje výsledky.
Joker
Profil
joe:
Podle mého názoru je lepší varianta 1.
A to z toho důvodu, že ty ostatní vlastnosti se vztahují k #items .item .hover-box a ne k #items .item:hover .hover-box.
Resp. teoreticky bych mohl ten element (třeba přes JS) odkrýt i na jinou událost než zrovna hover. Měl by i v takovém případě mít ty ostatní vlastnosti? Předpokládám, že ano. Z toho by pak vycházelo, že by „správně“ měly být u #items .item .hover-box a :hover přepínat jen display.
peta
Profil
Nezajimam se o CSS renderovani. Prohlizec by si mel pripravit css pro vsechny varianty a ne ho dodatecne vypocitavat.
Prvni varianta mi prijde lepsi i z hlediska dalsich uprav css. Pokud prohlizec nevypocita css predem, pak pri teto variante ma moznost si prvek pripravit predem. Pokud vlastnosti nebude ignorovat, protoze je to display:none.
Pokud te zlobi Opera, pouzij jiny prohlizec. Osobne mam s Operou spatne zkusenosti a tez spoustu lidi melo pripominky ke Chrome.
Amunak
Profil
peta:
A myslíš, že je lepší se přizpůsobit prohlížečům, nebo doufat, že se oni přizpůsobí tobě?
Joker
Profil
peta:
Pokud te zlobi Opera, pouzij jiny prohlizec. Osobne mam s Operou spatne zkusenosti a tez spoustu lidi melo pripominky ke Chrome.
Hloupá rada.
Když použije jiný prohlížeč, znamená to, že návštěvníci s Operou nebo Chrome ten problém už mít nebudou?

joe:
jsem docela narazil na problém při vykreslování a se zpožděním u některých prohlížečů
Pro zajímavost, u které varianty se to zpoždění objevuje?
1Pupik1989
Profil
Já osobně tedy používám verzi 2. Logicky jsem si řekl proč stylovat něco, nač uživatel třeba ani nenajede.
peta
Profil
Mno, kdo vi, co tam mam? Co treba odkaz na stranku? Takhle muzu tvrdit, ze si vymyslis :)
joe
Profil
Joker:
Zlobí mě právě ta první varianta.

peta:
Pokud te zlobi Opera, pouzij jiny prohlizec
Proč bych to dělal? Chci to mít odladěné pokud možno na všechny prohlížeče.

---

Z hlediska rychlosti bych řekl, že bude ta první rychlejší (ale pouze ten hover), protože pak jen zobrazuji a skrývám element, nic víc. Naopak při dvojce je při každém hoveru nastavuju a zase "odnastavuju". Otázka ale je, co je výhodnější? Nastavit vlastnosti všem prvkům, i když uživatel může najet jen třeba na 4 z 20? Proč tedy zbytečně zatěžovat prohlížeč něčím, k čemu se uživatel třeba nikdy nedostane? Je to stejné jako lazy loading, získání a použití až tehdy, kdy je to opravdu potřeba.

Nejde ale o rychlost samotného hoveru, ale o práci s jinými elementy, které ty "hoverované" překrývají a při animaci se vykreslují místy až skokově a nedělá to hezký efekt.


---

Příklad dodám přes víkend, nestíhám.
peta
Profil
Dobra stranka neni preplacana a prohlizec by nemel mit v tom rozdil. Ale, protoze jsem tu uz cetl par stiznosti na chrome a operu pri zpracovani podobnych efektu, tak je takove tvrzeni znacne nejiste.
Hover je vetsinou efekt typu blik, blik. Prvky, ktere se hoveruji vetsinou neobsahuji slozite struktury. Pokud jo, pak je autor *pip*.
Ale, treba pro starsi IE se resi hover pomoci javascriptu (csshover.htc). Pokud je css nebo stranka prilis slozita, pak JS hover priplacnuty na elementy nemusi byt uplne dobre napsany.
Potom ma spoustu prohlizecu jeste v dnesni dobe problem spravne floatovat a spoustu navodu na webu ukazuje chybne floatovani, ktere se pri slozitejsi konstrukci stranky snadno rozsype a pak to dela v kombinaci s efekty jeste vetsi psi kusy.
A pak tu mas take tu moznost skryvani a odkryvani plynule pomoci JS. Vetsina tech scriptu je tez dost nepromyslene zplacanych a pri slozitejsi konstrukci to opet dela psi kusy.
Mno, a pak tu mas flash a javu. Ten nerad flash a javu. Mam zkusenosti, ze FF chybne uvolnuje pamet a zaplacava cinnosti pro ovladani pri pouziti flash. Uz pri 5 oknech se slozitejsim flash, treba the-west, facebook a pod se mi jakykoliv efekt zacina dost vlest, vsechno se zpomaluje a prohlizec ma sklony k padu (cas od casu to skonci hlaskou okno nereaguje, ukoncit / pockat). Javu mam zakazanou, protoze mi to delalo podobne problemy.
A to mam pomerne solidni pocitac na 5 let zpet.

Ja osobne jsem tedy proti hoverovani, efektum, flash. Prozatim to lze dobre obkecat na mobil a dotykovy display.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0