Resetujte CSS(reset stylu) se vynuluje pomocí pomocí CSS, některá nastavení prvků HTML, která prohlížeče standardně nastavují. Mezi takové prvky například patří odstavce (tag), které mají zpočátku nenulové svislé okraje (CSS), seznamy s odrážkami (tag), které již mají nejen okraje, ale také značky určitého typu (CSS) atd. .

Nyní se podívejme na to, 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 současně nezměnili okraje odstavců, které prohlížeče standardně navrhovaly, protože jejich velikost vám vyhovuje. Ale řekněte mi, prosím, proč jste se rozhodli, že všechny prohlížeče na světě, které již existují a budou se stále zobrazovat, vytvoří pole stejné velikosti? Proč si navíc myslíte, že prohlížeče, ve kterých jste testovali své rozložení, se na nich nezmění následující verze velikost těchto polí nebo nebudou vůbec odstraněna? Cítíte, jak to voní?

Návrháři rozvržení CSS se jednoduše pojistili proti takovým nedorozuměním, to znamená, že nejprve vynulovali všechny „kritické“ hodnoty prvků. Vlastnosti CSS, a pak podle potřeby přidejte zpět, ale s vlastní velikostí. Můžete si tedy být jisti, že stránka bude ve všech prohlížečích vypadat stejně. Styly samozřejmě nemůžete resetovat, ale jednoduše nastavit požadované parametry prvky, ale existuje riziko, že někde něco bude chybět a v určitém okamžiku vše „plave“.

Na základě výše uvedeného je jednou z funkcí resetování CSS to, že po jeho použití mnoho prvků HTML ztratí svůj známý vzhled. A pokud je ztráta okrajů v odstavcích pro začátečníky něco očekávaného, ​​pak je například skutečnost, že tlačítka vytvořená pomocí značek nebo se náhle navenek podobají běžnému textu, úplným překvapením. To by vás ale nemělo zmást, protože za tímto účelem se styly resetují, aby je návrhář rozložení nezapomněl později znovu zadat.

Existuje mnoho způsobů, jak resetovat styly, a který z nich si vyberete, závisí pouze na vás, ale mohu vám říci jednu věc - nejlepší reset je ten, který jste si sami vytvořili na základě svých zkušeností a návyků. Pokud takové zkušenosti ještě nemáte, můžete použít jednu z níže uvedených možností.

Styly resetování CSS vždy zahrňte na úplný začátek kódu, jinak některé parametry nemusí fungovat stylové priority které nastavují prohlížeče při zpracování HTML stránky a CSS kódu.

Resetování CSS pomocí univerzálního voliče

* (rodina písem: dědí; / * všechny prvky dědí písmo od svých rodičů * / styl písma: dědí; / * dědí obličej * / váha písma: dědí; / * dědí smělost * / svislé zarovnání: základní linie; / * svislé zarovnání k základní linii * / velikost písma: 100%; / * velikost písma 100% * / pozadí: průhledné; / * pozadí všech prvků je průhledné * / ohraničení: 0; / * odstranění okrajů * / obrys : 0; / * odstranění obrysů * / okraj: 0; / * odstranění okrajů * / odsazení: 0; / * odstranění okrajů * /)

Popis příkladu

V tomto případě pomocí univerzální volič zadané styly se okamžitě resetují pro všechny prvky HTML, které budou na stránce přítomny. Jak vidíte, většina vlastností je uvedena přesně z bezpečnostních důvodů, protože jejich hodnoty již odpovídají hodnotám, které by měly prohlížeče standardně nahrazovat podle specifikace CSS. Ale jak už víte, v praxi je to všechno úplně jiné, a pokud je vlastnost skutečně zděděna prvky od jejích rodičů ve všech předních prohlížečích, pak stejné vnější okraje specifikované vlastností CSS nejsou vždy zpočátku rovny nule.

Velikosti rámců (CSS) a obrysů (CSS) se ale ve výchozím nastavení nerovná nule, ale podle specifikace. Jejich tloušťka však byla také resetována na nulu, aby návrhář rozvržení nezapomněl výslovně uvést, kde je požadován.

Obnovit CSS z Yahoo!

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td (margin: 0; padding: 0;) fieldset, img, abbr, acronym (border: 0;) address, caption, cite, code, dfn, em, strong, th, var (font-style: normal; font-weight: normal;) table (border-collapse: collapse; / * general border for table cells * / border-spacing: 0; / * zeroing the spacing between cells * /) caption, th (text-align: left; / * aligning text to the left * /) ol, ul (list-style: none; / * remove list markers * /) h1, h2, h3, h4, h5, h6 (font-size: 100%; font-weight: normal;) q: before, q: after (content: ""; / * odstranit uvozovky ze značky Q * /)

