css3-mediaqueries.js: CSS3 Media Queries pro vykopávky

Staré, moc staré verze webových prohlížečů nás stále pronásledují jako nezničitelné zombie. Jednou za čas někdo pojme úžasný nápad trvat na moderním webu s posledními technologiemi a současně podporou IE8. No, co se dá dělat? No co - nainstalovat udělátka... Ty hlavní jsou sepsaná v příspěvcích na html - IE8 support for CSS Media Query - Stack Overflow.

Dos dobře vypadá css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) - Google Project Hosting:

"css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support."

Další možná knihovna je Respond.js - scottjehl/Respond · GitHub:

"The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon)."

Ale přiznejme, že pokud to jde, bude vhodnější použít něco takového:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Připomeňme ještě HTML5 Shiv - aFarkas/html5shiv · GitHub:

"The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x."

Web Storage (lokální úložiště) v příkladech

Vysvětlení, návody a příklady jak s Local Storage.

Web Storage (lokální úložiště) – HTML5: 

"Lokální úložiště (anglicky Web Storage) umožňuje ukládat informace o relaci u klienta v podobě klíč / hodnota. Data se nepřenáší na vzdálený server a storage je funkční ve všech moderních prohlížečích (IE8+). "

'via Blog this'

Viz také Can I use Local Storage... Support tables for HTML5, CSS3, etc

IE8, skrytý checkbox a jQuery - půlden v pr...

