Vojtěch Bulant [gwh]

Články označené tagem "css"

Typografie – členění textu

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

zarovnání textu: text-align

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

proklad řádků: line-height

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.

prostrkání: letter-spacing
mezislovní mezery: word-spacing

Ř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).

tučný řez: font-weight
kurziva: font-style
kapitálky: font-variant
verzálky: text-transform
podtržení: text-decoration

Odkazy

přidat do del.icio.us ~ přidat do Linkuj.cz ~ 15 komentářů

Chyba a:hover v IE – jednoduché řešení

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ářů

Pevné versus variabilní rozměry elementů

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ářů

Box-sizing: podpora v prohlížečích (aktualizováno)

Č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 ~ 8 komentářů

CSS a kaskáda

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ářů

« Starší články

Vojtěch Bulant [gwh] tady kdysi něco bylo… :)