Marco Blog

V dnešním díle pokračování mini-seriálu a podtitulem Čísla v CSS se zamyslíme nad volbou rozměrů pro jednotlivé elementy. Uvedu pár běžných příkladů z praxe, na které jste již mohli sami narazit, nastíním jejich řešení a vysvětlím, proč tomu tak je. Problém 1 "Při zmenšování okna mi uskakuje div zarovnaný na střed a neladí tak s pozadím." Vysvětlení Pokud po internetovém prohlížeči chceme aby cokoliv zarovnal na střed neboli na 50% šířky rodičovského elementu, můžou nastat následující situace: Šírka elementu: sudá . Šířka pozadí: sudá . Šírka elementu: lichá. Šířka pozadí: sudá. Šírka elementu: sudá. Šířka pozadí: lichá. Šírka elementu: lichá. Šířka pozadí: lichá. Ad 1) V tomto případě se vše zobrazí správně Ad 2, 3, 4) Zde jsme donutili prohlížeč zaokrouhlovat a je jen na něm jestli zaokrouhlí nahoru nebo dolů. S největší pravděpodobností v různých prohlížečích uvidíte pixelové rozdíly v zobrazování výsledné stránky. ...

Úvodní díl mini-série z mých poznatků o CSS. Během této série se podíváme nejen na názvy tříd , psaní cross-browser CSS, testování , responzivní design a i nějaký ten výhled na budoucnost . Snad se bude líbit. Díl 1: Pravidla pro Názvy tříd v CSS Sjednoťte svůj jazyk! Je vaše svobodná volba pokud se rozhodnete používat např. češtinu. Když už ji ale jednou začnete používat, zůstaňte u toho po dobu celého projektu. Vyvarujte se používání specifických názvů tříd - červená, modrá, Šedá, světlá, tmavá, vlevo, vpravo. Stačí například mírný zásah do grafiky webu a vaše třída .červená se bude muset v celém projektu změnit na .modrá.  Pište malým písmem.... prosím Na dlouhé názvy camelCase nebo pomlčky ? Wordpress Codex doporučuje pomlčky. Osobně je mi to fuk v případě, že je tento styl opět jednotný! Všechny pravidla porušte . Pokud už 5 minut přemýšlíte nad správným názvem (a nepracujete na projektu, jehož kód uvidí statisíce programátorů) je na čase to vzdát a udělat...

Při nedávnem prohlížení mých starých projektů jsem si všiml, že se mi nezobrazují některé elementy na stránce. Po chvilce pátrání jsem zjistil , že má toto na svědomí nově nainstalovaný AdBlocker . Pro ty co neví: AdBlocker je hojně užívané rozšíření internetového prohlížeče, jehož úkolem je zablokování (skrývání) reklamních bloků na stránkách. Jak spolu ale souvisí názvy tříd a AdBlocker? Kromě jiných technik blokování reklamy, využívá Adblocker svou vlastní databázi CSS tříd , které používají nejznámější poskytovatelé reklamních bannerů na internetu. Takže pokud se taková třída na vašich stránkách objeví, je více než možné , že se u klienta, který má AdBlocker nainstalovaný daný prvek stránky prostě nezobrazí . A které to jsou?  Toto se samozřejmě mění od verze k verzi, ale většina má společné rysy. V názvu třídy se vyskytuje slovo " AD " či " Advertisement ". Moje rada tedy zní Snažte se vyhnout používání výše zmíněných slov v názvech vašich tří...

Upozornění: Tento článek je již zastaralý. Ať už jste donuceni z jakéhokoli důvodu použít obě výše zmíněné Javascriptové knihovny na jednom projektu, možná se Vám bude hodit následující tip. Předem je třeba říct, že tyto knihovny skutečně mohou fungovat zároveň a nebude Vás to stát mnoho úsilí. Jak jistě víte, jQuery i Mootools používají znak dolaru ($) jako zkratku pro volání funkce jenž je jádrem obou knihoven. Toto chování lze však u jQuery vypnout pomocí jednoduchého příkazu: jQuery.noConflict(); Na internetu je mnoho diskuzí kde doporučují následující postup: < script  type = "text/javascript"  src = "jquery-1.3.js" >< /script> < script  type = "text/javascript" > jQuery . noConflict ( ) ; < /script> < script  type = "text/javascript"  src = "moo1.2.js" >< /script> Všimněte si, že se zde prvně načítá jQuery, poté se vypne asociace k dolaru a nakonec se načítá Mootools. Toto řešen...

Dnes jen velice krátce. Na spoustě webů používajících vodorovné čáry přes celou šířku okna prohlížeče bývá často viděn neošetřený problém , způsobující nehezký vzhled při scrolování . Jeden obrázek za tisíc slov: Jak vidíte, pozadí stránky není zcela dotažené do konce, což možná zrovna u facebooku možná tolik nevadí, protože je pozadí bílé. Na jiném webu by to však mohlo způsobit například nečitelnost textu. To je způsobeno tím, že má element s pozadím nastavenou šířku na 100%. Pokud tedy zmenšíme okno na velikost menší než je šířka našeho globálního wrapperu (který používáme třeba kvůli vystředění stránky), tak tento wraper přeteče přes šířku nadřazeného elementu (čili elementu s pozadím). A jaké má tato situace řešení? Velice jednoduché, stačí nastavit elementu nesoucímu toto pozadí minimální šířku. V případě facebooku tedy: #bluebar  {    /*původní definice*/    min-width :  981px ; } Doufám, že se Vám tento tip bude hodit.

Dnes pro vás mám dvě užitečné CSS třídy, které můžete s drobnými úpravami hromadně používat ve vašich projektech. Je určen hlavně do prostředí, kde nemůžeme spoléhat na podporu CSS3. Bez dalšího dlouhého vysvětlování... Chcete-li zaoblit rohy elementu o 1 pixel, přiřaďte mu třídu rounded-corner-1 , která je definována takto: . rounded-corner-1  {      display :  inline-block ;      background :  #fff ;      border-left :  1px  solid  #fff ;      border-right :  1px  solid  #fff ; } . rounded-corner-1 : before {      border-top :  1px  solid  #fff ;      padding-top :  1px ;      display :  block ;      content :  " " ;      position :  relative ;      top :  -1px ; } . rounded-corner-1 : after {      border-bottom :...