O kódování nového Mindprintu
Prázdninovým tempem 200 řádků CSS kódu za den pomalu vytvářím k obrazu svému nový Kahi's Mindprint. Pomalu, ač nejde o nic složitého… Klasická funkční šablona, jakou by obdržel kterýkoli platící zákazník, by byla na světě během jedné pracovní směny, ale teď ne, teď se jedná o něco trochu jiného…
S menším zavazadlem se cestuje lépe
Trochu jsem přemýšlel a rozhodl jsem se na to jít trochu jinak. Zaprvé – žádná starost s Internet Explorerem. Jeho užívatelé, tito vybraní návštěvníci, tito vzácní hosté uvidí to, co vidí teď, tedy ne čistou stránku bez stylů, ale něco se tomu hodně blížící. Ještě nemám zcela ostrou představu, ale dal jsem si pro IE-styl limit 6 řádků CSS kódu a to včetně pěkně zformátované chybové hlášky o zastaralém prohlížeči.
Tím, že odpadla starost o zobrazení v IE6 se zároveň uvolnily zcela nevídané možnosti. Možná to není patrné na první pohled, možná je potřeba prvně odhodit zaběhlé zvyklosti, ale když odříznete IE6, zůstanou vám Gecka, Opery a Safari, jo a… teď jsem si vzpomněl na IE7. Bohužel ho tady momentálně nemám k dispozici, a ani ho z hlavy neznám, takže uvidím, jak si s tím kódem poradí. Jestliže se zakucká, já ho po zádech plácat nebudu… Neboli celé spektrum prohlížečů, které jsem označil za relevantní, mi umožňuje používání kompletního CSS2 a možná něco z CSS3, což ale, jestli si dobře vzpomínám, jsou opomenutelné třešničky na dortu.
Opravdu, zkuste si to někdy. Zapomeňte na chvíli na IE6, rozpomeňte se na odložené CSS2.1 selektory a zkuste napsat maximálně čistý, bezstarostně elegantní kód. Není to všelék, ale příjemný hojivý balzám zajisté ano. A připomínám, že nové možnosti v CSS není to jediné, oč tu běží: samozřejmě se zbavíte i starostí a obav z drtivé většiny potenciálních vykreslovacích bugů, jakoby někdo mávl kouzelným proutkem…
Náš dobrman miluje lidi, skutečně!
Mezi těmi všemi postupy a metodami, které jsem se rozhodl na této práci vyzkoušet, se nalézá CSS reset napsaný Andy Clarkem. Když jsem ten kód z webu kopíroval do svého CSS souboru, nijak pečlivě jsem ho nečetl, nezamýšlel jsem se, říkal jsem si, že zajisté ví, co dělá. Tehdy jsem ještě nevěděl, že tohle se prostě nedělá. Nedělejte to.
Nezapojujte do své práce cizí kódy důvěřivě a bezmyšlenkovitě… Můžete si práci přidělat, i když účel, za jakým vy přijímáte a cizinec poskytuje kód, je přesně opačný. Mimochodem takto Andy resetuje CSS: (Kromě CSS reset se používají termíny browser normalizing nebo CSS undoing)
/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }
/* Removes list-style from lists */
ol,ul { list-style : none; }
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }
/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }
/* Removes border from fieldset and img */
fieldset,img { border : 0; }
/* Left-aligns text in caption and th */
caption,th { text-align : left; }
/* Removes quotation marks from q */
q:before, q:after { content :''; }Já osobně neznám důvod, proč nepoužívat hvězdičkový selektor při
nulování okrajů, s jedinou výjimkou, a to když chci vynechat
formulářové prvky. Jak nejspíš víte, právě u formulářových prvků si
odstraněním puddinku naděláte trochu té práce s vracením všeho do
starých kolejí. Hlavně proto jsem se sháněl po odborníkem otestovaným
výčtu značek, které jsou normalizovány jeden po druhém. Bohužel
jsem si při své zbrklosti nevšiml, že Andy tam má mezi nimi i
input.
Dále se podívejte na řádek se strongem:
address, caption, cite, code, dfn, em, strong, th, var { font-style : normal; font-weight : normal; }Prvně pomiňme možnost takového náhledu na věc, že výchozí chování těchto prvků není nijak zvlášť vynulováníhodné, a v případě jejich neutralizace si přiděláváme nutnost jejich nové chování znovu nadefinovat. Neboli ignorujme fakt, že pro většinu z nás jde o zbytečný příkaz.
Zaměřme pozornost na dvojici… em, strong {font-style:normal;
font-weight:normal;}. Zdá se vám to v pořádku? Chvíli
přemýšlejte… Zdá se vám, že prostě odebereme strongu jeho přirozenou
tučnost, a emu navrátíme
standardní sklon? Tak to nám, amatérům, připadá na první pohled a bez
dostatečného přemýšlení.
Nyní je docela pravděpodobně dalším krokem zresetování resetu, tedy navrácení přirozeného chování těchto dvou prvků. Opět, ignorujme, že naše počínání teď působí trochu směsně. Vraťme strongu jeho tloušťku a emu jeho skoliózu!
strong {font-weight:bold;}
em {font-style:italic;}Tak. A je to. Právě jsme si zadělali na další problémy. Pokud jste si tak jako já mylně mysleli, že to projde, tak nikoli. Postačí na důkaz o opaku jednoduchá konstrukce, kombinace.
<p>Tady máš tu knihu, řekl Miller, položil ji na stůl, a zase
odešel. <strong><em>Stařec a moře</em></strong>,
stálo na obálce majestátním...Jak byste záhy zjistili, výsledný trojnásobně zvýrazněný text nebude
vyveden tučnou kurzívou, jak bylo zamýšleno, bude pouze kurzívou. Protože
při resetování nejenže byl emu na navrácen standardní řez, ona
mu byla přidělena i standardní tloušťka. Problém můžete jednoduše
napravit přidělením zděděných (inherit) vlastností, ale to
už je pouze detail, který nikdy neopustí abstraktní sféry vaší mysli,
protože s vědomím, že tento způsob „resetování“ není ideální buď
definice v resetu opravíte, anebo rovnou inkriminovaný řádek smažete.
Myslím, že místa, kde není žádoucí aby zvýraznění bylo vyjádřeno
i vizuálně, je možné v kódu explicitně vyjmenovat a vyhnout se tak
obdobným kolizím v celém dokumentu.
A ty ostatní zvířata?
Je toho víc, ale dnes není možné mluvit o všem, možná zítra. Je víc věcí, co jsem zkusil, zjistil, vykoumal. Například že oddělení prezenční vrstvy od obsahové je nutně do jisté míry utopické klišé – a pokud maximalizujete takzvanou sémantiku HTML kódu až na úroveň jmen tříd, tak se v několika případech pěkně zapotíte a půjdete si vynadat… ale to by asi bylo na delší plkání.
Také jsem zjistil, kde se po několikadenním intenzivním používáním PC bere v mém levém zápěstním kloubu ta bolest. To píchání v konci předloktí, v tom místě, kde měli všichni ukřižovaní (kromě jednoho) zaražené obrovské rezavé hřeby, ta bolest je tam kvůli jedné činnosti, které by se správný muž měl maximálně vyhýbat. Ano, mluvím zde o mačkání složitých klávesových zkratek, obzvláště pak CTRL+Z. Správný muž vše napíše, či udělá správně hned napoprvé a žádné CTRL+Z nepotřebuje, to si pamatujte. Holt, takovýto úraz se vám na anglické klávesnici zaručeně nestane…
Komentáře (16)
k formuláři
RSS kanál komentářů
13.8. 2007 — 3:52
Tvůj blog čtu zásadně v IE6 a musím říct, že v tuto chvíli jde o jeden z nejkrásněji nastylovaných blogů. Takže dodrž své výhružky a na styl pro IE6 už nešahej :-)
13.8. 2007 — 4:58
[1] dgx: → Dgxy, musím se svěřit, že teď vážně nevím, jestli mám vůbec v kódování pokračovat. Nerad bych image tohoto
webuelektronického magazínu nějak poškodil neuvážlivým použitím příliš kalorického king-size CSS…13.8. 2007 — 14:37
Hele Kahi, z Davida si nic nedělej. Mě to taky říkal, když jsem se rozhodla na začátku svýho blogu ostylovat jen do té míry, aby se to dalo číst. Vyřešila jsem to tuším nějak takhle:
Ale teď už to asi nefunguje. Změnil IP adresu. On je takový fiškus.
13.8. 2007 — 14:53
[3] zirafka: → Zdravím zrekreovanou Ž! I když ti to taky osekalo nějaké tagy, přesto vím, co se mi snažíš říct… budu o tom přemýšlet. Skutečně!
13.8. 2007 — 16:22
Kahi, nebud liny a oprav to si to, at se Ti zobrazuji komentare dobre. Jinak Ti sem prestanu prispivat svymi hodnotnymi komentari. Ja vim, ze ta vyhruzka zni lakave, ale jednou by ti to treba mohlo byt lito (-;
13.8. 2007 — 17:01
[5] zirafka: Omlouvám se mnohokrát, mám tady starou rozvrzanou instalaci. Během týdne to trochu pošteluju a pak už by to mělo jet jako po másle. Ale bohužel, z tvého komentáře výše nemohu vydolovat víc, než vidíš, tedy osekalo se to před uložením. Ještě jednou – prosím, omluvte momentální stav. Kahi's mindprint je právě teď under contruction.
13.8. 2007 — 21:41
Dobre Kahi, omlouvam mentalni stav Tveho momindprintu a zkusim sem tu konstrukci, ktera zpusobi Davidovi pri prohlizeni webu tolik blaha, znovu pastnout jinak, lepe a radostneji (-:
<style> <? if ($_SERVER["REMOTE_ADDR"] == "212.80.64.226"): ?> @import "styl_plane.css"; <? else: ?> @import "styl.css"; <? endif; ?> </style>13.8. 2007 — 22:00
A já říkám: nádhera!
14.8. 2007 — 13:45
k IE7 jsem kdysi našla takový renderovací webík, když není přetížený, tak je mnohem lepší než browsercam:
http://ipinfo.info/netrenderer/index.php
tak si to užij a něco hezkého vymysli,
mně se, na rozdíl od dgx, zdá teď mindprint trochu pustý, je to opravdu odraz tvé mysli? :-)
14.8. 2007 — 14:20
[9] SuE: → Ano Sue, opravdu je to odraz mé mysli, jako vždy je kompletní odraz jen a pouze v textu. Kdybych ho reflektoval i do grafiky, tak by jednak nebyly čitelné texty, a druhak by to vůbec nešlo převést do CSS :-).
Původní představa byla taková, že bez stylu to tady bude dva dny… no. Neodhadl jsem to. Na odkaz se mrknu, díky.
16.8. 2007 — 21:12
[...] Jak jsem se již minimálně, přibližně třikrát zmínil, inspirován Kahim jsem se rozhodl udělat alternativní vzhled pouze pro IE, aby i tato většina lidí měla možnost si přečíst blog bez sebemenšího bugu ve vzhledu. [...]
28.8. 2007 — 21:34
[9] SuE: Konečně na to mrkám a … ten IE7 budu muset opravit :-)
28.8. 2007 — 22:24
Technický dotaz – viděls mindprint bez vyhlazeného písma s novými woknofonty? Teď jsem konečně našel přepínač :-)
28.8. 2007 — 22:45
[13] Filosof: Jasně, viděl. Vím, je to trochu mrzutost, ale utěšuju se různými více či méně racionálními argumenty. Mimochodem, neví někdo jestli Vista náhodou nevyhlazuje defaultně?
15.2. 2008 — 16:39
Snad nebude vadit, když zareaguju na starý článek, ale zase jednou jsem sem nakoukl a zjistil jsem, že jaksi Firefox 3.0 má s vykreslováním webu stejný problém, jako IE6, což mi přijde docela vtipné :-)
15.2. 2008 — 19:25
[15] Cobra: – nevadí, díky. Nějaký problém tady byl, jakoby ff špatně rozpoznával konec html komentáře, zvláštní, už by to mělo být ok. U mě je… u tebe?
Update: stáhl jsem si FF3b3 a zdá se to ok… až na nějaké drobnosti které ovšem opět nejsou mojí vinou!
Přidat komentář