Archiv rubriky: Nezařazeno

Jak používat kontejnerová pravidla pro vytváření responzivních komponent

Od počátku bylo základem responzivního webu CSS pravidlo @media. Jejich nevýhoda ale je, že určují použitá pravidla podle velikosti obrazovky zařízení. Díky snaze několika designérů a vývojářů ale můžeme od roku 2022 používat i kontejnerovou podmínku @container, která naopak určuje responzivní styl podle místa dostupného pro konkrétní DOM prvek (tzv. kontejner).

Pokračování textu Jak používat kontejnerová pravidla pro vytváření responzivních komponent

Testování IE11 v Edge

Od verze Microsoft Edge 78, tedy v novém Edge postaveném na jádře Chromium, můžete konkrétní stránky spustit v režimu Internet Exploreru 11 (IE Mode), takže se stránka bude renderovat pomocí Trident jádra.

Tento režim vám umožní používat stránku stejně, jako byste ji používali v IE11, aniž byste museli přepínat do jiného prohlížeče.

Stránka bude používat CSS a JS tak, jak by to dělalo IE11 a také bude moci používat ActiveX a další prvky starých Enternet Explorerů a zároveň (v omezené míře) používat nová rozšíření.

Na druhou stranu IE mode lze zapnout pro konkrétní domény, které pak nepůjdou zobrazit v Chromium jádře, takže nemůžete své stránka současně testovat v IE11 a novém Edge.

Nový Edge sice obsahuje staré Trident jádro, ale již neobsahuje debugger F12, takže stránku sice zobrazíte, ale nebudete v ní moci zobrazit DOM ani CSS, ladit skripty a prohlížet konzoly.

Pokud tedy potřebujete stále vyvíjet a ladit webové stránky pro Internet Explorer, budete muset stále používat samostatný IE11.

Pokud ale máte naopak starý web, který je odladěný pouze pro Internet Explorer, není již potřeba nutit vaše uživatele používat IE11 a stačí nastavit v Edge domény, které mají používat IE mode.

Organizace CSS? Ne, děkuji.

Systémů, jakými psát a organizovat CSS pravidla, je celá řada a dá se říct, že každá „trochu větší“ společnost (Twitter, Yandex, atd.) vydala nějaký framework, metodiku nebo návod, jak oni organizují svá CSS, protože ten jejich systém je „ten nejlepší“.

Je v tom ale skutečně taký rozdíl? A drží se tyto systémy obecných pravidel pro CSS? Pojďme se na to podívat. Poznámka: Do tohoto článku budu postupně doplňovat další systémy a poznatky, takže nemusí být momentálně úplný a může se hodně měnit.

Pokračování textu Organizace CSS? Ne, děkuji.

Používejte HTML5 tagy správně

Samozřejmě můžete použít DIV nebo SPAN a připlácnout k němu nějakou třídu, přes kterou ho naformátujete. Nebo můžete změnit tag STRONG, aby byl podtržený místo tučný. Nebo můžete použít ARIA role, a dodávat význam tam, kde není potřeba. Ale nešlo by to trochu chytřeji s využitím všech těch úžasných novinek, které přináší HTML5? (Nebo dokonce HTML4?)

Pokračování textu Používejte HTML5 tagy správně

CSSX: Změna CSS přes Javascript

Každý uživatel jQuery asi zná jeho metodu css(), která mění styl dané prvku nebo prvků. Tato metoda má ale dvě nevýhody: 1) mění styl každého jednotlivého prvku (což může být pomalé u hodně prvků) a nefunguje na později přidané prvky a 2) mění jen statický vzhled a neumí přidat pravidla pro hover, focus apod. nebo dokonce responzivní pravidla pro @media.

Zde přichází CSSX, které místo změny stylu prvků přidává CSS styl do dokumentu, který pak funguje stejně jako načtení *.css souboru.

Pokračování textu CSSX: Změna CSS přes Javascript

Automatické CSS3 prefixy

Nechcete neustále pamatovat na dopisování prefixů do CSS definicí? Můžete použít některý z dostupných nástrojů.

CSSPrefixer

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

Pleeease

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

Prefixr

Nástroj fungující pomocí online API Prefixr bohužel nefungoval v době psaní toho článku, takže jsem nemohl vyzkoušet.

CssCrush

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.

Pokračování textu Automatické CSS3 prefixy