Pondělí 26. 3. 2007, 1.06 ~
tagy: jen tak
Nedávno jsem narazil na špatnou interpretaci selektorů v IE. Jde
o velmi nestandardní situaci, která v praxi snad ani nemůže
nastat.
Konkrétně jde o tento zápis:
#nejake_id#nejake_jine_id { vlastnosti }
Podívejte se na příklad.
Problém sleduji v IE 7 (quirk), IE 6 (oba režimy), IE 5.5, IE 5. Chyba
se projevuje i v ekvivalentní deklaraci s použitím tříd. Takřka
jistě se bude projevovat i v dalších podobných případech.
Na problém jsem narazil, když jsem mezi oběma identifikátory
zapomněl mezeru a IE zápis interpretuje (naoko), jako by tam mezera byla. Viz
níže a v komentářích.
IE zápis chápe, jako by mezi oběma identifikátory byla
mezera.
IE aplikuje vlastnosti až na poslední identifikátor v deklaraci,
předchozí si odmyslí.
Na tento problém jsem narazil čirou náhodou a chtěl bych vás požádat
o odbornou konzultaci.
přidat do del.icio.us
~
přidat do Linkuj.cz
~
11 komentářů
Čtvrtek 1. 3. 2007, 14.25 ~
tagy: o webu, css, typografie
Typografie je, přes množství článků a webů, které se jí
věnují, často opomíjenou webovou disciplínou. Článek shrnuje stručně a
snad i srozumitelně základní typografické zásady a jejich aplikaci na
webu.
Zarovnání textu
Webdesignéři často řeší otázku, zda text zarovnat vlevo na praporek
nebo do bloku. Text, zarovnaný na praporek je lépe čitelný.
Text, zarovnaný do bloku působí mnohdy
estetičtěji. Pokud chcete zarovnávat do bloku, měli byste
mít dostatečně široký blok s textem, aby nevznikaly příliš
nekonzistentní mezislovní mezery. Text můžete zarovnat ještě na střed
nebo doprava na praporek.
Členění a oddělování odstavců
Pro vizuální členění odstavců existují dvě základní metody.
Odsazení prvního řádku a horizontální mezera mezi
odstavci. Pro dobrou čitelnost je vhodné na webu používat mezery
mezi odstavci. Odsazením prvního řádku nic nezkazíte. Já používám obě
metody zároveň. Odsazení prvního řádku by se mělo pohybovat mezi jedním
až třemi čtverčíky (osobně bych spíš doporučil jeden a půl až tři
čtverčíky: 1.5–3em). Jeden čtverčík je ekvivalentní k šířce
velkého písmene M. Pokud odsazujete první řádky, můžete odsazení
vynechat u prvního odstavce článku nebo u prvního odstavce za
nadpisem.
- odsazení prvního řádku: css vlastnost text-indent
- pro mezeru mezi odstavci se používá zejména vlastnost margin
Proklad řádků
Proklad určuje vzdálenost mezi dvěma řádky textu. Pro
lepší čitelnost běžného textu jsou vhodné hodnoty kolem jednoho a půl
čtverčíku. Velikost prokladu ale záleží na konkrétním textu, velikosti
písma a dalších faktorech. Například u seznamů používám často
větší proklad pro znatelné oddělení jeho položek.
Prostrkání a mezislovní mezery
Pro zvýraznění textu nebo pro zlepšení jeho čitelnosti se používá
prostrkání. Jde o rozšíření mezer mezi jednotlivými
znaky. Obecně nelze říct, kdy ho použít a jak. Jako příklad
mohou posloužit tučné nadpisy, u kterých se text slévá do sebe
(např. font impact). S prostrkáním by se mělo zacházet velmi jemně,
méně znamená obvykle více.
Strukturu textu ovlivňují i mezislovní mezery, do kterých obvykle
není potřeba zasahovat.
Řezy a zvýrazňování textu
Pro zvýraznění textu se používá několik řezů písma. Jde o řez
tučný, kurzivu,
podtržení, kapitálky (snížené verzálky)
a verzálky (velká písmena). Text můžete zvýraznit také
barvou, nejlépe v kombinaci třeba s tučným řezem.
S kapitálkami zacházejte velice opatrně, aby příliš nenarušily
konzistenci textu. Verzálky se hodí např. pro nadpisy.
Podtržení by se mělo na webu používat jen a pouze
u odkazů. Pokud zvýrazňujete nějaký výčet prvků,
zvýrazněte pouze prvky. Interpunkční znaménka, která prvky oddělují,
nezvýrazňujte (viz druhá věta tohoto odstavce).
Odkazy
přidat do del.icio.us
~
přidat do Linkuj.cz
~
15 komentářů
Neděle 18. 2. 2007, 6.01 ~
tagy: kódování, css, internet explorer
Při tvorbě horizontálního menu se často používá seznam odkazů,
kdy se jednotlivé položky seznamu nechají „plavat“. Ovšem pozor
na to!
Mějme jednoduché menu jako seznam:
<ul>
<li><a href="#">odkaz</a></li>
<li><a href="#">odkaz</a></li>
<li><a href="#">odkaz</a></li>
<li><a href="#">odkaz</a></li>
</ul>
Menu naformátujeme tímto stylopisem:
li{ float: left; display: inline; }
a{ display: block; padding: 20px; margin: 0 5px; background: #ccc; }
a:hover{ background: #999; }
Nebo se podívejte na připravený
příklad.
A máme jednoduché horizontální menu. Zkuste si ho otestovat
v IE 6, 5.5 nebo 5. Jak vidíte, hover efekt
se aktivuje až po najetí na text odkazu, nikoli po najetí kamkoli na
oblast odkazu. Jinými slovy: IE sice padding odkazu vykreslí, ale
z nějakých důvodů ho nechápe jako jeho součást.
Jak na to?
Jednoduše. Upravíme stylopis (místo položky seznamu necháme
„plavat“ samotný odkaz):
li{ display: inline; }
a{ float: left; display: block; padding: 20px; margin: 0 5px; background: #ccc; }
a:hover{ background: #999; }
Připravený
příklad
A vidíme, že už je vše v pořádku.
Je možné, že jsem objevil Ameriku, ale snad řešení nikoho neurazí
a poslouží zadost.
přidat do del.icio.us
~
přidat do Linkuj.cz
~
16 komentářů
Sobota 10. 2. 2007, 4.38 ~
tagy: kódování, css
Dost často mě udivuje, kolik dobrých webů zapomíná na to, že když
si někdo zvětší písmo (nebo ho má prostě v prohlížeči nastavené
větší), pozadí některých elementů zůstane na svém místě jako
přikované, kdežto písmo si vesele přeteče přes okraj elementu.
V praxi se jedná o různá tlačítka a okénka
s jiným, než obdélníkovým tvarem – zejména
s kulatými růžky nebo složitějším pozadím.
Častým neduhem je také hlavička webu s fixní
výškou. Někteří webdesignéři jsou na to prostě zvyklí.
Řešení je přitom prosté. V případě hlavičky například vytvořit
pozadí vyšší, než bude ve skutečnosti vidět. Pozadí se tak bude při
větším písmu pouze odkrývat. Stejně jednoduše lze řešit ostatní
elementy se složitějším pozadím. Pokud se jedná o elementy
s kulatými růžky nebo obecně s nestandardním tvarem, situace se
mírně komplikuje.
Obecně lze říci, že pro každý nestandardní okraj, který se
má roztahovat (kulatý či zkosený růžek, atp.),
potřebujeme jeden prvek navíc. Tím může často trpět
sémantika. Já si ale myslím, že je lepší vytvořit komfortní web, který
se nerozpadne při zvětšení písma a jehož design bude v rozumných
mezích stále stejně krásný. A když správně zvolíme pomocné prvky,
můžeme stále mluvit o sémantickém webu. V rozumných mezích,
samozřejmě. 
Kde je chyba?
Takže dost keců, vizte příklad,
který je špatně. Box má definované jediné pozadí a fixní
výšku i šířku. Při zvětšení písma text
přeteče.
Řešení
Nyní správný
příklad. Box má definovanou pevnou šířku a nemá definovanou
výšku. Pozadí se skládá ze dvou částí
– horní je vysoká 1000 pixelů, to stačí pro značně zvětšené
písmo. Dolní část pozadí je vysoká tak, aby pokryla spodní kulaté
růžky. Pokud máte pozadí, které se opakuje, je vhodné udělat si vrchní a
dolní kulaté růžky inverzně (v mém případě by to bylo bílou
barvou) a celému obalovému prvku (zde div) nastavit opakující se pozadí,
potom nemusíte dělat jeden díl pozadí příliš veliký (tím se zmenší
jeho datová velikost a sníží se doba načítání stránky). Tímto
způsobem by šel řešit i můj příklad. Jak vidíte, písmo se
dá dostatečně zvětšit a pozadí elementu se příjemně roztahuje
podle jeho obsahu.
Jak už to tak bývá, může nastat situace, kdy pevné rozměry definovat
musíte nebo by řešení s variabilními rozměry bylo příliš
složité. Potom se nedá nic dělat a je vhodné nastavit prvku dostatečné
rozměry, aby jeho obsah nepřetekl i při sebemenším zvětšení
písma.
přidat do del.icio.us
~
přidat do Linkuj.cz
~
5 komentářů
« Starší články