Tento článek je prvním ze série o zkrocení CSS. Dnes se podíváme na techniku Resetování CSS.

Proč je to potřeba?

Každý prohlížeč nastavuje své vlastní výchozí hodnoty stylu pro různé prvky HTML. Z pomocí CSS Resetováním můžeme tento rozdíl vyrovnat, abychom zajistili styly napříč prohlížeči.

Například používáte prvek A ve vašem dokumentu. Většina prohlížečů má ráda internet Explorer a Firefox, přidejte odkaz Modrá barva a podtržení. Představte si však, že o pět let později se někdo rozhodl tvořit nový prohlížeč(říkejme tomu UltraBrowser). Vývojářům prohlížeče se nelíbila modrá barva a obtěžovalo podtržení, proto se rozhodli odkazy zvýraznit v červené a tučně. Přesně na základě toho, 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í.

Ale teď nemáme vůbec žádné odrážky, včetně mezi jednotlivými odstavci! Co dělat? Nelhejte a nebojte se: pod naším resetem popíšeme pravidlo, které potřebujeme. Dá se to udělat různé způsoby: zadejte odsazení pod nebo nad odstavcem, zadejte jej v procentech, pixelech nebo em.

Nejdůležitější je, že prohlížeč nyní hraje podle našich pravidel, ne my podle jeho. 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 průchod vytvořit vlastní CSS Reset. 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 Elliot).

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

Resetování stylů po nastavení vlastních stylů pro prvky není správný přístup. V tomto případě nelze od zobrazení prohlížečem očekávat nic dobrého. Pamatujte, že byste měli vždy nejprve zahrnout CSS Reset a poté všechny ostatní styly.

Ano, chápu, že to znělo směš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 zapsaná v souboru CSS (a dokonce i v jejich pořadí v dokumentu) přepisují pravidla deklarovaná dříve.

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

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

Musím (ne, v žádném případě jsem nebyl nucen) tuto radu zmínit. Použití samostatného souboru pro CSS Reset je běžnou praxí podporovanou velké číslo vývojáři.

Vlastně zastávám pozici tvoření jeden velký soubor CSS kvůli vyššímu výkonu tohoto přístupu. Ale v této otázce mám tendenci souhlasit s většinou: CSS Reset by měl být přesunut do samostatného souboru (obvykle nazývaného 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

Tento koncept sice funguje, ale jeho použití často není žádoucí kvůli nekompatibilitě s některými prohlížeči (např. v Internet Exploreru je tento selektor špatně zpracován). Tuto techniku ​​byste měli používat pouze pro jednoduché, malé, statické a předvídatelné stránky (pokud musíte).

Tento tip je zvláště důležitý, když vyvíjíte řešení, jako jsou témata CMS. Nelze předem odhadnout, jak bude využíván a jak bude upraven. Je lepší popsat základní pravidla CSS pro všechny prvky, než k tomu 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

Dalším důvodem, proč nemám rád samostatný soubor CSS Reset, je potenciální redundance následných deklarací vlastností CSS. Opakování vašich jednotlivých stylů mezi celou sadou souborů CSS je špatné chování a je třeba se mu vyhnout. Samozřejmě, někdy jsme příliš líní na to, abychom pečlivě prošli souborem stylů a některé z nich zkombinovali, ale měli bychom to alespoň zkusit!

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á; )

Řekněme, že již víte, jak bude prvek vypadat. tělo:

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; )

Nebojte se upravit samotný CSS Reset. Přizpůsobte si to, aby to fungovalo pro vás. Upravte, přestavte, odeberte a přidejte podle potřeby ve vašem konkrétním případě.

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."

Všechny prvky stránky HTML mají ve výchozím nastavení své vlastní definované hodnoty. A bohužel s nimi různé prohlížeče nezacházejí stejně. Tím trpí design stránek, jeho design se mění při změně prohlížeče (internetového prohlížeče). Účelem postupu resetování stylu je snížit nekonzistence prohlížeče ve věcech, jako jsou výšky řádků, okraje, velikosti písma nadpisů atd.

Příklady skriptů pro resetování CSS

Existuje názor, že každý sebeúctyhodný webmaster by měl napsat svůj vlastní resetovací kód CSS. Ale jsem zastáncem jiného přístupu, vezměte si hotové řešení, pochopte ho a případně opravte.

