Jsem puntičkář, mám rád, když věci mají jasný řád. Ale todle nějak nejde dohromady s našimi CSS soubory. Snažil jsem se malinko upravit layout stránky a vztekal jsem se s tím skoro půl dne. A pak mi srazil vaz Explorer a začal iterativní proces sbližování vzhledu Firefox vs. Explorer.
Nakonec jsem se poohlídl na webu po nějakých radách a typech, jak zanést řád do změti selectorů, atributů a jejich hodnot. Našel jsem pár šikovných rad, které jsou zřejmě lidem pracujícím s CSS delší dobu již známy, protože si je velmi pravděpodobně již vymysleli nebo přečetli. Ale pro Javisty, kteří považují CSS spíš za nutné zlo, snad budou tyto rady prospěšné (i když všechny popisované principy jsou nám již dávno známé).
Modulárnost
První věcí je modulárnost a její striktní dodržování. Přivede nás k opakovanému použití celých CSS souborů. Takže náš styl jsme rozdělili do následujících souborů:- Typografie - definuje základní vlastnosti HTML elementů včetně fontů, velikostí atd. Tento soubor je nezávislý na projektu.
- Formuláře - asi nejsložitější část stylů, spousta hacků, aby formuláře vypadaly stejně ve většině prohlížečů apod.
- Navigace - velmi často se menu aplikace dá použít napříč více projekty, takže proto jej umístěme do zvláštního souboru.
- Layout - základní layout stránky je velmi jednoduše oddělitelný od zbytku a navíc je silně projektově závislý.
- Barvy - definice barev je samostatná, což umožňuje jednoduché přebarvení stránek, vše máte na jednom místě.
@import url("file_name.css");.Sjednocení marginu a paddingu mezi Explorerem a Firefoxem
Následuje zjednošení počtu hacků, které používají jiné definice pro Explorer a Firefox. Celá věc je velmi jednoduchá a ušetří spoustu kódu:* {
padding:0;
margin:0;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {
margin:1em 5%;
}
li, dd {
margin-left:5%;
}
fieldset {
padding: .5em;
}
Speciální CSS soubor pro Explorer
Protože jsme stále potřebovali řadu hacků, speciálně pro Explorer (primární platformou pro vývoj je u nás Firefox), pomocí podmíněného komentáře dotahujeme styl pro Explorer (nakonec jsme použili stejnou hierarchii jako v kapitole o modulárnosi):<!--[if IE] >
< link rel="stylesheet" href="IE.css" media="screen" />
<![endif]-- >
Příspěvky
Žádné komentáře:
Okomentovat