Změna velikosti písma

Drobečková navigace

CSS blog > Pravidla

Pravidla - Na co si dát pozor

Navigace

Stylování akčních tlačítek

Pro převážnou většinu grafik je potřeba nastylovat "akční tlačítka", jako jsou např. všechny tlačítka "odeslat", "přihlásit k odběru novinek", "vyhledat" apod.

Všechny barvy pro tlačítka se dají nastavit v Paletě barev. Není potřeba zahlcovat uživatelské CSS vygenerovanými kódy z gradient generátorů / přepisovat v CSS barvy pozadí / písma apod.

Nejrychlejší způsob je použít addon do prohlížečů colorzilla (kapátko) a "nakapat" si barvy do Palety barev přímo z napasované grafiky tak, aby ladily s designem webu.

Nahrazení spec znaků v url souborů a obrázků

Veškeré obrázky a soubory v HTML v layoutu obsahují znak & ve své url. Pro to, aby byl kód validní, je potřeba tyto znaky nahradit za html entitu &

Url obrázku nebo souboru v html v layoutu by mělo správně vypadat:

soubor

file.php?nid=11524&oid=3197848

obrázek

image.php?nid=11350&oid=2936956

Z-indexy prvků v grafice

"Co je to z-index? Je to nastavení pořadí prvků ve vrstvách vůči zobrazení do popředí. Prvek s nejvyšší hodnotou z-index se zobrazuje nejvíce v popředí.".

Je potřeba dbát na to, aby hodnoty Vašich prvků umístěných do HTML v layoutu / html stránek ve struktuře nepřesahovali hodnotu 100 -> max. hodnota, kterou můžete nastavit v uživatelských CSS je 99. A to kvůli systémovým prvkům redakčního systému jako je editační lišta, která má nastavenou hodnotu z-indexu 100. Uživateli, který edituje IPO by Vaše prvky tak překrývali editační lišty.

Řešení textů v grafice obrázkem

Většinu textů umístěných v grafice lze řešit textem a není potřeba je řešit obrázkem. Usnadní to budoucí manipulaci s textem a především načítání textu ušetří drahocenné Kb při načítání stránek. Více info také v Tipy a triky

Použití obrázků/souborů z cizích stránek se stejným url

Každý obrázek použitý do grafiky musí být nahraný pro konkrétní subjekt ve stránkách a s konkrétním url být použitý v CSS. Každá stránka má nějaký svůj nodeid, v url "nid=". Mám-li tedy stránky "X", obrázky/soubory mají url ve tvaru image.php?nid=X&.. tak nemohu použít v CSS/HTML ve stránkách "Y" obrázek s tvarem image.php?nid=X&.., ale obrázek musím do stránek "Y" nahrát a pak ho až použit.

Důvodem je, že se obrázky/soubory z cizích zdrojů již nebudou načítat. Především to může způsobovat už problém nyní, pakliže cizí zdroj obrázek/soubor ze stránek smaže, tak samozřejmě přestane fungovat i na cílové stránce, kde ho z cizích zdrojů používáme.

Pozicování

Je potřeba ohlídat si v případě pozicování jakým způsobem prvky pozicujete. Je potřeba mít na paměti vztahy pozice relativní a absolutní. Relativní pozice samotná bez udání posunu vlevo/pravo/nahoru/dolu "nic neprovede", pouze jako rodič ovlivňuje absolutně pozicované prvky a to "z jaké pozice" se bude absolutně pozicovaný prvek pozicovat. Při pozicování relativně pozicovaného prvku si prvek nechá vymezené své vyhrazené místo v kódu a posune se o X/Y. Kdežto absolutně pozicovaný prvek se "vyjme z vrstvy", své vyhrazené místo v kódu uvolní a pozicuje se od prvního relativně pozicovaného prvku.

Mějte na paměti používání hodnot top, bottom, left a right. Není potřeba při napozicování prvku do pravého kraje stránky používat hodnoty "left: 890px", když můžete použít "right: 0" apod.

Pozicování komponent ve sloupci