Eric Meyer reset CSS

Resetovaný scénář Erica Meyera je podle samotného autora záměrně velmi obecný. Například nenastaví žádnou výchozí barvu pozadí pro prvek tělo. Proto by měl být upraven, upraven, rozšířen a jinak přizpůsoben tak, aby vyhovoval vašim potřebám. Přidejte požadované barvy pro stránky, odkazy a tak dále.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 Licence: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, velký, citovat, kód, 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, sada polí, formulář, štítek, legenda, tabulka, titulek, tbody, tfoot, thead, tr, th, td, článek, stranou, plátno, detaily, vložit, obrázek, titulek, zápatí, záhlaví, hgroup, menu, nav, output, ruby, section, Summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset pro starší prohlížeče */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( styl seznamu: žádný; ) blockquote, q ( uvozovky: žádné; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- kolaps:c ollapse; border-spacing: 0; )

Yahoo! (YUI 3) Resetujte CSS

YUI 3 CSS Style Reset zmírňuje konfliktní styling prvků HTML v prohlížečích stejně jako jakýkoli jiný skript pro resetování CSS a vytváří pevný základ pro vytváření webových stránek a webových aplikací.

/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Všechna práva vyhrazena. Licencováno pod licencí BSD. http://yuilibrary.com/license/ */ /* TODO bude muset odstranit nastavení HTML, protože to neumíme jmenovat. TODO s předponou, mám seskupit podle selektoru nebo vlastnosti pro úsporu hmotnosti? */ html( color:#000; background:#FFF; ) /* TODO odstraní nastavení na BODY, protože to neumíme jmenovat. */ /* TODO test umístění třídy na HEAD. - Selhání na FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO přemýšlejte o tom, jak nakládat s dědičností jinak, možná nechat IE6 trochu selhat ... */ address, caption, cite, code, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul (list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 ( font-size:100%; font-weight:normal; ) q:before, q:after ( content:""; ) abbr, akronym ( border:0; font-variant:normal; ) /* pro zachování výšky řádku a vzhledu selektoru */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , vyberte ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*pro povolení změny velikosti pro IE*/ ) /*protože legenda v IE nedědí * / legenda ( color:#000; ) /* YUI CSS Detect ion Stamp */ #yui3-css-stamp.cssreset ( zobrazení: žádné; )

Obnovit styly normalize.css

Normalize.css je vlastní soubor CSS, který umožňuje prohlížečům vykreslovat všechny prvky konzistentněji a podle moderních standardů. Její autoři zkoumali rozdíly mezi styly různé prohlížeče ve výchozím nastavení upravit pouze ty styly, které je třeba normalizovat.

