Nulování odsazení v CSS. Stojí to za použití resetu CSS

Převod

Tento článek je první cyklus na téma CSS zkrocení. Dnes se podíváme na technologii CSS reset..

Proč to potřebuješ?

Každý prohlížeč nastaví výchozí styly pro různé prvky HTML. S pomocí CSS resetu můžeme tento rozdíl vyrovnat s cílem zajistit styly Prohlížeč.

Používáte například položku a. Ve vašem dokumentu. Většina prohlížečů Internet Explorer. A Firefox Přidat odkaz modrá barva a ostrý. Představte si však, že za pět let se někdo rozhodl vytvořit nový prohlížeč (Zavolejme to Ultrabrowser). Vývojáři prohlížeče neměli rádi modrý a naštvaný důraz, takže se rozhodli přidělit odkazy Červené a tučné písmo. Je založen na tom, pokud nastavíte základní hodnotu stylů pro položku a.Bude zaručeno, že bude tak, jak chcete vidět, a ne tak raději zobrazit vývojáře ultrabrowser.

Ale teď nemáme žádné odrážky vůbec, včetně jednotlivých odstavců! Co dělat? Nebojujte se a nebojte se: pod naším výbojem popisujeme pravidlo, které potřebujeme. Může být provedeno různé způsoby: Určete odrážku zdola nebo nahoře odstavce, zadejte jej v procentech, pixelech nebo v EM.

Nejdůležitější věcí, prohlížeč nyní hraje podle našich pravidel a ne podle ní. Rozhodl jsem se dělat tímto způsobem:

* (Marže: 0; polstrování: 0;) p (marže: 5px 0 10px 0;);

V důsledku toho jsme měli ve třetím příkladu vidět.

Můžete si vytvořit vlastní styly pro resetování, pokud vyřešíte určitý konkrétní úkol ve svém projektu. Navzdory tomu není krok za krokem vedení Vytvořením vlastního resetu CSS. Doporučujeme svým vlastním principům a vlastním stylem.

Abychom vám pomohli rozhodnout, dám pár dalších odkazů:

Méně je více - můj výběr resetu CSS (Ed Elliot).

2. Váš reset CSS je první věc, kterou vidíte prohlížeč

Reset stylů po instalaci vlastních stylů pro položky je nesprávný přístup. V tomto případě nic dobrého čekat na zobrazení prohlížeče. Nezapomeňte, že nejprve vždy připojte reset CSS a pak všechny ostatní styly.

Ano, chápu, že je to směšné, ale to je jeden z hlavních chyb vývojářů od Malé až po skvělé. Mnozí na to zapomněli.

Někteří se mohou zeptat logické otázky: Proč se děje? Odpověď je jednoduchá: pravidla zaznamenaná pod textem souboru CSS (a dokonce i nižší podle jejich připojení v dokumentu), přepsat pravidla deklarovaná dříve.

Pojďme se pohybovat velmi z tématu a pokračovat. Aplikovat styly Eric Meyer do našeho příkladu, ale po Popisy našich vlastností, jak je znázorněno na 4 příklady. Matematika by řekla následující: "Co bylo nutné dokázat."

3. Použijte samostatný dokument CSS pro CSS reset

Musím (ne, neuspěli mě), abychom tuto radě zmínili. Použití samostatného souboru pro Reset CSS je běžná praxe, že velký počet podpory vývojářů.

Ve skutečnosti dodržuji pozici stvoření jeden velký soubor CSS V důsledku většího výkonu tohoto přístupu. Ale b. tento problém Mám tendenci souhlasit s většinou: reset CSS by měl být převzat do samostatného souboru (obvykle nazývaný reset.css). V tomto případě jej můžete použít v různých projektech, aniž by se snažila pobavit z jiných pravidel CSS.

4. Snažte se vyhnout použití univerzálního voliče

Navzdory tomu, že tato koncepce funguje, je jeho aplikace nejčastěji žádoucí z důvodu nekompatibility s některými prohlížeči (například tento volič je nezadán v aplikaci Internet Explorer). Měli byste použít tuto techniku \u200b\u200bpouze pro jednoduché, malé, statické a předvídatelné stránky (pokud jste již museli udělat).

