Archiv autora: Nothrem

Obrázek v DIVu bez okrajů

Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.

<div class="imgWrapper">
    <!-- autosize DIV around IMG -->
    <img src="..." />
</div>

Pokračování textu Obrázek v DIVu bez okrajů

Absolutně pozicovaný odkaz nefunguje na IE9?

Internet Explorer 9, který je stále rozšířený na počítačích s Windows XP a neaktualizovaných Vista a Windows 7, obsahuje jednu nepěknou chybu, která může uživatelům vašich stránek zabránit ji správně používat.

Chyba spočívá v tom, že odkaz, který je absolutně pozicovaný, nedostane správně nastavenu hodnotu z-index a v důsledku toho bude skrytý za ostatními prvky:

.linkContainer { width: 100px; height: 50px }
.linkContainer > * {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 10;
}
/* display link above everything else */
.linkContainer > a { z-index: 11; }

V tomto případě bude mít v IE9 odkaz skutečný z-index = 1, takže jakýkoliv jiný prvek v kontejneru znemožní kliknout na něj.

Oprava je celkem jednoduchá – pokud do odkazu přidáte nějaký obrázek na pozadí, donutíte IE9 trochu více přemýšlet o tom, jak odkaz zobrazit a správně mu nastaví požadovaný z-index.

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url('link.png') transparent;
}

Tento trik funguje i s prázným nebo dokonce neexistujícím obrázkem:

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) transparent;
/* 1x1px průhledný GIF */
} 

nebo

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url(#) transparent;
/* # odkazuje na vlastní HTML stránku,
   což není validní obrázek a proto
   se v pozadí nic nezobrazí */
} 

Pokud nemůže řešit opravu pro konkrétní odkazy, stačí na začátek prvního CSS souboru (nebo na začátek HTML stránky) přidat obecnou definici:

a { background: url(#); /* Fix IE9 anchor */ }

Pokud bude tato definice skutečně na začátku, opraví automaticky všechny (potencionálně rozbité) odkazy a zároveň umožní ostatním CSS definicím definovat vlastní barvy a pozadí specifickým odkazům.

Ani tohle nepomohlo?

V některých případech se může zdát, že z-index v IE9 nejde nastavit některým (dalším) prvkům.

To je pravděpodobně způsobeno tím, že se pokoušíte umístit prvek absolutně přes nějaký z uživatelského pohledu důležitý prvek. V takovém případě IE9 zabrání znepřístupnění tohoto prvku tím, že zruší z-index prvkům, které by ho překrývali.

Za uživatelsky důležité jsou považovány formulářové prvky (input, select, atd.), videa, Java objekty a podobné prvky, které nativně reagují na kliknutí a jiné události myši.

Dynamicky zvětšované sprite

Technika spritů je nejjednodušší způsob, jak zrychlit načítání stránky, pokud na ní potřebujete mít velké množství ikonek nebo jiných (zpravidla relativně malých) obrázků.

Problém ale začíná s tím, jak sprite správně vytvořit a nastavit, aby se zobrazila požadovaná ikona (a nebyly vidět ty sousední). Nejobtížnější pak bývá udělat ikony responzivní, aby se například vždy přizpůsobili na výšku řádky v menu.

Pokračování textu Dynamicky zvětšované sprite

Jak změnit obrázek přes CSS

Jestli děláte pro svou stránku šablony, jistě víte, že součástí šablony jsou často i různé grafiky, ikony a obrázky.

Pokud je stránka správně udělaná a připravená, není to problém, protože většina grafiky bude dělaná přes background-image a ikony přes sprity.

Co ale dělat v případě, že na stránce je natvrdo napsaný IMG s obrázkem, který potřebujete změnit?

Pokračování textu Jak změnit obrázek přes CSS

Proč nefunguje line-height?

Nastavíte prvku menší velikost písma a příslušnou line-height, ale prohlížeč line-height ignoruje a zobrazuje řádky příliš daleko od sebe?

<div>
    Lorem ipsum dolor sit amet,
    <span>
        consectetur adipiscing elit. ...
    </span>
</div>
div {
    font-size:32px;
    line-height:1.4EM;
}
span {
    font-size:12px;
    line-height:1EM;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum ullamcorper nibh, mattis laoreet eros consectetur a. Nam aliquam venenatis tellus a cursus. In et mattis eros, eget ullamcorper nisi. Donec interdum iaculis feugiat. In a lobortis nulla. Proin egestas dolor id lorem semper, vitae viverra sapien scelerisque. Integer consequat venenatis nibh, id egestas ligula mollis eu. Cras vitae justo hendrerit, pretium elit sit amet, volutpat metus. Donec et sagittis nunc. Cras luctus turpis sed risus molestie, ac eleifend urna tristique. Aenean a nunc fermentum, bibendum nibh in, rutrum tellus. Aliquam dictum nunc quis leo tempor, vitae molestie tortor viverra.

Pokračování textu Proč nefunguje line-height?

Centrovaný modální dialog bez JS

Chcete zobrazit modální dialog ve stránce, který je vždy centrovaný do středu obrazovky? To asi budete potřebovat hodně skriptů na jeho otevření, vypočtení velikosti, vycentrování a jeho udržování v obraze (např. při otočení telefonu). Viz demo.

Ale co kdyby tohle všechno šlo udělat jen pomocí HTML a CSS, nebylo by to super?

A představte si, že to jde!

Pokračování textu Centrovaný modální dialog bez JS

Proč má stránka žere baterie?

V dnešní době je responzivní web důležitou součástí každé firemní stránky. A dá se předpokládat, že takový responzivní web bude hlavně zobrazován na mobilních zařízeních jako jsou chytré telefony a tablety, které mají dost omezenou kapacitu baterie a při vydatném používání vydrží jen pár hodin.

A jistě žádného návštěvníka nepřesvědčí o kvalitách Vašich stránek nebo nabízených produktů to, že při jejich procházení se výdrž jeho baterie sníží na polovinu. Častým příznakem problémů je pomalé nebo trhané skrolování na slabších (starších) strojích a zařízeních.

Jak tedy zabránit tomu, aby Vaše stránky doslova sežrali uživatelům baterie jejich zařízení?

Pokračování textu Proč má stránka žere baterie?

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?