Ikonka pro pojmy ve slovníku a podpora CSS3 (diskuse)

[Michal Vyskočil]

Ikonky too cool for IE jsou divné, rozhodně se k ábíčku vzhledově nehodí.

[Robert Krátký]

Já to taky nemyslel vážně . I kdyby se hodily, stejně bychom žádnou pravděpodobně na stránky nedali...

[Michal Vyskočil]

Ale nápad to není špatný. Ideální by bylo si udělat v CSS vlastní textové tlačítko. A všechny problémy s IE bys měl vyřešeny (sorry, naše stránka je too cool for IE ).

[6xx]

myslim, ze tady nikdo IE nepuziva, maximalne pri vyvoji designu stranek aby vydel, jak nektere prohlizece (==prohlizec) dokazou validni styl zprasit

[Oswald]

Nehledě na to, že bych pak nemohl specifikovat požadovaný odstup ikonky od textu, který za ní následuje.

Mohl :)

.st a[href^="/slovnik/"] {
margin-right: 1em; 
}

[Robert Krátký]

Sorry, už jsem z toho zblblý, takže jsem se přepsal. Chtěl jsem říct "od textu odkazu". Tuhle vzdálenost je totiž nutné určit pomocí px (je nutné definovat minimálně tolik, kolik je šířka obrázku). Takže když nastavím hodnotu pomocí px, nebude se dynamicky měnit podle velikosti písma v prohlížeči. A kdybych ten padding nastavil pomocí em, nemůžu zase zaručit, že to bude ta správná šířka.

Opravím to v textu.

[Josef Kufner]

vlastnost vertical-align tam nefunguje?

[Robert Krátký]

Pokud vím, tak ne.

[Jiří (BoodOk) Kadeřávek]

Safari jsem ověřil. Funguje jak má.

[Robert Krátký]

Zjišťuji zajímavé věci... např. Opera (9) podporuje selektor [atribut*=hodnota], který je ovšem součástí CSS3. To by mě zajímalo, proč nepodporuje ty ostatní. Jenže kdybych ho použil, matchnul by se každý odkaz, který má v URL /slovnik/, což nechci riskovat.

Naopak CSS2 selektor [atribut|=hodnota], který by měl matchnout všechny elementy, jejichž atribut se buď rovná nebo začíná na hodnota, má v prohlížečích FF a Konq. podporu podivnou (Opera nic): když hodnota začíná znakem /, selektor nefunguje. Stačí však, abych zadal hod/nota a už se řetězec matchne. Nevíte někdo, proč to tak je?

[Luk]

To by mě zajímalo, proč nepodporuje ty ostatní.

A nebude to tím, že je to teprve technical preview? Také porůznu používám O9 (tak půl napůl s osmou) a narážím i na jiné problémy. Takže třeba to ve finální verzi bude

[Robert Krátký]

Asi máš pravdu. Mě na tom jen mate skutečnost, že jeden selektor implementovali a druhý ne... přitom jsou ze stejné "sady".

[Robert Krátký]

Narazil jsem na další věc, které nerozumím... Zatím řeším případy, ve kterých nechci, aby se ikonka zobrazovala, pomocí separátní definice (kterou jsem do článku doplnil o něco později):

.st .bez-slovniku a:after, .st a.bez-slovniku:after {
  content:   "";
  margin:    0;
}

Ale elegantnější by bylo to zvládnout všechno v rámci jediné definice. Tj. říci, že ikonka se má zobrazit u všech odkazů, ovšem pouze za předpokladu, že se tento odkaz nachází v elementu, který nemá definovanou třídu bez-slovniku. Mělo by to jít pomocí negační pseudo-třídy, ale nedaří se mi to. Můj zápis by vypadal takto:

*:not([class="bez-slovniku"]) a[href^="/slovnik/"]:after {
  content:   url('slovnik.png');
  margin:    0 0.1em 0 0.2em;
}

Zápis :not([class="bez-slovniku"]) je ekvivalentní k :not(.bez-slovniku) -- dávám ho sem jen pro názornost.

Co by to mělo dělat? Vložit content (ikonku) za každý element a, který má atribut href začínající na /slovník/, a zároveň je jeho rodičem jakýkoliv (*) element, který _nemá_ (:not) definovanou třídu bez-slovníku.

Bohužel to nefunguje.

Princip by však měl být správný, protože např. následující definice už funguje:

p:not(.bez-slovniku) a[href^="/slovnik/"]:after {
  content:   url('slovnik.png');
  margin:    0 0.1em 0 0.2em;
}

Zápisy se liší jenom tím zvýrazněným p, ničím jiným. A tentokrát skutečně dojde k tomu, že je ikonka vložena za každý odkaz, který se nachází v rámci každého elementu p, který _nemá_ třídu bez-slovníku.

Tak čím to je? Proč nefunguje zápis pomocí wildcards, když by měl. Např. následující zápis se chová podle očekávání:

*:not(.bez-slovniku):after {
  content:   url('slovnik.png');
}

Vloží totiž ikonku za úplně každý element, který _nemá_ třídu bez-slovníku. Jakmile ale doplním child element (např. a) a zároveň použiji * a ne konkrétní název elementu (jako v případě p), zápis nefunguje.

[Michal Čihař]

Ikonka se zobrazuje třeba u odkazu na editaci pojmu ve slovníku, jeho tisk nebo zapnutí sledování, tam by asi být nemusela .

[Robert Krátký]

Dík. Opraveno.