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;
}
}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
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í.
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).
V CSS3 jde udělat všechno, například efekt zatmění slunce (angl. eclipse)
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é.
Element HR slouží jako vodorovná čára. Pokud ho ale nepoužíváte a naopak používáte plovoucí prvky (float), občas (nebo spíše často) můžete potřebovat obtékání zastavit (clear).
K tomu lze snadno použít právě element HR, kterému seberete okraj (border):
hr {
clear: both;
border: 0 none;
height: 0;
}
Díky tomu, že HR ve výchozím stylu zabírá pouze jeden pixel na výšku (někdy 2px, protože vytváří stínovanou čáru) a má pouze horní rámeček (border-top), se dá takhle snadno změnit na neviditelný oddělovač plovoucích prvků.