Ikonka pro pojmy ve slovníku a podpora CSS3

25.10.2005 11:27 | Přečteno: 1500× | Abc | poslední úprava: 25.10.2005 21:37

Konečně jsem se dostal k tomu, abych nakreslil malinkou ikonku, která by označovala odkazy na pojmy ve slovníku. Doufám, že je rozpoznatelné, co obrázek () značí (je to knížka, přece..., neříkejte, že to není poznat...). Řekl bych, že i s černým pozadím vypadá obrázek obstojně, takže jsem nedělal dvě verze zvlášť pro světlý a tmavý styl. Kdyby měl někdo nutkání obrázek vylepšit nebo vyrobit úplně nový a lepší, nebudu se vůbec zlobit.

CSS definice:

Vložení ikonky za každý odkaz na pojem ve slovníku jsem řešil atributovým selektorem ([href^="/slovnik/"]) a pseudoelementem :after. Vzhledem k tomu, že MS IE ani Opera (včetně vývojové verze Opera 9.0) první definici nepodporují (jde o CSS 3), uvidíte ikonky pouze v Konqueroru a Firefoxu/Mozille. Safari nemám možnost otestovat, ale předpokládám, že by to už umět mohl. Současný kód vypadá takto (doplňte do alternativních CSS):

.st a[href^="/slovnik/"]:after {
  content:   url('/images/site2/slovnik.png');
  margin:    0 0.1em 0 0.2em;
}

UPDATE:

Doplnil jsem následující definici, aby bylo možné zobrazování ikonek vypnout (jak v rámci většího elementu, tak u jednotlivých odkazů). Uvědomil jsem si, že je něco takového potřeba, když jsem se podíval na seznam všech termínů na adrese www.abclinuxu.cz/slovnik - bylo tam krapet přeikonkováno.

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

(Tj. všechny odkazy, které ukazují na relativní URL začínající na /slovnik/, budou mít za sebou zobrazenou ikonku. Viz třeba článek Rozhovor: Petr "Pasky" Baudiš - ten je se slovníkem štědře prolinkovaný.)

Nelíbí se mi na tom jen to, že při použití :after/:before nelze určit vertikální zarovnání/polohu (pokud se pletu, opravte mě, prosím). Ikonka tedy není zarovnaná s vrchním okrajem písma, což jsem původně chtěl. Teď vypadá prostě jako podivné písmenko umístěné v jedné rovině s ostatním textem. Vertikální zarovnání bych mohl vyřešit, kdybych pro zobrazení ikonky použil background-image místo :after, ale takový zápis se mi líbí daleko méně. Nehledě na to, že bych pak nemohl specifikovat požadovaný odstup ikonky od textu odkazu. Definice by vypadala takto:

.st a[href^="/slovnik/"] {
  background-image:    url('/images/site2/slovnik.png');
  background-position: top right;
  background-repeat:   no-repeat;
  padding-right:       12px;
}

Poznámka k MS IE a Opeře:

Nejsem samozřejmě nadšený z toho, že naše CSS nefunguje se stejným výsledkem ve všech běžně používaných prohlížečích. Ale snažím se držet zásady "funkční všude, 100procentní v těch dobrých". Věřím, že Opera v dohledné době podporu implementuje, nad IE lámu hůl. Možná bychom mohli někam do rohu stránek šoupnout to logo Too Cool for IE :-).

       

Komentáře

[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.