/*! normalize.css v6.0.0 | Licence MIT | github.com/necolas/normalize.css */ /* Dokument ==================================== ==================================== */ /** * 1. Opravte výšku řádku ve všech prohlížeče. * 2. Zabraňte úpravám velikosti písma po změně orientace v * IE zapnuto Windows telefon a v systému iOS. */ html ( výška-řádku: 1,15; /* 1 */ -ms-text-size-adjust: 100 %; /* 2 */ -webkit-text-size-adjust: 100 %; /* 2 */ ) /* Sekce ================================================ ========================= */ /** * Přidejte správné zobrazení v IE 9-. */ článek, stranou, zápatí, záhlaví, navigace, sekce ( display: block; ) /** * Opravte velikost písma a okraj u prvků `h1` v rámci `section` a * `article` v kontextech Chrome, Firefox a safari. */ h1 (velikost písma: 2em; okraj: 0,67em 0; ) /* Obsah seskupení ============================= ===========================================*/ /** * Přidat správné zobrazení v IE 9-. * 1. Přidejte správný displej v IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Přidejte správný okraj v IE 8. */ obrázek ( margin: 1em 40px; ) /** * 1. Přidejte správný rámeček dimenzování ve Firefoxu. * 2. Zobrazit přetečení v Edge a IE. */ hod ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: viditelný; /* 2 */ ) /** * 1. Opravte dědičnost a změnu velikosti písma ve všech prohlížečích. * 2. Opravte lichou velikost písma `em` ve všech prohlížečích. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Sémantika na úrovni textu ================ =================================================== ======== */ /** * 1. Odstraňte šedé pozadí aktivních odkazů v IE 10. * 2. Odstraňte mezery v podtržení odkazů v iOS 8+ a Safari 8+. */ a ( barva pozadí: průhledná; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Odstraňte spodní okraj v prohlížečích Chrome 57- a Firefox 39- . * 2. Přidejte správné textová dekorace v prohlížečích Chrome, Edge, IE, Opera a Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline tečkované; /* 2 */ ) /** * Zabránit duplicitnímu použití `bolder ` podle dalšího pravidla v Safari 6. */ b, silné ( font-weight: inherit; ) /** * Přidejte správnou váhu písma v Chrome, Edge a Safari. */ b, silné ( váha písma: tučnější; ) /** * 1. Opravte dědičnost a změnu velikosti písma ve všech prohlížečích. * 2. Opravte lichou velikost písma `em` ve všech prohlížečích. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Přidejte správný styl písma v Androidu 4.3-. */ dfn ( styl písma: italic; ) /** * Přidejte správné pozadí a barvu v IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Přidejte správnou velikost písma ve všech prohlížečích. */ small ( font-size: 80%; ) /** * Zabrání elementům `sub` a `sup` ovlivňovat výšku řádku ve * všech prohlížečích. */ sub, sup ( velikost písma: 75 %; výška řádku: 0; pozice: relativní; svislé zarovnání: základní čára; ) sub ( dole: -0,25 em; ) sup ( nahoře: -0,5 em; ) /* Vložený obsah ================================================== ======================== */ /** * Přidejte správné zobrazení v IE 9-. */ audio, video ( display: inline-block; ) /** * Přidejte správné zobrazení v iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Odstraňte ohraničení obrázků uvnitř odkazů v IE 10-. */ img ( border-style: none; ) /** * Skrýt přetečení v IE. */ svg:not(:root) ( přetečení: skryté; ) /* Formuláře ============================== ========================================== */ /** * Odstraňte okraj ve Firefoxu a Safari. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Zobrazit přetečení v IE. * 1. Ukažte přetečení v Edge. */ tlačítko, vstup ( /* 1 */ přetečení: viditelné; ) /** * Odebere dědičnost transformace textu v Edge, Firefoxu a IE. * 1. Odstraňte dědičnost transformace textu ve Firefoxu. */ tlačítko, vyberte ( /* 1 */ text-transform: none; ) /** * 1. Zabraňte chybě WebKit, kde (2) ničí nativní ovládací prvky „audio“ a „video“ * v systému Android 4. * 2. Opravte nemožnost stylizovat klikací typy v iOS a Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Odstraňte vnitřní okraj a výplň ve Firefoxu. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( border-style: none; padding: 0; ) /** * Obnoví styly fokusu, které nebyly nastaveny předchozím pravidlem. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( obrys: 1px tečkovaný ButtonText; ) /** * 1. Opravte zalamování textu v Edge a IE. * 2. Opravte dědičnost barev z prvků `fieldset` v IE. * 3. Odstraňte výplň, aby vývojáři nebyli zaskočeni, když vynulují * `fieldset` prvky ve všech prohlížečích. */ legenda ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ mezera: normální; /* 1 */ ) /** * 1. Přidejte správné zobrazení v IE 9-. * 2. Přidejte správné vertikální zarovnání v prohlížečích Chrome, Firefox a Opera. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Odstraňte výchozí vertikální posuvník v IE. */ textarea ( overflow: auto; ) /** * 1. Přidejte správnou velikost krabice v IE 10-. * 2. Odstraňte výplň v IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Opravte styl kurzoru tlačítek pro zvýšení a snížení v Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Opravte podivný vzhled v Chrome a Safari. * 2. Opravte styl obrysu v Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Odstraňte vnitřní vycpávku a tlačítka pro zrušení v Chrome a Safari na macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Opravte nemožnost stylování klikatelných typů v iOS a Safari. * 2. V Safari změňte vlastnosti písma na `zdědit`. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interaktivní ============= =================================================== =========== */ /* * Přidejte správné zobrazení v IE 9-. * 1. Přidejte správný displej v Edge, IE a Firefoxu. */ detaily, /* 1 */ menu ( display: block; ) /* * Přidejte správné zobrazení ve všech prohlížečích. */ souhrn ( display: list-item; ) /* Skriptování ==================================== ==================================== */ /** * Přidejte správné zobrazení v IE 9- . */ canvas ( display: inline-block; ) /** * Přidejte správné zobrazení v IE. */ šablona ( zobrazení: žádné; ) /* Skryté ======================================= ================================== */ /** * Přidejte správné zobrazení v IE 10- . */ (zobrazení: žádné; )

