Všetky prvky stránky HTML majú štandardne svoje vlastné definované hodnoty. A, bohužiaľ, rôzne prehliadače s nimi nezaobchádzajú rovnako. Tým trpí dizajn stránky, mení sa jej dizajn pri zmene prehliadača (internetového prehliadača). Účelom postupu obnovenia štýlu je znížiť nekonzistentnosť prehliadača vo veciach, ako sú výšky riadkov, okraje, veľkosti písma nadpisov atď.

Príklady skriptov resetovania CSS

Existuje názor, že každý sebarešpektujúci webmaster by mal napísať svoj vlastný resetovací kód CSS. Ale som zástancom iného prístupu, vezmite si hotové riešenie, pochopte ho a prípadne opravte.

Eric Meyer reset CSS

Resetovaný scenár Erica Meyera je podľa samotného autora zámerne veľmi všeobecný. Napríklad nenastaví žiadnu predvolenú farbu pozadia pre prvok tela. Preto by mal byť upravený, upravený, rozšírený a inak prispôsobený vašim potrebám. Pridajte farby, ktoré chcete pre stránky, odkazy atď.

/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 Licencia: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, veľký, citovať, kód, del, dfn, em, img, ins, kbd, q, s, samp, malý, úder, silný, sub, sup, tt, var, b, u, i, stred, dl, dt, dd, ol, ul, li, fieldset, formulár, štítok, legenda, tabuľka, titulok, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, navigácia, výstup, rubín, sekcia, súhrn, čas, značka, zvuk, video ( margin: 0; padding: 0; border: 0; font-size: 100 %; font: inherit; vertical-align: baseline ; ) /* HTML5 display-role reset pre staršie prehliadače */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( štýl zoznamu: žiadny; ) blockquote, q ( úvodzovky: žiadne; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- kolaps:c ollapse; ohraničenie: 0; )

Yahoo! (YUI 3) Resetujte CSS

YUI 3 CSS Style Reset zmierňuje konfliktné štýly HTML prvkov prehliadačmi, rovnako ako akýkoľvek iný CSS resetovací skript, čím vytvára solídny základ pre vytváranie webových stránok a webových aplikácií.

/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Všetky práva vyhradené. Licencované pod licenciou BSD. http://yuilibrary.com/license/ */ /* ÚLOHA bude musieť odstrániť nastavenia v jazyku HTML, pretože ho nemôžeme použiť v mennom priestore. ÚLOHA s predponou, mám zoskupiť podľa selektora alebo vlastnosti, aby sa ušetrila hmotnosť? */ html( color:#000; background:#FFF; ) /* TODO odstráni nastavenia na BODY, pretože to nemôžeme mať menný priestor. */ /* TODO testuje uvedenie triedy na HEAD. - Zlyhá 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 premýšľajte o tom, ako s dedičstvom zaobchádzať inak, možno nechať IE6 trochu zlyhať ... */ adresa, titulok, citat, kod, dfn, em, silny, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:none; ) titulok, 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; ) /* na zachovanie výšky riadka a vzhľadu selektora */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) input, textarea , vyberte ( font-family:inherit; font-size:dedit; font-weight:inherit; *font-size:100%; /*ak chcete povoliť zmenu veľkosti pre IE*/ ) /*pretože legenda v IE nededí * / legenda ( color:#000; ) /* YUI CSS Detect ion Stamp */ #yui3-css-stamp.cssreset ( zobrazenie: žiadne; )

Obnoviť štýly normalize.css

Normalize.css je vlastný súbor CSS, ktorý umožňuje prehliadačom vykresľovať všetky prvky konzistentnejšie a podľa moderných štandardov. Jeho autori skúmali rozdiely medzi predvolenými štýlmi rôznych prehliadačov, aby opravili len tie štýly, ktoré je potrebné normalizovať.

