Jak ladit web pro Safari na Linuxu?

A je to tu zase! Reklamace, že se zase cosi nějak divně ukazuje v Safari na Macu. Hmm, jasně, opravím... Ale jak přijít na to, co to vlastně sakra... Macka nemám, pracuju na Linuxu. Safari pro Linux? Není. Cesta přes Wine? To ne ne. Virtuální OS s prohlížečem? To už mám vyzkoušené kvůli IE a není to zrovna komfortní. Něco nativního? Co? Ale moment! Safari jede na WebKit, ne? Na stránce download mimo jiné prohlížeč Epiphany, ale nějaký divný archiv toto... Podle pkgs.org jsem pak ale kulišácky dohledal jméno balíčku epiphany-browser. Pak stačí standardní instalace

sudo apt-get install epiphany-browser

a voilá! Máme tu prohlížeč "Web" ukazující neduhy Safari na Ubuntu. Alespoň to, co mi bylo reklamováno ano. Ladící nástroj je podezřele podobný tomu ve Firefoxu, není-li stejný. Takže... a hotovo, opraveno. :-)

Ale samozřejmě netvrdím, že to nejde jinak a lépe. ;-)

Odkazy:

• WebKit
• Epiphany-browser Download (DEB) (dohledej si balíček podle verze OS)
• Luakit Web Browser (další prohlížeč, nezkoušel jsem)
• Common WebKit Browsers - dummies

Neseriózní Less.js v prohlížeči

Bez css preprocesoru jako je Less.js si dnes snad ani seriózní webařinu nedokážeme představit. Při normální seriózní práci si také neumíme představit, že by se kompilace less nespustila při buildu (nebo tak nějak jako podobně, prostě "pre-").

Ale občas se hodí zcela neseriózně zpracovat less v prohlížeči, třeba když připravujete jen takovou stránečku třeba pro náhled ikon, nebo tak něco, a chcete použít fragment stylů projektu v less. Není to žádný problém.

Podle Using Less.js - Browser Usage | Less.js potažmo less-docs/using-less-in-the-browser.md at master · less/less-docs · GitHub či LESS - Using Less In The Browser - Tutorialspoint a less.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! necháme natáhnout script, případně doplníme konfiguraci, a podle css - Is it possible to inline LESS stylesheets? - Stack Overflow upravíme type, protože při naší neserióznosti máme styly přímo v html. Script pak musí být natažen až za styly! Výsledný kód pak bude vypadat nějak takto:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <style>

        /* css */

    </style>

    <style type="text/less">

        /* less */

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.12.2/less.min.js"></script>

</head>

<body>

    <!-- obsah -->

</body>

</html>

mjml - šablony pro responzivní emaily poměrně snadno a celkem rychle

Už přes dva roky mám v konceptu postu o mjml poznámku "ROZPRACOVANÉ!". To jsme se s mjml našli poprvé, když jsem připravoval layout emailového newsletteru pro jistý projekt. No a po dvou letech jsme se našli znovu, tentokrát při přípravě layoutu obecných emailů.

mjml je šablonovací systém pro generování responzivních emailů. Všecky ty hnusy tabulek v tabulkách, inline styly, definice písma pro každý element a jiná zvěrstva řeší sám. Samosebou ne vše je v každém mailovacím programu nebo službě stoprocentní, ale to není snad ani email v prostém textu.

Pro editaci lze využít jak online mjml editor, editor mjml-app se zabudovanou validací i kompilací, editor Atom s pluginem, stejně tak Sublime text, tak jakýkoliv textový editor, balíček pro node.js (npm) a příkazový řádek. Také lze využít drag&drop online editor služby Mailjet.

Ostatně pomocí čeho mjml soubor připravit je popsáno v podrobné dokumentaci...

