Archiv rubriky: WebKit

CSS rychle a efektivně

Taky pořád čtete, jak optimalizovat CSS tím, že je spojíte do jednoho velkého souboru, který načtete v hlavičce HTML stránky?

No, Google si teď uvědomil, že to není tak úplně nejlepší a snaží se Chrome (a tedy i Operu a Safari) přepsat tak, aby se – světe div se – choval stejně jako Internet Explorer. Vývojáři Microsoftu totiž do IE (ať už záměrně nebo nechtěně) zakomponovali mechanismus, který umožňuje načítat CSS efektivněji po částech.

Pokračování textu CSS rychle a efektivně

Responzivní obrázky na míru prohlížeči

Webkit nyní podporuje tzv. Client Hints („rady od klienta“), pomocí kterých můžete na serveru připravit obrázky a ostatní zdroje tak, aby se co nejlépe hodily pro příslušný prohlížeč nebo zařízení.

Když prohlížeč požádáte, může v každém požadavku poslat údaje o rozlišení a rychlosti připojení zařízení, takže budete přesně vědět, co si můžete dovolit stáhnout a zobrazit, aby to neovlivnilo rychlost zobrazení a kvalitu stránky.

Pokračování textu Responzivní obrázky na míru prohlížeči

Debugování Cordova aplikace na Androidu

Již víme, jak vzdáleně debugovat Chrome na zařízeních s Android.

Pokud máte aplikaci napsanou pomocí knihovny Cordova, která využívá WebView jádro pro zobrazování HTML obsahu, můžete v ní taktéž zapnout vzdálené debugování.

Stačí do onCreate() metody vaší aplikace přidat tento kód:

if(
    Build.VERSION.SDK_INT >=
    Build.VERSION_CODES.KITKAT) {
        this.appView
          .setWebContentsDebuggingEnabled(true);
}

Z kódu je vidět, že debugování je dostupné jen v API 4.4 a výše (momentálně tedy 4.4.x a 5.0.x), takže musíte mít nový nebo updatovaný telefon (nebo testovat na nejnovějších emulátorech), ale i tak je to určitě velká pomoc, pokud potřebujete ověřit, jak vypadá DOM vygenerovaný pro aplikaci nebo které JavaScripty se spouští za běhu aplikace.

Třída Build se nachází v API, takže budete potřebovat naimportovat příslušnou knihovnu:

import android.os.Build;

//není potřeba, pokud již máte:
import android.os.*;
//nebo
import android.*;

HTML5 editor nefunguje na iPhone/iPad/Safari?

HTML5 nabízí jeden užitečný atribut, který vám umožňuje napsat si vlastní textový nebo WISIWIG editor jen pomocí HTML a JS. Je jím samozřejmě contenteditable a je podporovaný prakticky na všech moderních (2012+) prohlížečích.

Využívá ho celá řada editorů, např. TinyMCE nebo CKEditor a  různé blogovací weby, CMS a frameworky jako je WordPress.

Tak proč, když je tak rozšířený a všude funguje, nefunguje zrovna na vašem webu na iPhonu – zvlášť když je váš web na iPhone zaměřený?

Pokračování textu HTML5 editor nefunguje na iPhone/iPad/Safari?

Rychlý test mobilů bez mobilu

Znáte to, potřebovali byste rychle zkouknout, jestli se vám stránka po malé změně nebo opravě úplně nerozbila na telefonech s malými displeji, ale zrovna nemáte žádný po ruce a nechce se vám čekat deset minut na start emulátor a tak se na to raději vykašlete a budete doufat, že to bude v pořádku… a ono dost často není.

Odpovídač

K těmto účelům slouží služba Responsinator. Po zadání URL do políčka se vám tato stránka načte v iframech, které simulují různá rozlišení na mobilních telefonech. Pokračování textu Rychlý test mobilů bez mobilu

Nefunkční SELECTy na Android 2.x

Pokud máte problémy se SELECTy na starších Androidech, konkrétně to, že se SELECTy nechtějí otevírat a zobrazovat nativní výběr možností, je to způsobeno chybou ve staré verzi Chromium (předinstalovaná aplikace Internet).

Změna Viewport

Chyba se projevuje při určitém nastavení META tagu viewport; problémové hodnoty jsou user-scalable a width/height nastavené na aktuální hodnotu zařízení (např. width=device-width), ale možná ještě další. Pokračování textu Nefunkční SELECTy na Android 2.x

Debugování webu na iPadu a iPhonu (na MacOS)

Pokud chcete debugovat své stránky na iPadu či iPhonu a máte k dispozici zmíněný iPad nebo iPhone a ještě k tomu libovolný počítač Mac (iMac, MacBook apod.), můžete si zprovoznit debugger v Safari.

Nejprve budete potřebovat iPad nebo iPhone updatovaný na iOS verze 6 (nebo ještě lépe 7). Pak také updatujte MacOS na poslední verzi včetně Safari (nejlépe Maverics).

Propojte iPad/iPhone a Mac pomocí USB kabelu a počkejte, až se zařízení navzájem propojí. Pokračování textu Debugování webu na iPadu a iPhonu (na MacOS)

Emulátor iPadu a iPhonu (na MacOS)

[Aktualizováno]: obsahuje nový způsob stažení a spuštění iOS Simulátoru. V textu jsem ponechal i části původního textu pro případ, že nový postup není možné zcela použít pro starší verze MacOS. Současný text platí pro MacOS X Yosemite.

Pokud chcete emulovat a debugovat své stránky na iPadu a iPhonu a máte k dispozici libovolný počítač Mac (iMac, MacBook apod.), můžete si do něj nainstalovat emulátor. Pokračování textu Emulátor iPadu a iPhonu (na MacOS)

Renderovací chyby ve WebKitu

WebKit jádro je známé chybami ve vykreslování (renderování), které se projevují efektem duchů; tedy tím, že při skrolování se vzhled prvku (částečně) „nakopíruje“ několikrát nad sebe (tak jak je ukázáno na obrázku).

Zpravidla se to stává, pokud máte na stránce kombinace prvků s CSS styly position:fixed, opacity nebo visibility. Například tahle chyba se objevila v Chrome ve verzi 15 a byla opravena ve verzi 19.

Chyba tedy zmizí stejně jako se objevila (tzn. vývojáři webkitu ji v některé verzi vytvořili a pak ji opraví v nějaké následující), ale mezitím je potřeba použít workaround známý jako hasLayout-fix:

.hasLayoutFix {
    -webkit-transform:translateZ(0);
}

Tento styl aplikujte na prvek, který se špatně renderuje.

Styl sám nemá žádný vliv na vhled, protože otáčí prvkem o 0° v 3D prostoru, ale jeho důsledek je ten, že renderovací jádro musí prvek vyjmout z 2D prostoru (ve kterém se běžně HTML prvky renderují) a přesunout ho do 3D prostoru (zpravidla to znamená, že ho začne renderovat grafická karta) a tím dojde k obejití chyby v jádře.

Alternativný verze hasLayout-fix funguje obdobně, jen nechá prvek zvětšit na 100% původní velikosti:

.hasLayoutFix2 {
    -webkit-transform: scale3d(1,1,1);
}

Přesun prvku do 3D prostoru může snížit výkonnost na některých zařízeních (zpravidla starší iPhony a Androidy bez vlastního grafického čipu), ale většinou je lepší mít o něco pomajelší skrolování než při něm vidět duchy.