Články označené tagem "kódování"
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ářů
Čtvrtek 1. 2. 2007, 4.31 ~
tagy: prohlížeče, kódování, css
V poslední době jsem se rozhodl spasit svůj kód přepínáním
prohlížečů do nestandardního box modelu. Stále jsem se ale nezbavil
podezření, že některé prohlížeče box-sizing neznají.
Vyvedete mě z omylu?
IE jsem do quirku shazoval už dříve, ale moderním prohlížečům jsem
diktoval rozměry podle standardního box-modelu, jak nepraktické.
Internet Explorer
Weby optimalizuji pro IE 5.5 až 7. Internet Explorer shazuji do quirku
a nařizuji mu tak, že má používat nestandardní box model. Paráda.
Mozillácké prohlížeče
Zde je záhodno nařídit prohlížeči pomocí proprietární vlastnosti
-moz-box-sizing, ať počítá rozměry nestandardně. Firefox,
Mozillu, Netscape, Seamonkey, Camino a další odnože Mozilly máme
z krku. Paráda.
Presto, CSS 3!
Opeře (údajně
od verze 7.2, což bohatě stačí) můžeme nařídit nestandardní box
model pomocí CSS 3 vlastnosti box-sizing. IE5/Mac na
box-sizing slyší také. Paráda.
KHTML?
A jak jsou na tom Safari a Konqueror? To by mě opravdu zajímalo,
protože jsem nenašel žádné uspokojivé vysvětlení. Někde jsem četl o
-khtml-box-sizing, ale to se mi zdá dost nevěrohodné. Safari
prý dokonce odmítá spolupracovat se stylopisem, ve kterém začíná
některá vlastnost pomlčkou (např. -moz-box-sizing), ale jen do
té doby, než narazí na středník, zaplať pánbůh.
Vyjadřete se prosím v komentářích, budu vám neskonale
vděčný.
Aktualizováno: Dero to rozsekl.
Safari box-sizing (s)prostě neumí a -khtml- nepřivedl na svět Lukáš Havrlant. Bohužel, Lukáši, zase
si budeš muset na tu Nobelovku o rok déle počkat. 
Takže suma sumárum, IE přepínat do quirku a moderní
prohlížeče stále nechávat ve standardu. Sázka na jistotu.
přidat do del.icio.us
~
přidat do Linkuj.cz
~
5 komentářů
Sobota 6. 1. 2007, 20.52 ~
tagy: kódování, css
Nezkušení kodéři by si měli dát pozor na pravidla
kaskády, protože v ní číhá mnoho nástrah a mohou si tím
natropit dost potíží, o kterých ani nemusí vědět.
Nechci tu rozebírat problematiku kaskády výrazně do hloubky, jen
upozorním na jeden faktor při psaní stylů. Pusťme se do toho.
Při úpravách stylů, které psal někdo přede mnou často narážím na
nejednotnost stylopisu. Podívejte se na příklad: špatná
kaskáda.
Na tomto jednoduchém příkladu jistě vidíte, kde je chyba. První
definice určuje vlastnosti obecně pro každý odstavec v elementu
.post a druhá definice má určovat vlastnosti pro odstavec
s datem a rubrikou. První definice má však vyšší váhu, takže je
upřednostněna před druhou a na odstavec s datem a kategorií nebudou
vztaženy vlastnosti v druhé definici.
Podívejte se, jak to má správně vypadat: správná
kaskáda.
Zde jsou už v druhé definici uvedeny rodičovské selektory a definice
tak získává vyšší váhu než definice pro obecný odstavec.
Z toho vyplývá, že se vyplatí předcházet těmto problémům a
v definicích uvádět všechny rodičovské selektory.
Také je dobré si rozmyslet, zda budete u selektoru třídy a
identifikátoru uvádět značku elementu, protože svůj vliv na určení váhy
definice to taky má. Tzn. jestli takhle: .postmeta
nebo takhle: p.postmeta. Lepší je tyto
dva způsoby v jednom stylopisu nemíchat.
Tyto rady samozřejmě neplatí ve 100 % případů, naopak. Obecné definice
pro odkazy, vodorovné čáry, akronymy, odstavce apod. je dobré uvádět jen
značkou prvku, bez rodičovských selektorů (tzn. a{ … }
hr{ … } acronym{ … }
p{ … }). Já osobně jsem zvyklý psát obecné definice
na začátek stylopisu a v další části, kde už definuji vlastnosti
podle umístění prvků (např. #content h2{ … })
doplňuji obecné definice ze začátku stylopisu o specifické vlastnosti
dle umístění prvku. Naopak na konec stylopisu umisťuji obecné třídy,
které aplikuji na všechny možné elementy v dokumentu (např.
.clear{ … } .hidden{ … }).
Závěr
Příklad, který jsem uvedl je dost primitivní, ale věřte, že při
psaní složitějších stylopisů můžete na zmíněný problém snadno
narazit. Pokud píšete opravdu rozsáhlý stylopis, je to
podle mého názoru nejsložitější problém na odhalení.
Proto se vyplatí držet se určitých pravidel, poctivě přepisovat
rodičovské selektory a stanovit si vlastní
pravidla pro psaní, která vám jej ulehčí.
Pokud se rozhodnete porušit některé z těchto pravidel (např.
některému specifickému prvku, umístěnému hluboko ve struktuře dokumentu
nepředepíšete rodičovské selektory), měli byste bezpečně vědět, co
děláte, jinak si velmi pravděpodobně zaděláte na budoucí
problémy.
přidat do del.icio.us
~
přidat do Linkuj.cz
~
7 komentářů
Středa 1. 11. 2006, 19.33 ~
tagy: prohlížeče, kódování, css, internet explorer
Nedávno jsem řešil problém, jak na jednom počítači provozovat Internet
Explorer 6 a 7. Na Profiblogu jsem si s nadšením
přečetl článek
o IE 6 standalone a jal jsem se ho
stáhnout. Internet Explorer 7 na sebe nenechal dlouho čekat a tak jsem ho
kvapně nainstaloval. Několik dalších dní jsem si mnul ruce, jak se bráškové skvěle doplňují. Byl
jsem rád, že nemusím používat virtualizační nástroje.
Pravda, o jednom záporu jsem věděl. Na nějakém zapomenutém místě
jsem se dočetl, že ve zmíněném
IE 6 standalone nefungují cookies. Ale to pro kodéra není až
takový problém.
Osamostatněný Explorer šestý mi sloužil, seč mu síly stačily. Včera
však začal znenadání plivat krev. Potřeboval jsem pro jeden web vytvořit
soubor s kaskádovými styly zvlášť pro IE 7. Do hlavičky v HTML
souboru jsem pomocí podmíněného komentáře styl přilinkoval a sebejistě
jsem stránku otestoval v IE 7. Voilá, jede to! Pro jistotu stránku
zkusím i v IE 6 a co se nestane. Z nepochopitelných důvodů se
separátní styl aplikuje i zde.
Pro nedůvěřivce, takhle vypadá zmíněný podmíněný
komentář:
Že na něm není nic špatného? Ano, máte pravdu, chyba je někde úplně
jinde. IE 6 standalone se totiž hlásí jako IE 7 (pokud máte IE
7 nainstalovaný, jinak se bude pravděpodobně hlásit jako verze IE,
kterou máte nainstalovanou ve Windows), takže si vesele přečte podmíněný
komentář a použije jeho obsah.
Zde je ukázka: http://www.bulant.cz/...e7condcomms/
poznámka:
Tento neduh jsem odhalil u zmíněné
verze IE 6 standalone, je tedy možné, že jiná verze se bude hlásit
správně jako IE 6. Za jakou verzi se IE považuje zjistíte v nabídce
nápověda (help) → o Internet Exloreru (about Internet
Explorer).
Aktualizováno:
Bohužel se jako IE 7 hlásí i ostatní verze IE
standalone, u mě jsou to standalone verze, které jsou na CD, dodávaném
s knihou CSS: Hotová řešení. Takže to bude globální chyba, všechny
standalone se prostě identifikují jako primární nainstalovaný IE, což je
dost závažný problém.
Aktualizováno podruhé:
Moje domněnka nebyla tak úplně správná.
Od Dera jsem se dozvěděl, že se
všechny verze IE standalone hlásí jako ta verze, která je udána
v registrech. Takže se všechny standalone budou v jednom okamžiku
hlásit vždy jako jedna verze.
Aktualizováno potřetí:
Výtah a překlad řešení
najdete u Toma
Adamce.
přidat do del.icio.us
~
přidat do Linkuj.cz
~
7 komentářů