Před dvěma lety jsem bojoval s několika problémy, které, jak se ukázalo, způsobily různé verze mjml - dokumentace, ukázkové šablony, pluginy do Atomu byly pro verzi 3.3.5, ale aktuální verze mjml byla 4.0.3 a některé komponenty byly změněné a migrace z verze 3 na 4 (lze příkazem i v online editoru) nefungovala správně. Po downgradu na 3.3.5 mi zmizelo několik problematických momentů a vygenerované html konečně vypadalo správně. To jen jako upozornění, že ne vždy jde vše hladce.

Samostatná kapitola jsou obrázky. Výsledný email musí obsahovat absolutní url na obrázky, při vývoji je ale snazší pracovat s relativní cestou. S tím je třeba se nějak vypořádat. Pro správnou funkci preview pluginu do Atomu jsem si tehdy musel "dát obrázky na web", jinak se vůbec nezobrazovaly.

Je tu ale i možnost vložit obrázky přímo do emailu pomocí mjml-with-images-loader pro Webpack, ale ještě jsem to nezkoušel.

Ohledně obrázků v emailech jsem studoval ještě A Guide for SVG Support in Email | CSS-Tricks, SVG | Campaign Monitor a How to Embed Images in Your Emails: The Facts | SendGrid.

Pro integraci do Symfony potažmo Twigu existuje balík Symfony bundle for MJML nebo AssoconnectMJMLBundle (o čemž je článek Using MJML email templates with Symfony).

Vybrat a implementovat jeden z nich mě ještě čeká.

---

P.S.: Po dalším průzkumu a samostudiu jsem nakonec jen "vypáral" z balíčku asi tak tři řádky kódu -  samotné zavolání kompilace mjml, protože jsem potřeboval přidat pro render další parametry, což balíček neumožňuje, a naopak zbytek funkcí jsem vůbec nepotřeboval.

Jak ladit web pro MSIE/Edge na Linuxu?

To si tak už kolik měsíců v kuse vesele vyvíjíte web na Linuxu a výsledek jen občas zkontrolujete na Windows v prohlížeči Edge a pro klid duše i MSIE (i když to už jen tak pro formu a nejhůř ve verzi 10). No dobře, hlavní projekt si přeci jen zbaběle nastavíte tak, aby se na něj dalo "koukat" i z vedlejšího počítače a kontrolujete jej i při vývoji.
Pak se ale objeví zapeklitost na dalším projektu. Rozstřelit si nastavení nechcete... Pátráte, jak tedy na Linuxu ladit webovou aplikaci pro Explorer a najdete celkem optimální řešení:

1. nainstalujte si VirtualBox od Oracle
   (drobná nepěknost - v menu na Ubuntu Mate se objeví až po restartu)
2. stáhněte si "virtuální počítač" přímo od Microsoftu
   (vyberte si od Win7 s IE8 po Win10 s Edge)
3. importujte virtuální stroj do VirtualBoxu a polaďte si nastavení
   (třeba podle Set Up a Windows 10 Virtual Machine and Run Internet Explorer 11 and Edge on Mac or Linux | Viget)

A máte na dobrém počítači slušně běžící Windows na 90 dnů trápení zdarma!

Ještě se dostat na localhost vašeho počítače... Podle virtualbox - How to access localhost:8080 running on ubuntu from windows running into virtual box? - Ask Ubuntu stačí projekt(y) zadat do hosts, ale s ip adresou 10.0.2.2.

Pak už je na čase ponořit se do práce... ;)

Jak dostat font-display do fontů z Googlu

Při dalším ladění "našeho projektu" jsem se rozhodl vyřešit poznámku v Pagespeed Insights / Lighthouse (po pravdě jsem to vyzkoumal v Auditu v Nástrojích pro vývojáře v prohlížeči Chrome):
Diagnostika - Zajistěte, aby text při načítání webfontů zůstal viditelný
Pomocí funkce font-display stylů CSS zajistěte, aby byl text při načítání webfontů viditelný uživatelům. Další informace.
"Další informace" odkazují na článek Controlling Font Performance with font-display, podle kterého je třeba doplnit do definice písma přístup k vykreslení
@font-face {font-display: fallback; ... }
Prosté? Ne tak moc, když importujete, a chcete importovat, webová písma přímo od Googlu. Jako třeba
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');
Je tu takový drobný paradox, jak poznamenávají v článku Google Fonts and font-display s osvětlením situace dalšími užitečnými tipy:

