Odpověď na otázku v titulku je velmi jednoduchá: AVIF a WEBP obrázky. Chcete vědět víc?
Tento článek navazuje na starší Jak na průhlednost obrázků? z roku 2015, který již není aktuální kvůli tomu, že popsané formáty obrázků již nejsou relevantní hlavně kvůli tomu, že všechny prohlížeče již podporují formát WEBP.
Pokračování textu Jaké použít obrázky v roce 2021?Pomocí @media můžete vytvořit responzivní layout v závislosti na šířce obrazovky, čímž můžete celkem dobře poznat, jestli uživatel pracuje na mobilu, tabletu nebo desktopu a podle toho uzpůsobit další prvky (např. větší ikony na mobilu).
V posledních letech ale narážíme na zařízení, která se této definici vymykají. Např. Note zařízení, která mají mobilní displej (320px), ale jdou ovládat hodně přesným perem. Nebo naopak dotykové monitory, které mají 4k rozlišení, ale ovládají se pouze prstem (takže na 16x16px ikonu se prakticky nedá kliknout). Navíc některá zařízení jsou již schopna detekovat ukázání prstem (hover) nebo sílu stisku (3D touch).
Pokračování textu Detekce polohovacích zařízení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ě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.
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 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?
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í.
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
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).
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
Pro ladění webu v androidím Chromu budete potřebovat nejnovější verzi Chrome (32 nebo novější; nelze debuggovat Chromium – aplikace Internet) jak na Androidu tak i na desktopu (Windows nebo MacOS). Oba prohlížeče by měli být ve stejné verzi – viz poznámka na konci článku.
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+. Také potřebujete MacOS ve verzi Maverics nebo novější (10.9+).
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)
