jan korbel

@-moz-document url-prefix()
{
  CSS pouze pro Firefox
}

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
  CSS pouze pro Operu
}

Samozřejmě vyhnout se jim, pokud to jde, někdy ale nezbude, než nasadit černý klobouk.

Další hezký tutoriálek od Codrops.

Jistý Benjamin Keen vytvořil šikovný generátor bookmarkletu, který vám stránku, kde ho aktivujete, zobrazí v předem nastavených rozlišeních a tím vám umožní otestovat, jak vám v ní fungují vaše responzivní CSS.

Určitě jste narazili na situaci, kdy se vám velmi nehodí standardní box model, tj. skutečná šířka elementu je width + padding + border. Já se s tím peru hlavně, když chci mít zarovnaná pole formuláře.

Článek Box sizing předkládá celkem snadné řešení: Přepněte si box model do toho, co měl IE 6, tj. deklarovaná width bude ta skutečná a padding + border se „odčítají dovnitř”. Příklad pro jeden element:

textarea {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

Paul Irish doporučuje to rovnou hodit na všechny elementy, ale tím si nejsem tak jistý.

Via Pavel Bier

Po šesti měsících (to to letí) tu máme novou verzi.

Here’s a look at some of the most prominent changes:

• Completely overhauled documentation for nearly every component
• A brand new Customize page to tailor your Bootstrap experience
• New 12-column, responsive grid system
• New table styles with a common base class for improved compatibility with other tools
• New form styles with smarter defaults, requiring less HTML
• Icons, graciously provided by Glyphicons
• New, smarter navigation components
• New buttons, button groups, and button dropdowns
• New, simpler alert messages
• New javascript plug-ins like carousel, collapse, and typeahead

— Twitter Developers, Say hello to Bootstrap 2.0

Sprite Cow – užitečná kráva, která si zatím nerozumí se Safari.

Via Pavel Moravec

Přehled s vyhledáváním.

Via @machal

Ještě jsem si nezvyknul, uvažovat nad :before, :after takhle. Pokud byste si o těchto pseudo-třídách chtěli přečíst víc, můžete zde.

Via HTML5 Weekly

Jediné, co tomuto nástroji ještě chybí, je možnost přidat obrázek(-y) na pozadí a/nebo je vytvořit přes více gradientů.

Via @elfineer

Přidáno: Možná se vám bude víc líbit tenhle generátor.

Via @machal

Přidáno ještě později: OK, tak zatím nejlepší generátor tlačítek. Umí :hover, :active, více gradientů na pozadí, animace a všechno, co ty předchozí.

Díky @pavelbier

Spolu s tradičními 24ways tu máme letos i tenhle adventní tutoriálendář.

Až budete potřebovat rychlý náhled, jak vám fungují media queries, vzpomeňte si na http://responsivepx.com.

Za tip díky @atpok

Opět jeden tutoriálek od Codrops a opět platí, že jejich příklad je až moc výrazný, v praxi by se asi tak silný efekt hodil jen málokde. Nicméně, v jemnější variantě si to představit dovedu.

Pokud byste snad neměli dost frameworků pro HTML prototypování, pak Foundation je další z nich. Autoři z firmy Zurb tvrdí:

„An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.”

Via WebAppers

Bricss upozorňuje na to, že CSS Working Group publikovala první draft nové specifikace hierarchie pro CSS a ejhle, kluci dávají pozor, co se děje v oblasti CSS preprocesorů.

Jen tak dál! Věřím, že teď když na specifikacích dělají lidi, kteří jednak vyrábí prohlížeče a (hlavně) sami lepší HTML+CSS+JavaScript potřebují, půjde vývoj o poznání rychleji, než tomu bylo dřív.

Většina příkladů v tutoriálu se mi nelíbí. Posílám to dál pro inspiraci, co je možné a pro zamyšlení, kde byste něco podobného mohli použít vy.

Animace oživují uživatelské rozhraní, ale když to přeženeme, stvoříme Frankensteina.