Google Developers suggests using Lighthouse -> Lighthouse warns about not using font-display on loading fonts -> Web page uses Google Fonts the way it's suggested on Google Fonts -> Google Fonts doesn't supports font-display -> Facepalm.

Jednoho by z toho...

Ale zpět k projektu. Máme tu {less}, Grunt (zatím ještě) a Node (samozřejmě). Importované definice se do výsledného stylu vloží celé. Někdo přeci musel už připravit nějaký plugin... Dva dny jsem (mimo jiné práce) hledal, ale nenalézal. Našel jsem a vyzkoušel nějaké jiné pluginy, ale bez úspěchu.

A pak najednou na mě vyskočí přesně to, co hledám od začátku: dkrnl/postcss-font-display. Tento PostCSS plugin vloží do všech definic @font-face ve style kýžený parametr font-display. Hotovo. Uff :-)

"IČO" nebo "IČ"?

Ještě včera bych se s váma do krve hádal, že správně se má psát "IČ". Svého času to byla pravda. Tehdy jsem sám vedl boj za správnou zkratku a všude možně opravoval hnusné "IČO". Měl jsem také zato, že ke zkrácení této zkratky došlo z důvodu podobnosti s jistým neslušným slovem. Já naiva!

Jisté úkoly mě přivedly k prověření správného tvaru a s pláčem musím přiznat, že

SPRÁVNĚ JE "IČO"!

Lakonickou odpověď najdete u Českého statistického úřadu. Není ale na první pohled jasné, jestli je aktuální.

Čerstvý výklad situace je v článku IČO a IČ, DIČO a DIČ? Pravdy a mýty internetu.

Starší vysvětlení včetně přehledné tabulky vysvětlující, proč je v tom takový zmatek, je "IČ" nebo "IČO", co je správně?.

Jak na dlouhá "slova" na webu?

Jsou věci, co se vrací jako bumerang. Třeba potřeba se popasovat s nezalomitelným textem, respektive dlouhými slovy. Přesněji "slovy". V praxi jde, pokud nebudeme brát v potaz Němčinu, o emailové a webové adresy a parametry notebooků a telefonů, které produktový manažeři s oblibou naperou do názvu, oddělené lomítky a bez dostatky mezer, na kterých by se text mohl v prohlížeči zalomit. Samozřejmě tyto nešvary se připomenou až s vyladěným layoutem (jsem si myslel) a ostrými daty.

První věc, která opravdu nejde ignorovat. Dlouhé "slovo" rozstřelí layout ve flex-boxu. Boxíky postižených produktů se roztáhnou. Zafunguje malé kouzlo. Stačí nastavit na item ve flexu

min-width: 0;
Minimální šířka nemusí být nulová, ale musí být definovaná. Více

• html - How to word-break text in a flex display when the text is long? - Stack Overflow
• Flexbox and Truncated Text | CSS-Tricks

Pak to chce nějak ošetřit samotný text. Při googlení je potřeba zohledňovat stáří rad a návodů. Co platilo před rokem dnes už neplatí, nebo nemusí platit. V CSS lze nastavit pravidla pro dělení a zalamování slov. V kombinaci s media query jde o dobrou pojistku zachování funkčního layoutu a čitelného textu. Použijme třeba podle Dealing with long words in CSS | justmarkup něco jako

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
Více

• Dealing with long words in CSS | justmarkup
• Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc) | CSS-Tricks
• hyphens | CSS-Tricks
• CSS Hyphens Not Working in Firefox? - Stack Overflow
• CSS hyphens property