Popis příkladu

Yahuova společnost najednou vyvinula vlastní verzi resetovacích stylů. Zde se již mění vlastnosti konkrétních prvků, což umožňuje dosáhnout větší flexibility při jejich správě. vzhled... Zde jsou například odrážky odstraněny ze seznamů a ze značky - uvozovek pomocí vlastnosti CSS. Výhody tohoto přístupu jsou zřejmé, ale nevýhody zahrnují objemnější a někdy nadbytečný kód. Ale nikdo vás neobtěžuje změnit reset CSS tak, aby vyhovoval vašim potřebám. Řekněme, že můžete odstranit některé zbytečné voliče značek nebo nejen odstranit uvozovky, ale okamžitě jim nastavit požadovaný vzhled.

Resetujte CSS od Erica Meyera

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formulář, štítek, legenda, tabulka, titulek, tbody, tfoot, thead, tr, th, td, článek, stranou, plátno, detaily, vložit, postava, figkace, zápatí, záhlaví, hgroup, nabídka, nav, výstup, rubín, sekce, souhrn, čas, značka, zvuk, video (okraj: 0; odsazení: 0; ohraničení: 0; velikost písma: 100%; písmo: dědí; svislé zarovnání: základní čára;) článek, stranou, detaily, figurka, obrázek, zápatí, záhlaví, skupina, nabídka, navigace, sekce (zobrazení: blok; / * prvky bloku (pro starší prohlížeče) * /) tělo (výška řádku: 1; / * řádkování text na stránce * /) ol, ul (styl seznamu: žádný;) blockquote: before, blockquote: after, q: before, q: after (content: ""; / * Remove quotes from Q and BLOCKQUOTE * / content : none; / * add to be right * /) blockquote, q (quotes: none; / * other way to remove quotes * /) table (border-collapse: collapse; border-spacing: 0;)

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 tagy z HTML 5, které mimochodem v době tohoto psaní byly moderními prohlížeči samy velmi špatně podporovány. Ale vždy se musíte dívat perspektivně, že?

Ve skutečnosti by tento článek mohl pokračovat donekonečna, protože, znovu opakuji, v určitém okamžiku každý návrhář rozvržení přichází s vlastní možností resetování nebo ji vůbec nepoužívá, spoléhá se na svou pozornost.

Všechno Prvky HTML stránky ve výchozím nastavení mají své vlastní specifické hodnoty. A bohužel nejsou různými prohlížeči interpretovány stejně. Výsledkem je, že design stránek trpí, jeho design se mění při změně prohlížeče (internetový prohlížeč). Účelem postupu resetování stylu je snížit nekonzistence prohlížeče v takových věcech, jako jsou výšky řádků, okraje, velikosti písma záhlaví atd.

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

Předpokládá se, že každý webmaster respektující sebe sama by měl napsat svůj vlastní resetovací kód CSS. Jsem ale zastáncem jiného přístupu, vezměte hotové řešení, pochopte ho a v případě potřeby opravte.

Eric Meyer Reset CSS

Resetovací skript od Erica Meyera je podle samotného autora záměrně velmi obecný. Například nemá výchozí barvu pozadí pro prvek těla. Proto by měl být upraven, upravován, 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 další.

/ * 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, postava, figurka, 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 ;-) ol, ul (list-style: none;) blockquote, q (quotes: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; content: none;) table (border- sbalit: c ollapse; mezery mezi okraji: 0; )

Yahoo! (YUI 3) Resetujte CSS

