Autor Zpráva
joe
Profil
Ahoj,

používáte znak > v selektorech? Jen tak se informuji, protože mi na jednu stranu přijde hodně užitečný, ale na druhou stranu nutí zachovat strukturu použitých elementů a nebo to pak všude přepisovat...
Str4wberry
Profil
Snažím se ho nepoužívat kvůli zpětné kompatibilitě. Většinou práci neulehčí tak významně, aby se vyplatilo nabídnout horší webový zážitek uživatelům starších prohlížečů (Explorer 6).
Kcko
Profil
joe:
Používám, taktéž selektory typu + ~ a vlastně v podstatě vše co je zde (css2/3 http://vogtjosh.com/selectors/ )
joe
Profil
Str4wberry:
Myslím, že IE6 v dnešní době opravdu nemá cenu řešit... :-)

Při nepoužívání je zase třeba přepsat všechny potřebné už definované hodnoty zpět na výchozí / jiné. A to je někdy dost otravné, zbytečné a ztráta času...

Kcko:
Mně docela vadí toto:

<div id="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

CSS:
#items > .item { ... }

JavaScript:
<script>
$("#items").wrapInner('<div class="wrapper">'); // musím upravovat CSS, nejlépe pak nechat selektory dva, aby to šlo i bez JS
</script>
Kcko
Profil
joe:
Nerozumím. Proč to obaluješ přes JS?
joe
Profil
Kcko:
A jak bys to chtěl pak psát? Obalit rovnou a pak mít v CSS:

#items > .wrapper > .item

Přijde mi to dlouhé... Obaluju pomocí JS, protože jinak tam ten element je k ničemu.
Kcko
Profil
#items .item

OT: Zase se nudíš? ;-) a hledáš problém tam kde není, nebo To nechápu jen já?
joe
Profil
Kcko:
A kde máš znak >?
Str4wberry
Profil
Reakce na joe:
Myslím, že IE6 v dnešní době opravdu nemá cenu řešit... :-)
Jak jsem psal, pokud není > nějaká výrazná úspora / nelze se bez toho obejít*, přijde mi škoda tím zhoršit web, byť pro pár návštěvníků.

A vlastně to, co píšeš ohledně silné fixace na HTML, je také pravda.

Obalování přes JS? Není to zbytečné?

*) Například není možné měnit HTML kód.
Chamurappi
Profil
Reaguji na joa:
Při nepoužívání je zase třeba přepsat všechny potřebné už definované hodnoty zpět na výchozí / jiné.
Nebo zaměřit ty potomky tak, aby se potomci potomků neovlivňovali. Třeba dát jim třídy. Přijde mi to mnohem snazší, než stavět křehkou strukturu ze selektorů přímého potomka.
Tohle je základní dilema všech kodérů — musí přemýšlet, kterým směrem se může kód dál vyvíjet. Různé situace nabízejí různá řešení. Zaměření podle třídy je ale ze všech možností vůči budoucím změnám asi nejvíc odolné. Pak sice časem může vzniknout pořádný binec v třídách, ale tím se jen snižuje komfort pro autora, návštěvník netrpí.

Jinak při rozhodování také provádím stejnou kalkulaci, jako píše Str4wberry. Pokud opravdu není zřetelně víc výhodné selektor přímého potomka použít, tak podporu starších Explorerů neobětuji. Navíc nikdy nemám jistotu, že se má stránka zobrazí všem vždy ve standardním režimu.


Reaguji na Kcka a Str4wberryho:
Já to zpočátku pochopil tak, že obalování do <div>u je jen zjednodušená modelová situace, tedy že se mu vlivem nějakého skriptu může DOM změnit tak, že se selektor přímého potomka netrefí. Ale koukám, že to asi tak nemyslí…
Kcko
Profil
joe:

přímého potomka používám, když nechci používat zbytečné třídy a nebudu měnit DOM.
Např.