Komponenty ve sloupcích je nyní již možné ze strany BO/Hotline posunout systémově. Není tedy potřeba komponenty nijak absolutně/relativně/jQuery přesouvat v rámci sloupce nebo do sloupce jiného. Komponenty se posouvají vykreslením do sloupce a na konkrétní pozici před/za nějaký prvek nebo udělat úplně nové řazení. Funkce pro Vás zatím není dostupná. Nicméně takový posun zatím není tak častý, že by pro Vás byl potřeba. Proto pokud budete chtít např. přehodit kalendář akcí za novinky ve sloupci, založte prosím ticket na Helpdesk.

Špatně nastavené spec. vlastnosti dočasných stránek

Pokud používáte jako "pomocníka" prázdnou stránku pro vkládání obrázků / souborů do stránek, které následně používáte v CSS/HTML, je potřeba této stránce nastavit ve vlastnostech stránky ve speciálních vlastnostech, aby měla zaškrtnuté tyto vlastnosti: "Nezobrazovat v menu" a "Nezobrazovat v mapě stránek". Zároveň pokud jsou práce dokončeny, měla by být stránka smazána, jelikož obrázky/soubory jsou v případě použití v html v layoutu/uživ. CSS označeny v administraci souborů jako "Použité". Vyjímka je pouze v případě, pokud stránka obsahuje obrázky/soubory, které jsou použity v externích CSS souborech, které se používají třeba pro přepínání grafických variant.

Kopírování nepoužitých stylů

Veškeré styly použité v uživatelských stylech, které nejsou určeny pro konkrétní stránky nebo stránky neobsahují konkrétní stylovaný element, tak přijdou odstranit. Může se tak stát při Vašem urychlování práce při kopírování již použitých stylů z předešlých prací. Jakékoliv stránky, které budou obsahovat takové nepoužité stylování, tak budou u kontroly kvality označeny jako chybné, budou vráceny a neprojdou do doby, než se styly opraví.

Platí tedy pravidlo, že v uživatelských stylech bude obsaženo jen to, co je potřeba. 

Stylování formulářů

Každý formulář ve stránce má v obsahu svou třídu (form). Stylujte tedy formulář bezvýhradně správně s takovým selektorem. Nikdy dále již nestylujte formuláře přes jejich ID na <form>. Tedy selektory #frm-form budou dále považovány za chybu. Důvodem je možná změna ID formulářů s ohledem na případný přechod na novější technologie, kdy je ID generováno automaticky. Pokud by taková class někde chyběla, dejte mi vědět a přidáme ji do systému. Použití takového stylování je opět bráno za chybu.

Takový selektor tedy může vypadat např.:

.ipopagetext .form textarea, .ipopagetext .form input[type="text"], ... {
.....
}

Stylování pro konkrétní stránku nadále zůstává přes <body> a jeho ID. Konkrétní inputy prosím nestylujte opět přes jejich ID, ale použijte selektor přes "name". Takový selektor může vypadat např.:

.ipopagetext .form input[name="email"] {
.....
}

Používání ID namísto class

Vyhněte se, prosím, při své práci používání ID. Tedy Vámi vytvořené prvky by měly mít vždy jen class.

důvodem odstranění používání ID je s ohledem na nové moduly a komponenty v IPO, které jsou již nyní stylovány pouze přes třídy. Hlavně pak kvůli modulům, které mohou být použity více jak jedenkrát ve stránkách (sloupce). Dále pak hlavně předejití problémům kvůli validitě stránek. Dvakrát použité ID na jedné stránce není validní. Dalším důvodem je, že se často stylují elementy přes jejich ID, které jsou třeba jen systémově vygenerované, jako jsou třeba formuláře. Použití takových systémově generovaných ID je bohužel špatně, protože v momentě, kdy se bude měnit technologie třeba u těch formulářů, tak se forma ID může změnit a stylování nebude fungovat. Jde tedy pouze o implementaci konvence, která předejde zbytečným problémům a zbytečným hodinám na úpravy při předělávání komponent.