CSS Reset YUI 3 zmírňuje nekonzistentní styl HTML prvků napříč prohlížeči, stejně jako jakýkoli jiný resetovací skript CSS, a vytváří tak 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í v HTML, protože ho nemůžeme jmenovat. TODO s předponou, mám seskupovat podle voliče nebo vlastnosti pro úsporu hmotnosti? */ html ( color: # 000; background: #FFF;) / * TODO remove settings on BODY since we can "t namespace it. * / / * TODO test uvedení třídy na HEAD. - Selže 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 think about hanlding inheritence different, might letting IE6 a bit failed ... * / adresa, titulek, citát, kód, dfn, em, strong, th, var (font-style: normal; font-weight: normal;) ol, ul (list-style: none;) caption, th (zarovnání textu: vlevo;) h1, h2, h3, h4, h5, h6 (velikost písma: 100%; váha písma: normální;) q: před, q: po (obsah: "";) zkratka, zkratka (ohraničení: 0; varianta písma: normální;) / * pro zachování výšky řádku a vzhledu voliče * / sup (svislé zarovnání: horní text;) sub (svislé zarovnání: textové spodní;) vstup, textová oblast , vyberte (rodina písem: dědí; velikost písma: dědí; váha písma: dědí; * velikost písma: 100%; / * pro povolení změny velikosti pro IE * /) / *, protože legenda nedědí v IE * / legenda (barva: # 000;) / * YUI CSS Detect iontové razítko * / # yui3-css-razítko.cssreset (zobrazení: žádné; )

Resetování stylů normalizalize.css

Normalize.css je vlastní soubor CSS, který umožňuje prohlížečům vykreslovat všechny prvky konzistentněji a v souladu s moderními standardy. Jeho autoři prozkoumali rozdíly mezi výchozími styly různých prohlížečů, aby opravili pouze ty styly, které vyžadují normalizaci.

/ *! normalize.css v6.0.0 | Licence MIT | github.com/necolas/normalize.css * / / * dokument ========================================= ====================================== * / / ** * 1. Opravte výšku čáry ve všech prohlížečů. * 2. Zabránit úpravám velikosti písma po změnách orientace v * IE zapnuto Windows Phone a v iOS. * / html (výška řádku: 1,15; / * 1 * / -ms-text-velikost-úprava: 100%; / * 2 * / -webkit-text-velikost-úprava: 100%; / * 2 * /) / * Sekce ====================================================== ============================= * / / ** * Přidejte správné zobrazení v IE 9-. * / článek, stranou, zápatí, záhlaví, navigace, sekce (zobrazení: blok;) / ** * Opravte velikost a okraj písma v prvcích „h1“ v kontextech „sekce“ a * „článku“ v prohlížečích Chrome, Firefox a Safari. * / h1 (velikost písma: 2em; okraj: 0,67em 0;) / * Obsah seskupení ================================== =============================================== * / / ** * Přidejte správný displej v IE 9-. * 1. Přidejte správné zobrazení v IE. * / figcaption, figure, main ( / * 1 * / display: block;) / ** * Add the right margin in IE 8. * / figure (margin: 1em 40px;) / ** * 1. Add the right box velikost ve Firefoxu. * 2. Ukažte přetečení v Edge a IE. * / hr (box-sizing: content-box; / * 1 * / height: 0; / * 1 * / overflow: visible; / * 2 * /) / ** * 1. Opravte dědičnost a měřítko velikosti písma ve všech prohlížečích. * 2. Opravte velikost lichého písma „em“ ve všech prohlížečích. * / pre (rodina písem: monospace, monospace; / * 1 * / velikost písma: 1em; / * 2 * /) / * Sémantika na úrovni textu ================== ======================================================================== ========= * / / ** * 1. Odstraňte šedé pozadí u aktivních odkazů v IE 10. * 2. Odstraňte mezery v odkazech podtržené v iOS 8+ a Safari 8+. * / a (barva pozadí: průhledná; / * 1 * / -webkit-text-dekorace-přeskočení: objekty; / * 2 * /) / ** * 1. Odstraňte spodní okraj v prohlížeči Chrome 57- a Firefox 39- ... * 2. Přidejte správnou dekoraci textu v prohlížečích Chrome, Edge, IE, Opera a Safari. * / abbr (border-bottom: none; / * 1 * / text-decoration: underline; / * 2 * / text-decoration: underline dotted; / * 2 * /) / ** * Zabraňte duplicitní aplikaci `odvážnější `podle dalšího pravidla v Safari 6. * / b, strong (font-weight: inherit;) / ** * Přidejte správnou váhu písma v prohlížečích Chrome, Edge a Safari. * / b, strong (font-weight: bolder;) / ** * 1. Opravte dědičnost a změnu velikosti písma ve všech prohlížečích. * 2. Opravte velikost lichého písma „em“ ve všech prohlížečích. * / code, kbd, samp (rodina písem: monospace, monospace; / * 1 * / font-size: 1em; / * 2 * /) / ** * Přidejte správný styl písma v systému Android 4.3-. * / dfn (font-style: italic;) / ** * Přidejte správné pozadí a barvu v IE 9-. * / značka (barva pozadí: # ff0; barva: # 000;) / ** * Přidejte správnou velikost písma ve všech prohlížečích. * / small (font-size: 80%;) / ** * Zabraňte tomu, aby prvky „sub` a` sup` ovlivňovaly výšku řádku ve * všech prohlížečích. * / sub, sup (velikost písma: 75%; výška řádku: 0; poloha: relativní; svislé zarovnání: základní čára;) sub (dole: -0,25em;) sup (nahoře: -0,5em;) / * Vložený obsah ======================================================= =========================== * / / ** * Přidejte správné zobrazení v IE 9-. * / audio, video (displej: inline-block;) / ** * Přidejte správný displej v iOS 4-7. * / audio: not () (zobrazení: žádné; výška: 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) (overflow: hidden;) / * Forms ==================================== = ============================================== * / / ** * Odstranit okraj ve Firefoxu a Safari. * / tlačítko, vstup, optgroup, výběr, textarea (okraj: 0;) / ** * Zobrazit přetečení v IE. * 1. Zobrazte přetečení v Edge. * / tlačítko, vstup ( / * 1 * / přetečení: viditelné;) / ** * Odstraňte 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 neschopnost stylovat klikací typy v iOS a Safari. * / button, html, / * 1 * /, (-webkit-appearance: button; / * 2 * /) / ** * Odstraňte vnitřní ohraničení a polstrování ve Firefoxu. * / tlačítko ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner (border-style: none; padding: 0;) / ** * Obnovte styly ostření nenastavené předchozím pravidlem. * / tlačítko: -moz -focusring ,: -moz -focusring ,: -moz -focusring ,: -moz -focusring (outline: 1px dotted ButtonText;) / ** * 1. Opravte zalamování textu v Edge a IE. * 2. Opravte dědičnost barev z prvků „sady polí“ v IE. * 3. Odstraňte polstrování, aby vývojáři nebyli chyceni, když vynulují * prvky „sady polí“ ve všech prohlížečích. * / legenda (velikost boxu: border-box; / * 1 * / barva: dědit; / * 2 * / displej: tabulka; / * 1 * / maximální šířka: 100%; / * 1 * / polstrování: 0 ; / * 3 * / prázdné místo: normální; / * 1 * /) / ** * 1. Přidejte správný displej do IE 9-. * 2. Přidejte správné svislé zarovnání v prohlížečích Chrome, Firefox a Opera. * / progress (display: inline-block; / * 1 * / vertical-align: baseline; / * 2 * /) / ** * Remove the default vertical scrollbar in IE. * / textarea (přetečení: auto;) / ** * 1. Přidejte správnou velikost pole v IE 10-. * 2. Odstraňte polstrování v IE 10-. * /, (velikost pole: border-box; / * 1 * / polstrování: 0; / * 2 * /) / ** * Opravte styl kurzoru tlačítek pro zvýšení a snížení v prohlížeči Chrome. * / ::-webkit-inner-spin-button, ::-webkit-vnější-spin-button (výška: auto;) / ** * 1. Opravte lichý vzhled v prohlížečích Chrome a Safari. * 2. Opravte styl osnovy v Safari. * / (-webkit-appearance: textfield; / * 1 * / outline-offset: -2px; / * 2 * /) / ** * Odebrat vnitřní polstrování a zrušit tlačítka v Chrome a Safari na macOS. * / ::-webkit-search-cancel-button, ::-webkit-search-decoration (-webkit-appearance: none;) / ** * 1. Opravte nemožnost stylizovat klikací typy v iOS a Safari. * 2. V Safari změňte vlastnosti písma na „dědit“. * / ::-webkit-file-upload-button (-webkit-appearance: button; / * 1 * / font: inherit; / * 2 * /) / * Interactive =============== ======================================================================== ============= * / / * * Přidejte správné zobrazení v IE 9-. * 1. Přidejte správné zobrazení v Edge, IE a Firefoxu. * / podrobnosti, / * 1 * / nabídka (zobrazení: blok;) / * * Přidejte správné zobrazení do všech prohlížečů. * / shrnutí (zobrazení: položka seznamu;) / * Skriptování ======================================== ====================================== * / / ** * Přidejte správné zobrazení v IE devět- . * / canvas (display: inline-block;) / ** * Přidejte správné zobrazení v IE. * / template (display: none;) / * Hidden =========================================== ===================================== * / / ** * Přidejte správné zobrazení v IE 10-. .. * / (displej: žádný;)

Resetovat 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 prvky HTML a přiřazovat jim hodnoty, když můžete použít selektor *, protože jeho účinek platí pro všechny HTML.

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

Bohužel to není dobrá praxe. Pro prohlížeč je velmi obtížné (ve srovnání s jinými postupy resetování CSS trvá dlouho) aplikovat pravidla na každý prvek v dokumentu, zejména na velkých webových stránkách, a také může zničit mnoho dobrých výchozích stylů.

Obnovte styly a WordPress

Pokud chcete pro web WordPress použít jednu z výše uvedených metod resetování stylů CSS, existují dva způsoby.

První je, že musíte zkopírovat resetovací kód na začátek souboru style.css. WordPress témata(za řádky o autorství a názvu tématu, tedy za text orámovaný zlomkem a hvězdičkou / * ... * /.

Kromě rodin IE a Opera Mini.

Protože nedostatek podpory IE může způsobit problém, zde jsou některé ze způsobů, jak obnovit některé vlastnosti CSS na jejich počáteční hodnoty:

Reset-this (animace: none; animation-delay: 0; animation-direction: normal; animation-duration: 0; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation- play-state: running; animation-timing-function: easy; backface-visibility: visible; background: 0; background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; původ na pozadí: padding-box; background-position: 0 0; background-position-x: 0; background-position-y: 0; background-repeat: repeat; background-size: auto auto; border: 0; border- style: none; border-width: medium; border-color: inherit; border-bottom: 0; border-bottom-color: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; style-border-bottom: none; border-bottom-width: medium; border-collapse: separate; border-image: none; border-left: 0; border-left-color: inherit; border-left-style: none; border-left-width: medium; border-r adius: 0; pravý okraj: 0; border-right-color: inherit; style-border-right: žádný; border-right-width: medium; mezery mezi okraji: 0; border-top: 0; border-top-color: inherit; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: žádný; border-top-width: medium; dole: auto; box-shadow: žádný; box-sizing: content-box; strana s titulky: nahoře; jasný: žádný; klip: auto; barva: zdědit; sloupce: auto; počet sloupců: auto; vyplnění sloupce: zůstatek; mezera mezi sloupci: normální; pravidlo sloupce: medium none currentColor; sloupec-pravidlo-barva: currentColor; sloupec-pravidlo-stylu: žádný; width-rule-width: none; rozpětí sloupců: 1; šířka sloupce: auto; obsah: normální; proti-přírůstek: žádný; counter-reset: žádný; kurzor: auto; směr: ltr; zobrazení: inline; prázdné buňky: zobrazit; float: žádný; písmo: normální; font-family: inherit; velikost písma: střední; styl písma: normální; varianta písma: normální; font-weight: normal; výška: auto; spojovníky: žádné; vlevo: auto; řádkování: normální; výška řádku: normální; styl seznamu: žádný; list-style-image: žádný; list-style-position: venku; list-style-type: disk; okraj: 0; margin-bottom: 0; okraj vlevo: 0; okraj-vpravo: 0; margin-top: 0; max-výška: žádná; max-width: žádný; min-výška: 0; min. šířka: 0; krytí: 1; sirotci: 0; obrys: 0; obrys-barva: invertovat; styl osnovy: žádný; šířka obrysu: střední; přetečení: viditelné; overflow-x: viditelný; overflow-y: viditelný; polstrování: 0; polstrování-dole: 0; padding-left: 0; padding-right: 0; padding-top: 0; konec stránky: auto; konec stránky: auto; zalomení stránky: auto; perspektiva: žádná; perspektivní původ: 50% 50%; poloha: statická; / * Může být potřeba změnit uvozovky pro různá národní prostředí (např. Fr) * / quotes: "\ 201C" "\ 201D" "\ 2018" "\ 2019"; vpravo: auto; velikost záložky: 8; rozložení tabulky: auto; zarovnání textu: dědit; text-align-last: auto; textová dekorace: žádná; text-decoration-color: inherit; text-decoration-line: žádný; styl dekorace textu: pevný; textová odrážka: 0; text-shadow: žádný; textová transformace: žádná; nahoře: auto; transformovat: žádný; styl transformace: plochý; přechod: žádný; zpoždění přechodu: 0 s; doba přechodu: 0 s; přechodová vlastnost: žádná; funkce časování přechodu: snadnost; unicode-bidi: normální; vertical-align: baseline; viditelnost: viditelný; mezera: normální; vdovy: 0; šířka: auto; mezery mezi slovy: normální; z-index: auto; / * základní moderní patch * / all: initial; vše: unset; ) / * základní moderní patch * / # reset-this-root (vše: initial; * (all: unset;))

• Relevantnější repo od Githubu z prosince 2017

Jak je uvedeno v komentáři od uživatele @ user566245:

to je v zásadě pravda, ale jednotlivé kilometry se mohou lišit. Například některé prvky, jako je výchozí textová oblast, mají ohraničení, použití tohoto resetu zmenší ohraničení textové oblasti.

Získán, aby se stal moderní normou, uživatel Joost

# reset-this-parent (vše: initial; * (all: unset;))

PŘÍKLAD Z W3

To může být užitečné pro kořenový prvek „widgetu“ zahrnutý na stránce, která nechce zdědit styly externí stránky. Všimněte si však, že bude také odstraněn jakýkoli „výchozí“ styl použitý na tento prvek (např.: Display: block ze šablony stylů UA na prvky bloku).

Nikdo nemyslel na nic jiného než CSS pro ukládání CSS? Ano?

Existuje takový naléhavý nástroj:

getElementsByTagName ("*") vrátí všechny prvky z DOM. Poté můžete nastavit styly pro každou položku v kolekci:

Var allElements = document.getElementsByTagName ("*"); pro (var i = 0, len = allElements.length; i< len; i++) { var element = allElements[i]; // element.style.border = ... }

S tím vším se říká; Nemyslím si, že resetování CSS je proveditelné, pokud neskončíme pouze s jedním webovým prohlížečem. Pokud je na konci „prohlížeč“ nastaven na „výchozí“.

Pro srovnání je zde seznam hodnot Firefoxu 40.0 pro

kde font-style: oblique spustí operaci DOM.

Align-content: unset; align-items: unset; align-self: unset; animace: nenastaveno; vzhled: nenastaveno; viditelnost na zadní straně: nenastaveno; režim míchání pozadí: nenastaveno; pozadí: nenastaveno; vazba: nenastaveno; block-size: unset; border-block-end: nenastaveno; začátek bloku bloku: unset; border-collaps: unset; border-inline-end: nenastaveno; border-inline-start: nenastaveno; poloměr ohraničení: nenastaveno; mezery mezi okraji: nenastaveno; border: unset; dole: nenastaveno; box-align: unset; box-decoration-break: unset; směr pole: nenastaveno; box-flex: unset; box-ordinal-group: unset; box-orient: unset; box-pack: unset; box-shadow: unset; velikost boxu: nenastaveno; strana s titulky: nenastaveno; clear: unset; cesta k klipu: nenastaveno; pravidlo klipu: nenastaveno; klip: nenastaveno; úprava barev: nenastaveno; filtry interpolace barev: nenastaveno; interpolace barev: nenastaveno; barva: nenastaveno; vyplňování sloupců: nenastaveno; mezera mezi sloupci: nenastaveno; pravidlo sloupce: nenastaveno; sloupce: unset; obsah: unset; viditelnost ovládacího znaku: nenastaveno; přírůstek čítače: nenastaveno; reset čítače: nenastaveno; kurzor: nenastaveno; displej: nenastaveno; dominantní-základní linie: nenastaveno; prázdné buňky: unset; fill-opacity: unset; fill-rule: unset; fill: unset; filtr: unset; flex-flow: nenastaveno; flex: nenastaveno; float-edge: nenastaveno; float: unset; flood-color: unset; záplavová neprůhlednost: nenastaveno; rodina písem: unset; font-feature-settings: unset; kerning písem: unset; font-language-override: unset; font-size-adjust: unset; velikost písma: unset; font-stretch: unset; styl písma: šikmé; syntéza písem: unset; varianta písma: unset; font-weight: unset; písmo :; force-broken-image-icon: unset; výška: nenastaveno; spojovníky: nenastaveno; orientace obrazu: nenastaveno; oblast obrazu: nenastaveno; vykreslování obrázků: nenastaveno; ime-mode: unset; inline-size: unset; izolace: nenastaveno; justify-content: unset; justify-items: unset; justify-self: unset; vlevo: nenastaveno; mezery mezi písmeny: nenastaveno; barva osvětlení: nenastaveno; line-height: unset; styl seznamu: unset; margin-block-end: nenastaveno; margin-block-start: nenastaveno; margin-inline-end: nenastaveno; margin-inline-start: nenastaveno; margin: unset; offset značky: nenastaveno; značka: unset; typ masky: nenastaveno; maska: nenastaveno; max-block-size: unset; max-height: nenastaveno; max-inline-size: unset; max-width: unset; min-block-size: nenastaveno; min-height: nenastaveno; min. vložená velikost: nenastaveno; min-width: nenastaveno; mix-blend-mode: unset; přizpůsobení objektu: nenastaveno; poloha objektu: nenastaveno; offset-block-end: unset; offset-block-start: unset; offset-inline-end: unset; offset-inline-start: unset; neprůhlednost: nenastaveno; pořadí: unset; orientovat: nenastaveno; offset-offset: nenastaveno; poloměr osnovy: nenastaveno; obrys: nenastaveno; přetečení: nenastaveno; padding-block-end: nenastaveno; padding-block-start: nenastaveno; padding-inline-end: nenastaveno; padding-inline-start: nenastaveno; polstrování: nenastaveno; přerušení stránky: nenastaveno; page-break-before: unset; page-break-inside: unset; pořadí barev: unset; perspektivní původ: nenastaveno; perspektiva: nenastaveno; pointer-events: nenastaveno; poloha: nenastaveno; uvozovky: unset; změna velikosti: unset; vpravo: nenastaveno; ruby-align: nenastaveno; rubínová poloha: nenastaveno; scroll-behavior: unset; souřadnice posouvání-přichytávání: nenastaveno; scroll-snap-destination: unset; scroll-snap-points-x: unset; scroll-snap-points-y: unset; scroll-snap-type: unset; vykreslování tvarů: nenastaveno; velikost zásobníku: nenastaveno; stop-color: nenastaveno; stop-opacity: unset; stroke-dasharray: nenastaveno; stroke-dashoffset: nenastaveno; stroke-linecap: nenastaveno; stroke-linejoin: nenastaveno; mrtvice-mititerlimit: nenastaveno; tahová opacita: nenastaveno; šířka zdvihu: nenastaveno; mrtvice: nenastaveno; velikost karty: nenastaveno; rozložení tabulky: unset; text-align-last: unset; zarovnání textu: unset; ukotvení textu: unset; text-kombinovat-vzpřímený: nenastaveno; text-decoration: unset; text-důraz-pozice: nenastaveno; zvýraznění textu: unset; text-indent: unset; orientace textu: nenastaveno; přetečení textu: unset; vykreslování textu: nenastaveno; text-shadow: unset; text-size-adjust: unset; transformace textu: unset; nahoře: nenastaveno; transform-origin: unset; styl transformace: unset; transform: unset; přechod: unset; zaměření na uživatele: nenastaveno; vstup uživatele: unset; user-modify: unset; user-select: unset; vektorový efekt: nenastaveno; vertical-align: unset; viditelnost: nenastaveno; white-space: unset; šířka: nenastaveno; will-change: unset; přetahování okna: nenastaveno; přestávka na slovo: nenastaveno; mezery mezi slovy: nenastaveno; zalamování slov: nenastaveno; režim psaní: nenastaveno; z-index: nenastaveno;

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

Viděl jsem mnoho různých Reset CSS, jsou všichni přibližně stejní. Můžete použít toto:

Html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, zkratka, zkratka, adresa, velký, citovat, kód,
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ář, popisek, legenda,
tabulka, titulek, tbody, tfoot, thead, tr, th, td (
pozadí: průhledné;
hranice: 0;
velikost písma: 100%;
okraj: 0;
obrys: 0;
polstrování: 0;
vertical-align: baseline;
}
tělo (
výška řádku: 1;
}
ol, ul (
styl seznamu: žádný;
}
blockquote, q (
uvozovky: žádné;
}
blockquote: before, blockquote: after,
q: před, q: po (
obsah: "";
obsah: žádný;
}
: soustředit se (
obrys: 0;
}
stůl (
kolaps kolapsu: kolaps;
mezery mezi okraji: 0;
}

Myslím, že důvod jeho použití je pochopitelný, ale proč jej například nepoužívám, jako mnoho jiných návrhářů rozvržení, stojí za to o něm vyprávět. Zaprvé je extra soubor Za druhé, čas navíc zvládnout, ale hlavně se mi líbí výchozí vlastnosti. V tabulce jsou například stejná pole. Koneckonců, všechny vlastnosti byly provedeny ve výchozím nastavení z nějakého důvodu, ale jako většina nejlepší možnost zobrazení různých položek. Ujišťuji vás resetováním polstrování u buněk tabulky jej s největší pravděpodobností vrátíte v hlavním souboru. A není zdaleka faktem, že se hodnota bude lišit od toho, co bylo výchozí. Ukázalo se tedy, že jej nejprve odstraníme a poté vrátíme. A spolu s prvními nedostatky (extra soubor a extra kód) mnoho návrhářů rozvržení nepoužívá Reset CSS.

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

• Překlad

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

Proč je to potřeba?

Každý prohlížeč nastavuje vlastní výchozí hodnoty stylu pro různé prvky HTML. Pomocí CSS Reset můžeme tento rozdíl neutralizovat a zajistit styly stylů napříč prohlížeči.

Například použijete prvek A ve vašem dokumentu. Většina prohlížečů má ráda internet Explorer a Firefox přidat odkaz modrá barva a zdůraznit... Představte si však, že se po pěti letech někdo rozhodl tvořit nový prohlížeč(říkejme tomu UltraBrowser). Vývojářům prohlížečů se nelíbila modrá barva a vadilo jim podtržení, a tak se rozhodli zvýraznit odkazy v červené a tučně... Na tomto základě nastavíte pro prvek hodnotu základního stylu A pak je zaručeno, že bude takový, jaký ho chcete mít, nikoli způsob, jakým jej vývojáři UltraBrowser dávají přednost.

Ale teď nemáme vůbec žádné odrážky, a to ani mezi jednotlivými odstavci! Co dělat? Nelžete a nebojte se: pod naším resetem popíšeme potřebné pravidlo. Můžeš to udělat různé způsoby: Zadejte odsazení v dolní nebo horní části odstavce, zadejte jej v procentech, pixelech nebo em.

A co je nejdůležitější, prohlížeč nyní hraje podle našich pravidel, ne my podle jeho. Rozhodl jsem se to udělat podobným způsobem:

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

V důsledku toho jsme získali 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í resetovací styly. Navzdory tomu neexistuje průvodce krok za krokem při vytváření vlastního resetování CSS. Spolehněte se na své vlastní zásady a svůj vlastní styl.

Abychom vám pomohli správně se rozhodnout, zde je několik dalších odkazů:

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

2. Reset CSS 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 takovém případě byste od zobrazení v prohlížeči neměli očekávat nic dobrého. Nezapomeňte, že byste vždy měli nejprve zahrnout reset CSS a poté všechny ostatní styly.

Ano, chápu, že to znělo směšně, ale toto je jedna z hlavních chyb vývojářů, mladých i starých. Mnoho lidí na to jednoduše zapomíná.

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

Neodcházejme příliš daleko od tématu a pokračujme. Aplikujme na náš příklad styly Erica Meyera, ale po popisy našich nemovitostí, jak je ukázáno na 4 příkladech. Matematici by řekli toto: „Což bylo nutné dokázat.“

3. Pro reset CSS použijte samostatný dokument CSS

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

Vlastně zaujímám pozici vytváření jeden velký soubor CSS kvůli většímu výkonu tohoto přístupu. Ale v Tento problém Většinou souhlasím s většinou: Reset CSS by měl být přesunut do samostatný soubor(obvykle se nazývá reset.css). Pokud ano, můžete jej použít v různých projektech, aniž byste se museli snažit jej oddělit od ostatních pravidel CSS.

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

Přestože tento koncept funguje, jeho použití často není žádoucí kvůli nekompatibilitě s některými prohlížeči (například tento volič není v aplikaci Internet Explorer zpracován správně). Tuto techniku ​​byste měli používat pouze pro jednoduché, malé, statické a předvídatelné stránky (pokud musíte).

Tato rada je obzvláště důležitá při vývoji řešení, jako jsou témata pro CMS. Nemůžete předem předvídat, jak bude použit nebo jak bude upraven. Je lepší popsat základní pravidla CSS pro všechny prvky, než k tomu použít nepředvídatelný (i když menší) mechanismus univerzálních voličů.

5. Při používání CSS Reset se vyhněte nadbytečným popisům vlastností

Dalším důvodem, proč se mi nelíbí samostatný soubor pro reset CSS, je potenciální nadbytečnost následných deklarací vlastností CSS. Duplikování vašich individuálních stylů v sadě souborů CSS je nevhodné a je třeba se mu vyhnout. Samozřejmě jsme někdy příliš líní na to, abychom pečlivě prošli sadou stylů a některé z nich zkombinovali, ale alespoň bychom to měli zkusit!

Zpět na Eric's CSS Reset. Nastavuje výchozí hodnoty pro výšku řádku, barvu a pozadí prvku tělo následujícím způsobem:

body (line-height: 1; color: black; background: white;)

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

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

V tomto případě není nutné vytvářet nový volič pro popis vašich vlastností - můžete je jednoduše zahrnout do CSS Reset. Pojďme na to:

body (line-height: 1; color: # 996633; background: #ccc url (tiled-image.gif) repeat-x top left;)

Nebojte se upravit samotný reset CSS. Přizpůsobte si to sami, ať vám to funguje. Upravte, znovu sestavte, odeberte a přidejte podle potřeby ve vašem konkrétním případě.

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