Zvolené téma: "CSS"

Jak jsem opravoval optický klam

Jak jsem opravoval optický klam

Aneb stále se učím. Tedy abych byl přesný, nejednalo se o optický klam, ale o bug v zobrazení modelu RGB. Měl jsem stránku, kde byly v patičce ikonky sociálních sítí. A došel mi bug report, že druhá z ikon, YouTube, je trochu uskočená. Jelikož obrázky byly stylama zmenšené a navíc měly jednopixelovou mezeru přímo v sobě, první, co mě napadlo, bylo samozřejmě vše přeuložit. Zkusil jsem mezeru v obrázku, mezeru mimo obrázek, dvoupixelovou mezeru vně i uvnitř obrázku, no prostě všechno... Nic.

Celý článek

Když klient reportuje už opravené chyby

Když klient reportuje už opravené chyby

Provádění stylových, grafických či JavaScriptových úprav na webové prezentaci a jejich následné posílání na validaci klientovi by vydalo na samostatný blog, já vám ale dnes ukážu jednoduchý tip, jak těmto situacím co nejvíce předejít. Znáte to: upravíte styl, napíšete, že je hotovo a klient vám obratem odpoví, že není. Tak musíte znovu otevřít mail, napsat mu, aby zmáčknul ctrl+F5 nebo ctrl+R a pak bude to v pořádku. Jenže po jisté době to samozřejmě začne být otravné... Jak tedy donutit prohlížeč aby smazal původní soubor v cache a nahradil ho novým?

Řešení je velice jednoduché. Využijeme GET parametrů tam, kde zdánlivě nic nedělají. Proměnná za otazníkem zpravidla slouží pro skriptovací jazyky a podmíněné zobrazení čehokoli, co v danou chvíli potřebujeme. Co se ale stane, když uvedeme parametr u obrázku či stylu? Prohlížeč takovýto zápis pochopí jako nový soubor, takže nezobrazí jeho starší verzi z cache ale načte ho pěkně znovu.

Celý článek

10 způsobů, jak udělat z Internet Exploreru moderní prohlížeč

10 způsobů, jak udělat z Internet  Exploreru moderní prohlížeč

Kolega mi nedávno doporučil zajímavý článek s tipy, jak přimět Internet Explorer 6, aby se choval jako "pořádný" prohlížeč. Považuji za slušné vychování se s vámi o tyto vyzkoušené triky podělit. Originální text je v angličtině, a tak ho po přeložení také publikuji. Ukážeme si například, jak na stínování písma, průhlednost, kulaté rohy přes CSS nebo zprovoznění HTML 5.

Celý článek

CSS hacky pro nejpoužívanější prohlížeče

CSS hacky pro nejpoužívanější prohlížeče

Odlišené vykreslení různými prohlížeči je věc, která dříve či později potrápí každého kodéra. Ať už se jedná přímo o bugy, nebo pouze o drobný rozdíl při vykreslování konkrétních prvků, je potřeba dosáhnout shody ve všech majoritních prohlížečích. Chyby Internet Exploreru a způsoby, jak je obejít jsou dávno obecně známé, ovšem o umravnění zlobivého Firefoxu nebo Google Chrome se tolik nemluví. I když je v kodérově nejlepším zájmu, psát styly tak, aby hacků použil co nejméně, nastávají situace, kdy se jim vyhnout nemůžeme. Oprava stylů po někom jiném je práce, kterou nikdo nemá rád a nechce dělat, ale také vhodná chvíle, kdy nasadit CSS hacky.

Celý článek

Test: Jak dobře umíte CSS?

Test: Jak dobře umíte CSS?

CSS není jen o znalosti atributů a jejich vykreslení v tom či jiném prohlížeči - CSS skrývá i spoustu dalších úskalí. Denně přicházím do kontaktu s weby, jejichž stylové předpisy mají 30 kilobytů či více, a věřte nevěřte, jsou i případy, kdy se přidání nebo smazání některé globální definice rovná píchnutí do vosího hnízda. Někdy totiž nestačí pouze vyladění pro nejpoužívanější prohlížeče - člověk musí znát i způsoby zápisu té samé definice a prioritu, kterou bude mít oproti definicím ostatním. Říká se, že poslední definice platí...

Celý článek

Mýty a pověry okolo Box Modelu

Mýty a pověry okolo Box Modelu

Při hledání odpovědi co přesně se Internet Exploreru honí hlavou když se přepíná do Quirk módu a proč tomu tak činí jsem narazil na spoustu článků, popisující chování IE při pár konkrétních DTD, ale všude vždy 2, maximálně 3 příklady. Stejně tak, jako se všichni zabývají neustále jen Box Modelem a některé další důležité neshody opomíjí.

Vytvořil jsem si proto 5 různých html dokumentů s pěti různými Doctype a zkoumal jejich chování v IE5, IE6 a IE7. Krom vykreslení rámečku jsem testoval i dvě další vlastnosti, s jejichž odlišnou interpretací jsem se v minulosti setkal. Ve dvou dílech svých CSS tutoriálů jsem vždy popisoval řešení, jak potencionální problémy obejít, jak se jim vyhnout. Pokud ale předpovíme přesné chování Exploreru, můžeme toho i využít a viditelně si ulehčit práci.

Celý článek

Všední den webmastera

Všední den webmastera

Už to není žádné tajemství, mám práci. Webmaster, na plný úvazek. Co všechno vlastně dělá takový webmaster vám pokusím alespoň trochu nastínit. Sám jsem měl po pár dnech pocit, že jsem si vše představoval takříkajíc jako "Hurvajz vojnu", a že se snad nikdy nedostanu k tomu, co mě baví nejvíce: čisté kódování.

Zpočátku se jednalo o drobnosti. Údržba stávajících projektů, drobné změny dle specifikace, doplňování textů, přidávání nových kategorií do existujících webů: vše změny vyžadující zásah do někým napsaného kódu. Úpravy, jenž má autor kódu hotové za 5 minut, vy se s tím pachtíte půl hodiny…

Celý článek

CSS layout, aneb web bez tabulek - tutoriál

Jak jsem již zmínil v poslední článku, existují 3 způsoby, kterými můžete vytvořit lay-out pro svůj web. Rámy, tabulky nebo tzv. striktní div/CSS. Rámy snad ani nemusím komentovat, ovšem horší je to s tabulkami. I dnes mnoho webů používá tento nesprávný způsob rozvržení. Tabulka je určena pro zobrazování tabulkových dat, a ne pro lay-out celého webu. Na popud všech těch stránek / tabulek jsem se rozhodl napsat následující tutoriál. Doufám, že Vám alespoň trochu pomůže. To by snad na úvod stačilo, a pustíme se do toho =o)

Nejdřív si vytvoříme jednoduchou (x)HTML stánku a vhodně do ní umístíme divy. (nečti jako Ď =o) ) Divů není nikdy dost, a když náhodou jeden neostylujeme, nic se nestane. Stránka by mohla vypadat nějak takto: index.htm. A protože chceme mít moderní web se vším všudy, začneme rovnou s XHTML 1.0 Strict =o) Do stránky zatím nebudeme vkládat žádný obsah a pustíme se do samotného stylopisu.

Celý článek

Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua