Klikací tlačítko

V moderním webu je již standardem, že tlačítka nejsou tlačítka ale odkazy nebo DIVy, které jsou jako tlačítko pouze nastylovány.

Problém je ale v tom, že takové tlačítko se nechová jako tlačítko – tedy nezmáčkne se (vizuálně), když na něj kliknete.

Obejít se do dá jednodušše pomocí CSS:

.button {
    box-shadow: 4px 4px 2px #000;
    position: relative;
}
.button:active {
    box-shadow: 2px 2px 2px #000;
    left: 2px;
    top: 2px;
}

Takovéhle tlačítko má ve výchozím vzhledu stín, aby bylo vidět, že jakoby vystupuje nad stránku a tudíž je možno s ním pohnout (kliknutím) směrem dolu. Po kliknutí se pak tlačítko posune o několik bodů doprava dolu, číž vytvoří dojem, že se zmáčknulo. Zároveň s tím se zmenší stín, takže to vypadá, že stín zůstal na místě a pouze se tlačítko přiblížilo k ploše stránky – stín se musí VŽDY zmenšit o tolik, o kolik se tlačítko posunulo.

Pokud máte raději plochý vzhled bez 3D efektů, stačí stín vynechat a pouze posunout tlačítkem:

.flat-button { position: relative; }
.flat-button:active { left: 2px; top: 2px; }

Přizpůsobení stránky na šířku mobilu či tabletu

Po použití předchozího tipu na full screen stránku možná narazíte na problém u mobilních zařízení (iPhone, iPad, Android), které si se šířkou stránky moc nelámají hlavu. Je potřeba je přinutit zobrazit stránku ve výchozím stavu tak, aby se šířkou přizpůsobila na šířku displeje (ať už je zařízení otočené na výšku či šířku).

Vložte do hlavičky stránky tento tag:

<meta name="viewport" content="width=1080, height=1920, user-scalable=yes" />

Tím řeknete, že stránka je optimalizována pro rozlišení 1080×1920 (můžete změnit, pokud máte jiné) a donutíte tak prohlížeč, aby stránku přizpůsobil.

Hodnotou user-scalable povolíte uživatelům, aby si mohli stránku přiblížit a lépe ji přečíst (zvláště užitečné na malých zařízeních).

Důležité je, aby tag viewport NEOBSAHOVAL hodnotu initial-scale, protože tím naopak říkáte, že stránka se NEMÁ přizpůsobit na šířku zařízení, ale má se zobrazit v určeném rozlišení (tedy 1:1)!

Firefox hack pro velikost tlačítka

Ve Firefoxu mohou být tlačítka (input[type=button]) přesně o 2 pixely menší. To je způsobeno „chybou“ v interním výchozím CSS stylu, který neumožnuje změnu line-height u inputů.

Pro ruční nastavení výšky tlačítek použijte tento hack:

/* použij následující styl pouze ve FF */
@−moz−document url−prefix() {
    input[type=button] {
        height: 16px;
    }
}

Oříznutí textu trojtečkou

Pokud máte nějaký text, který může být dlouhý, ale vy máte jen omezený prostor (např. zobrazení uživatelského jména pod fotkou), můžete ho nechat automaticky oříznout a nechat prohlížeč doplnit trojtečku (ellipsis).

.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Všechny uvedené vlastnosti jsou potřeba a pokud třeba jen jednu z nich zapomenete, nebude oříznutí správně fungovat. Proč? Pokračování textu Oříznutí textu trojtečkou

Nastavení velikosti pozadí

Pokud máte na pozadí nějakého prvku obrázek, možná budete potřebovat nastavit jeho velikost. To hlavně v případě, že děláte responzivní layout, který se zvětšuje podle rozlišení zařízení.

Poznámka: Níže uvedené vlastnosti background-* fungují jen v prohlížečích IE9+, Firefox 6+, Chrome 11+, Safari 5+, Android 4+ a  iOS 7.1+.

Velikost nastavíte např. takhle:

.big-background { background-size: 50%; }

Pokud chcete, aby obrázek na pozadí (např. ikonka v menu) přesně zapadnul do řádku, bude se hodit např. tento styl:

ul.menu li img.icon {
    background-size: 1EM; 
}
/* Jednotka EM odpovídá poměru
   vůči hodnotě font-size */

Obrázek ale nemusíte zvětšovat jen lineárně, ale můžete použít dvě velikosti k roztažení obrázku jen v jednom směru:

.background {
    background-image: url('bg_1x100px.jpg');
    background-repeat: repeat-x;
    background-size: 1px 1EM;
}

Předchozí styl zvětší obrázek na výšku řádky, ale přitom ponechá jeho šířku na 1px, aby se zbytečně neroztahoval v rozměru, kde to za něj udělá opakování.

Pokračování textu Nastavení velikosti pozadí

CSS3 styly nefungují bez debuggeru?

Máte nějaký CSS3 styl (např. animaci, rámeček, apod.), který v některém prohlížeči uživatelům nefunguje, ale jakmile otevřete debugger (DOM inspector, Firebug, apod.), tak záhadně fungovat začne?

Problém se stylem je v tom, že některé prohlížeče pro určité styly přímo vyžadují vlastní prefix (např. „-moz-„, „-webkit-„, „-o-„, „-ms-„) a bez něj styl nefunguje. Problém s debuggerem je ten, že v okamžiku jeho otevření začne opravovat některé CSS styly tak, aby je mohl co nejlépe zobrazit. A jednou z oprav je to, že všechny prefixované styly převede na neprefixované a tím donutí prohlížeč použít původní neprefixovaný styl.

Pokud předchozímu odstavci nerozumíte, tak to neřeště – prostě si pamatujte, že některé styly vyžadují prefixy. Pokračování textu CSS3 styly nefungují bez debuggeru?

Absolutní nebo procentuelní pozicování uvnitř kontejneru

Pokud chcete použít absolutní pozicování nebo nastavení rozměrů pomocí procent, ale pouze v rámci určitého kontejneru (např. zarovnat prvky nalevo od středu – tedy doprava na levé polovině stránky; nechat element vyplnit nadřazený kontejner, apod.), můžete k tomu použít relativní pozici kontejneru:

.container {
    position: relative; 
}
.absoluteChild { 
    position: absolute; right: 0; 
}
.fillChild {
    width: 90%; height: 100%; margin: 0 auto;
}

Po použití zde uvedených CSS stylů dojde k tomu, že absoluteChild bude zarovnáno na pravou stranu kontejneru container, zatímco fillChild bude vyplňovat kontejner na výšku a zabírat 90% jeho šířky (přičemž bude zarovnáno na střed). Oba prvky se budou samozřejmě překrývat díky tomu, že absoluteChild je absolutně pozicované.

Skrolování prstem

Možná to zní divně, ale ani na dotykových zařízeních není výchozí, že lze skrolovat obsah prstem.

Celou stránku samozřejmě posouvat prstem jde, ale pokud do stránky vložíte nějaký kontejner např. s overflow:auto nebo overflow:scroll, tak mobilní prohlížeče tyto styly zpravidla ignorují a zobrazí jen to, co se vejde na obrazovku.

Pro povolení ale stačí použít jednoduchý styl:

.container {
    /* nastaví scrollování na desktopu */
    height: 100%;
    overflow: auto;
    
    /* povolí skrolovat obsah prvku
       pomocí posouvání prstem */
    -webkit-overflow-scrolling: touch;
}

Pozor ale na to, že takto upravený kontejner může na některých zařízeních způsobovat určité problémy (např. posouvání nebude tak plynulé jako když jde o jednoduchou stránku).

Vynucení jednoduchého chování na mobilech

Chytré telefony (iPhone, Android, apod.) mají ve svých prohlížečích celou řadu doplňkových vlastností, které se vám ale ne vždy mohou hodit. Pro jejich vypnutí můžete použít některý (nebo i všechny) z následujících vlastností:

html, body {
    /* zakázání změny velikosti textu
     - užitečné, pokud máte layout přesně
       napasovaný na použité texty */
    -webkit-text-size-adjust: none;

    /* zakáže použití akce tap&hold
      (podržení) pro zobrazení kontextového
       menu - touto akcí se většinou dá
       zkopírovat text stránky, uložit
       obrázek ze stránky, apod. */
    -webkit-touch-callout: none;

    /* zakáže použití akce tap&hold
      (podržení) pro výběr textu - užitečné,
       pokud text tvoří část grafiky a
       není tedy vhodné, aby šel vybrat
       a zkopírovat */
    -webkit-user-select: none;

    /* Povolí Fast-Tap pro rychlé reakce
       odkazů a tlačítek; také vypne zoom
       pomocí double-tap; iOS 9.3+ */
    touch-action: manipulation;
}