Na všechno styly ale nestačí. Správnému dělení slov pomůžeme znakem měkké dělení. Hojně se řeší, jakou formu zápisu znaku volit, ale aktuálně by to mělo být použití entity

­­­
Pročti si

• Soft hyphen - Wikipedia
• text - Soft hyphen in HTML (<wbr> vs. &shy;) - Stack Overflow
• wbr na www.quirksmode.org

Rovnou jsme se dostali i k HTML5 tagu

<wbr>
který slouží k označení místa, kde se může v případě potřeby text zalomit, ale bez "-". To je přesně to, co je dobré vrazit za výše zmíněná lomítka v názvech.

• <wbr> - HTML: HyperText Markup Language | MDN
• Can I use... Support tables for HTML5, CSS3, etc
• What is <wbr> in HTML5? Why do we need this? - Quora

Dřív se toto nahrazovalo využitím třeba tenké mezery &thinsp;. I další entity, jako třeba &zwnj; a &zwj; můžou najít uplatnění.

• hyphenation - HTML: Soft hypen (&shy;) without dash? - Stack Overflow
• Special Characters [Robin’s HTML 4.0 Conformance Test]
• The Little-Known Preview Text Hack You May Want to Use in Every Email – Litmus Software, Inc.
• &ZWNJ;&NBSP; Preview text hack > Litmus
• Zero-width non-joiner - Wikipedia
• Zero-width space - Wikipedia

Obecně se řešení problémů s dlouhým textem věnuje článek Handling Long and Unexpected Content in CSS | CSS-Tricks.

Toto neberte jako přesný návod, spíš soupis poznámek k navedení, kde hledat nápovědu k dané problematice.

Bootstrap 4 Beta - další hluboká orba

Po až příliš dlouhém plácání se s Alfou přišel konečně (před měsícem) Bootstrap 4 Beta. A stejně jako už dříve nutila každá nová Alfa verze více či méně překopat v bláhové naději projekt rozběhnutý na její předchůdkyni, musíte i nyní vzít rýče a vidle a zarýt hluboce do kódu. Pokud tedy doufáte, že se každá nová Alfa i Beta verze více a více blíží verzi finální a současně věříte, že má smysl projekt upravovat v menších postupných krůčcích namísto velkého třesku.

Na štěstí pro své duševní zdraví nyní na Bootstrapu nic velkého nevyvíjím a i ten zmíněný projektík už mám na Gitlabu a pro upgrade Bootstrapu jsem si připravil branch. Po prvním načtení webu s novým bootstrapem jsem raději noťas zaklapl a šel spat.

Na další kolo se připravuji studiem rozdílů mezi první Betou a poslední Alfou Upgrade Bootstrap 4 Alpha 6 to Beta. Zkusím asi i tamtéž doporučený on-line nástroj Bootstrap 4 Upgrade (až bude umět Betu). A budu se "těšit" co přinese Beta 2.

Animovaná Ajax Loading ikona čistě v CSS

Nedávno jsem si v rámci nasazování animované ikony v SVG pro Ajaxové nahrávání poznamenal i odkaz na Best CSS-SVG Loaders and Spinners na Code Geekz. Kdyby jsem si na to vzpomněl včas, nemusel jsem znovu prohledávat internety při zdobení jednoho projektu zase animovanou ikonou pro Ajax (tedy loader či spinner), tentokrát ale čistě v CSS. Několik vybraných odkazů...

• How To Make a Loader na W3Schools.com - pěkné, jednoduché a s vysvětlením
• SpinKit | Simple CSS Spinners - řada prostých jednobarevných motátek, skládátek a jiných animovátek
• Single Element CSS Spinners - několik motátek s online možností obarvení, všechny si vystačí s jediným "divem"!
• CSS Load.net - Spinners in pure CSS and HTML - přehršel rozličných motátek s on-line nastavováním

Určitě si taky vyberete. :-)

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)

