Resetovat odsazení CSS. Resetujte styly pomocí CSS Reset. Při použití resetování CSS se vyhněte nadbytečným deklaracím vlastností

Každá má svá přednastavená pravidla pro návrh webových stránek a prvků na nich (styly uživatelského agenta), která se standardně připojují automaticky. Při vytváření nového projektu však většina návrhářů rozvržení do něj přidá speciální soubor Reset CSS, který zcela resetuje styly CSS a umožňuje vývojářům vytvářet od začátku. Proč a jak se to všechno dělá, vysvětlím v aktuálním článku.

Pokud se podíváte na náhledový obrázek příspěvku, uvidíte, že v Safari, Chrome a Firefoxu se pravidelná čára zobrazuje úplně jinak. Ano, někdy jsou pravidla stejná, například každý skryje značku hlavy přes možnost zobrazení: žádné, ale v mnoha případech existují vážné rozdíly ve způsobu vykreslování objektů na stránce. Mám podezření, že některým vašim klientům se nemusí líbit, když konečný vzhled vypadá jinak než rozvržení.

Pokud jste tedy začínající webový vývojář, bude se vám publikace rozhodně hodit pro váš celkový rozvoj. Jde o překlad této poznámky s přehledem stavu věcí v oblasti CSS Resetů v roce 2018. Jsem si jist, že v roce 2019 a později to vše bude stále aktuální, protože... Toto téma je již více než 10 let staré (od vydání prvního takového řešení).

Proč potřebujete resetovat nastavení CSS?

Jak jste již pochopili z úvodu, umožňují eliminovat rozdíly mezi základními styly webových prohlížečů a přivést je do jedné plus mínus standardizované podoby. Používají se vždy na úplném začátku před dalším vývojem uživatelů. Článek Erica Meyera o Reset CSS z doby před deseti lety zmiňuje hlavní důvod tohoto přístupu, který je aktuální i po letech:

Problém je v tom, že různé prohlížeče mají svá výchozí nastavení a nejsou všechny stejné. Myslíme si, že náš kód mění výchozí design stránky, ale není to tak úplně pravda a pomocí resetovacích souborů můžeme toto standardní zobrazení dokumentu více sjednotit pro všechny programy. Proto budete muset trávit méně času bojem se základním výchozím nastavením Firefoxu, Chrome atd.

Ale nyní je situace v rozložení méně kontroverzní?

Ano, skutečně, v dnešní době se mnoho parametrů v uživatelském agentu stalo podobnějšími. Téměř všude má nadpis H1 velikost písma 2 em a vodorovný okraj 0,67 em. Všechno jsou to ale relativně nové změny a minimálně je potřeba počítat s podporou starších verzí programů, kde taková konzistence neexistuje.

Navíc v některých případech, v závislosti na typu nulování CSS (více o tom níže), bychom tuto funkci stále potřebovali, i když bychom se dívali pouze na moderní webové prohlížeče.

Ale používáme naše vlastní styly, které převažují nad těmi základními?

To je jedna z hlavních tezí odpůrců tohoto přístupu - nakonec stejně, určité parametry jsou nahrazeny vlastním stylem.css, tak proč přidávat další soubor navíc a redukovat ? Navzdory skutečnosti, že tato fráze dává smysl, je použití resetu odůvodněno dvěma body:

• Za prvé vám pomůže napsat čistší kód. Můžeme jej rozdělit do více částí: zvlášť na samotný návrh webového projektu a sadu pravidel zaměřených na specifika konkrétních prohlížečů. To vám umožní nezahltit hlavní soubor CSS nejrůznějšími hacky IE atd.
• Za druhé, všechny resety váží velmi málo a jejich načítání nevyžaduje mnoho času.

Typy CSS resetu (stáhnete z odkazů v článku)

Od roku 2004, kdy se objevil první podobný vývoj, nyní existuje poměrně mnoho metod, které se liší ve složitosti a specifičnosti. V zásadě existují 3 cíle, které se resetování stylů CSS snaží vyřešit:

