Web nevypadá ve všech prohlížečích stejně. Jak to vidí návštěvník a jak kodér?

Nejdříve se podívejme jak vidí Scuk.cz návštěvník s MSIE8:

Vidí vizuální chybu? Dobře, vy byste určitě nějakou našli :), ale návštěvník nebude nad vzhledem webu příliš přemýšlet.

Pohroma ale nastane, pokud se na Scuk podíváte jako webový vývojář. Pak jej vidíte asi takto:

„Vidím chybu! Vždyť ta lišta co vypadá dobře v Chrome, Firefoxu, je v MSIE chybná — kde jsou kulaté rohy, kde gradient na pozadí?!”

Napadlo vás to? :) Pak vítejte ve světě, kde kodéři při ladění webů napříč prohlížeči nevyjí zoufale na měsíc, protože vědí, že web nemusí v každém prohlížeči vypadat stejně.

Kontext „grafického zadání” a citlivost na rozdíly v jednotlivých prohlížečích v jakém my vývojáři posuzujeme vzhled prvků webu je pohledem, kterého se musíme zbavit.

Lidé, kteří naše weby používají, jej neznají. Vzhled prvků webu vnímají v kontextu celého webu. Proč by jim mělo vadit, že lišta nemá kulaté rohy, když náš pohled neznají?

Jednodušší vzhled pro komentáře Disqus

Když jsem naposledy vyráběl vlastní CSS pro Disqus, za dva měsíce chlapci nasadili nové HTML a můj stylopis zůstal osamocený uprostřed webové louky pro srandu králíkům. :-) Říkal jsem si, že už to znovu dělat nebudu.

Jenže potřeba hezkých komentářů zvítězila. Zde tedy přikládám minimalistický stylopis pro aktuální téma Narcissus komentářové služby Disqus. Co přesně umí?

• Vypíná funkce, které pro jednoduché komentářování nejsou potřeba (třeba ty jež souvisejí s komentářovými vlákny)
• Nezobrazuje grafické elementy a efekty, jež nezapadají do každého vizuálního stylu webu (ikonky, kulaté rohy, barvičky)
• Opravuje některé chyby v původním stylopisu

K dispozici také jako gyzd na Githubu.

CSS trik: Element z buňky umístěný mimo pozici tabulky

Aktualizujeme v těchto dnech sekci Cykly a festivaly na webu holešovického kina OKO a objevil se přitom zajímavý kodérský oříšek — jak umístit element nacházející se v buňce tabulky mimo její tělo?

Následuje rozlousknutí. Není to žádná věda a bude to krátké, slibuji.

Cílem je stav viditelný na první obrázku. (Naživo můžete vidět na stránce filmu, teď třeba Muziky.)

Strážce sémantiky obsahu ve mě říká, aby štítek s označením cyklu („Baby Bio”) byl součástí řádku tabulky. Jak ale dosáhnout toho, aby jej návštěvník v prohlížeči viděl umístěný mimo její tělo?

Pomůžeme si absolutně pozicovaným „kotvícím” elementem, který bude v HTML kódu rodičem našeho štítku. Samotný štítek pak relativně napozicujeme do patřičných míst.

Řešení je vizualizováno v druhém obrázku — rodičovský element je modrý (šipka v něm je ilustrační) a náš štítek pak oranžový:

Zjednodušený CSS kód:

.blue {
  position: relative;
  width: 1px;
  height: 1px;
}

.orange {
  position: absolute;
  width: 300px;
  right: -317px;
  top: 5px;
}

Otestováno všude možně — budete si v různých prohlížečích muset pohrát s pozicí, ale principielně funguje i v IE6.

Ještě ke štítkování zastarávajících CSS deklarací

Navážeme na článek ze Zdrojáku a následnou zajímavou diskuzi, kde laskaví čtenáři nalezli několik slabin nabízeného řešení štítkování v CSS pomocí štítku [OBSOLETE?]. Prošel jsem stylopis Scuku a shledal ho nabitým příklady k podrobnější demonstraci nabízené metody.

Pro potřeby článku jsem je zbavil deklarací, která nás v kontextu problematiky nezajímají. Aby to někomu nebylo líto, kompletní nekomprimovaný zdroják scukovského stylopisu přidávám na závěr. .-)

Dejte stylopis pro všechna média do jednoho souboru

Mám rád princip tumblelogu. Skvěle funguje pro šíření myšlenek napříč webem. Do blogu si skrze vlastní ego nikdo cizí nápady neprotlačí. Vzhůru dolů je tumblelog. :-)

Mít blog, nemůžu celý post postavit na myšlence Nicolase Gallaghera…

Don’t see the point of setting media queries in the HTML (on ) when setting them in your CSS file is more flexible and informative.

For example, if I’m editing a CSS file I dont want to have to look at the HTML to find out what conditions result in the use of that CSS.

Furthermore, multi-author maintenance is simplified if using one CSS file (media queries set in the CSS) & performance is improved.

Rough rule: Does it affect the site’s presentation? Does someone editing the CSS need to know this? Yes. Then control it in the CSS file.

…jenže k té myšlence nemám co dodat a tak ji pomocí svého tumblelogu šířím dál. Dobrou noc. :-)