Tato rada je zvláště důležitá, když vyvíjíte řešení, jako jsou témata CMS. Nelze předpovědět předem, jak to bude použito a jak bude upraveno. Je lepší popsat základní pravidla CSS pro všechny položky, než používat pro tento nepředvídatelný (i menší objem) mechanismus univerzálních selektorů.

5. Při použití resetu CSS Vyhněte se redundantním vlastnostem

Dalším důvodem, proč nemám rád samostatný soubor pro CSS reset je potenciální redundance následných prohlášení o vlastnostech CSS. Opakování jednotlivců vašich stylů mezi celou sadou souborů CSS je movietone a je třeba se vyhnout. Samozřejmě, někdy jsme příliš líní držet krok se stylem stylů a kombinovat některé z nich, ale alespoň zkuste!

Vraťme se do CSS reset z Eric. Nastaví výchozí hodnoty pro výšku čáry, barvy a pozadí tělo. následujícím způsobem:

Tělo (výška čáry: 1; barva: černá; pozadí: bílá;)

Předpokládejme, že už víte, jak bude prvek vypadat tělo.:

barva pozadí: #cccccc;
barva: # 996633;
Chcete horizontálně opakovat konkrétní obrázek pozadí.

V tomto případě není třeba vytvořit nový volič pro popis vašich vlastností - můžete jednoduše povolit v resetu CSS. Pojďme na to:

