Portál AbcLinuxu, 1. května 2025 09:28
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 :-).
Tiskni
Sdílej:
. I kdyby se hodily, stejně bychom žádnou pravděpodobně na stránky nedali...
).
Mohl :)
.st a[href^="/slovnik/"] {
margin-right: 1em;
}
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.
25.10.2005 14:38
Josef Kufner | skóre: 70
[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?
25.10.2005 21:25
Luk | skóre: 47
| blog: Kacířské myšlenky
| Kutná Hora
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
.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.
.
ISSN 1214-1267, (c) 1999-2007 Stickfish s.r.o.