Co se týče stylování již nadefinovaných systémových prvků, tak pokud máte možnost, využívejte jen class. Pokud možnost není, použijte ID. Použití ID tam, kde je možné použít class je opět bráno za chybu.

Skrývání nepotřebných modulů

Platí pravidlo, že moduly, které jsou povoleny, ale z nějakého popudu nemají být v celých stránkách zobrazeny, tak budou vypnuty. Jejich skrytí pouze přes uživatelské CSS nestačí, neb i přes skrytí v CSS se do stránek generuje kód, který je v takovém případě nepotřebný. Pokud tedy vznikne situace, že modul (jedná se především o moduly pro sloupce, popř. spec. komponenty modulů v obsahu) není pro stránky potřeba, tak se vypne. Buď ve svém vlastním nastavení (např. přihlášení k odběru novinek z aktualit / vyhledávací formulář v katalogu / .. ) nebo v ipoadmin (kontaktní formulář ve sloupci, vyhledávání v katalogu, ..). Pokud nemáte dostatečná práva na cokoliv nebo si nevíte rady, využijte ticket v ipoadmin na Helpdesk.

Použití sprite

Dále platí pravidlo, že co lze, tak při stylování bude provedeno spritem. Zpravidla se nejčastěji jedná např. o rozcestníky, buttony, pozadí položek menu, vlastní ikony, apod. viz. článek v blogu.

Generování elementů pouze pro konkrétní stránky

Elementy používané pouze pro konkrétní stránky by měly být ošetřeny generováním, resp. vykreslením pouze pro konkrétní stránky nebo mutace za použití podmínek iflang="", ifpage="" nebo ifsubpage="". Jejich skrytí/odkrytí pouze přes CSS se dá považovat za chybu, neb i přes skrytí přes CSS se generuje HTML kód, popř. související scripty.

Stylování sekcí

Sekce stránek (kontextové menu, verze webu, ..) by měly být stylovány přes třídy na <body> ve formátu "subpage123456". Stránky by neměly být v CSS vypsány ručně se selektory #page567889, protože tím není ošetřený případ, kdy uživatel přidá do sekce další stránky.

Používání !important

Používání !important je zakázáno. Pro přetížení systémových stylů je potřeba použít správně selektor. Jediný případ, kdy je možné použít zatím !important je pokud má !important systémové stylování a to do doby, než bude ze systemových stylů odstraněno a nahrazeno správným selektorem. Jediný další možný případ použití je pro zarovnání obrázků ve fotogalerii pokud manipulujete s odsazením obsahu. Odsazení se dopočítává systémově inline styly podle rozměrů náhledů.

Duplicitní stylování

Vaše stylování by nikdy nemělo zbytečně kopírovat systémové stylování, kdy z Vaší strany nedojde ke změně konkrétní vlastnosti. Pokud tedy zkopírujete systémově nastavené např. "padding: 5px;" a v uživ. stylech bude také "padding: 5px;" je to špatně a je potřeba uvedené odstranit.

Přítomnost nepoužitého stylování, zakomentovaných stylů

Uživ. stylování bude obsahovat pouze ty styly, které jsou potřeba pro design. Nebudou tedy obsahovat zbytečnosti, které ve stránkách nejsou nikde použity. Zároveň uživ. stylování nebude obsahovat zakomentované staré stylování.

White space

Přítomnost zbytečných whitespace je zakázána. White space je označen všude, kde je použitý CodeMirror, tj. HTML v layoutu a Uživ. CSS. Jsou to veškeré prázdné/bílé znaky, které podtržené červenou vlnovkou. Stejně jako u kontroly pravopisu. Příkladem je třeba přebytečná mezera na konci řádku.

Nenaformátované vlastní HTML v layoutu a uživatelské styly

Vzhledem k tomu, že Vaše výtvory nejsou pouze pro Vaše oči a často se jimi přebírá a upravuje je více lidí, je potřeba udržet standard a to, že vlastní HTML a vlastní CSS bude naformátované. Zvyklostí bude jak html, tak i CSS nejlépe vždy na newline a odsazené tabulátorem.

 

Kalendář akcí

Po Út St Čt So Ne
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4