Zombie MS Internet Explorer 8 zase jednou vyskočil ze skříně. V rámci předělávání formuláře podle grafického návrhu bylo třeba skrýt checkboxy (zaškrtávátka, <input type="checkbox">), na které ale byly navázány další akce pomocí jQuery. Ve všech prohlížečích vše krásně fungovalo... ve všech, až na IE8. Po nekrátkém pátrání jsem došel k poznání (viz #8508 (Change event does not fire on IE8 for css hidden inputs) – jQuery Core - Bug Tracker), že click() se v IE8 na skrytý checkbox (ať display: none; či visibility: hidden;) nechytá! Funguje ale position: absolute; left: -9999px; top: -9999px; (s patřičně nastaveným overflow nadřazených prvků). Díky, Bille :-(

P.S.: Posléze zjištěno, že "top: -9999px;" zapříčiní po kliknutí vyskakování stránky nahoru. Pozicujte pouze left!

P.P.S.: Ještě jednu nástrahu IE nachystalo - když je v <label> vložený obrázek <img>, neproklinete se checkbox (jen náhodou) a nepomůže ani explicitní for. Je třeba se opravdu nejspíš zase spolehnout na script. Viz update dole na Using Images as Labels in Internet Explorer - Snook.ca (jen místo live prosím delegate).

Proč se Internet Explorer samovolně přepne do kompatibilního režimu? A zobrazuje stránku jako IE7? :-(

Microsoft do svého prohlížeče Internet Explorer zařadil něco, čemu říká "režim kompatibility". To jen proto, že IE měl vždy problémy s korektním vykreslováním stránek a spousta lidí dělala webové stránky pro IE a ne správně podle specifikací HTML a CSS. Tvůrci webů se tomuto můžou bránit pomocí meta tagu <meta http-equiv="X-UA-Compatible"content="IE=Edge"> (viz Marenkův bloček: Zafixuj verzi!) případně nastavením X-UA-Compatible: IE=Edge v hlavičce HTTP. Ale bohužel ne vždy toto funguje. Na stránce Why does IE9 switch to compatibility mode on my website? se dozvíte proč.

IE se přepne, pokud nemá nastaveno X-UA-Compatible, do kompatibilního režimu, když:

• uživatel klikl na tlačítko "režim kompatibility", nebo nastaví "verzi" v  "Nástroje pro vývojáře", nebo si "režim kompatibility" zvolí jako výchozí - s tím vůbec nic neuděláme;
• zřejmě (?) dojde k nějaké závažné chybě při renderování stránky;
• dotyčná doména je na seznamu webů Microsoftu, které vyžadují zobrazení v "režimu kompatibility";
• si IE si myslí, že je web na intranetu! Za intranet považuje (i) shodnou doménu s vaší. S tímto jako webař neuděláte vůbec, ale vůbec nic. Ale můžete chování IE na intranetu nastavit (i návštěvníkům, protože půjde o uživatele identifikovatelné)! Nastavení hledejte v menu (IE9) Nástroje -> Nastavení kompatibilního zobrazení - > zatržítko Zobrazit intranetové servery.... A - uff! - máte vyhráno.

'via Blog this'

Jak odstranit SweetIM toolbar a vyhledávání

Remove SweetIM toolbar and search.sweetim.com (Uninstall Guide):

"If you are reading this article then you want to get rid of SweetIM Toolbar and all the residual damage caused by this potentially unwanted program. SweetIM Toolbar is an applications that has changed your browser homepage,search engine and in addition has added a unwanted toolbar on your Internet Explorer, Firefox and Chrome browser."

Zřejmě dobrý návod, jak se zbavit vyhledávání a toolbaru SweetIM.

'via Blog this'

Jak který prohlížeč umí HTML5, CSS3 nebo SVG? When Can I Use...

V článečku Caniuse.com: informace o podpoře HTML5, CSS3... na Interval.cz najdete stručný popis pro webové vývojáře velmi užitečné služby When can I use..., která v přehledných tabulkách nabízí přehledy jaké technologie - HTML 5, CSS 3, SVG... - v tom kterém prohlížeči a verzi fungují. Těchto přehledů je po internetu více, ale tento patří k těm lepším. Na podrobnější popis nebo příklady vás ale stejně odkáže dál, třeba na známý quirksmode.org.

HTML5 funguje i ve starém MSIE6 - s dopomocí html5shiv (prý)

html5shiv je JavaScript, který po vložení do stránky (viz návod) zajistí fungování prvků HTML5 i v prohlížeči Microsoft Internet Explorer 8 a starších. Prý! Nezkoušel jsem ještě.

Zafixuj verzi!

Před dvěma lety jsem sepsal poznámku První souboj s IE8 aneb Emulate IE7. Poté jsem v zájmu rychlé záchrany vzhledu staršího webu tento fígl s úspěchem několikrát využil.Onehdy jsem byl upozorněn na radu na fóru vývojářů CZC v threadu grafika v IE9 s tímto tématem úzce související:

Opravdu jsem měl prohlížeč přepnutý do Quirks ... :(

Aby se to nemohlo stát chtělo by doplnit do hlavičky :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Výše uvedená formulace by měla zajistit to, že Internet Explorer pochopí, že tuto stránku zřejmě vytvořil svéprávný člověk, zobrazí stránku v režimu nejvyšší dostupné verze prohlížeče a už nenabídne kompatibilní způsob zobrazení. :D

Abstrahujme od faktu, že radu napsal člověk, který sám není sto si ohlídat, jak má nastaven vlastní prohlížeč. V každém případě bych se takovému řešení doporučil se vyhnout. Zaklínadlo nejvyšší dostupné verze znamená, že stránku přinutíte se nechat zobrazit způsobem, jaký dnes nejste schopni předpokládat! I když Internet Explorer stále více dodržuje standardy, neustále si vývojáři Microsoftu spoustu věcí vykládají po svém, a tak s tímto nastavením se vám stránka s příchodem IE10 třeba rozstřelí.

Pokud by se mělo dát nějaké doporučení, pak tedy: pokud máte odladěný web v IE9, zafixujte jej tagem:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Ke v dřívějším příspěvku uvedeným odkazů přidávám link na Defining Document Compatibility.

Jak "zablokovat" Skype Toolbar

Skype není špatný výmysl, i přes všechny, a dokonce oprávněné, výhrady. Velmi diskutabilní je již ovšem užitečnost Skype Toolbaru, který se instaluje společně se Skype (pokud to opomenete nedovolit) a vše na prohlížených webových stránkách, co jen trochu připomíná telefonní číslo, obalí do "tlačítka" umožňující na toto číslo ihned "skypnout". Kromě toho, že si nedovedu představit, kdo to skutečně používá, tato vymoženost velmi ráda rozstřeluje design stránek. Obvzláště, když nejde o telefonní číslo, ale třeba o kód zboží nebo něco úplně jiného. Úžasný malware.

Ještě zábavnější je, když klienti takové rozpadení své stránky reklamují u vás coby "tvůrce", aniž by je zajímalo, že vy zato vůbec, ale vůbebec nemůžete. Na první pohled by bylo nejjednodušší takovou reklamaci smést ze stolu jako neoprávněnou, ale ono leckdy není snadné klientům vysvětlit, jak se věci mají.

Takže jsem hledal a našel nějaké rady na fóru webdeveloper.com a na forum.skype.com.

Plugin by se měl řídit podle meta tagu uvedeného v hlavičce stránky:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Skutečnost je ale (dnes?) jiná. Když pomineme už to, že plugin prý nekontroluje (nekontroloval?) tag s parametry, ale přesně tento řetězec, takže ani nikdy nešel použít v HTML validní zápis bez lomítka na konci, tento meta tag nefunguje.

Kolega boomstik na forum.skype.com ale popsal funkční řešení - vyrušit efekt skype pluginu pomocí css:
span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}
Uff! :-)

Lightbox pro jQuery

Nedávno jsem hledal nějakou ne tolik okoukanou, modernější a volně použitelnou verzi scriptu Lightbox. Nemyslím ovšem nutně zrovna tento lightbox. Označení lightbox se vžilo pro tento způsob zobrazování obrázků obecně. A už dávno se lightboxy neomezují jen na obrázky, ale zobrazují také videa, flash (swf) nebo obsah z jiných stránek. Další podmínkou bylo užití knihovny jQuery, případně jQuery UI, protože projekt, který po lightboxu volal, už jQuery využíval.

Po přebrání nálezů mi jako honě užitečný zůstal v prohlížeči otevřený seznam galerií, slideshow a lightboxů 57+ Free Image Gallery, Slideshow And Lightbox Solutions a poněkud střídmější seznam jen lightboxů pro jQuery 10+ promising jQuery Lightbox-Clones Plugin potvrzující, že méně je často více. Ostatně to je přesně to, co jsem hledal, ne? (A k prvnímu seznamu se vrátím někdy příště. Asi budu potřebovat nějaký slider a "lupu".)

Samozřejmě, že vaše volba může být jiná, ale mě se při porovnávání dostal do čela Fancybox.

Pod seznamem "10+" najdete v komentářích další zajímavé verze lightboxu. Třeba "odlehčený" Slimbox 2 nebo ColorBox, který snad jediný z lightboxů dovolí nastavit pevnou velikost "okna" pro obrázek a zabrání tak často protivnému přesouvání ovládacích prvků při různých velikostech obrázků v galerii.

Na konec ještě vzpomenu velmi schopný Shadowbox.js se sadou adaptérů či konektorů na různé knihovny včetně jQuery. Ze seznamu jej ovšem vyloučil způsob licencování.

P.S. Nevybrali jste si? Obsáhlý přehled ve formě přehledové tabulky s možností filtrování a porovnávání je The Lightbox Clones Matrix.

P.P.S. Fancybox, jinak ovšem úžasný, má ve stylech nachystanou malou zákeřnou past pro ty, co adresář s fancyboxem přejmenují nebo neumístí tak, aby byl ve stejném adresáři jako stránka, ze které se css vkládá. Autor totiž ošetřil průhlednost ikon (png) pro MSIE filtry, které potřebují cestu k obrázkům zadanou právě "od stránky" a ne "od css". Navíc jsou filtry použity zcela zbytečně ve všech IE, tedy i IE7 a IE8, které průhlednost (alfa kanál) 24b png zvládají. Aby fancybox fungoval i v MSIE, je jednak potřeba opravit cesty k obrázkům v definici filtrů, jednak je lepší, třeba pomocí hacku "* html", omezit filtry jen pro použití tam, kde je jich opravdu třeba. Při bojkotu přestárlého IE6 pak můžete definici filtrů komplet smazat ;-)

První souboj s IE8 aneb "Emulate IE7"

Záhy po uvolnění Microsoft Internet Explorer 8 jsem narazil na potřebu rychle opravit najednou rozpadené starší html stránky odladěné ještě pod IE6 a pro funkčnost v IE7 jen drobně upravené. Nechat přepnutí IE8 do kompatabilního módu na návštěvnících není nejvstřícnější řešení. Našel jsem velmi užitečné čtení Introducing IE=EmulateIE7 a Introducing Compatibility View na IEBlog a následně použil k plné spokojenosti meta tag:

<meta equiv="X-UA-Compatible" content="IE=7">

IE8 se pak chová stejně jako IE7 včetně přepnutí do quirks mode podle použitého <!doctype>. Protože se v IE8 renderují jinak i některé drobnosti, které v IE7, FF3 i ostatních prohlížečích sedí, bude se hodit tento meta-přepínač patrně častěji.