Edge pořád neumí ES6

Prosluněné dny hladkého vývoje webu na Linuxu, laděného pod Chrome a dolaďovaného pro Firefox, narušila zapeklitá chyba v Edge: SCRIPT1028: Expected identifier, string or number.
Dalo mi to trochu pátrání krzevá balíčky, dokumentaci, odborné weby a fóra (včetně výše uvedeného), než jsem došel k poznání, že celý problém působí rest parametry či spread operátory (či syntax), vymoženosti JavaScriptu ES6.
Ta se mi tam dostala z Bootstrapu zakompilovaného do js balíčku. Takže taková ta neopravitelná věc. Díky, EasyAdmin. :(
Přeskočme několik hodin usedavého pláče a přistupme rovnou k řešení: nenechme inkriminovaný javascript natahovat na web rovnou (jako hotový asset), ale přidejme ho přes webpack (nebo snad něco jiného? Možná tak Webpack Encore) projektu a profiltrujme ho přes Babel, kterým ty moderní zrůdnosti, jak si jistě myslí u Microsoftu, odstraníme.
Hurá! Web funguje a pochvala od projekťáka nás nemine. ;)

• Rest parameters and spread operator
• Rest parameters - JavaScript | MDN
• Spread syntax - JavaScript | MDN
• Can I use... rest parameters
• Can I use... spread

Jak JavaScriptem na pseudo elementy?

Upravit elementy elementy HTML stránky? Žádný problém! Máme DOM, máme jQuery... Změnit styly? V jQuery máme metodu .css(). Ale... Co to? No ano! Pseudo elementy jako ::before nebo ::after se takto jednoduše změnit nedají! Musí se to "kacknout". Jak? Pěkně to servíruje článek Modify pseudo element styles with JavaScript od Pankaj Parashara.

Osobně jsem úspěšně ozkoušel Metodu 3:
$('<style>.red::before{color:green}</style>').appendTo('head');

(samozřejmě, že to taky umím bez jQuery)

embedresponsively.com zresponzivní i nezresponzivnitelné

Responzivní, tedy velikosti obrazovky přizpůsobivý web je dnes samozřejmostí (i když výjimky jsou povoleny). Základem jsou správně napsané CSS pro správně poskládané HTML. Jsou ale elementy, které standardním HTML konstrukcím a CSS definicím odolávají. Těmi jsou hlavně vložené (embed) externí kódy s elementem iframe. S jejích zvládnutím vám pomůže embedresponsively.com. Vygeneruje vám kód pro YouTube, Vimeo, Dailymotion, Google Maps, Instagram, Vine, Getty Images a pár dalších služeb. Princip je celkem jednoduchý a určitě se jím dá inspirovat obecně.

A jak to vypadá? Například pro ukázkové YouTube video http://youtube.com/watch?v=QILiHiTD3uc, které je Blogger vloží takto...

...vygeneruje embedresponsively.com kód...

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>


...což vypadá takto...

Ono to tu tak úplně nevyzní, ale v reálu se to jeví velmi zajímavě! :-)

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."

Nový Chrome 37, DirectWrite a Arial Narrow (SOLVED! Ale jinak, než byste čekali.)

Změna situace: Nový Chrome 38 přichází s podporou css3 parametru font-stretch známého z FF a tak řeší dále popisovaný problém. Tímto také padají dále uvedené návrhy oprav, kromě použití Google Fontu Open Sans Condensed.

Nový Chrome 37.xxx přichází (konečně?) s implementací DirectWrite, což má konečně vypisovat na Windows fonty hezky. Prý. Nicméně to přineslo malý problém – Chrome přestal „znát“ „Arial Narrow“ (a zřejmě i další). Patrně lze narazit na problém s nastavení DPI pro obrazovku a další překvapení.

Řešením bude nejspíš použití jiného fontu. Nicméně DirectWrite se dá vypnout nastavením flagu - chrome://flags/#disable-direct-write
(aktivace této položky znamená deaktivaci DirectWrite, trochu po haluzi)