Tělo (výška čáry: 1; barva: # 996633; pozadí: #ccc URL (tiled-image.gif) opakování - X horní levý;)

Nebojte se modifikovat samotný reset CSS. Nastavte to pro sebe, aby to fungovalo na sebe. Změnit, přestavět, odstranit a přidat ji, jak potřebujete ve svém konkrétním případě.

Eric Meyer řekl o tom: "Toto není případ, kdy každý by měl používat CSS reset bez změn."

RESET CSS. (Reset stylů) je nulování s CSS, některé parametry prvků HTML, které prohlížeče jsou nainstalovány ve výchozím nastavení. Tyto prvky například zahrnují odstavce (tag), což zpočátku předkládá nenulová vertikální pole (CSS), označené seznamy (Tag), které nemají pouze pole, ale také určité značky typu (CSS) a tak dále.

Přemýšlejme, že to, co potřebujete tento reset CSS, co nám může dát? No, představte si, že jste oslavili stránky vašich stránek a zároveň nezměnili pole odstavců, které prohlížeče nabízené ve výchozím nastavení, protože jejich velikost je kompletně uspořádána. Ale řekni mi prosím, a kde jste se rozhodli, že všechny prohlížeče světa, kteří již existují a stále se objeví, vytvoří pole stejné velikosti? Kromě toho, proč si myslíte, že prohlížeče, ve kterých jste testovali vaše rozvržení, se nezmění v jejich další verze Velikost těchto polí není úplně odstraněna vůbec? Cítit to, co voní?

Tak, vyhodit CSS, verše jsou prostě omezeny z takových nedorozumění, to znamená, že nejprve resetují všechny "kritické" hodnoty vlastností CSS, a pak ji přidávají zpět, ale s vlastními velikostí. Tak si můžete být jisti, že ve všech prohlížečích bude web vypadat stejně. Můžete určitě resetovat styly, ale jednoduše nastavit rozložení nezbytné parametry Prvky, ale existuje riziko, že někde něco bude chybět a v určitém bodě vše "plave".

Na základě výše uvedeného, \u200b\u200bjeden z funkcí úlevy CSS je to po jeho použití, mnoho HTML prvků ztratí svůj obvyklý vzhled. A pokud ztráta polí v odstavcích je pro začátečníky, něco očekávaného pro začátečníky, například, například skutečnost, že tlačítka vytvořená pomocí značek nebo náhle se stala externě podobnou obvyklému textu - je naprostým překvapením. Ale to by nemělo být v rozpacích, protože pro tyto styly a jsou resetovány, takže pedigreer pak nezapomněl, aby je určil v novém.

Existuje mnoho způsobů, jak resetovat styly a co si vyberete - záleží jen na vás, ale můžu vám říct jeden - nejlepší reset je ten, který jste vytvořili, založené na vašich zkušenostech a návycích. Pokud takové zkušenosti nemáte, můžete použít jeden z níže uvedených možností.

Vždy zadejte styly pro resetování CSS na samém začátku kódu, jinak některé parametry nemusí fungovat, protože priority stylukteré jsou nainstalované prohlížeče při zpracování stránky HTML a CSS kódu.

RESET CSS s univerzálním voličem

* (Font-family: dědictví; / * Všechny prvky dědic z jejich nadřazeného sluchátka s fontem * / stylu písma: dědic; / * zdědí design * / font-hmotnost: dědic; / * zdědí mastný * / vertikální-align: Základní hodnota; / * Vertikální základní vyrovnání * / velikost písma: 100%; / * velikost písma 100% * / pozadí: transparentní; / * pozadí všech prvků transparent * / okraje: 0; / * Odstraňte rámec * / obrys: 0; / * Odstraňte obrysy * / margin: 0; / * Odstraňte pole * / polstrování: 0; / * Odstranění odsazení * /)

Popis příkladu

V tomto příkladu s univerzální volič Zadané styly jsou resetovány okamžitě na všech prvcích HTML, které budou přítomny na stránce. Jak vidíte, většina vlastností je určena přesně pro bezpečnostní síť, jako jejich hodnoty a tak, aby prohlížeče musí být ve výchozím nastavení nahradit podle specifikace CSS. Ale jak již víte, v praxi, to vše je zcela odlišné, a pokud je nemovitost skutečně zděděna prvky od rodičů ve všech předních prohlížečích, stejná externí pole určená vlastností CSS nejsou vždy zpočátku rovna nule.

Velikosti rámce (CSS) a obrysy (CSS) nejsou standardně nulové, ale již podle specifikace. Jejich tloušťka však byla resetována, takže měřidlo by nezapomnělo jasně upřesnit, kde by bylo nutné.

Reset CSS z Yahoo!

Tělo, div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, Pre, Form, Fieldset, Vstup, Textář, P, Blokování, TH, TD (marže: 0; Polstrování: 0;) Fieldset, IMG, ABBR, zkratka (hranice: 0;) Adresa, titulek, Cite, Kód, DFN, EM, Silný, TH, VAR (Font-Style: Normální; Font-Hmotnost: normální;) Stůl (Hraniční kolaps: kolaps; / * Běžné hranice pro tabulky tabulek * / hraniční vzdálenosti: 0; / * Nulování vzdálenosti mezi buňkami * /) titulkem, th (text-zarovnání: levý; / * Zarovnání textu na levém okraji * /) ol, UL (Seznam styl: žádný; / * Odstraňte značky seznamů * /) H1, H2, H3, H4, H5, H6 (velikost písma: 100%; Hmotnost písma: normální;) Q: Před, Q: Po (Obsah: ""; / * Zrušujeme citace ze značky Q * /)

Popis příkladu

Yahu najednou vyvinul vlastní verzi resetování očí. Zde se již mění vlastnosti specifických prvků, což umožňuje dosáhnout větší flexibility při jejich řízení. vnější druh. Například značky jsou odstraněny ze seznamů a značka je citace pomocí vlastnosti CSS. Výhody tohoto přístupu jsou zřejmé, ale minusy zahrnují více objemného a někdy redundantního kódu. Ale nikdo vás nesvítí, abyste změnili všechny CSS reset na vaše potřeby. Předpokládejme, že můžete odstranit některé zbytečné pro vás. tag selectory Nebo ne jen odstranit citace, ale okamžitě se zeptejte je potřebný vzhled.

Reset CSS z Eric Meyer

Html, Body, Div, Span, Applet, Object, Iframe, H1, H2, H3, H4, H5, H6, P, Blokování, Pre, A, ABBR, Zkratka, Adresa, Big, Cite, Code, Del, DFN, EM, IMG, INS, KBD, Q, S, Samp, malý, úder, silný, sub, sup, TT, var, b, u, i, centrum, dl, dt, dd, ol, ul, li, fieldset, Forma, štítek, legenda, tabulka, titulek, tfoot, thead, tr, th, td, článek, stranou, plátno, detaily, vložit, postava, figacaption, zápatí, záhlaví, hgroup, menu, NAV, výstup, ruby, \\ t Sekce, shrnutí, čas, značka, zvuk, video (okraj: 0; polstrování: 0; hranice: 0; velikost písma: 100%; písmo: dědictví; vertikální-sladění: základní linie;) výrobek, stranou, detaily, figacaption, Obrázek, zápatí, záhlaví, hgroup, menu, NAV, sekce (zobrazení: / * Děláme blokové položky (pro staré prohlížeče) * /) Tělo (výška čáry: 1; / * řádkování Text na stránce * /) OL, UL (Seznam styl: Žádný;) Blokování: Před, Blokování: po, Q: Před, Q: Po (Obsah: "" "; / * Odstranit uvozovky na Q a BlockQuote * / Obsah: Žádný; / * Přidat pro loajalitu * /) blokování, q (citace: žádný; / * jiný způsob, jak odstranit uvozovky * /) tabulku (border kolaps: kolaps; počet hranic: 0;)

Popis příkladu

Dalším způsobem, jak resetovat CSS navrhl Eric Meyer (Eric Meyer) - webový vývojář známý v určitých kruzích. Zde již přidal reset stylů pro tagy z HTML 5, který mimochodem v době psaní tohoto článku a sami jsou stále velmi špatně podporovány moderní prohlížeče. Ale vždy se musíš podívat do perspektivy, že?

Ve skutečnosti by tento článek mohl pokračovat v nekonečnu, protože jsem opět opakoval, v určitém okamžiku, každý rozchod přichází na svou verzi propuštění nebo ji vůbec nepoužívá, spoléhat se na svou pozornost.

Mnoho verterů se používá tzv. CSS reset.slouží k odstranění vlastností různých prohlížečů. Vlastně, tento soubor Styly resetuje všechny výchozí vlastnosti CSS. V tomto článku budu prokázat kód tohoto souboru a říct stojí za to použít CSS reset nebo ne.

Viděl jsem mnoho různých CSS reset.Všechny jsou o stejné. Můžete to použít:

Html, tělo, div, rozpětí, applet, objekt, iframe,
H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre,
A, ABBR, zkratka, adresa, velká, citovat, kód,
Del, DFN, Em, písmo, img, ins, KBD, Q, S, Samp,
Malá, stávka, silný, sub, sup, tt, var,
B, u, i, centrum,
DL, DT, DD, OL, UL, LI,
Fieldset, forma, štítek, legenda,
Tabulka, titulek, TBODY, TFOOT, TAD, TR, TH, TD (
Pozadí: transparentní;
Hranice: 0;
Velikost písma: 100%;
marže: 0;
Obrys: 0;
Polstrování: 0;
Vertical-ALIGN: Baseline;
}
Tělo (
Výška čáry: 1;
}
Ol, ul (
Seznam styl: žádný;
}
Blokování, q (
Citáty: Žádný;
}
Bloka: před, Blokequote: Po,
Q: Předtím, Q: Po (
Obsah: "";
Obsah: Žádný;
}
: soustředit se (
Obrys: 0;
}
Stůl (
Hraniční kolaps: kolaps;
Hraniční vzdálenost: 0;
}

Myslím si, že jeho použití je způsobeno a tak srozumitelným, ale proč jsem například nepoužívám, stejně jako mnoho jiných vertikátorů, stojí za to říct. Za prvé, to je extra souboruZadruhé, porozumění Pro zpracování, ale nejdůležitější - mám rád výchozí vlastnosti. Například stejná pole u stolu. Koneckonců, všechny výchozí vlastnosti neměly stejně jako nejvíce optimální volba Zobrazení různých prvků. Ujišťuji vás, resetujte polstrování. Buňky tabulky, s největší pravděpodobností jej vrátíte do hlavního souboru. A daleko od skutečnosti, že hodnota se bude lišit od toho, co bylo výchozí. Ukazuje se, že to nejprve čistíme, a pak stejný návrat. A spolu s prvními nedostatky (extra souboru a extra kódu), mnoho vertellerů není používáno vůbec. CSS reset..

Tak jako tak, použití vybití stylingu není špatný, Takže můžete bezpečně použít, pokud si myslíte, že zjednodušení přizpůsobení webu pod různými prohlížeči vás opravdu zjednodušuje celku.

Každý má předinstalovaná pravidla pro navrhování webových stránek a prvků (User Agent StyleSheet) ve výchozím nastavení. Nicméně, většina vestičů při vytváření nového projektu přidává speciální reset souboru. CSS, což umožňuje úplný reset stylů CSS a umožňuje vývojářům vytvářet s "čistým listem". Proč a jak to je vše hotovo - síto v současném článku.

Pokud se podíváte na obrázek příspěvku, uvidíte, že obvyklá čára v Safari, Chrome a Firefox se zobrazí absolutně. v různých cestách. Ano, někdy pravidla v nich se shodují, například, všichni skrývají značku hlavy přes displej: Žádná možnost, nicméně, v mnoha případech jsou v mnoha případech při vykreslování objektů na stránce vážné rozdíly. Mám podezření, že někteří vaši zákazníci nemusí mít rád, když finální verze rozvržení nemá ráda na rozložení.

Proto pokud jste novičtější webový vývojář, bude publikace jednoznačně užitečná pro obecný rozvoj. Je to překlad této poznámky s přehledem CSS resetuje podmínky v roce 2018. Jsem si jistý, že v roce 2019 a později to bude stále relevantní, protože Toto téma již bylo více než 10 let (od okamžiku propuštění prvního podobného řešení).

Proč potřebujete nastavení RESET CSS

Jak jste již pochopili z přistoupení, umožňují eliminovat rozšíření mezi základními styly webových prohlížečů a vést je k jedné plus-mínus standardizované mysli. Vždy platí na samém počátku jinému vlastním vývoji. V článku Erik Meyer o resetu CSS před deseti lety je uveden hlavní důvod tohoto přístupu, který roky stále relevantní:

Problém spočívá v tom, že různé prohlížeče mají výchozí nastavení a všechny nejsou stejné. Myslíme si, že náš kód mění počáteční návrh stránky, ale to není úplně tak, a pomocí souborů resetu můžeme tento standardní typ dokumentu více monas pro všechny programy. Proto bude méně času utratit v boji proti boje instalace Firefox, Chrome atd. Ve výchozím nastavení.

Ale teď je situace méně v rozporu s dispozicí?

Ano, v naší době, mnoho parametrů v agentu uživatele se stalo více podobným. Téměř všude, kam záhlaví H1 nastaví velikost písma 2em a vodorovnou odrážku 0.67em. To jsou však všechny relativně nové změny a minimálně je třeba vzít v úvahu podporu starých verzí programů, kde není taková konzistence.

Kromě toho, v některých případech, v závislosti na typu CSS nulování (o níže níže), tento čip je pro nás stále užitečný, i když byly zvažovány pouze moderní webové prohlížeče.

Ale aplikujeme naše styly, přehledy základního?

Tento přístup je jedním z hlavních abstraktů soupeřů tohoto přístupu - na konci, stejně, jsou tyto nebo jiné parametry nahrazeny svým vlastním stylu.css, tak proč přidat další dodatečný soubor a snížit? Navzdory tomu, že v této frázi dává smysl, použití resetu je odůvodněno dvěma momenty:

Nejprve pomáhá napsat čistší kód. Budeme schopni rozdělit na několik částí: odděleně pro návrh webového projektu a soubor pravidel orientovaných v rámci specifik konkrétních prohlížečů. To není vylézt na hlavní soubor CSS se všemi druhy tj. Hacky atd.
Za druhé, všechny resety váží velmi málo a jejich stahování nevyžaduje velké číslo čas.

Typy CSS Reset (můžete stahovat odkazy v článku)

Počínaje od vzdáleného roku 2004, kdy se objevil první vývoj, nyní existuje mnoho metod, které se liší v obtížích a jejich specificitě. Ve skutečnosti existují 3 cíle, které se snaží vyřešit reset stylů CSS:

Chyba opravy v serveru agenta uživatele.
Zrušení nestandardního původního designu v internetových prohlížečích.
Vytvoření univerzálního kompatibilního stylu základny.

Existují možnosti, které rozhodují všechny tři úkoly a ty, které jsou naostřeny pouze pod jedním konkrétním problémem.

Korekce / korekce chyb

Zvážit první z cílů vyjádřených výše. Jak jste již pochopili, eliminace různých nedostatků a hejnami prohlížečů je nejvíce relevantní pro podporu zastaralých verzí. Jeden z dobrých příkladů takové situace - když po vzhledu HTML5 stejný Internet Explorer 9 nepoužil správný typ zobrazení na nové objekty.

Proto v řešeních podle typu normalize.css, všechny chyby jsou zohledněny a zpracovány:

/ ** * Přidejte správný displej v IE. * / Hlavní (zobrazení: blok;)

Vzhledem k tomu, že tyto akce jsou zapotřebí pouze pro starý software, to má smysl použít postcss postprocesor, jako jsou postcss normalizovat společně s prohlížečem prohlížeče, aby je přidali pouze v případě, že potřebujete implementovat podporu určitých prohlížečů.

Dalším příkladem kódu z čistých CSS, který je vhodný včetně moderních webových programů - opravit zobrazovací prvky a atribut skryté.

[Skrytý] (Display: Žádný! Důležitý; // Jeden z dobrých případů! Důležité }

(Display: Žádný! Důležitý; // Jeden z případů dobrého použití! Důležité)

Odstranit zvláštní styly prohlížečů

Toto je druhý důvod pro resetování nastavení CSS. V zásadě je každá z jejich názorů na to, co je provádění v uživatelské agentské styl stylů považován za "zvláštní". Definice autora původní poznámky je docela logická: jedná se o styl, který není "nahá" verze zobrazení prvku.. Například přidání odrážek pro titulky ve 2m (kolik to dělá), myšlenka není špatná, ale proč je to 2em, a ne 3EM nebo ne 4EM. V tomto případě by základní možností byla absence jakéhokoliv incidence, to znamená nulový okraj.

Nejjednodušší univerzální přístupOdstranění indentů / polních značek:

* (Marže: 0; polstrování: 0;)

Tato metoda je příliš radikální, protože Platí pro všechny objekty, i když nečekáte (ve stejném vstupu). Alternativně se často používá Eric Meyer Reset CSS, který odstraňuje parametry okraje / polstrování, hranic a velikost písma (v 0 nebo none), kde je logicky odůvodněno:

html, Body, Div, Span, Applet, Object, Iframe, H1, H2, H3, H4, H5, H6, P, Blokování, Pre, A, ABBR, Zkratka, Adresa, Big, Cite, Code, Del, DFN, EM, IMG, INS, KBD, Q, S, Samp, malý, úder, silný, sub, sup, TT, var, b, u, i, centrum, dl, dt, dd, ol, ul, li, fieldset, Forma, štítek, legenda, tabulka, titulek, tfoot, thead, tr, th, td, článek, stranou, plátno, detaily, vložit, postava, figacaption, zápatí, záhlaví, hgroup, menu, NAV, výstup, ruby, \\ t Sekce, shrnutí, čas, značka, zvuk, video (okraj: 0; polstrování: 0; hranice: 0; velikost písma: 100%; písmo: dědictví; vertikální-align: základní linie;)

Přepsat styly

Na rozdíl od předchozí části zde hlavním úkolem není resetovat CSS z určitých objektů, ale přepsat je svým vlastním aktuálním hodnotám.

Například namísto nastavení všech velikostí 1em a okraje \u003d 0 v sanitize.css jsou nastaveny další hodnoty:

/ ** * Opravte velikost písma a marže na "H1` prvky uvnitř` `` a * `článek` kontextů v Chrome, Firefox a Safari. * / H1 (velikost písma: 2em; marže: 0. 67EM 0;)

/ ** * Opravte velikost písma a marže na "H1` prvky uvnitř` `` a * `článek` kontextů v Chrome, Firefox a Safari. * / H1 (velikost písma: 2EM; marže: 0,67em 0;)

Reboot Bootstrap najde další obrázek aktuálního úkolu. Vývojáři šli trochu dále a předepsané písma a barvu pozadí pro tělo.

// tělo // // 1. Vyjměte okraj ve všech prohlížečích. // 2. Jako nejlepší praxe použijte výchozí `background-color` // 3. Nastavte explicitní počáteční hodnotu zarovnání textu, abychom mohli později používat // 'zdědičná hodnota o věcech jako "	`Prvky. Tělo (marže: 0; // 1 font-family: $ font - family- base; velikost písma: $ font - velikost; font- hmotnost: $ font - váha; line- výška: $ line - výška \\ t - Base; Barva: $ Body - barva; Zarovnání textu: Levý; // 3 Background-Color: $ Body - BG; // 2)

// tělo // // 1. Vyjměte okraj ve všech prohlížečích. // 2. Jako nejlepší praxe použijte výchozí `background-color` // 3. Nastavte explicitní počáteční hodnotu zarovnání textu, abychom mohli později používat hodnotu // "zdědičku" na věci jako ` `Prvky. Tělo (marže: 0; // 1 font-family: $ font-face-base; velikost písma: $ font-size-základna; font-hmotnost: $ font-weight-base; line-výška: $ line-weight; -Base; Barva: $ BARVA-COLOR; Zarovnání textu: vlevo; // 3 Barva pozadí: $ Body-BG; // 2)

CELKOVÝ. Co si vybrat

V původní poznámce je výsledek odpovídajícího průzkumu

V tomto článku hovoříme o resetování stylů a zvážíme příklad vytvoření takového souboru reset.cssss.

Myšlenka házet styly se objevila asi před 10 lety. Který závěr byl vlastně dospěl k závěru, že s pomocí malé sady CSS stylů přinesla zobrazení stránky ve všech prohlížečích. Samozřejmě ne vždy funguje, ale některé momenty mohou být opraveny - například hranice nerozumí, kde se koná v některých verzích. Nebo modrý zdvih (obrys) v polích.

Ne pro jeden front-end developer není tajemství, že prohlížeče jsou velmi vybíravé a každé procesy hTML Elements. Svým vlastním způsobem přidáním standardních stylů.

Vzhledem k tomu, že tyto myšlenky se dlouho zachytil oheň, není překvapující, že již existuje připravené soubory Obnovit, obvykle nazvaný reset.css a připojit se ke všem projektům.

Proč in. samostatný soubor? Ano, jen proto, že je vhodnější převést je z projektu do projektu.

Zde je příklad RESET.CSS od roku 2007:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licence: Žádná (Public Domain) * / HTML, tělo, Div, Span, Applet, Object, Iframe, H1, H2, H3, H4, H5, H6, P, Blokování, Pre, A, ABBr, Zkratka, Adresa, Velký, Cite, Code, Del, DFN, Em, Img, INS, KBD, Q, S, Samp, malý, úder, silný, sub, sup, TT, var, b, u, i, tt, var, b, U, I, Centrum, DL, DT, DD, OL, UL, LI, fieldset, forma, štítek, legenda, tabulka, titulek, tfoot, twoad, th, td, článek, stranou, plátno, detaily, \\ t Vložit, postava, figacaption, zápatí, záhlaví, hgroup, menu, NAV, výstup, ruby, sekce, shrnutí, čas, značka, zvuk, video (okraj: 0; polstrování: 0; hranice: 0; velikost písma: 100% ; písmo: zdědit; vertikální-zarovnání: základní linie;) / * html5 role zobrazení role pro starší prohlížeče * / článek, stranou, podrobnosti, figtacaption, obrázek, zápatí, záhlaví, hgroup, menu, NAV, část (zobrazení: blok; ) Tělo (výška čáry: 1;) OL, UL (Seznam styl: Žádný,) Blokování, Q (Citáty: Žádný;) Blokování: Před, Blokování: Puron, Q: Předtím, Q: Po (Obsah: ""; Obsah: Žádný;) Tabulka (hraniční kolaps: C. Olapse; Hraniční vzdálenost: 0; )

To je jen standard tohoto souboru přijatého určitým kruhem webových vývojářů.

Doporučuji vám, ať už jste zkušený programátor nebo jen začátečníci rozvíjet váš resetový soubor. Jako základě můžete mít výše popsaný standard, doplnit jej svým selektorům nebo změnou stávajících. Zde je příklad takového souboru, který jsem se vyvinul pro sebe:

iNPUT, TEXTAREA, A, tlačítko, vyberte (obrys: žádný) img (ohraničení: žádný;) HR (jasné: oba; ohraničení: žádný; pozadí: žádný;) * (opakování pozadí: ne-opakování;) / * html5 Reset rolí pro starší prohlížeče * / Článek, Kromě, podrobnosti, FigCaption, Obrázek, Zápatí, záhlaví, hgroup, menu, NAV, část (zobrazení: blok;) tělo (výška čáry: 1;) ol, ul (seznam) -Style: žádný; marže: 0; polstrování: 0;) blokování, q (citace: žádný;) blokování: před, blockquote: endter, q: před, Q: Po (obsahu: ""; Obsah: ""; (Brankářský kolaps: kolaps; hraniční vzdálenost: 0;)

Můžete KIP některý z výše uvedeného kódu pro osobní použití, ale pokud jej používáte ve vašich článcích - vložte odkaz na zdroj.