Ako keby nestačilo, že žiadny browser sa nespráva celkom podľa (chaoticky prekomplikovanej) špecifikácie CSSka, občas máte tú česť naraziť na divné správanie, ktoré zámerne vytvorili jeho autori. Dnešný príklad -keď dáte obrázok do vnútra div elementu, na spodku sa vytvorí medzera. Prečo sa to deje a prečo by mi to malo vôbec vadiť?

Strihal som CSSko s dizajnom, kde má byť pod obrázkom aktuálne veľmi obľúbené "zloženie" za pozadie (ako vidíte na obrázočku vľavo hore). Tak si hovorím, že šak pohoda, spravím div s paddingom na spodku, v ktorom bude ako pozadie ten šedý cicík™ a posuniem celý div doľava. V tomto div-e by potom mohol byť hocijaký obrázok a bol by pekne ocicíkovaný.

.obrazok_s_cicikom {
	float: left;
	padding-bottom: 5px;
	margin-bottom: 8px;
	position: relative;
	left: -6px;
	background: transparent url('cicik.png') 0% 100% no-repeat;
}

No a tu prichádza zrada, cicík je posunutý o 3 pixely nižšie! Pôvodne som myslel, že to je nejaký bug browseru, ale ukázalo sa, že sa rovnako správa vo Firefoxe, Chrome, Opere a dokonca aj IE. Obrázok mal veľkosť 83, div 86. Tak skúšam vypínať bordery, paddingy, marginy, aj keď viem, že tam aj tak nie sú. Zo zúfalosti nahodím celý CSS reset a stále nič.

Po chvíli hľadania som sa dopátral k zaujímavému zisteniu. Obrázok natiahne div preto, že je braný ako inline element, ktorý sa snaží byť zarovno základnej čiary textu (baseline). Text je ale beťár a niektoré znaky má pod touto čiarou (malé "p", "q", "g", ...), takže div sa pre istotu roztiahne.

Divné. Obrázok síce nie je zrovna text, ale v podstate to dáva zmysel.

Čo sa s tým dá teda robiť? Buď spraviť z obrázku "nie-text" (.obrazok_s_cicikom img { display: block; }) alebo, ešte lepšie, nastaviť ho na najspodnejšiu úroveň textu (.obrazok_s_cicikom img { vertical-align: bottom; }).

Tak, tam máš záhada, práve si bola objasnená! Nabudúce si povieme niečo o ešte väčšej a častejšej záhade, o margin collapsingu.

...

povedz mi o tom viac »

1 komentár

[ ]

Najprv sme si ukázali Esenciálne CSS tipy a triky, nasledovali Užitočné CSS tipy a triky a dnes si povieme čo to o CSS3.

CSS3 je nová špecifikácia, ktorá do CSS pridáva kopu efektov a srandičiek. A mnohé z nich radikálne uľahčujú dizajnérom život. Zatiaľ to nie je oficiálny štandard, čo niektorí chápu ako povolenie vystupovať proti jeho používaniu. Kravina, CSS3 je awesome a je použiteľné už dnes.

Fun fact: aby sa špecifikácia stala oficiálnym štandardom, musia ju plne podporovať dva prehliadače. CSS2.1, ktoré používate, nie je plne podporované žiadnym. Najbližšie k tomu má IE8 ;) (zdroj: remy sharp)

Realita je taká, že moderné prehliadače podporujú mnohé z CSS3 atribútov už dnes a kľudne ich môžete používať. Staršie prehliadače neznáme atribúty jednoducho odignorujú a svet sa nezrúti keď v IE ten tieň nebude ;)

Noviniek v CSS3 je veľa, reálne použiteľných je ich menej a my si ukážeme tie, ktoré v rámci brm používame najčastejšie. Ak budem v texte používať výraz "moderné prehliadače", myslím tým Operu, Firefox, Chrome a Safari. Sorry ostatní :)

Pozor: v starých prehliadačoch nasledovné efekty nemusia byť viditeľné. Ak je toto váš prípad, stiahnite si najnovšiu verziu svojho prehliadača, v tomto prípade je novšie prakticky vždy lepšie ;)

