Máte na svém vývojářském počítači (s Windows) zprovozněnou testovací verzi webu a potřebujete ji otestovat na (fyzickém) mobilním zařízení? Stačí správně vše nastavit a můžete testovat.
Námět článku převzat z: http://conceptdev.blogspot.cz/2009/01/monitoring-iphone-web-traffic-with.html
Pokračování textu Testování localhostu na mobilních zařízeních
Nechcete neustále pamatovat na dopisování prefixů do CSS definicí? Můžete použít některý z dostupných nástrojů.
Pro online kontrolu můžete použít CSSPrefixer, do kterého jednoduše vložíte váš kód. Tento nástroj si též můžete stáhnout, ale vzhledem k tomu, že je napsaný v Pythonu, tak možná budete mít problém ho spustit. (Alespoň mě se do Windows moc nehodil.)
Další nástroj je napsaný v JavaScriptu, takže ho můžete buď použít online na pleeease.io/play, nebo ho stáhnout z GitHubu; v této verzi je ale určen pro různé buildící nástroje pracující s JavaScriptem – nelze ho použít jako polyfill tím, že JS přidáte do stránky (k tomu slouží jiné knihovny jako je Flexie pro Flexbox).
Nástroj fungující pomocí online API Prefixr bohužel nefungoval v době psaní toho článku, takže jsem nemohl vyzkoušet.
Knihovna CssCrush (stahujte z GitHubu) je napsána v PHP, takže je nejvhodnější pro malé weby, které ji mohou použít k online překladu nahraných CSS souborů díky tomu, že kromě doplňování prefixů umí i soubory optimalizovat a minifikovat a navíc obhahuje i cache, takže nebude příliš zpomalovat stahování stránky.
Celkový layout (rozložení) stránky se z historicky-technických důvodů dělá různě: tabulkou, plovoucímu prvky či JavaScriptem.
Moderní prohlížeče ale nabízejí jednu metodu (s gridem jsou vlastně dvě), která dokáže prvky na stránce uspořádat tak, aby si zachovali svůj vzhled a zároveň se přizpůsobily stránce.
Standardní odkazy na http:// či ftp:// soubory jsou běžné. Pro odeslání emailu je běžně používat odkaz mailto:. A vzhledem k tomu, jak roste podíl mobilního internetu, není žádnou výjimkou, že prohlížeč by, stejně jako odeslat email, mohl rovnou vytočit telefonní číslo. Tak proč to uživatelům neusnadnit?
Pokračování textu Telefonní čísla v HTMLUž vás někdy napadlo, jak udělat např. číslování kapitol v dokumentu bez toho, abyste měli celý dokument uzavřený v jednom velkém OL-LI seznamu? A určitě jste pak jen mávli rukou: „To udělám přes jQuery.“ Ale víte, že to jde bez skriptu, jen pomocí CSS?
Pokračování textu Očíslovaný seznam v CSSMožná vás již napadlo, jak rychle je prohlížeč schopen najít CSS pravidlo pro konkrétní element v HTML a co dělat nebo nedělat pro to, abyste mu co nejvíce pomohly.
Pokračování textu Optimalizace selektorůNastavit nebo přečíst šířku prvku přes jQuery lze dvěma (zdánlivě rovnocennými) způsoby:
$el.width('100%');
$el.css('width', '100%');
$el.css({width: '100%'}); //alternativní zápis
// předchozího způsobu
Ve většině případů se chovají stejně – v tomto případě prostě nastaví prvku šířku na 100% jeho rodiče.
Pokud ale danému prvky nastavíte vlastnost box-sizing na border-box, najednou se začnou výsledky těchto zůsobů rozcházet a pokud je střídáte pro nastavení stejné velikosti (např. protože kód psali dva různí programátoři, a každý preferuje jiný zápis), může se prvek chovat dost podivně.
Pokračování textu jQuery width() vs. css(‚width‘) při border-box
Pokud používáte plovoucí prvky, asi narazíte na problém, že prvky, které je obtékají se chovají poněkud podivně a zasahují i do prostoru rezervovaného pro plovoucí prvky:
V případě textu obtékajícího obrázek, což je nejčastější použití v článcích, je to efekt očekávaný, ale co dělat, když potřebujete, např. ve speciálním layoutu webové aplikace, aby prostřední prvek vyplnil prostor mezi plovoucími prvky a přitom do nich nepřesahoval?
Řešení je kupodivu velice jednoduché – stačí prostředními prvku nastavit oveflow:hidden a prohlížeč, aby zabránil překrývání plovoucího prvku obsahem toho prostředního, změní jeho šířku.
Pokračování textu Jak vyplnit prostor mezi plovoucímy prvky?
Chcete použít CSS import, ale nefunguje?
@import(//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css);
V moderním a mobilním webu často narážíme na problém s tím, jak velké načítat obrázky.
Sice máme HD (1080p) … a v roce 2014 i QHD (1440p) a od roku 2015 dokonce UHD (4K, což odpovídá 2160p, ale už se tak neuvádí) … displeje, které zvládnou zobrazit opravdu kvalitní obrázky, ale na druhou stranu jsou tyto displeje často malé (4″ – 5″ mobilní telefony) nebo se jsou sledovány z velké vzdálenosti (~50″ UHD/4K televize sledované z několika metrů), takže zobrazit v HD/4K např. graf nebo mindmapu může skončit nečitelnou pavučinou. Navíc velmi často se stává, že se s HD telefonem připojujete přes 3G nebo dokonce GPRS/EDGE a pak takové načtení HD obrázku trvá věčnost.
HTML5 specifikace na to myslí a přináší hned dvě tři možnosti, jak to vyřešit. A samozřejmě existují ještě 2 CSS3 možnosti. Pokračování textu Responzivní načítání obrázků