Resetování pomocí univerzálního voliče * (hvězdička)

Na první pohled se to může zdát jako nejjednodušší a nejúspěšnější řešení, proč popisovat všechny HTML prvky a přiřazovat jim hodnoty, když můžete použít selektor *, protože to platí pro všechny HTML.

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

Ale bohužel to není dobrá praxe. Pro prohlížeč je velmi těžké (a časově náročné ve srovnání s jinými resety CSS) aplikovat pravidla na každý prvek v dokumentu, zejména na velkých webových stránkách, a může také porušit mnoho dobrých výchozích stylů.

Obnovit styly a WordPress

Pokud chcete použít jeden z výše uvedené metody resetujte styly CSS pro web WordPress, pak to lze provést dvěma způsoby.

První je, že musíte zkopírovat resetovací kód do horní části souboru style.css vašeho motivu WordPress (za řádky o autorství a názvu motivu, tedy za textem orámovaným zlomkem a hvězdičkou /* … */ .

@import "reset.css";

Pokud je v CSS direktiva @import, pak by měla být na úplném začátku tabulky (před všemi pravidly). V opačném případě jej může prohlížeč ignorovat.

Na druhou stranu, aby se zlepšil výkon, CSS tabulky styly jsou zpravidla naopak spojeny do jednoho souboru. Proto se používání @import bez skutečné potřeby nevyplatí.

Jak vidíte, resetování stylů ve WordPressu není nic zvláštního.

dík

Při psaní tohoto článku byly použity následující zdroje.

Ve výchozím nastavení prohlížeč nastavuje vlastní nastavení pro některé vlastnosti v css. Zde je ale potíž v tom, že existuje spousta webových prohlížečů a každý si může nastavit svá vlastní pravidla. jaké řešení? Přečtěte si, jak obnovit výchozí nastavení CSS a přepsat je vlastními. Ale tento článek bude věnován tomu, jak to lze provést.

CSS Reset nebo Reset Defaults

CSS Reset je sada stylů, které resetují některé parametry, nainstalovaný prohlížečem výchozí. Každý webový vývojář si tento soubor zapisuje individuálně a někdo si vezme hotové řešení. Zde navrhuji začít. Existuje mnoho dobrých možností resetování stylu, ale moje oblíbená je tato od Erica Meyera:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licence: žádná (public domain)
*/
html, tělo, div, rozpětí, aplet, 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,
sada polí, formulář, štítek, legenda,
tabulka, titulek, tbody, tfoot, thead, tr, th, td,
článek, stranou, plátno, detaily, vložit,
obrázek, popis obrázku, zápatí, záhlaví, hgroup,
nabídka, navigace, výstup, rubín, sekce, shrnutí,
čas, značka, zvuk, video (
okraj: 0;
výplň: 0;
ohraničení: 0;
velikost písma: 100%
font: dědit;
vertikální zarovnat: základní čára;
}
/* Resetování role zobrazení HTML5 pro starší prohlížeče */
článek, stranou, detaily, popis obrázku, postava,
zápatí, záhlaví, hgroup, nabídka, navigace, sekce (
displej:blok;
}
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ý;
}
stůl(
border-collapse: kolaps;
border-spacing: 0;
}

Trochu okomentuji kód. Nejprve obnoví vnitřní a vnější okraje pro všechny potřebné prvky. Za druhé je tu podpora prvků HTML5. Mají pravidlo, které jim umožní správné zobrazení v některých verzích prohlížečů. Za třetí, typická nastavení pro pohodlné ovládání s tabulkami (odstraněno odsazení mezi buňkami a dvojité ohraničení). Rovněž byly vypuštěny standardní značky pro seznamy a uvozovky pro uvozovky. Tyto části kódu by měly být odstraněny, pokud chcete použít výchozí styl.