1. Oprava chyb v šabloně stylů uživatelského agenta.
2. Odstranění nestandardního originálního designu v internetových prohlížečích.
3. Vytvoření univerzální kompatibilní stylové základny.

Existují možnosti, které řeší všechny tři problémy a ty, které jsou přizpůsobeny pouze jednomu konkrétnímu problému.

Oprava/oprava chyby

Podívejme se na první z výše uvedených cílů. Jak již víte, odstranění různých nedostatků a záseků prohlížečů je nejdůležitější pro podporu zastaralých verzí. Dobrým příkladem této situace je situace, kdy po příchodu HTML5 stejný Internet Explorer 9 neaplikoval správný typ zobrazení na nové objekty.

Proto jsou v řešeních, jako je Normalize.css, všechny chyby zohledněny a zpracovány:

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

Vzhledem k tomu, že tyto akce jsou potřebné pouze pro starší software, má smysl používat postprocesor PostCSS, jako je PostCSS Normalize, ve spojení s Browserlist, abyste je přidali pouze v případě, že potřebujete podporovat konkrétní prohlížeče.

Dalším příkladem kódu od Pure CSS, který je vhodný i pro moderní webové programy, je korekce zobrazovacích prvků a atributu hidden.

( display: none !important; // Jeden z dobrých případů použití !important )

Odstranění zvláštních stylů prohlížeče

Toto je druhý důvod pro resetování nastavení CSS. V zásadě má každý svůj vlastní názor na to, jaký design v šabloně stylů user-agent je považován za „zvláštní“. Definice autora původní poznámky je celkem logická: toto je styl, který není „nahou“ verzí zobrazení prvku. Například přidat 2em výplň pro nadpisy (jak to mnozí dělají) není špatný nápad, ale proč 2em a ne 3em nebo 4em. Základní možností by v tomto případě byla absence jakéhokoli odsazení, tedy nulový okraj.

Nejjednodušší univerzální přístup, který odstraňuje odsazení/okraje ze značek:

* ( okraj: 0; odsazení: 0; )

Tato metoda je příliš radikální, protože platí pro všechny objekty, i ty, kde to neočekáváte (ve stejném vstupu). Jako alternativa se častěji používá Eric Meyer Reset CSS, který odstraňuje parametry margin/padding, okraje a velikost písma (na 0 nebo žádné), kde je to logicky opodstatněné:

html, tělo, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, citovat, code, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, střed, dl, dt, dd, ol, ul, li, fieldset, formulář, štítek, legenda, tabulka, titulek, tbody, tfoot, hlavička, tr, th, td, článek, stranou, plátno, detaily, vložit, obrázek, titulek, zápatí, záhlaví, hgroup, nabídka, navigace, výstup, rubín, sekce, shrnutí, čas, značka, zvuk, video ( margin: 0; padding: 0; border: 0; font-size: 100 %; font: inherit; vertical-align: baseline; )

Převažující styly

Na rozdíl od předchozí části zde není hlavním úkolem resetovat CSS určitých objektů, ale předefinovat je s jejich vlastními skutečnými hodnotami.

Například místo nastavení všech písem na velikost 1 em a okraje = 0 je Sanitize.css nastaven na jiné hodnoty:

/** * Opravte velikost písma a okraje u prvků `h1` v kontextu `section` a * `article` v Chrome, Firefox a Safari. */ h1 (velikost písma: 2em; okraj: 0,67em 0; )

V Bootstrap's Reboot najdete další ilustraci aktuální úlohy. Vývojáři šli o něco dále a upřesnili písma a barvu pozadí pro tělo.

// Body // // 1. Odstraňte okraj ve všech prohlížečích. // 2. Nejlepším postupem je použít výchozí `background-color`. // 3. Nastavte explicitní počáteční hodnotu zarovnání textu, abychom mohli později použít // hodnotu `zdědit` na věci jako ` 'prvky. body ( margin: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height -základní barva: $body-color; text-align: left;

Celkový. Co si vybrat

Původní poznámka obsahuje výsledek odpovídajícího průzkumu z

Resetovat CSS(style reset) je reset pomocí CSS, některých parametrů HTML prvků, které prohlížeče nastavují standardně. Mezi takové prvky patří například odstavce (tag), které mají zpočátku nenulová vertikální pole (CSS), seznamy s odrážkami (tag), které již mají nejen pole, ale také značky určitého typu (CSS) a tak dále.

Nyní se zamysleme nad tím, k čemu je tento reset CSS, co nám může dát? Představte si, že jste rozložili stránky svého webu a nezměnili okraje odstavců, které prohlížeče standardně nabízely, protože jejich velikost vám docela vyhovovala. Ale řekněte mi, prosím, proč jste se rozhodli, že všechny prohlížeče na světě, které již existují a objeví se, budou vytvářet pole stejné velikosti? Navíc, proč si myslíte, že prohlížeče, ve kterých jste testovali své rozvržení, nezmění velikost těchto polí ve svých příštích verzích nebo je úplně neodstraní? Cítíte, jak to voní?

Resetováním CSS se tedy návrháři rozvržení jednoduše chrání před takovými nedorozuměními, to znamená, že nejprve resetují všechny „kritické“ hodnoty vlastností CSS pro prvky a pak je v případě potřeby přidají zpět, ale s vlastními velikostmi. Můžete si tak být jisti, že web bude vypadat stejně ve všech prohlížečích. Styly samozřejmě nelze přenastavovat, ale jednoduše nastavovat prvkům potřebné parametry v průběhu layoutu, ale hrozí, že někde něco bude chybět a v určitou chvíli bude vše „plavat“.

Na základě výše uvedeného je jednou z vlastností resetování CSS to, že po jeho aplikaci mnoho prvků HTML ztratí svůj obvyklý vzhled. A pokud je ztráta okrajů v odstavcích něco očekávaného pro začátečníky, pak například to, že tlačítka vytvořená pomocí značek nebo najednou začala vypadat jako běžný text, je naprostým překvapením. To by vás ale nemělo zmást, protože styly se pro tento účel přenastavují, aby je návrhář rozvržení nezapomněl později znovu specifikovat.

Existuje spousta způsobů, jak styly resetovat, a který si vyberete, záleží jen na vás, ale jedno vám můžu říct – nejlepší reset je ten, který jste si sami vytvořili na základě svých zkušeností a zvyků. Pokud takovou zkušenost ještě nemáte, můžete využít jednu z níže navržených možností.

Styly resetování CSS vždy specifikujte na samém začátku kódu, jinak některé možnosti nemusí fungovat kvůli stylové priority, které nastavují prohlížeče při zpracování HTML a CSS kódu stránky.

Resetování CSS pomocí univerzálního selektoru

Popis příkladu

V tomto příkladu použití univerzální volič zadané styly se okamžitě resetují pro všechny prvky HTML, které budou na stránce přítomné. Jak vidíte, většina vlastností je specifikována jen pro jistotu, protože jejich hodnoty již odpovídají těm, které by měly prohlížeče nastavit ve výchozím nastavení podle specifikace CSS. Ale jak již víte, v praxi je to všechno úplně špatně a pokud je vlastnost skutečně zděděna prvky od svých rodičů ve všech předních prohlížečích, pak stejné vnější okraje specifikované vlastností CSS nejsou vždy zpočátku rovné nule.

Ale velikosti rámečků (CSS) a obrysů (CSS) se standardně nerovnají nule, ale podle specifikace. Jejich tloušťka však byla také vynulována, aby ji projektant rozvržení nezapomněl v případě potřeby výslovně uvést.

Obnovit CSS z Yahoo!

Popis příkladu

Společnost Yahoo svého času vyvinula vlastní verzi stylů resetování. Zde jsou již vlastnosti konkrétních prvků změněny, což umožňuje větší flexibilitu při ovládání jejich vzhledu. Například zde byly odstraněny odrážky ze seznamů a uvozovky byly odstraněny ze značek pomocí vlastnosti CSS. Výhody tohoto přístupu jsou zřejmé, k nevýhodám však patří objemnější a někdy i nadbytečný kód. Ale nikdo vám nebrání změnit jakýkoli reset CSS tak, aby vyhovoval vašim potřebám. Řekněme, že můžete odstranit některé, které nepotřebujete selektory značek nebo uvozovky nejen odstranit, ale rovnou jim dát požadovaný vzhled.

Resetování CSS od Erica Meyera

Popis příkladu

Další způsob resetování CSS navrhl Eric Meyer, v určitých kruzích známý webový vývojář. Zde již přidal reset stylů pro značky z HTML 5, které mimochodem v době psaní tohoto článku ještě velmi špatně podporovaly moderní prohlížeče. Ale vždy se musíte dívat do budoucnosti, že?

Vlastně by se dalo v tomto článku pokračovat donekonečna, protože, opakuji ještě jednou, každý návrhář layoutu v určitém okamžiku přijde na svou vlastní možnost resetu nebo ji vůbec nevyužije, spoléhá se na svou vlastní pozornost.

• Překlad

Tento článek je prvním ze série na téma zkrocení CSS. Dnes se podíváme na techniku CSS reset.

Proč je to nutné?

Například použijete prvek A ve vašem dokumentu. Většina prohlížečů, jako je Internet Explorer a Firefox, přidává odkaz Modrá barva A podtržení. Představte si však, že se za pět let někdo rozhodne vytvořit nový prohlížeč (říkejme mu UltraBrowser). Vývojářům prohlížečů se nelíbila modrá barva a vadilo jim podtržení, proto se rozhodli odkazy zvýraznit v červené A tučně. Je to založeno na tom, že pokud nastavíte hodnotu základního stylu pro prvek A, pak je zaručeno, že to bude tak, jak chcete, a ne tak, jak to vývojáři UltraBrowser raději zobrazují.

Nyní však nemáme vůbec žádné odrážky, a to ani mezi jednotlivými odstavci! Co dělat? Nelhejte a nebojte se: pod naším resetem popíšeme pravidlo, které potřebujeme. To lze provést různými způsoby: určit odsazení v dolní nebo horní části odstavce, určit jej v procentech, pixelech nebo em.

Nejdůležitější je, že prohlížeč nyní hraje podle našich pravidel a ne my podle jeho pravidel. Rozhodl jsem se to udělat takto:

* ( okraj: 0; odsazení: 0; ) p ( okraj: 5px 0 10px 0; )

Ve výsledku jsme dostali to, co je vidět na třetím příkladu.

Pokud řešíte konkrétní problém ve svém projektu, můžete si vytvořit vlastní styly resetování. Navzdory tomu neexistuje žádný podrobný návod pro vytvoření vlastního resetu CSS. Spolehněte se na své vlastní zásady a svůj vlastní styl.

Abychom vám pomohli se správným výběrem, uvádíme několik dalších odkazů:

1. Méně je více - moje volba Reset CSS (Ed Elliott).

2. Váš CSS Reset je první věc, kterou by měl prohlížeč vidět

Ano, rozumím, znělo to legračně, ale tohle je jedna z hlavních chyb vývojářů, mladých i starých. Mnoho lidí na to prostě zapomíná.

Někteří si mohou položit logickou otázku: proč se to děje? Odpověď je jednoduchá: pravidla napsaná níže v textu souboru CSS (a ještě níže v jejich pořadí v dokumentu) přepisují pravidla deklarovaná dříve.

Neodbíhejme příliš od tématu a pokračujme. Aplikujme styly Erica Meyera na náš příklad, ale po popisy našich nemovitostí, jak je uvedeno v příkladu 4. Matematici by řekli následující: "To jsme potřebovali dokázat."

3. Pro resetování CSS použijte samostatný dokument CSS

Ve skutečnosti zastávám pozici stvoření jeden velký soubor CSS kvůli vyššímu výkonu tohoto přístupu. Ale v této otázce se přikláním k souhlasu s většinou: CSS Reset by měl být umístěn v samostatném souboru (obvykle nazývaném reset.css). V tomto případě jej můžete použít v různých projektech, aniž byste se snažili oddělit jej od ostatních pravidel CSS.

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

Tato rada je zvláště důležitá, když vyvíjíte řešení, jako jsou témata CMS. Nemůžete předem odhadnout, jak bude používán nebo jak bude upraven. Je lepší popsat základní pravidla CSS pro všechny prvky, než k tomuto účelu používat nepředvídatelný (i když menší) mechanismus univerzálních selektorů.

5. Vyhněte se nadbytečným popisům vlastností při použití CSS Reset

Vraťme se k Ericově CSS Resetu. Nastavuje výchozí hodnoty pro výšku čáry, barvu a pozadí prvku tělo následujícím způsobem:

tělo (výška řádku: 1; barva: černá; pozadí: bílá; )

1. barva pozadí: #cccccc;
2. barva: #996633;
3. Chcete vodorovně opakovat určitý obrázek na pozadí.

V tomto případě není potřeba vytvářet nový selektor pro popis vašich vlastností – jednoduše je zahrnete do CSS Resetu. Pojďme na to:

tělo ( výška řádku: 1; barva: #996633; pozadí:#ccc url(dlaždicový-obrázek.gif) repeat-x vlevo nahoře; )

Eric Meyer k tomu řekl následující: „Toto není případ, kdy by každý měl používat CSS Reset beze změn.“

• Překlad

Tento článek je prvním ze série na téma zkrocení CSS. Dnes se podíváme na techniku CSS reset.

Proč je to nutné?

Například použijete prvek A ve vašem dokumentu. Většina prohlížečů, jako je Internet Explorer a Firefox, přidává odkaz Modrá barva A podtržení. Představte si však, že se za pět let někdo rozhodne vytvořit nový prohlížeč (říkejme mu UltraBrowser). Vývojářům prohlížečů se nelíbila modrá barva a vadilo jim podtržení, proto se rozhodli odkazy zvýraznit v červené A tučně. Je to založeno na tom, že pokud nastavíte hodnotu základního stylu pro prvek A, pak je zaručeno, že to bude tak, jak chcete, a ne tak, jak to vývojáři UltraBrowser raději zobrazují.

Nyní však nemáme vůbec žádné odrážky, a to ani mezi jednotlivými odstavci! Co dělat? Nelhejte a nebojte se: pod naším resetem popíšeme pravidlo, které potřebujeme. To lze provést různými způsoby: určit odsazení v dolní nebo horní části odstavce, určit jej v procentech, pixelech nebo em.

Nejdůležitější je, že prohlížeč nyní hraje podle našich pravidel a ne my podle jeho pravidel. Rozhodl jsem se to udělat takto:

* ( okraj: 0; odsazení: 0; ) p ( okraj: 5px 0 10px 0; )

Ve výsledku jsme dostali to, co je vidět na třetím příkladu.

Pokud řešíte konkrétní problém ve svém projektu, můžete si vytvořit vlastní styly resetování. Navzdory tomu neexistuje žádný podrobný návod pro vytvoření vlastního resetu CSS. Spolehněte se na své vlastní zásady a svůj vlastní styl.

Abychom vám pomohli se správným výběrem, uvádíme několik dalších odkazů:

1. Méně je více - moje volba Reset CSS (Ed Elliott).

2. Váš CSS Reset je první věc, kterou by měl prohlížeč vidět

Ano, rozumím, znělo to legračně, ale tohle je jedna z hlavních chyb vývojářů, mladých i starých. Mnoho lidí na to prostě zapomíná.

Někteří si mohou položit logickou otázku: proč se to děje? Odpověď je jednoduchá: pravidla napsaná níže v textu souboru CSS (a ještě níže v jejich pořadí v dokumentu) přepisují pravidla deklarovaná dříve.

Neodbíhejme příliš od tématu a pokračujme. Aplikujme styly Erica Meyera na náš příklad, ale po popisy našich nemovitostí, jak je uvedeno v příkladu 4. Matematici by řekli následující: "To jsme potřebovali dokázat."

3. Pro resetování CSS použijte samostatný dokument CSS

Ve skutečnosti zastávám pozici stvoření jeden velký soubor CSS kvůli vyššímu výkonu tohoto přístupu. Ale v této otázce se přikláním k souhlasu s většinou: CSS Reset by měl být umístěn v samostatném souboru (obvykle nazývaném reset.css). V tomto případě jej můžete použít v různých projektech, aniž byste se snažili oddělit jej od ostatních pravidel CSS.

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

Tato rada je zvláště důležitá, když vyvíjíte řešení, jako jsou témata CMS. Nemůžete předem odhadnout, jak bude používán nebo jak bude upraven. Je lepší popsat základní pravidla CSS pro všechny prvky, než k tomuto účelu používat nepředvídatelný (i když menší) mechanismus univerzálních selektorů.

5. Vyhněte se nadbytečným popisům vlastností při použití CSS Reset

Vraťme se k Ericově CSS Resetu. Nastavuje výchozí hodnoty pro výšku čáry, barvu a pozadí prvku tělo následujícím způsobem:

tělo (výška řádku: 1; barva: černá; pozadí: bílá; )

1. barva pozadí: #cccccc;
2. barva: #996633;
3. Chcete vodorovně opakovat určitý obrázek na pozadí.

V tomto případě není potřeba vytvářet nový selektor pro popis vašich vlastností – jednoduše je zahrnete do CSS Resetu. Pojďme na to:

tělo ( výška řádku: 1; barva: #996633; pozadí:#ccc url(dlaždicový-obrázek.gif) repeat-x vlevo nahoře; )

Eric Meyer k tomu řekl následující: „Toto není případ, kdy by každý měl používat CSS Reset beze změn.“

Mnoho návrhářů rozvržení používá tzv CSS reset, která slouží k odstranění zvláštností různých prohlížečů. Vlastně, tento soubor stylu obnoví všechny vlastnosti CSS na výchozí. V tomto článku předvedu kód tohoto souboru a řeknu vám, jak na to Mám použít CSS Reset nebo ne?.

Viděl jsem spoustu různých CSS reset, všechny jsou na tom stejně. Můžete použít tento:

Html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, citovat, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
malý, úder, silný, sub, sup, tt, var,
b, u, i, střed,
dl, dt, dd, ol, ul, li,
sada polí, formulář, štítek, legenda,
tabulka, titulek, tbody, tfoot, thead, tr, th, td (
pozadí: průhledné;
ohraničení: 0;
velikost písma: 100 %;
okraj: 0;
obrys: 0;
výplň: 0;
vertikální zarovnat: základní čára;
}
tělo (
výška řádku: 1;
}
ol, ul (
styl seznamu: žádný;
}
blockquote,q(
uvozovky: žádné;
}
blockquote:before, blockquote:after,
q:before, q:after (
obsah: "";
obsah: žádný;
}
:soustředit se (
obrys: 0;
}
stůl (
border-collapse: kolaps;
border-spacing: 0;
}

Myslím, že důvod jeho použití je již jasný, ale proč ho například nepoužívám, jako mnoho jiných designérů rozložení, stojí za to mluvit. Za prvé, toto extra soubor, za druhé, čas navíc pro zpracování, ale hlavně se mi líbí výchozí vlastnosti. Například stejná pole v tabulce. Koneckonců, všechny výchozí vlastnosti byly vytvořeny z nějakého důvodu, ale jako nejoptimálnější možnost pro zobrazení různých prvků. Ujišťuji vás, že jsem resetoval vycpávka pro buňky tabulky jej s největší pravděpodobností vrátíte v hlavním souboru. A není zdaleka pravda, že se hodnota bude lišit od výchozí hodnoty. Ukazuje se tedy, že jej nejprve odstraníme a poté vrátíme. A spolu s prvními nevýhodami (soubor navíc a kód navíc) mnoho návrhářů rozvržení nepoužívá CSS reset.

Tak jako tak, použití resetování stylu není špatné, takže jej můžete bezpečně používat, pokud si myslíte, že zjednodušení přizpůsobení webu různým prohlížečům skutečně zjednoduší vaše rozvržení jako celek.