/*! normalize.css v6.0.0 | Licencia MIT | github.com/necolas/normalize.css */ /* Dokument ==================================== ==================================== */ /** * 1. Opravte výšku riadku vo všetkých prehliadačov. * 2. Zabráňte úpravám veľkosti písma po zmene orientácie v * IE zapnutom Windows telefón a v systéme iOS. */ html ( výška-riadka: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Sekcie ================================================ ========================= */ /** * Pridajte správne zobrazenie v IE 9-. */ článok, bokom, päta, hlavička, navigácia, sekcia ( display: block; ) /** * Opravte veľkosť písma a okraj na prvkoch `h1` v rámci `section` a * `article` kontextoch v prehliadačoch Chrome, Firefox a safari. */ h1 (veľkosť písma: 2em; okraj: 0,67em 0; ) /* Obsah zoskupenia ============================ ===========================================*/ /** * Pridajte správne zobrazenie v IE 9-. * 1. Pridajte správne zobrazenie v IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Pridajte správny okraj v IE 8. */ obrázok ( margin: 1em 40px; ) /** * 1. Pridajte správny rámček dimenzovanie vo Firefoxe. * 2. Zobraziť pretečenie v Edge a IE. */ hod ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: viditeľné; /* 2 */ ) /** * 1. Opravte dedičnosť a škálovanie veľkosti písma vo všetkých prehliadačoch. * 2. Opravte nepárnu veľkosť písma `em` vo všetkých prehliadačoch. */ pre ( rodina fontov: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Sémantika na úrovni textu ================ =================================================== ======== */ /** * 1. Odstráňte sivé pozadie na aktívnych odkazoch v IE 10. * 2. Odstráňte medzery v podčiarknutí odkazov v iOS 8+ a Safari 8+. */ a ( farba pozadia: transparentná; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Odstráňte spodný okraj v prehliadačoch Chrome 57- a Firefox 39- . * 2. Pridajte správne textová výzdoba v prehliadačoch Chrome, Edge, IE, Opera a Safari. */ abbr ( okraj-dole: žiadne; /* 1 */ ozdoba textu: podčiarknutie; /* 2 */ ozdoba textu: podčiarknutie bodkované; /* 2 */ ) /** * Zabránenie duplicitnej aplikácii výrazu `bolder ` podľa ďalšieho pravidla v Safari 6. */ b, silné ( font-weight: inherit; ) /** * Pridajte správnu váhu písma v Chrome, Edge a Safari. */ b, silné ( font-weight: bolder; ) /** * 1. Opravte dedenie a zmenu veľkosti písma vo všetkých prehliadačoch. * 2. Opravte nepárnu veľkosť písma `em` vo všetkých prehliadačoch. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Pridajte správny štýl písma v systéme Android 4.3-. */ dfn ( font-style: italic; ) /** * Pridajte správne pozadie a farbu v IE 9-. */ značka ( farba pozadia: #ff0; farba: #000; ) /** * Pridajte správnu veľkosť písma vo všetkých prehliadačoch. */ malé (veľkosť písma: 80%; ) /** * Zabránenie tomu, aby prvky `sub` a `sup` ovplyvňovali výšku riadku vo * všetkých prehliadačoch. */ sub, sup ( veľkosť písma: 75 %; výška riadku: 0; pozícia: relatívna; zvislé zarovnanie: základná čiara; ) sub ( dole: -0,25 em; ) sup ( hore: -0,5 em; ) /* Vložený obsah ================================================== ======================== */ /** * Pridajte správne zobrazenie v IE 9-. */ audio, video ( display: inline-block; ) /** * Pridajte správne zobrazenie v iOS 4-7. */ audio:not() (zobrazenie: žiadne; výška: 0; ) /** * Odstráňte orámovanie obrázkov vo vnútri odkazov v IE 10-. */ img ( border-style: none; ) /** * Skrytie pretečenia v IE. */ svg:not(:root) ( pretečenie: skryté; ) /* Formuláre =============================== ========================================== */ /** * Odstráňte okraj vo Firefoxe a Safari. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Zobraziť pretečenie v IE. * 1. Ukážte pretečenie v Edge. */ tlačidlo, vstup ( /* 1 */ pretečenie: viditeľné; ) /** * Odstránenie dedenia transformácie textu v Edge, Firefox a IE. * 1. Odstráňte dedičnosť transformácie textu vo Firefoxe. */ tlačidlo, vyberte ( /* 1 */ text-transform: none; ) /** * 1. Zabráňte chybe WebKit, kde (2) ničí natívne ovládacie prvky „audio“ a „video“ * v systéme Android 4. * 2. Opravte neschopnosť upravovať klikacie typy v systémoch iOS a Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Odstráňte vnútorné orámovanie a výplň vo Firefoxe. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner ( border-style: none; padding: 0; ) /** * Obnoví štýly zamerania, ktoré neboli nastavené predchádzajúcim pravidlom. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( obrys: 1px bodkovaný ButtonText; ) /** * 1. Opravte zalamovanie textu v Edge a IE. * 2. Opravte dedičnosť farieb z prvkov `fieldset` v IE. * 3. Odstráňte vypchávky, aby vývojári neboli zaskočení, keď vynulujú prvky * `fieldset` vo všetkých prehliadačoch. */ legenda ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ medzera: normálne; /* 1 */ ) /** * 1. Pridajte správne zobrazenie v IE 9-. * 2. Pridajte správne vertikálne zarovnanie v prehliadačoch Chrome, Firefox a Opera. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Odstráňte predvolený vertikálny posuvník v IE. */ textarea ( overflow: auto; ) /** * 1. Pridajte správnu veľkosť poľa v IE 10-. * 2. Odstráňte výplň v IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Opravte štýl kurzora tlačidiel na zvýšenie a zníženie v prehliadači Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Opravte zvláštny vzhľad v prehliadačoch Chrome a Safari. * 2. Opravte štýl obrysu v Safari. */ ( -webkit-appearance: textfield; /* 1 */ obrys-offset: -2px; /* 2 */ ) /** * Odstráňte vnútorné čalúnenie a zrušte tlačidlá v prehliadačoch Chrome a Safari v systéme macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Opravte neschopnosť upravovať klikateľné typy v iOS a Safari. * 2. V Safari zmeňte vlastnosti písma na „zdediť“. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interactive ============= =================================================== =========== */ /* * Pridajte správne zobrazenie v IE 9-. * 1. Pridajte správny displej v Edge, IE a Firefoxe. */ detaily, /* 1 */ menu ( display: block; ) /* * Pridajte správne zobrazenie vo všetkých prehliadačoch. */ zhrnutie ( zobrazenie: položka zoznamu; ) /* Skriptovanie ==================================== ==================================== */ /** * Pridajte správne zobrazenie v IE 9- . */ canvas ( display: inline-block; ) /** * Pridajte správne zobrazenie v IE. */ šablóna ( zobrazenie: žiadne; ) /* Skryté ======================================= ================================== */ /** * Pridajte správne zobrazenie v IE 10- . */ (zobrazenie: žiadne; )

Resetovať cez univerzálny volič * (hviezdička)

Na prvý pohľad sa to môže zdať ako najjednoduchšie a najúspešnejšie riešenie, prečo popisovať všetky prvky HTML a priraďovať im hodnoty, keď môžete použiť selektor *, pretože to platí pre všetky HTML.

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

Ale bohužiaľ to nie je dobrý postup. Pre prehliadač je veľmi ťažké (a časovo náročné v porovnaní s inými resetmi CSS) aplikovať pravidlá na každý prvok v dokumente, najmä na veľkých webových stránkach, a môže tiež porušiť veľa dobrých predvolených štýlov.

Obnoviť štýly a WordPress

Ak chcete použiť jeden z vyššie uvedené metódy resetujte štýly CSS pre web WordPress, potom to možno vykonať dvoma spôsobmi.

Prvým je, že musíte skopírovať resetovací kód do hornej časti súboru style.css. WordPress témy(za riadkami o autorstve a názve témy, teda za textom orámovaným zlomkom a hviezdičkou /* ... */.

@import "reset.css";

Ak je v CSS direktíva @import, tak by mala byť na úplnom začiatku tabuľky (pred všetkými pravidlami). V opačnom prípade ho môže prehliadač ignorovať.

Na druhej strane, aby sa zlepšil výkon, CSS tabuľkyštýly, naopak, sú spravidla kombinované do jedného súboru. Preto sa používanie @import bez skutočnej potreby neoplatí.

Ako vidíte, resetovanie štýlov vo WordPress nie je nič zvláštne.

Vďaka

Pri písaní tohto článku boli použité nasledujúce zdroje.

V predvolenom nastavení prehliadač nastavuje vlastné nastavenia pre niektoré vlastnosti v css. Problém je však v tom, že existuje veľa webových prehliadačov a každý si môže nastaviť svoje vlastné pravidlá. Aké riešenie? Zistite, ako obnoviť predvolené nastavenia CSS a prepísať ich vlastnými. Ale tento článok bude venovaný tomu, ako to možno urobiť.

CSS Reset alebo Reset Defaults

CSS Reset je sada štýlov, ktoré resetujú niektoré parametre, nainštalovaný prehliadačom predvolená. Každý webový vývojár píše tento súbor pre seba individuálne a niekto si vezme hotové riešenie. Tu navrhujem začať. Existuje veľa dobrých možností resetovania štýlu, ale moja obľúbená je táto od Erica Meyera:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licencia: žiadna (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, citovať, code,
del, dfn, em, img, ins, kbd, q, s, samp,
malý, úder, silný, sub, sup, tt, var,
b, u, i, stred,
dl, dt, dd, ol, ul, li,
sada polí, formulár, štítok, legenda,
tabuľka, titulok, tbody, tfoot, hlava, tr, th, td,
článok, bok, plátno, detaily, vložiť,
obrázok, popis obrázku, päta, hlavička, hgroup,
ponuka, navigácia, výstup, rubín, sekcia, súhrn,
čas, značka, zvuk, video (
okraj: 0;
výplň: 0;
ohraničenie: 0;
veľkosť písma: 100%
písmo: zdediť;
vertikálne zarovnať: základná čiara;
}
/* Resetovanie roly zobrazenia HTML5 pre staršie prehliadače */
článok, bok, detaily, popis obrázku, postava,
päta, hlavička, hgroup, menu, navigácia, sekcia (
displej:blok;
}
telo (
výška riadku: 1;
}
ol, ul (
štýl zoznamu: žiadny;
}
blockquote, q (
úvodzovky: žiadne;
}
blockquote:predtým, blockquote:po,
q:pred, q:po (
obsah: "";
obsah: žiadny;
}
tabuľka(
border-collapse: kolaps;
ohraničenie: 0;
}

Trochu okomentujem kód. Po prvé, obnoví vnútorné a vonkajšie okraje pre všetky potrebné prvky. Po druhé, existuje podpora prvkov HTML5. Majú pravidlo, ktoré im umožní správne zobrazenie v niektorých verziách prehliadačov. Po tretie, typické nastavenia pre pohodlné ovládanie s tabuľkami (odstránené zarážky medzi bunkami a dvojité orámovanie). Taktiež boli zrušené štandardné značky pre zoznamy a úvodzovky pre úvodzovky. Ak chcete použiť predvolený štýl, mali by sa tieto časti kódu odstrániť.

Ako resetovať nastavenia CSS sami

S viac-menej normálnym vlastníctvom css sa môžete pokúsiť napísať niekoľko pravidiel sami. Napríklad:

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

Toto je snáď najviac jednoduchý príkaz. Hviezdička v tomto prípade predstavuje všetky selektory, takže štýly sa použijú na všetky prvky na webovej stránke, pričom sa obnovia ich okraje a výplň. Budete prekvapení, ale tieto jednoduché riadky kódu môžu stačiť na zabezpečenie kompatibility medzi prehliadačmi v mnohých webových prehliadačoch. Všetky ostatné pravidlá je možné pridať ľubovoľne. Do všetkých HTML5 značiek odporúčam pridať aj display: block.

Kam umiestniť pravidlá resetovania CSS

Tu vyššie som vám ponúkol kód, ale kam ho vložiť? Tu sú dve možnosti:

  • Prilepte ho na úplný začiatok hlavnej šablóny so štýlmi na svojej stránke
  • Vytvorte nový súbor css na serveri a uložte doň kód, potom ho uložte a pripojte sa ku všetkým stránkam PRED hlavná tabuľka štýl.css.

Ďalšie informácie o pripojení šablóny so štýlmi css k html nájdete v časti

Podľa môjho názoru je druhá možnosť horšia, pretože zhoršuje výkon pridaním jedného súboru navyše do sťahovania. Na druhej strane bude pre vás jednoduchšie riadiť tieto pravidlá. Ale kvôli výkonu odporúčam použiť prvú možnosť.

Obnovenie nastavení je jedným z opatrení na zabezpečenie kompatibility stránky medzi prehliadačmi, teda rovnakého zobrazenia v rôznych webových prehliadačoch. Samozrejme, nie sú to všetky opatrenia, ktoré zabezpečia to isté vzhľad, o ostatnom napíšem v budúcnosti na tomto blogu. V prípade záujmu sa prihláste na odber.

Tento článok je prvým zo série o krotení CSS. Dnes sa pozrieme na technológiu Obnoviť CSS.

Prečo je to potrebné?

Každý prehliadač nastavuje svoje vlastné predvolené hodnoty štýlu pre rôzne prvky HTML. OD pomocou CSS Obnovením môžeme tento rozdiel vyrovnať, aby sme zaistili štýly v rôznych prehliadačoch.

Napríklad používate prvok a vo vašom dokumente. Väčšina prehliadačov má rád internet Explorer a Firefox, pridajte odkaz Modrá farba a podčiarknutie. Predstavte si však, že o päť rokov neskôr sa niekto rozhodol tvoriť nový prehliadač(nazvime to UltraBrowser). Vývojárom prehliadača sa nepáčila modrá farba a otravovalo podčiarknutie, preto sa rozhodli odkazy zvýrazniť v červenej farbe a tučný. Presne na základe toho, ak nastavíte hodnotu základného štýlu pre prvok a, potom je zaručené, že to bude také, aké chcete, a nie to, ako to vývojári UltraBrowser radšej zobrazujú.

Teraz však nemáme vôbec žiadne zarážky, a to ani medzi jednotlivými odsekmi! Čo robiť? Neklamte a nebojte sa: pod naším resetom popíšeme pravidlo, ktoré potrebujeme. Dá sa to rôzne cesty: zadajte zarážku pod alebo nad odsekom, zadajte ju v percentách, pixeloch alebo em.

Najdôležitejšie je, že prehliadač teraz hrá podľa našich pravidiel, nie my podľa jeho. Rozhodol som sa to urobiť takto:

* ( okraj: 0; odsadenie: 0; ) p ( okraj: 5 pixelov 0 10 pixelov 0; )

V dôsledku toho sme dostali to, čo možno vidieť v treťom príklade.

Ak riešite konkrétny problém vo svojom projekte, môžete si vytvoriť vlastné štýly resetovania. Napriek tomu neexistuje návod vytvoriť svoj vlastný reset CSS. Spoľahnite sa na vlastné zásady a vlastný štýl.

Aby sme vám pomohli urobiť správnu voľbu, tu je niekoľko ďalších odkazov:

  1. Menej je viac - moja voľba Reset CSS (Ed Elliot).

2. Váš CSS Reset je prvá vec, ktorú by mal prehliadač vidieť

Resetovanie štýlov po nastavení vlastných štýlov pre prvky nie je správny prístup. V tomto prípade by sa od zobrazenia prehliadačom nemalo očakávať nič dobré. Pamätajte, že vždy by ste mali najprv zahrnúť CSS Reset a až potom všetky ostatné štýly.

Áno, chápem, že to znelo smiešne, ale toto je jedna z hlavných chýb vývojárov, mladých aj starých. Mnoho ľudí na to jednoducho zabudne.

Niektorí si môžu položiť logickú otázku: prečo sa to deje? Odpoveď je jednoduchá: pravidlá zapísané v súbore CSS (a dokonca aj v ich poradí v dokumente) prepíšu pravidlá deklarované skôr.

Neodbočujme príliš od témy a pokračujme. Aplikujme štýly Erica Meyera na náš príklad, ale po popisy našich nehnuteľností, ako je uvedené v príklade 4. Matematici by povedali nasledovné: "To je to, čo bolo potrebné dokázať."

3. Na resetovanie CSS použite samostatný dokument CSS

Musím (nie, v žiadnom prípade som nebol nútený) spomenúť túto radu. Používanie samostatného súboru na resetovanie CSS je bežnou praxou, ktorú podporuje veľké číslo vývojárov.

Vlastne zastávam pozíciu tvorenia jeden veľký súbor CSS z dôvodu vyššieho výkonu tohto prístupu. Ale v tejto otázke mám tendenciu súhlasiť s väčšinou: CSS Reset by sa mal presunúť do samostatného súboru (zvyčajne nazývaného reset.css). V tomto prípade ho môžete použiť v rôznych projektoch bez toho, aby ste sa snažili oddeliť ho od ostatných pravidiel CSS.

4. Snažte sa vyhnúť používaniu univerzálneho voliča

Tento koncept síce funguje, no často nie je žiaduci kvôli nekompatibilite s niektorými prehliadačmi (napríklad v Internet Exploreri je tento selektor spracovaný nesprávne). Túto techniku ​​by ste mali používať iba pre jednoduché, malé, statické a predvídateľné stránky (ak musíte).

Tento tip je obzvlášť dôležitý, keď vyvíjate riešenia, ako sú témy CMS. Nemôžete vopred predpovedať, ako sa bude používať a ako sa bude upravovať. Je lepšie opísať základné pravidlá CSS pre všetky prvky, ako na to použiť nepredvídateľný (aj keď menší) mechanizmus univerzálnych selektorov.

5. Vyhnite sa redundantným popisom vlastností pri používaní CSS Reset

Ďalším dôvodom, prečo nemám rád samostatný súbor CSS Reset, je potenciálna nadbytočnosť následných vyhlásení vlastností CSS. Opakovanie vašich individuálnych štýlov v celej sade súborov CSS je neslušné správanie a mali by ste sa mu vyhnúť. Samozrejme, niekedy sme príliš leniví na to, aby sme starostlivo prešli súborom štýlov a skombinovali niektoré z nich, ale mali by sme to aspoň skúsiť!

Vráťme sa k Ericovmu resetovaniu CSS. Nastavuje predvolené hodnoty pre výšku čiary, farbu a pozadie prvku telo nasledujúcim spôsobom:

telo (výška riadku: 1; farba: čierna; pozadie: biele; )

Povedzme, že už viete, ako bude prvok vyzerať. telo:
  1. farba pozadia: #cccccc;
  2. farba: #996633;
  3. Chcete zopakovať konkrétny obrázok na pozadí vodorovne.

V tomto prípade nie je potrebné vytvárať nový selektor na popis vašich vlastností – jednoducho ich môžete zahrnúť do CSS Reset. Poďme na to:

telo ( line-height: 1; color: #996633; background:#ccc url(tile-image.gif) repeat-x vľavo hore; )

Nebojte sa upraviť samotný CSS Reset. Prispôsobte si to, nech vám to funguje. Upravte, prestavte, odstráňte a pridajte podľa potreby vo vašom konkrétnom prípade.

Eric Meyer o tom povedal nasledovné: "Toto nie je prípad, keď by každý mal používať CSS Reset bez zmien."



Predvolený CSS pre prvky HTML (2)

Každý prehliadač je iný, takže:

  • Firefox (Gecko):. Alebo prejdite na resource://gre-resources/ a pozrite sa na html.css .
  • Chrome/Safari (WebKit):
    • Chrome (blikanie):
  • Internet Explorer (Trident), staršie verzie: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Kde nájdem CSS pre predvolený CSS prehliadača?

veľa HTML prvky mať nejaké vlastnosti cssštandardne, čo môže niekedy viesť k neznámemu/nežiaducemu správaniu. Napríklad vstupné polia sa zobrazujú inak v rôzne prehliadače. Hľadám miesto, ktoré pokrýva nové vlastnosti CSS3 a nové prvky HTML5.

Videl som v iných (oveľa starších) otázkach (ako sú predvolené šablóny štýlov CSS v prehliadačoch), ktoré ponúkajú riešenie resetovania CSS. Toto riešenie niekedy nie je potrebné, často by som chcel zachovať niektoré základné vlastnosti (napríklad zvýraznenie vstupných polí v Chrome). Inými slovami: Nechcem sa zbavovať vecí len preto, že neviem, čo robia .

takže, existuje stránka, ktorá mi môže poskytnúť všetky tieto informácie (alebo možno väčšinu)?

Nájdete tu úložisko GitHub pre všetky špecifikácie W3C HTML a predvolené šablóny štýlov CSS pre vývojárov

1.

2. Štandardné štýly pre Internet Explorer

3.

4. Štandardné štýly pre Operu

5. Štandardné štýly pre HTML4 (špecifikácia W3C)

6. Štandardné štýly pre HTML5 (špecifikácia W3C)

Príklad podľa predvolenej špecifikácie W3C HTML4:

html, adresa, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre ( display: block; unicode-bidi: embed ) li ( display: list-item ) head ( display: none ) table ( display: table ) tr ( display: table-row ) thead ( display: table-header- group ) tbody ( display: table-row-group ) tfoot ( display: table-footer-group ) col ( display: table-column ) colgroup ( display: table-column-group ) td, th ( display: table-cell ) titulok ( display: table-caption ) th ( font-weight: tučnejšie; text-align: center ) caption ( text-align: center ) body ( margin: 8px ) h1 ( font-size: 2em; margin: .67em 0 ) h2 ( font-size: 1.5em; margin: .75em 0 ) h3 ( font-size: 1.17em; margin: .83em 0 ) h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu ( okraj: 1,12 em 0 ) h5 ( veľkosť písma: 0,83 em; okraj: 1,5 em 0 ) h6 ( veľkosť písma: ,75 em; okraj: 1,67 em 0 ) h1, h2, h3, h4, h5, h6, b, silný (hmotnosť písma: tučnejšie) bloková citácia ( marg vľavo: 40px; margin-right: 40px ) i, citovať, em, var, adresa ( font-style: italic ) pre, tt, code, kbd, samp ( font-family: monospace ) pre ( white-space: pre ) button, textarea, input, select ( display: inline-block ) big ( font-size: 1.17em ) small, sub, sup ( font-size: .83em ) sub ( vertical-align: sub ) sup ( vertical-align: super ) table ( border-spacing: 2px; ) thead, tbody, tfoot ( vertical-align: middle ) td, th, tr ( vertical-align: inherit ) s, strike, del (text-decoration: line-through ) hr ( border: 1px inset ) ol, ul, dir, menu, dd ( margin-left: 40px ) ol ( list-style-type: decimal ) ol ul, ul ol, ul ul, ol ol ( margin-top: 0; margin-bottom: 0 ) u, ins ( text-decoration: underline ) br:before ( content: "\A"; white-space: pre-line ) center ( text-align: center ) :link, :visited ( text-decoration: underline ) :focus ( obrys: tenký bodkovaný prevrátený ) /* Spustiť nastavenia obojsmernosti (nezmeniť sa) */ BDO ( smer: ltr; unicode-bidi: bidi-override ) BDO ( smer: rtl; unicode-bid i: bidi-override ) * ( smer: ltr; unicode-bidi: embed ) * ( direction: rtl; unicode-bidi: embed ) @media print ( h1 ( page-break-before: always ) h1, h2, h3, h4, h5, h6 ( page-break-after: vyhnúť sa ) ​​ul, ol, dl ( zalomenie strany pred: vyhnúť sa ) ​​)