Jak resetovat nastavení css sami

S víceméně normálním vlastnictvím css můžete zkusit napsat pár pravidel sami. Například:

*{
okraj: 0;
výplň: 0;
}

Tohle je snad nejvíc jednoduchý příkaz. Hvězdička v tomto případě představuje všechny selektory, takže styly budou aplikovány na všechny prvky na webové stránce, přičemž se obnoví jejich okraje a odsazení. Budete překvapeni, ale tyto jednoduché řádky kódu mohou stačit k zajištění kompatibility mezi prohlížeči v mnoha webových prohlížečích. Všechna ostatní pravidla lze přidat libovolně. Také doporučuji přidat display: block ke všem HTML5 tagům.

Kam umístit pravidla pro resetování CSS

Zde výše jsem vám nabídl kód, ale kam ho vložit? Zde jsou dvě možnosti:

• Vložte jej na úplný začátek hlavní šablony stylů na vašem webu
• Vytvořte nový soubor css na serveru a uložte do něj kód, poté uložte a připojte se ke všem stránkám PŘED hlavní tabulka style.css.

Další informace o připojení šablony stylů css k html viz

Podle mého názoru je druhá možnost horší, protože zhoršuje výkon přidáním jednoho souboru navíc ke stažení. Na druhou stranu pro vás bude jednodušší tato pravidla spravovat. Kvůli výkonu ale doporučuji použít první možnost.

Resetování nastavení je jedním z opatření k zajištění kompatibility webu napříč prohlížeči, tedy stejného zobrazení v různých webových prohlížečích. To samozřejmě nejsou všechna opatření, která zajistí totéž vzhled, o zbytku napíšu v budoucnu na tomto blogu. V případě zájmu se přihlaste.

Od autora: Budování webových stránek na webu může být jako budování na pohyblivém písku. Prohlížeče dělají totéž, ale tu a tam se objevují nepříjemně nepředvídatelné rozdíly. Například všechny prohlížeče mají „styky uživatelský agent' je sada výchozích stylů CSS, aby nadpis vypadal jako nadpis atd. ještě předtím, než přiřadíte styly stránce1. Každý prohlížeč samozřejmě používá mírně odlišné výchozí sady.

Jedním příkladem byly výchozí styly seznamů, kde výchozí šablony stylů prohlížeče Internet Explorer a Opera měly původně odsazení seznamu levý okraj: 30pt;, zatímco Firefox a KHTML přišly s odsazením vlevo: 40px;. Pokud jste chtěli změnit výchozí odsazení definováním ul (padding-left: 0;), pak to vedlo k velmi odlišným výsledkům v prohlížečích.

RESETOVAT NASTAVENÍ CSS

Aby dosáhli trochu stability, někteří vývojáři resetovali všechny okraje a odsazení pomocí univerzálního voliče:

* (okraj: 0; výplň: 0;)

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

Odsazením seznamu a spuštěním šablony stylů odtud získáte to, co očekáváte. Použití * však znamenalo, že výchozí okraj a výplň "spadly" pro všechny prvky, a jakmile jste přidali prvek formuláře, bylo to opravdu těžké.

Účelem resetu je resetovat vše, co můžete... [a] sloužit jako výchozí bod pro vaše vlastní základní styly.- Eric Meyer

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, hlava, tr, th, td, článek, stranou, plátno, detaily, vložit, obrázek, popis obrázku, 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; )