#test > span {něco}
#test strong span {něco}


<div id="test">
<span></span> 
<strong>A <span>B</span></strong>
</div>

Jsou situace kdy se to nehodí a naopak kdy velmi. Vždy to jde napsat i tak jak psal Chamurappi (pomocí komplexnějšího zaměření přes třídy nebo přebíjení

#test span {}, #test strong span {tady bych mozna musel prebit prvni zapis který se sem aplikoval a to nechci!}

Jinak nechápu o co jiného Ti jde.
joe
Profil
Kcko:
OT: Zase se nudíš? ;-)
A proč bych se zase nudil? Pouze diskutuji. Jsou diskuse na daleko "horší" témata.

Chamurappi:
Nebo zaměřit ty potomky tak, aby se potomci potomků neovlivňovali
A jak?

<div id="items">
<div class="item">
  <div class="detail">
    <h2 class="heading">...</h2>
    <div class="list">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>
<div class="item"></div>
<div class="item"></div>
</div>

Taková situace může nastat.

Já to zpočátku pochopil tak
Už sám nevím jak jsem to myslel :-) Když mě napadne něco, na co chci založit téma, tak ho jednoduše založím. Zjišťuji tím taky, jak pracují ostatní a jak přemýšlí u kódování / programování jiní.

Je to takový příklad, kdy je třeba kvůli designu položky obalit do nějakého dalšího elementu, může to být pro nějakou věc v JavaScriptu, kvůli redesignu, apod.

Kcko:
#test span {}
U všech spanů musí zjistit, jestli mají nějakého rodiče #test, je to efektivní?
pcmanik
Profil
joe:
U všech spanů musí zjistit, jestli mají nějakého rodiče #test, je to efektivní?
CSS selektory sa vykonávaju zlava do prava, takže sa nájde len rodič test a na všetky jeho potomky sa použije zápis.

Samotné CSS ani neobsahuje selektor rodiča.
Str4wberry
Profil
Reakce na joe:
A jak?

To je právě to dilema, „kterým směrem se může kód dál vyvíjet“. Mohu třeba:

1) Společné vlastnosti nastavit pro .item a další odlišené pro .item (.detail) .item.
2) Použít více třid pro jeden element: <div class='item vnejsi'><div class='item vnitrni'>.
3) Použít různé třídy .item a .item-vnitrni, popř. .item-vnejsi a .item-vnitrni.
Chamurappi
Profil
Reaguji na joe:
A jak?
Třídou specifickou opravdu jen pro to, co chci zaměřit.

Mám zkušenosti s poměrně velkým webem, který prochází drobnými změnami každou chvíli, starému obsahu není možné/rozumné přegenerovávat HTML a doposud vesměs všechny kodérské úvahy typu „aspoň nemusím zavádět další třídu“ se dříve či později vymstily. Zaměřovat elementy v kontextu se vyplácí jen u elementů, kde si jsem stoprocentně jistý, že se vnitřek nebude dál rozvíjet — takže typicky u nějakých naskriptovaných ovládacích prvků. Ovšem ani u nich to není stoprocentní, protože i do našeptávače a kalendáře jde údajně prodat reklama :-)


Reaguji na pcmanika:
CSS selektory sa vykonávaju zlava do prava
V tomto případě to skoro určitě platí, ale na místě autora prohlížeče bych v porušení tohoto pravidla viděl jistý potenciál pro optimalizace. Třeba kdyby se testoval selektor span #test, tak bych se také zaměřil nejdřív na #test, protože je pravděpodobné, že ho bude méně než spanů.
joe
Profil
pcmanik:
CSS selektory sa vykonávaju zlava do prava, takže sa nájde len rodič test a na všetky jeho potomky sa použije zápis.

Pleteš se, vykonávají se zprava doleva (viz například článek pro optimalizaci renderování webu od Google)

(kde se mimojiné píše, že psaní ul li a je méně efektivní, než ul > li > a)

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: