Pixy: CSS blog

To se mi to pěkně sešlo. Jednak jsem dnes konečně dodělal vlastní bloggovací systémek (Bloxxy) a hned nato jsem zjistil, ze už mi vyšla knížka o CSS. Hurá, konečně budu mít kam odkazovat všechny, kdo se mně ptají na nějaké problémy s CSS :)

Takže: CSS Kaskádové styly - Kompletní průvodce je na světě!

Marek v SVS odkazuje na údajně originální Gillespieho řešení vertikálního centrování. Že se seknul Marek, nic ve zlém - nemůžu po něm chtít, aby do detailu zkoumal každý zdroják, který potká. Ale seknul se hlavně Gillespie. Když to vezmu postupně (od konce):

• vertikální centrování - finta spočívá v tom, že prvek tvořící obsah stránky je posunut o 50 % dolů (na středu body tedy leží jeho horní hrana) a následně je záporným marginem pozvednut o polovinu své (odhadované!) výšky. Když si na té jeho ukázce řádně zvětšíte písmo, uvidíte to sami (v MSIE/Win to asi nepůjde, velikost písma je v px). Taky by stačilo změnit velikost okna tak, aby se text přelomil do více řádek. Nejde tedy o centrování, ale jen o jakési pseudo-centrování při dané velikosti písma a rozměrech okna (Gillespie asi dobře věděl, proč použil font-size v px a velmi krátký text :)
• řešení - ve Strict módu to moc fungovat nebude. Hack spočívá v nastavení top:50%, tedy procentním posunu závislém na výšce body. Což mlčky předpokládá, že výchozí hodnotou rozměrů (kořenových prvků body/html) je rozměr okna. Podle specifikace CSS však prohlížeče rozměr okna za výchozí pouze mohou použít, rozhodně nemusí. A taky to všechny nedělají - v některých je výchozí hodnotou prostě 0. A 50 % z nuly je zase nula. Každý si může zkusit, co to udělá při striktní DTD v Mozille či MSIE5/Mac.
• originální - viz tento blog 30.10.2002. Ale já zmíněný postup aspoň uvádím jen jako polo-hack (semi-hack), který není tak úplně košer.

Vadí mi, jak neustále všichni skuhrají, že není žádný skutečný wysiwyg editor vzhledu stránek. Mně to taky vadí, dokonce moc - svého času, blahé paměti, jsem nedal dopustit na Golive (tehdy ještě Cyberstudio, nyní Adobe), pak mi přestalo stačit a zkoušel jsem si chvíli hrát s Dreamweaverem. Oba skončily v koši - mají neuvěřitelné množství Opravdu Vymyšlených Ohromujících Funkcí, ale pořádnou a už vůbec ne validní stránku z nich nedostanete. Jó, tak rozřezat návrh z Photoshopu do tabulek, na to jsou experti, ale co třeba předvádí Golive s CSS, je skoro na žalobu proti lidskosti...

Ale jsem skálopevně přesvědčen, že opravdu wysiwyg editor se dá udělat, jen chtít. Aby to byl stoprocentní wysiwyg, musí běžet přímo v prohlížeči - proč ho tedy nevytvořit jako server-klientskou aplikaci (třeba PHP+Javascript). Zkusil jsem během odpoledne udělat jednoduchý nástin, jak by takový editor mohl fungovat (http://pixy.cz/webedit/). Zatím žádný zázrak, odladěný jen v Mozille (nevím, co to dělá v MSIE/Win), pracující na jediné demo stránce a editující jen několik málo základních vlastností CSS... Ale funguje to a myslím, že by se z toho dal vytvořit plně funkční opravdu wysiwyg editor stránek. Kdyby se našel někdo, kdo by měl chuť a sílu se pustit do takového projektu, ať se mi ozve.

Vedlejším efektem takového editoru je mj. i to, že vychází z čisté, základními značkami HTML strukturované stránky, takže nutí autora vytvořit nejprve dobrou strukturu, validní dokument a stránku, která bude fungovat v každém prohlížeči bez všech speciálních fíčurek. A vzhled se pak dělá zvlášť, až je základní dokument hotový. A to se mi na tom líbí nejvíc. Ostatně rozdělený, modulární editor je mým snem už několik let; tak by totiž měla vypadat ideální aplikace typu MS Word. Zvlášť sekce pro psaní textu - úpravy textu a korektury - připojování objektů - formátování textu - pokročilé DTP funkce; vše samostatné nezávislé moduly, co nepotřebuju, je vypnuto. Kdo chce jen psát text, měl by jednoduchý, ale chytrý editor, který by neobtěžoval nepřehledným kvantem nepotřebných funkcí... Stejně si myslím, že průměrný uživatel Wordu 70-80 % jeho funkcí nikdy nepoužije. Ale to už je jiné téma...

Tenhle online editor by mohl nabídnout hodně. Kompletní CSS 1 i 2, včetně přednastavených sad hodnot na výběr,vysvětlivky, popisy a informace o podpoře té které vlastnosti v jednotlivých prohlížečích; připravené sady vlastností, které lze pouze editovat (chcete, aby vaši redaktoři mohli na stránce nastavit třeba jen velikost písma v procentech, barvu pozadí a textu [z pěti předvolených hodnot] a řekněme obtékání obrázků, a to jen v oblasti stránky #clanek? Stačilo by poskytnout jim jen takhle omezený editor s připravenými povolenými hodnotami a selektory...) Jen kdyby se do toho chtěl někdo pustit - obávám se, že na takový projekt nemám ani čas, ani server, na kterém by taková služba mohla běžet :( Nuž, třeba se někdy někdo najde...

Moderní prohlížeče používají určení typu dokumentu (doctype sniffing) k odlišnému přístupu ke starším a novějším verzím jazyků (X)HTML. Podle použitého typu dokumentu pak aktivují jeden z režimů, v nichž mohou pracovat, a zpracují dokument (stránku) buďto zastaralým, ale kompatibilnějším způsobem (nestandardní, quirk režim) - anebo s maximálním dodržováním nových standardů (standardní režim). Více v samostatném článku.

Kurzory v CSS

Celkem často se stále setkávám s nastavováním kurzoru nad prvkem pomocí Javascriptu a jinými, ještě obskurnějšími metodami. Je to zcela zbytečné a neefektivní, vše může zařídit CSS. Pokud se má nad prvkem změnit kurzor a poukázat na to, že na prvek lze kliknout, stačí mu nastavit ve stylu cursor:pointer. Tato definice zajistí, že kurzor bude všude normální, jen v prostoru nad prvkem se změní na kurzor používaný pro odkazy (obvykle ruka s napřaženým prstem). Po opuštění jeho prostoru se vrátí zase do normálu.

MSIE ve Windows ale z jakýchsi důvodů tento standardní typ nepodporuje a místo něj používá vlastní výmysl hand (který nefunguje nikde jinde). "Naštěstí" má MSIE ještě jednu chybu, a to špatné zpracování pravidel CSS. Dá se toho využít pro malý hack, který zajistí stejný "ukazovací" kurzor ve všech prohlížečích: {cursor:pointer;cursor:hand}. Je nutno dodržet toto pořadí, opačné fungovat nebude. Toto pravidlo můžeme otestovat na příkladě: tento text má cursor:pointer;cursor:hand a naopak: tento text má cursor:hand;cursor:pointer

S ostatními typy kurzorů, které CSS používá, už problémy obvykle nebývají. Pouze musíme pamatovat na to, že kurzor určitě nebude vypadat všude tak, jak ho vidíme na svém počítači. Vzhled kurzorů poskytuje operační systém a každý je zobrazuje jinak. Např. help se někde zobrazí jako šipka s malým otazníkem, jinde jako velký otazník, jinde zas jako komiksová bublina atd. A vůbec největší rozdíly jsou v kurzorech typu nw-resize,se-resize atd. - ty vypadají na každém OS úplně jinak.

P.S.: Ach ten stress. Samozřejmě jsem ty definice hand-pointer napsal opačně - takže se omlouvám všem, kteří si to stihli přečíst ještě před opravením a pochopitelně jim to nefungovalo. Teď už je to správně.

Přesouvám sem upravený seznam definic písem pro CSS. Jen jsem ho trochu aktualizoval a doladil. Uvádím zde definice písma vhodné pro použití v CSS na českých (resp. středoevropských) WWW stránkách. Zvýrazněné položky jsou pro bezchybnou funkčnost nezbytné, ostatní lze vynechat. Pořadí se musí dodržet, názvy písem obsahujících mezeru musí být v uvozovkách (jednoduchých nebo dvojitých). Proč to musí být právě takhle, podrobný popis a další detaily se dočtete v Knize (stay tuned!).

bezpatkové

font-family: sans-serif;

patkové

font-family: serif;

neproporciální

font-family: monospace;

Arial

font-family: "Arial CE", "Helvetica CE", Arial, helvetica, sans-serif;

Verdana

font-family: "Verdana CE", "Arial CE", "Lucida Grande CE", "Helvetica CE", Verdana, Arial, lucida, sans-serif;

Tahoma

font-family: "Tahoma CE", "Arial CE", "Helvetica CE", Tahoma, Arial, lucida, sans-serif;

Times New Roman

font-family: "Times New Roman CE", "Times New CE", "Times CE", "Times New Roman", times, serif;

Courier New

font-family: "Courier New CE", "Courier CE", "Courier New", courier, monospace;

Georgia

font-family: "Georgia CE", "Times New CE", "New York CE", "Times CE", Georgia, times, serif;

Impact

font-family: "Impact CE", "Arial CE", "Techno CE", "Helvetica CE", Impact, lucida, sans-serif;

Comic Sans MS

font-family: "Comic Sans MS CE", "Arial CE", "Sand CE", "Helvetica CE", "Comic Sans MS", lucida, fantasy;

Jedním z nejčastějších problémů, který řeší webdesigneři začínající s CSS, je problém zarovnávání. Zkusil jsem v jednom článku shrnout vše o zarovnávání prvků pomocí CSS. Najdete zde nejen popis všech možných variant zarovnávání a také malý hack na svislé zarovnání bloku uvnitř jiného bloku.