html , body , div , span , applet , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , zkratka , akronym , adresa , velký , citovat , kód , 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, sada polí , formulář , štítek , legenda , tabulka , titulek , tbody , tfoot , thead , tr , th , td , článek , stranou , plátno , detaily , vložit , obrázek , popis obrázku , zápatí , záhlaví , hgroup , nabídka , navigace , výstup , rubín , sekce , shrnutí , čas , značka , zvuk , video ( okraj: 0 výplň: 0 hranice: 0 velikost písma: 100 %; písmo: dědit; vertikální - zarovnat : základní čára ;

Obnoví některé vlastnosti mnoha (ale ne všech) prvků na jejich ekvivalent ve formátu prostého textu. Protože se resetují pouze odpovídající prvky, obchází se tím některé problémy * (margin: 0; padding: 0;). Tyto vynechané „nestylové“ vlastnosti pak můžeme stylizovat s vědomím, že stavíme na stabilním základu pro různé prohlížeče. Toto přiřazení stylu zároveň působí jako signál pro potřebu vědomě nastavit vhodné styly pro tyto prvky.

PROBLÉMY S RESETOVÁNÍM CSS

CSS resety byly skutečným zachráncem, ale nyní, zejména s rozmachem drátěných modelů, se často používají „jak jsou“. Eric například předpokládal, že jiní vývojáři začnou stavět stránky na stylech resetování, které navrhl, a podle toho je přepíší, a první verze Meyer Reset dočasně obsahovala toto pravidlo:

/* nezapomeňte definovat styly zaměření! */ :focus ( obrys: 0; )

Bohužel ne každý ve skutečnosti definoval styly zaostření a Eric to z druhé verze odstranil.

Při použití resetů se cítíte trochu zvrácení. Obnovení výchozích stylů prohlížeče vás nutí přemýšlet o tom, jak by se měly jednotlivé prvky zobrazovat, což pomáhá zajistit, že prvky budou použity sémanticky, nikoli pro výchozí styly. Ale prvky jako i a em mají téměř vždy výchozí styl prohlížeče. Ostatní výchozí styly prohlížeče, jako je kdysi směšně velká velikost textu nadpisu, se změnily a staly se ve výchozím nastavení celkem tolerovatelné. Problémy začínají, když člověk chce použít resetovaný HTML element po odeslání s přiřazenými pouze "nestylovanými" resetovacími styly.

Pro mě je největším problémem resetů dědičnost, která vede ke spamu v nástrojích prohlížeče. Když se pokoušíte vystopovat problém CSS hluboce vnořeného prvku v kódu někoho jiného, ​​nepomůže to:

Pravidla pro resetování CSS se opakovala kvůli dědičnosti

NORMALIZE.CSS

Nicholas Gallagher a Jonathan Neal zvolili jiný přístup s Normalize.css, „malým souborem CSS, který zaručuje lepší konzistenci mezi prohlížeči ve výchozích stylech prvků HTML.“ Stejně jako u resetování CSS nám poskytuje solidní výchozí bod pro různé prohlížeče – primární důvod pro resetování na prvním místě – ale tyto dva přístupy se filozoficky liší.

Resetování CSS přepíše styly uživatelských agentů a vrátí mnoho prvků do jejich „nestylovaného“ stavu, což je určitá rovina, na které lze bezpečně stavět. Většinu prvků však musíme upravit, než s nimi budeme moci stavět. Místo toho Normalize.css řeší pouze nekonzistence stylu uživatelského agenta výběrem nejvhodnějších výchozích nastavení, což je rozdíl. Zde také získáváme bezpečný základ pro různé prohlížeče, ale takový, který zahrnuje normalizované styly uživatelských agentů jako základní stavební materiály připravené k použití. Je to v podstatě něco jako idealizovaná verze výchozí šablony stylů CSS 2.1 pro různé prohlížeče. V obou případech pak musíme přidat vlastní přepisující styly, abychom vytvořili obrázek, ale protože výchozí nastavení prohlížeče zůstává v Normalize.css, obecně je potřeba přidat méně stylů.

Vzhledem k tomu, že změny v Normalize.css jsou cílenější, nedochází k žádné kaskádě dědění přepsaných pravidel ve vašich nástrojích pro tvorbu založených na prohlížeči. Zde je jednoduchá ul: bez stylu s Meyer Reset a Normalize.css verze 1 a 2:

"Unstylovaný" prvek neuspořádaného seznamu

Použijte Meyer Reset

Použijte Normalize.css v1

Použití Normalize.css v2

Existuje jasný rozdíl ve filozofii, kde se příklad Meyer Reset zobrazuje jako několik řádků prostého textu bez okrajů, odsazení nebo odrážek, zatímco příklady Normalize.css jsou podobné výchozím stylům. Rozdíl ve stylu aplikovaný na tuto ul je také snadno patrný.

Nejedná se však o všechny styly aplikované na ul. Pro srovnání je zde stejný „nestylovaný“ snímek obrazovky, ale s viditelnými styly uživatelských agentů ve Firefoxu 21 a Opeře Next 15.