Pár kusých poznámek na téma barvičky a Sass

Tentokrát jen pár kusých poznámek na téma "barvičky a Sass". Řešil jsem automatické odvozování odstínů zadané "základní barvy" (pro pozadí) a nalezení kontrastní barvy, aby na tomto pozadí byl text vždy čitelný.

Sass je na práci s barvami vybavený dost dobře. Nastuduj si Module: Sass::Script::Functions — Sass Documentation. K výše uvedenému zadání mi byly užitečné hlavně funkce lightness($color), lighten($color, $amount) a darken($color, $amount).

Jak na kontrastní barvu jsem dohledal postupně na How to dynamically change text color based on a background color, Compass Color Contrast | Compass Documentation, How to get an accurate contrast color with Sass – Medium.

A dále pak na Sass text-contrast mixin, Sass text-contrast mixin a nakonec pro změnu Sass text-contrast mixin. To jsou různé verze téhož. Výsledek se mírně liší. Však se podívej.

Trochu barevné teorie načerpej z HSL and HSV na Wikipedia a Barevný model – Wikipedie.

S přepočtem barev v různých barevných modelech včetně HSV si pohraj s Color Calculator nebo složitějším Color Wheel - Color Calculator na Sessions College. Na vytvoření celých barevných schémat použij RGB Hex HSL HTML | Colour Calculator | Colour Scheme Tool nebo notoricky známý Barevný kruh | Barevná schémata - Adobe Color CC.

Responzivní image mapa? Nečekaný oříšek

Image-map je docela dost stará záležitost. V podstatě jde o to buďto určit souřadnice kliknutí na obrázek (server-side - parametr ismap pro html tag img) nebo, běžnější použití, přiřadit určitým částem obrázku odkaz (client-side - html tag map). Udělat správnou imagemapu nebylo nikdy jen tak a buďto to chtělo opravdu dobrou představivost, nebo schopný nástroj. Nikdo je neměl nikdy myslím moc rád. A co teprve, když se takový relikt minulosti střetne s posledními webovými trendy - konkrétně s responzivitou? No to je pak prů.. problém. Když pěkně stylem zmenšíte obrázek, nemáte jak automaticky přepočítat souřadnice mapy.

Samozřejmě jako na všechny neřešitelné html/css problémy najdete řešení celkem rychle:

1. Na image map fungující v responzivitě existují pluginy, třeba:
   jQuery RWD Image Maps
   Image Map Resize
   
2. Teoreticky by šly zadat souřadnice v mapě procentuálně (což při úpravě stávající image mapy znamená nějak sofistikovaně přepočítat), ale to prý stejně nefunguje všude.
3. Našel jsem i nějaké css3 řešení, které ale kdoví jak kde funguje.

Osobně bych ale doporučil mapu nezmenšovat a nechat ji scrollovat. Na to malé se stejně nedá trefit, takže je to vlastně nepoužitelné.

Animovaná Ajax Loading ikona v SVG?

Scalable Vector Graphics - SVG - oslavilo (-a?) nedávno 15. narozeniny a pět let je už "dospělé". Dosud ale není v prohlížečích plně podporováno (viz Can I use... svg) a třeba u Googlu z Chrome výpárávají již zabudovanou podporu animací SMIL (také Can I use... svg-smil).

A přitom právě "samochodná" animace je užitečná třeba pro animované ikony pro Ajax loader. Můžete si je vygenerovat třeba na webu loading.io - Your SVG + GIF Ajax Loading Icons (ano, tam získáte i CSS a GIF verze), nebo na SVG Loaders - Sam Herbert potažmo GitHub - SamHerbert/SVG-Loaders: Loading icons and small animations built with SVG and CSS, kde jsou fakt sexy kousky. Další zdroje nabízí Best CSS-SVG Loaders and Spinners na Code Geekz.

Síla použití těchto ikon se projeví při vložení do css jako "data:image".