text-shadow: [px] [px] [px] [farba]

Tieň pod písmom patrí medzi tie subtílne efekty, ktoré je fajn mať, ale ak nie sú, nič závažné sa nestane. text-shadow podporujú všetky moderné prehliadače bez problémov už nejakú tú dobu a funguje asi takto:

brm brm brm

text-shadow: 2px 2px 3px #317392;

bla bla bla

text-shadow: -1px -1px 0px #ccc;

...

povedz mi o tom viac »

2 komentáre

[ ]

Nedávno sme si ukázali esenciálne css tipy a triky, teda veci, ktoré potrebujete vedieť. Dnes si ukážeme užitočné css tipy a triky, teda veci, ktoré je fajn vedieť.

CSS reset

Čo: CSS reset je CSSko obsahujúce nastavenia, ktoré pomáhajú zabezpečiť kompatibilitu prehliadačov.

Prečo: veci, ktorým presne neurčíte ako majú vyzerať, prehliadač vykreslí podľa vlastného uváženia. A každý z nich môže uvažovať inak. Medzery medzi <p> môžu byť rôzne, veľkosti písma v <h1>...<h6> môžu byť rôzne, niektoré prehliadače môžu okolo obrázkov zobrazovať border atď. Použitím CSS resetu vytvoríte pre všetky prehliadače rovnakú štartovaciu pozíciu.

<p> v <div>, firefox má odsadenie, IE nie... zdroj obrázku

Ako: toto Eric Meyer's Reset (prípadne upravenú verziu) hodíte do svojho HTML pred ostatné CSSká, prípadne stačí skopírovať kód na začiatok svojho CSS súboru.

Čo dodať: Existujú aj resety od iných autorov, tento je však zrejme najpoužívanejší. Je to obyčajné CSS a je teda dobrý nápad si ho upraviť podľa vlastnej potreby. Nie vždy budete používať všetky elementy, ktorých štýly sú "resetované", takže ich môžete kľudne z resetu odstrániť a vo všeobecnosti si to upraviť ako len chcete.

Môžno si práve hovoríte "Toto je všetko pekné a fajn, ale..." a ja to plne chápem. Možno vám vyhovuje spôsob, akým prehliadače vykresľujú veci. Možno vám nevadí, že niektoré veci vyzerajú v IE trochu ináč. Možno máte dojem, že je to plno zbytočného kódu a že ak vám aj niečo bude prekážať, upravíte si to sami. A to je v poriadku. Je však dobré vedieť, že možnosť ako CSS reset existuje.

...

povedz mi o tom viac »

4 komentáre

[ ]

CSS je slušný bordel. Nie že by sa s ním nedalo pracovať, avšak aby ho dizajnér donútil vypľuť zo seba ako-tak-modernú stránku, potrebuje poznať riadnu dávku trikov, odžubov a čiernej mágie.

V tomto článku predstavíme problémy, s ktorými sa web-človek bežne stretáva, ukážeme si riešenia a nakoniec možno prihodíme pár užitočných tipov a možno aj trikov. Ak budete poslúchať. ;)

Predtým ale odporúčam mrknúť na HTML inline a block elementy. Článok tiež predpokladá aspoň základnú znalosť CSS. Ak také nemáte, nevadí, zastavíte sa neskôr :) Ok? Let's go.

Horizontálne centrovanie

Na zarovnanie textu na stred máme text-align: center; ale pre block elementy (ako <div>) nič podobné neexistuje. Čo je problém v dobe, kedy je väčšina stránok na stred obrazovky.

Riešenie: nastaviť centrovanému elementu pevnú šírku a margin: 0px auto;

V tomto prípade bude #box2 zhora a zdola odsadený o 15px a zo strán o "auto", čo prehliadač chápe tak, že ho má hodiť na stred rodiča - čiže do stredu divu #container.

...

povedz mi o tom viac »

8 komentárov

[ ]