Viz též:

• css - Chrome beta and canary builds not displaying Arial Black fonts - Stack Overflow
• Different font for facebook after Chrome update : techsupport
• Issues - chromium - An open-source project to help move the web forward. - Google Project Hosting
• Huge font in Chrome 37–Fórum služeb Google

P.S. (SOLUTION?):

Podle aktuálních zpráv se chová k fontu Arial Narrow takto hnusně Chrome i ve verzi 39. Je třeba tedy provést "opravu" webu. Font Open Sans Condensed by byl vhodný, ale je přeci jen odlišný a znamená to hotový web celý "přestylovat". Tudy (zatím) ne.

Pak je tu možnost použít Arial Narrow z AllFont.net. Tady mám poněkud pochyby o legálnosti. Nicméně vydáte-li se touto cestou, záhy narazíte na zablokování písma stahovaného přímo z AllFont.net přímo Chromem. Je třeba si styly a soubory písma (předpokládám, že budete potřebovat jak Arial Narrow, tak Arial Narrow Bold a i další řezy) stáhnout a nahrát na svůj web. Při zachování jména fontu "Arial Narrow" ale zřejmě dochází k nějaké kolizi - v MSIE je veškerý text najednou kurzívou a ve FF je to nějaké nepěkné. Pomohlo mi přejmenování písma na "Arial Narrow Spare". Při vhodném pořadí písem v definici "fint-family" pak písmo v MSIE vypadá pořád stejně, ve FF víceméně stejně a v Chrome je konečně Arial Narrow zase "narrow".

Výsledný kód tedy natahuje do webu samostatné css s písmem:

<link href="/css/font/arial-narrow.css" rel="stylesheet" type="text/css" />


Definici fontu je upravena takto (pokud požíváte "bold" je samostatný font potřeba, jinak je to rozplizlé):

@font-face {
  font-family: 'Arial Narrow Spare';
  font-style: normal;
  font-weight: 400;
  src: local('Arial Narrow Spare'), local('ArialNarrowSpare-Regular'), url(d0eb64ed2b91fe9a67f7800c1b14868b.woff) format('woff');
}


@font-face {

  font-family: 'Arial Narrow Spare';

  font-style: normal;

  font-weight: 700;

  src: local('Arial Narrow Spare Bold'), local('ArialNarrowSpare-Bold'), url(de76819016c676e170294c3f132497dc.woff) format('woff');

}

A definice font-family vypadá takto (font-stretch je pro FF pořád potřeba):

body,table,input,select,textarea,tt,input,button {font-size:14px; font-family: "Arial Narrow","Helvetica Narrow","Helvetica Condensed","Arial Narrow Spare","Arial CE",Arial,"Helvetica CE",sans-serif; font-stretch: condensed;}


(Arial Narrow, Arial Black, Wrong Font, Bad Fonts)

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

CSS filtry se obloukem vrací

Protože vývojová spirála se neúprosně otáčí, vrací se nám na scénu oprášené filtry v CSS, polozapomenutý výstřelek MSIE. Pochopitelně podstata je jiná, nicméně efektu rozmazání či různých barevných transformací jsou podobné a také podobně zajímavé. Čtěte...

CSS3 Filters: Altering HTML and Images with just CSS | InsertHTML: 

"CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. "

'via Blog this'

Dotykový display a proklatý :hover