Ale co je to vlastně platné, když Chrome 45 a Opera 32 animace SMIL neschvaluje, zatím jen stížností v konzoli. Ať to takto zůstane dlouho. ;-)

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ě! :-)

Web kampaně Dole-Kempa zakonzervoval počátek internetů

Na internetech naleznete ledasco. Jak žhavé novinky, tak zapomenuté mumie. Třeba i jednu z prvních internetových stránek americké prezidentské kampaně - http://www.dolekemp96.org/. Pochází z prvních dnů internetu, z roku 1996, kdy opravdu vysoká rychlost připojení byla 56 K. Přes modem. Dnes je internet 1000x rychlejší! Pěkně o tom povídají na MPR - Dole-Kemp Campaign Site Immortalizes '90s Internet Tech.

"Syntax error, unrecognized expression"? Upgradoval jsi jQuery, že?

Jednoho dne vám váš kdysi stvořený scriptík místo postupného dotahování HTML kusů stránky AJAXem napíše do konzole "Error: Syntax error, unrecognized expression".
Inu co, zagooglíte a najdete javascript - jQuery + client-side template = "Syntax error, unrecognized expression" - Stack Overflow a následně prostudujete jQuery Core 1.9 Upgrade Guide | jQuery a máte jasno:

jQuery 1.9 začalo jinak zpracovávat Ajaxem natažený HTML kód. Samozřejmě z důvodů bezpečnosti a blá blá blá...

No, prostě konstrukci
…
},
success: function(data){
    $(data).appendTo('#content');
…
doplňte kouskem
…
},
success: function(data){
    $($.parseHTML(data)).appendTo('#content');
…

Podle dalších informací tuto radikální změnu další verze nějak zase napravili, ale to už si ověřte sami. ;-)

Správňácký .preventDefault() vs. vražedný return false;

Když si zavěsíte v JavaScriptu (potažmo JQuery) na event kliknutí na dokaz či tlačítko (.click()) nebo odeslání formuláře (.submit()) vlastní funkci, možná pro zablokování původní (default) operace použijete return false; (tak jak se běžně používalo v parametru onclick). Chyba! Pak se už jen divíte, proč se vám neprovádějí další nabindované funkce. return false; je totiž všechny "odstřihne".
Proto opravdoví programátoři ;-) použijí .preventDefault(); a to je celé kouzlo. Viz event.preventDefault(), jQuery event.preventDefault() Method, preventDefault() Event Method.

Jak psát HTML, CSS a JS správně?

I když vás k tomu nikdo nikdy nevedl, stejně nakonec sami nejspíš dospějete do fáze, kdy budete chtít psát kód dobře. K tomu vám dopomoz Coding conventions - Wikipedia, the free encyclopedia, kde vás navedou mimo jiné na google/styleguide · GitHub a tam, pokud jdete po CSS a HTM a JS jako já, vám naservírují Google HTML/CSS Style Guide a Google JavaScript Style Guide.
Třeba zjistíte, že vlastně HTML a CSS píšete tak nějak už nějaký čas zcela samozřejmě podle dané specifikace na 99 %. ;-)

Zpropadená tečka v adrese

Jen taková poznámka k problému, na který jsem právě znovu narazil. Najdete si na Wikipedia článek, třeba Benedikt XVI. Jistě si všimnete, že za řadovou číslovkou je zcela správně tečka. Tato tečka neodporuje ani specifikaci URL, Ale třeba takový Facebook po vložení adresy tečkou na konci "sežere" a vznikne nefunkční odkaz. Už jsem narazil na toto nechutné chování dříve i s jinými znaky. Pomoc je ale snadná: místo

http://cs.wikipedia.org/wiki/Benedikt_XVI.
vložte adresu

http://cs.wikipedia.org/wiki/Benedikt_XVI%2E

(%XX je hexadecimální ASCII kód znaku, který dohledáte třeba na ASCII – Wikipedie)

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