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

Manuál stylopisů (a jednoduchost CSS můžeme zase chválit)

Jak se ve změti CSS pravidel webového projektu dobrat systému, který bude snadno přenositelný na jiného člověka? Jak to udělat s technologií, jejíž esencí je jednoduchost? Supergeeky proklínaná a amatéry zbožňovaná vlastnost kaskádových stylů.

Jednoduchost technologie špatný kód neospravedlňuje

„Ach, kdyby jen specifikace CSS obsahovala proměnné!” a další geekovské povzdechy si můžeme odpustit, protože a) právě teď nic takového CSS neobsahuje a b) není jisté, že by to CSS bordelářům skutečně pomohlo. Myslím si, že jednoduchost je velmi dobrá vlastnost jakékoliv technologie, CSS nevyjímaje.

Hezky to dříve popsal Honza Sládek, takže pro argumenty zajděte k němu. My můžeme pokračovat směrem k návrhu řešení palčivé otázky.

Jak z jednotlivých opakujících se pravidel extrahovat informaci o typech písem, barvách či layoutu obecně používaném na webu tak, aby stylopisy splňovaly alespoň základní parametr udržovatelnosti — že jim bude rozumět sám autor, když se ke své práci za tři měsíce vrátí?

Jelikož se snažím se upřednostňovat jednoduchá řešení a vyhýbat se vrstvení technologií, z našich úvah vyřazuji CSS preprocesory jako LESS, čímž ale neříkám, že pro ně nevidím uplatnění.

Poněkud tupý, přesně takový jaký jej chceme — manuál stylopisu

Po mnoha pokusech se mi nakonec obrovsky osvědčila úplně nejtupější varianta — manuál v externím souboru. V adresáři se stylopisy u každého svého projektu najdu soubor README.txt, ve kterém všechny potřebné informace jsou. Kdykoliv pak na webu vytvářím nový prvek, podívám se sem a zjistím jaké by měl mít vlastnosti.

Obsah manuálu

Pojďme se podívat co takový manuál stylopisu může obsahovat.

• Kontakty na autora
• Seznam souborů a jejich obsah
• Písma a jejich varianty 
• Index z-indexů
• Barvy a jejich varianty
• Rozměry opakujících se prvků laoyutu
  

Než plýtvat detaily, odkážu vás na tři své manuály stylopisu, které jsou součástí projektů vyrobených v Shortcat studiu.

BioOKO Pražské jaro Hipposdesign.com

Jedna část manuálu tedy nahrazuje velmi málo se vyskytující manuály designu a také vizuální identity. Další část supluje nedokonalost CSS jako technologie — například pro varianty barev  budeme moci brzy začít široce využívat RGBa. Index z-indexů a varianty písem zase sjednocují na jedno místo informace, které bývají rozptýlené po různých pravidlech ve stylopisu.

Manuál stylopisu v žádném případě nenahradí dobře organizovaný, komentovaný a srozumitelně psaný CSS kód. Přidává vrstvu abstrakce, kterou kaskádové styly neumožňují.

Milí čtenáři, více než jindy zde ocením váš feedback a vlastní zkušenosti se správou CSS.

„Ne, web nemusí vypadat stejně ve všech prohlížečích” a jak to vysvětlit klientovi?

Client: “I saw the design on Sam’s IE7 today and she doesn’t see the rounded corners or shadows. Can IE not ‘do’ those?”
Me: “No. IE uses very old technology. I can hack the site to use lots of images and other things, but that will likely slow the site down for everyone. Plus it means that I will tie the HTML to the visual layout, making the site less flexible (and expensive) to update in the future. It’s your choice, you’re paying. You can either spend my time and your money on hacks for a diminishing return, or we can spend it on making more cool functionality. What’s it to be?”
Client: “Let’s do the cool stuff.”

Obhájce myšlenky “ne, web nemusí vypadat stejně ve všech prohlížečích” Andy Clark ve svém výborném komentáři pod vlastním výborným článkem na 24 ways dodává příkladným interview s klientem odvahu všem kodérům dosud váhajícím před progressive enhancement metodou.

Názvy tříd v CSS a přehnaná láska k sémantice

„Sémantický web” je prý v kolizi s pojmenováváním tříd v CSS podle vzhledu prvku. Vážení sémantičtí maniaci, ukážu vám případ kdy vaše náboženství neplatí.

Cituji z článku Roberta Nymana o objektovém CSS:

As you might be aware of, using good semantics is very important to me, and when it comes to both elements being used as well as the naming of CSS classes, I believe it should contain a meaning for what it will contain. OOCSS contains class names like .leftCol, .rightCol, .body, .h1, .h2 etc. And to me, and what I believe is to be in line with the notion of the semantic web, is that one of the fundamentals with CSS class names is to not use class names which describes the actual presentation/layout, but rather what it will contain.
…
But, I suggested using other names that would have more meaning and be easy to understand at the same time, like .main-heading, .complementary etc. The reply I got was that she had tried it, but “It was too hard for people to remember it”. And that I’m mot just buying. Sure, .rightCol might be a tad easier to remember, but just going the easiest route time doesn’t always make it right.

Všimněme si, že autoři se při argumentaci k používání obsahově popisných názvů tříd zaštiťují správností a odkazem na sématických web. Ale co je správné, pro koho a v jaké situaci, že?

Myšlenka sémantického webu — jako světa kde stejný typ informací je stejným způsobem označen — je samozřejmě ve velkém množství situací užitečná. Musí ale usnadňovat orientaci v kódu za účelem pochopení obsahu nejen strojům, ale především lidem.

Nicolle Sullivan, autorka OOCSS, se rozhodla, že názvy tříd v jejím CSS frameworku budou blíže vizuálnímu vnímání (říká hezky „vizuální sémantika”) než klasicky vnímané sémantice obsahové. Tedy .leftCol raději než .complementary.

Být autorem CSS frameworku — tedy technologie jejíž použití vnímám nikoliv univerzálně, ale velmi specificky — rozhodnu se stejně.

Argumentem mi bude právě čitelnost a zapamatovatelnost. Vždyť jak jinak bych chtěl svůj framework rozšířit mezi lidi! Jak jinak bych chtěl, aby jej bez manuálu v knižním vydání a vyfintěných PDF-taháků na populárních webdesignérských serverech používal také někdo jiný než autor sám?

V HTML/CSS kódu psaném na míru obsahu dávám vždy přednost pojmenování tříd takovému, aby co nejvíce odpovídaly významu obsahu, ale v konkrétních případech je lepší dát přednost popisu vizuální prezentace.

Nedělejme ze sémantiky univerzálně platné náboženství. Žádné takové neexistuje ani ve webdesignu.

Tisknout vlastní fonty z webové stránky? S @font-face zatím ne

Když potřebujete tisknout jinými než systémovými fonty, máte problém. Včera jsme si o tom vyměnil pár tweetů s @hasmanm, @honzasladek a @atpok.

Krásně se sice nabízí čerstvá modla webových typografů, @font-face, ale zdá se, že pro tisk vlastních fontů má tahle technologie má nejlepší léta ještě před sebou.

Udělal jsem dneska komplexnejší test na OpenType.info demostránce. Vše na Windows XP:

• Firefox 3.5.5 — vlastní fonty tisknout nelze a asi ještě chvíli nepůjde (viz Martinův tweet) namísto fontu definovaného ve @font-face tiskne systémový
• Opera 10.01 — tiskne stejně hezky jako zobrazuje
• Safari 4.0.4 — na místě, kde mají být @font-face písma, netiskne vůbec nic!
• Chrome 3.0 — @font-face zatím vůbec neumí

Na této testovací stránce pak můžeme vyzkoušet jak jsou na tom v Redmondu:

• IE 7 + 8 — fonty vkládáné jejich technologií EOT tiskne krásně

Vidíme tedy, že mimo Operu a Internet Explorer jsou minimálně na Windows prohlížeče zatím neschopné tisknout jinými než v lokálním operačním systému instalovanými fonty.

Kdo máte možnost vyzkoušet prohlížeče na Macu, napište prosím do komentářů.

Legrace, že obecně se má za to, že s @font-face lze vlastními fonty tisknout krásně. Kromě nevyhlazování písem na systémech bez antialiasingu se zdá, že se jedná o druhý výrazný nedostatek téhle výborné ale zatím k masovému nasazení nezralé technologie.

Lepší být první než poslední (CSS třídy .first a .last v praxi)

Třídu .last používá mnoho kodérů (a CSS frameworků) pro označení posledního prvku řady, který má nést odlišné vlastnosti.

CSS:

.column
{
   float: left;
   margin-right: 20px;
   width: 300px;
}

.last
{
   margin-right: 0;
}

HTML:

<div class="column">...</div>
<div class="column">...</div>
<div class="column last">...</div>

Není to ale nejlepší nápad. Představte si, že HTML kód bude velmi strukturovaný nebo prvků třídy .column desítky. Pak si představte, že takhle složitý kód psal někdo jiný a že se jej snažíte pochopit.

Odlišovací třídu na prvku posledním najdete mnohem hůře než na prvku prvním.

Doporučuji proto výjimky vždy přidávat na první prvky pole. Tedy v HTML:

<div class="column first">...</div>
<div class="column">...</div>
<div class="column">...</div>

Namísto třídy .first si do úvahy samozřejmě klidně dosaďte standardní pseudotřídu :first-child, pokud se nekamarádíte s IE6.