CSS pseudo-class selektor :hover se původně, někdy v pravěku, používal pouze pro obarvování odkazů při nejetí kurzorem myši. Postupem času se ale začal "chytat" i na jiné prvky a za jeho využití dnes uděláte třeba elegantně i rozbalovací menu. Tím se můžete těšit ale jen do té doby, než si takovou konstrukci zkontrolujete na tabletu. No jistě - kde je kurzor myši? Jak :hover vyvolat? No, nijak. Prohlížeče v zařízeních s dotykovou obrazovkou buďto :hover vyvolají při ťuknutí jen tak mimochodem, takže menu nebo roletka jen problikne (prohlížeče na Anroidu a Coast na iOS; při troše šikovnosti se dá :hover vyvolat pohybem "stiskni a popotáhni"), nebo je naopak vyvolán pouze :hover a k případnému prokliku nedojde (Safari i Chrome na iOS) - což je mnohem horší!

Řešení? Použití :hover zredukovat pouze na nedůležité kosmetické efekty.

Ale co když už máme něco komplikovanějšího s :hover hotové a úplně to předělat nelze? Našel jsem řešení mimo jiné v textu What's the best way to detect a 'touch screen' device using JavaScript?:

Pomocí jednoduché funkce v js detekujeme dotykovou obrazovku. Nastavíme řídící class, podle kterého upravíme reakci na :hover v CSS. Rozbalení menu či roletky, které reagovalo dříve na :hover, nastane i po přidání classu pomocí další funkce v js (jQuery).

Následující ukázka je i po zjednodušení doufám dostatečně jasná.

JS (jQuery):

function is_touch_device() {
    try {
        return 'ontouchstart' in window
            || 'onmsgesturechange' in window;
    } catch (e) {
        return false;
    }
};

$(document).ready(function(){

    /* touch screen? */

    $('body').toggleClass(function() {
        if ( is_touch_device() ) {
            return 'touch';
        } else {
            return 'desktop';
        }
    });

    /* dropdown switch */

    $('body:not(.desktop) .switch').click(function() {
        var s = $(this).closest('.switch');
        if ( s.is('.open') ) {
            s.removeClass('open');
        } else {
            s.addClass('open');
            return false;
        }
    });
});


CSS:

.switch .dropdown {visibility: hidden;}
.switch.open .dropdown,
body.desktop .switch:hover .dropdown {visibility: visible;}


HTML:

<span class="switch">
    <strong>Title</strong>
    <span class="dropdown">
       ...values...
    </span>
</span>

[touch screen, dotyková obrazovka, dotykový display, hover efekt]

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'

Když se jQuery autocomplete schovává za flash, z-index nepomůže!

How to avoid jQuery autocomplete dropdown being hidden by underlying flash object? - Stack Overflow:

<object wmode=transparent ... >

'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'

Co se děje, když IE9 jakoby neaplikuje styl?

Řešil jsem onehdá problém se špatným zobrazením jakéhosi formuláře v Internet Explorer 9. Ve všech ostatních prohlížečích včetně starších verzí IE vše vypadalo, jak mělo. Ale IE9 jakoby vůbec neaplikoval css.

Podle MIME-Handling Change: text/css (Windows) musí mít bezpodmínečně styly v HTTP hlavičce správný MIME-type Content-Type: text/css. Ale tím to nebylo, to bylo v pořádku.

Podle internet explorer 9 - CSS Style not recognized in IE9 - Stack Overflow by mohl chybu snad způsobit class container. Byl tam, přejmenoval jsem, nic se nestalo. Tím to nebylo.

Ještě zbyla možnost využít meta tagu X-UA-Compatible, ale to nebylo, s ohledem na ostatní záležitosti, možné.

Nakonec jsem se podstaty problému dopátral! Zobrazovaný HTML kód vypadal takto (takto zobrazil zdrojový kód Firefox):

Formulář v odstavci! Potěš! Však se ukončení pěkně zvýraznilo:

Firefox a Chrome si z toho přeskládal DOM takto:

Odstavec jednoduše ukončil před formulářem.

Internet Explorer 8 a 7 naopak nechal formulář v odstavci:

V obou těchto případech styly pro položky formuláře, vázané na formulář, zafungovaly.

IE9 ale obalí tag formuláře odstavce a odtrhne ho od vnitřku, v DOM je prostě vedle (fieldset není ve form, vidíte?). A tím všechny definice v css vázané na formulář nemůžou fungovat:

