Archiv autora: Nothrem

HTML, Pozicování

Zobrazení stránky přes celé okno prohlížeče

Napsat komentář

U moderních stránek je často potřeba zobrazit obsah tak, aby vyplnil celé okno prohlížeče (např. kvůli pozadí, vycentrování horizontálně i vertikálně apod.). Většina designérů a programátorů většinou zkusí jako první krok CSS:

body { width: 100%; height: 100%; }

A když to nepřinese požadovaný efekt, tak přejdou k Javascriptu a velikost okna počítají dynamicky.

K tak drastickým řešením ale není důvod a stejného efektu lze dosáhnout i pomocí CSS, jen je potřeba vědět, co nastavit:

html, body { width: 100%; height: 100%; }

Stačí kromě BODY nastavit styl i na HTML, které každou stránku obklopuje, a jako zázrakem se celá stránka roztáhne. Pak již můžete nastavit pozadí automaticky zvětšené a centrované na okno prohlížeče:

body {
    background: url('/images/page-bg.png')
            no-repeat scroll center center
            transparent;
    background-size: contain;
}

Nebo oblíbený obsah ve sloupci uprostřed stránky:

body {
    max-width: 1024px;
    margin: 1em auto;
}

Nebo patičku stránky zobrazenou vždy u dolního okraje okna (i když je obsah stránky menší):

body {
    /* zamezí překrytí obsahu patičkou */
    margin-bottom: 1EM;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; /* nebo auto */
    height: 1EM;
}

Pozor na to, že pokud byste chtěli do BODY nastavit padding pro odsazení, bude problém s nastavením šířky (a výšky) na 100%. Ve výchozím nastavení se totiž padding nepočítá do šířky prvku a tak by jeho výsledná šířka byla { 100% + levý padding + pravý padding }.

Aby prohlížeč správně vypočetl 100% šířku, je potřeba změnit jeho výpočet na border-box:

body {
    width: 100%;
    height: 100%;
    padding: 1em; /* odsazení od okrajů */
    box-sizing: border-box; /* započítej
          padding do width a height */
}
Firefox, Formátování, HTML, Prohlížeče

Firefox hack pro velikost tlačítka

Napsat komentář

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;
    }
}
Mobilní, Prohlížeče, WebKit

Renderovací chyby ve WebKitu

Napsat komentář

WebKit jádro je známé chybami ve vykreslování (renderování), které se projevují efektem duchů; tedy tím, že při skrolování se vzhled prvku (částečně) „nakopíruje“ několikrát nad sebe (tak jak je ukázáno na obrázku).

Zpravidla se to stává, pokud máte na stránce kombinace prvků s CSS styly position:fixed, opacity nebo visibility. Například tahle chyba se objevila v Chrome ve verzi 15 a byla opravena ve verzi 19.

Chyba tedy zmizí stejně jako se objevila (tzn. vývojáři webkitu ji v některé verzi vytvořili a pak ji opraví v nějaké následující), ale mezitím je potřeba použít workaround známý jako hasLayout-fix:

.hasLayoutFix {
    -webkit-transform:translateZ(0);
}

Tento styl aplikujte na prvek, který se špatně renderuje.

Styl sám nemá žádný vliv na vhled, protože otáčí prvkem o 0° v 3D prostoru, ale jeho důsledek je ten, že renderovací jádro musí prvek vyjmout z 2D prostoru (ve kterém se běžně HTML prvky renderují) a přesunout ho do 3D prostoru (zpravidla to znamená, že ho začne renderovat grafická karta) a tím dojde k obejití chyby v jádře.

Alternativný verze hasLayout-fix funguje obdobně, jen nechá prvek zvětšit na 100% původní velikosti:

.hasLayoutFix2 {
    -webkit-transform: scale3d(1,1,1);
}

Přesun prvku do 3D prostoru může snížit výkonnost na některých zařízeních (zpravidla starší iPhony a Androidy bez vlastního grafického čipu), ale většinou je lepší mít o něco pomajelší skrolování než při něm vidět duchy.

Formátování, HTML

Oříznutí textu trojtečkou

Napsat komentář

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 →

Obrázky

Nastavení velikosti pozadí

Napsat komentář

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í →

Prohlížeče

CSS3 styly nefungují bez debuggeru?

Napsat komentář

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? →

IE (Internet Explorer), Pozicování, Prohlížeče, Trident (IE11+), WebKit

Transform generators

Napsat komentář

Jednou z nejužitečnějších vlastností CSS3 je možnost použití transformace. Díky ní můžete objekty zvětšovat, otáčet nebo naklápět.

Problém ale tkví v tom, že každý prohlížeč používá vlastní definici a je pak dost obtížné na žádný nezapomenout.

S tím vám ale pomohou následující nástroje:

Pomocí Matrix generátoru můžete snadno naklikat přesně takovou transformaci, jakou chcete. Stačí jen zobrazený obdélník otočit (rotate), zvětšit (scale) či skosit (skew) a pak si zkopírovat CSS definice. Nevýhodou je, že nefunguje pro IE8 a starší.

Druhý nástroj, CSS3 Transforms translator naopak překládá vámi zadanou transformaci a zajistí, abyste nezapomněli na žádný prohlížeč. Do políčka zadejte požadované metody (rotate(), translate_(), scale(), apod.; použít můžete i matrix() vygenerovaný předchozím nástrojem) a klikněte na Translate.

Translator (docela paradoxně :)) nejlépe funguje v IE8, protože pak si může sám ověřit správnost nastavení fitrů pro IE. Navíc vám přímo zobrazuje ukázku toho, jak se transformace bude aplikovat a tak si můžete sami ověřit, zda funguje nebo ne.

Pokud translator hlásí nepodporovanou funkci, zkontrolujte, že text obsahuje pouze transform metody a nejsou v poli uvedeny žádné další znaky (např. středník na konci) ani texty (např. transform:) a používáte správné závorky. Pokud překlad nefunguje ani po opravě, zkuste stránku obnovit (F5).

 

HTML, Pozicování

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

Napsat komentář

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

Mobilní, Ovládání

Skrolování prstem

Napsat komentář

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