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

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.

Vývojáři, zatím to na WebNode nezkoušejte

Kodére, bacha na WebNode. Snahu o implementaci vlastních šablon napsaných od nuly do WebNode hodnotím jako odvážný pokus skočit proti proudu času ve vývoji online redakčních systémů.

S podporou WebNode (díky!) se po několikatýdenní výměně informací nepodařilo nastavit naše HTML/CSS/JS soubory tak, abychom klientovi poskytli luxus ovládání jeho webu z uživatelsky přívětivého prostředí.

WebNode je skutečně výborný systém, pokud jej chcete využívat k publikování. Myslím, že je to výrazně lepší volba než zmiňovaný LightCMS. Když se spokojíte s galerií jejich vzhledů anebo některý z nich umíte jednoduše upravit, je to pořád správná volba. Dokud v brněnském WestComu neudělají podporu pro vývojáře (časem prý bude), nezkoušejte nic jiného.

Douglas Bowman, Button Design Lead v Google

Douglas Bowman píše o redesignu googlovských tlačítek pro GMail.

Budu trochu drzý. Jak moc bere Google vážně design uživatelského rozhraní, když šéf jeho designérů se zabývá technickým řešení tlačítek?

MSIE Bug: Absolutní blok umístěný před float blokem se nezobrazuje

Dnešní potíže s Internet Explorerem. Mám tento kód:

<div style="border: 3px solid red; position: absolute; top: 60px; left: 8px;">                   
 1) Absolutně pozicovaný blok (V MSIE chybně neviditelný)
 </div>  

 <div style="border: 3px solid green; float: left;">
 2) Float blok
 </div>

 <div style="border: 3px solid blue; clear: left; height: 1px;">
 3) Čistící blok s výškou 1px
 </div>

První blok (červený) v IE 6 ani 7 neuvidíte. Online v tomto souboru.

Umoudří se ale, když:

• třetímu čistícímu (modrému) bloku nenastavíte 1px výšku
• absolutně pozicovaný (červený) blok umístíte až za čistící blok
• mezi absolutně pozicovaný (červený) a float (zelený) blok umístíte jakýkoliv prvek, třebas prázdný

To, že se absolutní a plovoucí prvky nemají v Exploreru rádi, už věděl také třeba Bruno Fassino.

Vložení formuláře z Google Dokumentů do stránky

Sběr dat pomocí Google formulářů jsou určitě jednou z nejzajímavějších vlastností Google Dokumentů. Nevýhodou je nemožnost nastavení vlastního vzhledu. Vložení do vlastního HTML kódu také bohužel Google přímo nepodporuje.

Pro jednodušší formuláře lze tyto nevýhody ovšem obejít. Pokusil jsem se o to s pomocí upraveného návodu z Google Operating System.

Zjednodušeně je potřeba udělat toto:

1. vzít vygenerované HTML formuláře
2. přidat k němu javascriptovou validaci, aby neprobíhala na serveru Google
3. přidat vlastní stylopisy odpovídající vzhledu webu

Pro javascriptovou validaci jsem na rozdíl od zmiňovaného návodu použil jQuery plugin Validation, jehož základní implementace je velmi snadná.

Výsledek lze zkoumat ve zdrojovém kódu této stránky.