Řešení je prosté - dát si pozor na obalení formuláře paragrafem.

Celé toto vzniklo vložením shortcode pro formulář WordPress Form Manager ve WordPress  Přitom stačilo odstranit formátování řádku se shortcodem, WordPress by tag <P> odstranil a vše by bylo v pořádku.

Jak vložit správně flash (swf) do stránky (html)

Adobe Flash při exportu výtvoru vygeneruje i html kód, kterým se má překopírovat do html stránky pro kýženého zobrazení vytvořené animace, nejspíše benneru. Anžto je tento html kód silně nevalidní - vždycky byl a zřejmě vžycky bude - a ne vždy pak funguje správně v prohlížečích, hledala již dávno spousta lidí tu nejlepší cestu, jak vložit flash (swf) do html stránky správně. Už před lety jsem našel a několikrát ozkoušel níže uvedený kód. Výhoda tohoto zápisu je i jeho odolnost proti svévolným zásahům některých wysiwyg editorků.

<object width="170" height="300" id="abcdefgh_170x300px" align="middle" type="application/x-shockwave-flash" data="/pictures/abcdefgh_170x300px.swf?clickthru=http%3A%2F%2Fwww.web-abcdefgh.cz%2F">
<param name="allowscriptaccess" value="sameDomain">
<param name="allowfullscreen" value="false">
<param name="movie" value="/pictures/abcdefgh_170x300px.swf?clickthru=http%3A%2F%2Fwww.abcdefgh.cz%2F">
<param name="quality" value="high">
<param name="bgcolor" value="#F3F0E0"></object>

Tento příklad současně ukazuje:

1. jak zadat odkazy od rootu webu, bez http – jinak je některé wysiwyg editory zmrší!
2. jak do odkazu přidat parametr clickthru (odkaz na proklik, běžná flashbannerová praxe) – musí být url encoded! (pokud je potřeba, jinak odmaž otazník a vše za ním; může to být i jiný parametr; k zakódování url lze použít různé online pomůcky, třeba URL Decoder/Encoder)
3. že odkaz na swf je tu 2× !!!
4. jak nastavit rozměr objectu
5. jak nastavit barvu pozadí (když by někde vyčuhovalo)

Historie webu

Na adrese evolutionofweb.appspot.com vystavil Google interaktivní grafické znázornění historie hlavních webových technologií a bezmála všech webových prohlížečů od vzniku protokolu HTTP po současnost. Můžete se také podívat, jak se webové prohlížeče měnily během doby.

Nesmrtelný IE6?

Také vám Internet Explorer 6 už dlouho znepříjemňuje webdeveloperský život? IE6 má sice na kahánku, ale pořád se tu mezi námi drží zuby nehty. Přehledné vizualizace jak a kde se mu to daří najdete na webu The Internet Explorer 6 Countdown. Je paradoxní, že sám Microsoft volá po zavržení tohoto jeho dítěte. Zajímavý je také žebříček států se zastoupením IE6 pod 1 %.

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.

Problém s podtržítkem v session cookies IE7

Asi pořád, neustále a na věky na nás budou ze skříní vyskakovat Billovi kostlivci: těsně před nástupem prohlížeče Internet Explorer 10 vás dožene problém, že se kdosi nemůže něam přihlásit do administrace s Internet Explorerem 7. Když si řádně zasakrujete, proč používá nejzáludnější a nejzákeřnější prohlížeč všech dob, zapátráte, a přijdete na to, že je to tím, že Internet Explorer 7 má problém se session cookies, když máte v názvu domény podtržítko!

Předkládám zjištěné zjištění:

Problem: IE7 drops the authentication cookie when underscores are in the domain name.
Solution: Remove the underscore from the domain name.

A uvádím jeden zdroj za všechny: Session Cookies - Bug in IE7, By nathan