Všetky prvky HTML stránok majú špecifický význam. A, žiaľ, rôzne prehliadače ich neinterpretujú rovnako. Tým trpí dizajn stránky, mení sa jej dizajn pri zmene prehliadača (prezeranie internetu). Účelom postupu odstránenia štýlu je zmeniť nepríjemnosti prehliadača v takých záležitostiach, ako je výška riadkov, okraje, veľkosť písma hlavičky atď.
Aplikácie skriptov na sťahovanie CSS štýlov
Myslím si, že každý sebaúcty webmaster je zodpovedný za písanie vlastného CSS kódu. Ak som fanúšikom iného prístupu, urobte pripravené rozhodnutie, požiadajte o niečo nové a vyjsť v ústrety svojim potrebám.
Eric Meyer reset CSS
Scenár, ktorý napísal Eric Meyer, je podľa slov samotného autora neskutočne otrasný. Napríklad pre prvok tela neexistujú žiadne úlohy, bez ohľadu na to, akou farbou je pozadie zdobené. Preto môžu nastať zmeny, úpravy, rozšírenia a iné úpravy v závislosti od vašich potrieb. Pridajte požadované farby pre strany, prosím.
/* 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 ; ) /* Obnovenie roly zobrazenia HTML5 pre staršie prehliadače */ článok, bokom, podrobnosti, popis obrázku, obrázok, päta, hlavička, hgroup, menu, navigácia, sekcia ( 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: kolaps; ohraničenie: 0; )
Yahoo! (YUI 3) Resetujte CSS
Dumping štýlu CSS YUI 3 vylepšuje vynikajúci štýl prvkov HTML v prehliadačoch, ako aj iných dumpingových skriptov CSS, aby sa vytvoril spoľahlivý základ pre vytváranie webových stránok a webových stránok.
/* YUI 3.18.1 Copyright 2014 Yahoo! Inc. Všetky práva vyhradené. Licencovanie pod licenciou BSD. http://yuilibrary.com/license/ */ /* TODO je potrebné na odstránenie nastavení v HTML, pretože nemôžeme vytvoriť priestor názvov color:#000 background:#FFF ) /* TODO odstrániť nastavenia v BODY; nemôže to menný priestor. , 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, citácia, kód, dfn, em, silný, th, var ( štýl písma: normálny; 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, acronym ( 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 , select ( font-family:dedit; font-size:dedit; font-weight:inherit; *font-size:100%; /*ak chcete povoliť zmenu veľkosti pre IE*/ ) /*pretože legenda nie " zdediť v IE * / legenda ( color:#000; ) /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssreset ( display: none; )
Štýly prepustenia normalize.css
Normalize.css je prispôsobený súbor CSS, ktorý umožňuje prehliadačom zobrazovať všetky prvky konzistentnejšie a podľa aktuálnych štandardov. Autori sledovali rozdiely medzi štýlmi rôznych prehliadačov, aby určili, ktoré štýly by vyžadovali normalizáciu.
/*! normalize.css v6.0.0 | Licencia MIT | github.com/necolas/normalize.css */ /* Dokument ===================================== = ======================================= */ /** * 1. Opravte riadok výška vo všetkých prehliadačoch. * 2. Obrázky na pozadí môžete upraviť po zmene orientácie v IE na Windows Phone a 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. Displej pretečenia 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. */ pred ( rodina fontov: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Sémantika na úrovni textu ================ ==================================================== === ========= */ /** * 1. Zmeňte čierne pozadie na funkciách IE 10 */ a ( farba pozadia: transparentná; /* 1 */ -webkit-text-decoration -skip: objects ; /* 2 */ ) /** * 1. Odstráňte spodný okraj v prehliadači Chrome 57- a Firefox 39- . * 2. Pridajte správny text dekorácie 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 š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. */ 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ániť výške riadkov `sub` a `sup` 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, 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. Vickorist štýl dôležitých typov v 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 /** * Uloží štýly zaostrenia, ktoré nie sú nastavené predchádzajúcim pravidlom . */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( obrys: 1px bodkovaný ButtonText; ) /** * 1. Vickory text, ktorý je vložený v Edge a IE . * 2. Vickory viditeľnosť prvkov 'fieldset' v IE. * 3. Odstráňte výplň, aby s tým vývojári nemali žiadne spojenie, čo znamená, že vo všetkých prehliadačoch vynulujete * prvky `fieldset`. */ legenda ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 /* 3 */ medzera: normal /* 1 */ ) /** * 1. Pridajte správne zobrazenie v IE 9-. * 2. Pridajte rovné vertikálne karty do prehliadačov 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 */ ) /** * Vickory zoznam orientačných a odomykacích tlačidiel v prehliadači Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outter-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 špendlík a aktivujte tlačidlo v prehliadačoch Chrome a Safari v systéme macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Vikorize štýl na 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; )
Spustite cez univerzálny volič * (hviezda)
Na prvý pohľad sa môže zdať, že najjednoduchším a najpriamejším riešením je opísať všetky prvky HTML a priradiť im hodnoty, ak môžete použiť selektor *, a dokonca rozšíriť HTML.
* ( okraj: 0; výplň: 0; )
Bohužiaľ to nie je dobrá prax. Pre prehliadač je veľmi dôležité (v porovnaní s inými postupmi odstraňovania CSS to zaberie veľa času) nastaviť pravidlá pre každý prvok v dokumente, najmä na veľkých webových stránkach, a môže tiež vytvoriť veľa dobrých štýlov. v zákulisí.
Pokles štýlu WordPress
Ak chcete použiť jednu z opísaných metód na odstránenie štýlov CSS pre web WordPress, môžete to urobiť dvoma spôsobmi.
Prvým je, že musíte skopírovať kód na stiahnutie do súboru style.css vašich WordPress tém (za riadkami o autorstve sa nazývajú tie za textom orámovaným zlomkom a hviezdičkou /* ... */) .
Existuje veľa sadzačov, ktorí súťažia o takéto hodnosti CSS reset, služba na pochopenie zvláštností rôznych prehliadačov. V skutočnosti, Tento súbor štýlu prenecháva vývojárom všetku moc CSS. V tomto článku ukážem kód tohto súboru a dám nám vedieť, varto vikorystuvati CSS Reset chi ni.
Mám veľa rôznych CSS reset, Všetok smrad je približne rovnaký. Toto môžete napísať na wiki:
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, font, 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,
table, caption, tbody, tfoot, thead, tr, th, td (
pozadie: priehľadné;
ohraničenie: 0;
veľkosť písma: 100 %;
okraj: 0;
obrys: 0;
výplň: 0;
vertikálne zarovnať: základná čiara;
}
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;
}
: Zamerajte sa (
obrys: 0;
}
stôl (
border-collapse: kolaps;
ohraničenie: 0;
}
Rozmýšľam, prečo je jeho vikoristán taký namyslený a taký inteligentný a prečo napríklad ja nie som vikorista, ako mnohí iní sadzači, o tomto varto uznaní. Po prvé, to je všetko ahoj súbor, iným spôsobom, ahoj hodina pre obrobka, ale najdôležitejšie je, že sa menej hodí pre žltačku. Napríklad samotné polia tabuľky. A všetky autority stáli za myslením z nejakého dôvodu, ale ako najlepšia možnosť prezentácie rôznych prvkov. Spievam ti, nulujem vypchávka v strede tabuľky, na ktorej je všetko zobrazené, ju otočíte v hlavnom súbore. A zďaleka nie je pravda, že v tom, čo bolo za myslením, je výrazný rozdiel. Vychádza os, ktorú najskôr zatiahneme a potom otočíme. A zároveň s prvými nedostatkami (zaujímavý súbor a zaujímavý kód) existuje veľa rozložení a vôbec nie vikory CSS reset.
V každom prípade, Kvapka v štýle vikoristan nestojí za to Preto sa k tomu môžete láskavo vyjadriť, pretože rešpektujete, že zjednodušením prispôsobenia stránky rôznym prehliadačom môže ľahko zjednodušiť rozloženie ako celok.
Je to chyba rodiny IE a Opera Mini.
Niektoré podporné systémy IE môžu spôsobiť problém, tu sú spôsoby, ako odstrániť niektoré ovládacie prvky CSS na ich primárnych hodnotách:
Reset-this ( animácia: žiadna; oneskorenie-animácie: 0; smer-animácie: normálny; trvanie-animácie: 0; režim vyplňovania animácie: žiadny; počet-iterácií animácie: 1; názov-animácie: žiadna; animácia- play-state: running, animation-timing-function: easy, backface-visibility: background-clip: border-box: background-origin: background-position: 0 0; -y: 0: auto border-style: border-bottom: 0; border-collapse: border-left-style: border-left-width: medium; border-right-style: none; border-right-width: medium; ohraničenie: 0; border-top: 0; border-top-color: dedit; border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: žiadny; border-top-width: medium; dole: auto; box-shadow: žiadny; box-sizing: content-box; strana titulku: horná; jasné: žiadne; klip:auto; farba: zdediť; stĺpce: auto; počet stĺpcov: auto; column-fill: balance; medzera medzi stĺpcami: normálna; column-rule: medium none currentFarba; farba-pravidla stĺpca: aktuálna farba; stĺpcový-štýl pravidla: žiadny; column-rule-width: none; rozpätie stĺpca: 1; šírka stĺpca: auto; obsah: normálny; protiprírastok: žiadny; protiresetovanie: žiadne; kurzor: auto; smer: ltr; zobrazenie: inline; prázdne bunky: zobraziť; plavák: žiadny; písmo: normálne; font-family: zdediť; veľkosť písma: stredná; štýl písma: normálny; font-variant: normal; font-weight: normal; výška: auto; spojovníky: žiadne; vľavo: auto; medzery medzi písmenami: normálne; výška riadku: normálna; štýl zoznamu: žiadny; list-style-image: none; list-style-position: outside; list-style-type: disk; okraj: 0; okraj-dole: 0; ľavý okraj: 0; pravý okraj: 0; margin-top: 0; maximálna výška: žiadna; maximálna šírka: žiadna; minimálna výška: 0; min-šírka: 0; nepriehľadnosť: 1; siroty: 0; obrys: 0; farba obrysu: invertná; štýl obrysu: žiadny; šírka obrysu: stredná; prepad: viditeľný; pretečenie-x: viditeľné; pretekanie-y: viditeľné; výplň: 0; vypchávka-dolná časť: 0; padding-left: 0; padding-right: 0; vrchná výplň: 0; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspektíva: žiadna; perspektívny pôvod: 50 %; 50 %; poloha: statická; /* Môže vyžadovať rôzne úvodzovky pre rôzne miestne nastavenia (napr. fr) */ úvodzovky: "\201C" "\201D" "\2018" "\2019"; vpravo: auto; veľkosť záložky: 8; rozloženie tabuľky: auto; zarovnanie textu: zdediť; text-align-last: auto; text-dekorácia: žiadna; text-decoration-color: dedit; text-decoration-line: none; text-decoration-style: solid; zarážka textu: 0; text-shadow: none; transformácia textu: žiadna; hore:auto; transformovať: žiadny; transformačný štýl: plochý; prechod: žiadny; oneskorenie prechodu: 0 s; trvanie prechodu: 0 s; prechodová vlastnosť: žiadna; prechod-časovanie-funkcia: jednoduchosť; unicode-bidi: normálne; vertikálne zarovnať: základná čiara; viditeľnosť: viditeľné; biele miesto: normálne; vdovy: 0; šírka: auto; medzery medzi slovami: normálne; z-index: auto; /* základný moderný patch */ all: initial; všetky: nenastavené; ) /* základná moderná oprava */ #reset-this-root ( all: initial; * ( all: unset; ) )
- Relevantné github repo z roku 2017.
Toto bolo uvedené v komentároch Koristuvacha @user566245:
To je v zásade správne, ale jednotlivé najazdené kilometre sa môžu líšiť. Napríklad určité prvky, ako je textová oblasť za stenami, vytvárajú kordón, stagnáciu a menia hranice textovej oblasti.
Pridbany, aby sa stal súčasnou normou, Koristuvach Joost
#reset-this-parent ( all: initial; * ( all: unset; ) )
ZÁSOBA Z W3
Toto možno použiť pre koreňový prvok „widget“ zahrnutý v bočnom paneli, ak nechcete zmenšiť štýl bočného panela. Upozorňujeme však, že akýkoľvek štýl „za scénou“, ktorý sa použije na tento prvok (napríklad: zobrazenie: blok z tabuľky štýlov UA na prvkoch bloku), bude tiež viditeľný.
Premýšľal niekto o niečom inom, ako je css na vypustenie css? Takže?
Tu je jednoduchý nástroj:
getElementsByTagName ("*") vráti všetky prvky z DOM. Potom môžete nastaviť štýly pre prvok vzhľadu v kolekcii:
Var allElements = document.getElementsByTagName("*"); for (var i = 0, len = všetkyPrvky.dĺžka; i< len; i++) { var element = allElements[i]; // element.style.border = ... }
Toto je všetko povedané; Nemyslím si, že vypustenie css je naozaj možné, pretože neskončíme len s jedným webovým prehliadačom. Ak sa na konci „prehliadača“ nainštaluje „za scénou“.
Pre prehľadnosť uvádzame zoznam hodnôt pre Firefox 40.0
de font-style: šikmé spustenie operácie DOM.Zarovnanie obsahu: nenastavené; align-items: unset; align-self: unset; animácia: nenastavená; vzhľad: nezasadený; viditeľnosť zadnej strany: nenastavená; režim prelínania pozadia: nenastavený; pozadie: nenastavené; väzba: nenasadená; block-size: unset; border-block-end: unset; border-block-start: nenastavené; border-collapse: unset; border-inline-end: unset; border-inline-start: unset; okraj-polomer: nenastavený; border-spacing: unset; ohraničenie: nenastavené; spodok: nezasadený; box-align: unset; box-decoration-break: unset; box-direction: unset; box-flex: nenastavený; box-ordinal-group: unset; box-orient: nenastavený; box-pack: nenasadený; box-shadow: unset; box-sizing: unset; strana titulkov: nenastavená; jasné: nenastavené; clip-path: unset; klip-pravidlo: nenastavené; klip: nenastavený; color-adjust: unset; farebné-interpolačné-filtre: nenastavené; farebná interpolácia: nenastavená; farba: nenastavená; column-fill: unset; stĺpcová medzera: nenastavená; stĺpcové pravidlo: nenastavené; stĺpce: nenastavené; obsah: nenastavený; viditeľnosť ovládacieho znaku: nenastavené; protiprírastok: nenastavený; protireset: deaktivovaný; kurzor: nenastavený; displej: deaktivovaný; dominantná základná línia: nenastavená; prázdne bunky: nenastavené; fill-opacity: nenastavené; fill-rule: unset; fill: unset; filter: deaktivovaný; flex-flow: nenastavené; ohyb: nenastavený; plávajúca hrana: nenasadená; plavák: nenastavený; Flood-color: unset; povodňová nepriehľadnosť: nenastavená; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-size-adjust: unset; font-size: unset; font-stretch: unset; font-style:oblique; font-synthesis: unset; font-variant: unset; font-weight: unset; font: ; force-breaked-image-ikona: nenastavená; výška: odstavená; pomlčky: nenastavené; orientácia obrazu: nenastavená; image-region: unset; vykresľovanie obrazu: nenastavené; ime-mode: nenastavené; inline-size: unset; izolácia: nenastavená; justify-content: unset; justify-items: unset; ospravedlniť-seba: nenastavený; vľavo: nenastavené; medzery medzi písmenami: nenastavené; farba osvetlenia: nenastavená; line-height: unset; list-style: unset; margin-block-end: unset; margin-block-start: nenastavené; margin-inline-end: unset; margin-inline-start: unset; okraj: nenastavený; offset značky: nezasadený; značka: nenastavená; typ masky: nenastavená; maska: odstavená; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-veľkosť bloku: nenastavené; min-výška: odstavená; min-inline-size: unset; min-width: unset; mix-blend-mode: deaktivovaný; objekt-fit: unset; objektová poloha: nenastavená; offset-block-end: unset; offset-block-start: deaktivovaný; offset-inline-end: unset; offset-inline-start: unset; nepriehľadnosť: nenastavená; poradie: nenastavené; orient: nezasadený; obrys-offset: nezasadený; obrysový polomer: nenastavený; obrys: nezasadený; prepad: nenastavený; paddding-block-end: unset; padding-block-start: deaktivovaný; padding-inline-end: unset; padding-inline-start: unset; vypchávka: nenasadená; page-break-after: unset; page-break-before: unset; page-break-inside: unset; poradie farby: nenastavené; perspektívny pôvod: nezasadený; perspektíva: nenastavená; pointer-events: unset; poloha: odstavená; úvodzovky: unset; resize: unset; vpravo: nenastavené; ruby-align: unset; rubínová poloha: nenastavená; rolovacie správanie: nenastavené; scroll-snap-coordinate: unset; scroll-snap-destination: unset; scroll-snap-points-x: nenastavené; scroll-snap-points-y: nenastavené; scroll-snap-type: unset; vykresľovanie tvaru: nenastavené; stack-sizing: unset; stop-color: unset; stop-opacity: nenastavené; zdvih-dasharray: nenastavený; zdvih-pomlčka: nenastavené; zdvih-čiarka: nenastavená; ťah-linejoin: nenastavený; pokosový limit zdvihu: nenastavený; nepriehľadnosť zdvihu: nenastavená; šírka zdvihu: nenasadená; zdvih: nenasadený; tab-size: unset; rozloženie tabuľky: nenastavené; text-align-last: unset; text-align: unset; text-anchor: unset; text-combine-upright: unset; text-decoration: unset; text-zvýraznenie-pozícia: nenastavené; zvýraznenie textu: nenastavené; text-indent: unset; orientácia textu: nenastavená; text-overflow: unset; vykresľovanie textu: nenastavené; text-shadow: unset; text-size-adjust: unset; text-transform: unset; vrch: nenasadený; transform-origin: unset; transform-style: unset; transformovať: nenastavené; prechod: nenastavený; zameranie na používateľa: nenastavené; užívateľský vstup: nenastavený; user-modify: unset; user-select: unset; vektorový efekt: nenastavený; vertikálne zarovnanie: nenastavené; viditeľnosť: nenastavená; white-space: nenastavené; šírka: nenastavená; bude-zmeniť: nenastavené; ťahanie okna: nenastavené; zalomenie slov: nenastavené; medzery medzi slovami: nenastavené; zalamovanie slov: nenastavené; režim zápisu: nenastavený; z-index: nenastavený;
Pohľad autora:Život na mieste v Merezhi je podobný životu na zložitých pieskoch. Prehliadače stále fungujú rovnako, no niekedy nedokážu zobraziť neprenesené prihlasovacie údaje. Napríklad všetky prehliadače majú „šablón štýlov používateľského agenta“ – súbor štýlov CSS na tento účel, takže hlavička vyzerá ako hlavička atď., a to ešte pred priradením bočných štýlov1. Samozrejme, v engine prehliadača kože sa do procesu čistenia zapojí trochu masakru.
Jedna z aplikácií používala hárky so štýlmi zoznamov, zatiaľ čo v hárkoch so štýlmi prehliadača Internet Explorer a Opera používali ľavý okraj zoznamu: 30pt;, zatiaľ čo Firefox a KHTML používali ľavý okraj: 40px;. Ak ste chceli zmeniť vstup na ul (padding-left: 0;), prinieslo to v prehliadačoch odlišné výsledky.
SKID WEEKEND NALASHTUVAN CSS
Aby som dosiahol trochu stability, ako vývojár odstránim všetky polia a použijem dodatočný univerzálny volič:
* (okraj: 0; výplň: 0;)
* (okraj: 0; výplň: 0;)
Keď vstúpite do zoznamu a načítate z neho svoju šablónu štýlov, vyberiete tie, ktoré ste našli. Stagnácia * však znamenala, že pole a vchod „zapadli“ všetkým prvkom a akonáhle ste pridali formulárový prvok, bolo to ešte ťažšie.
Účelom resetovania je obnoviť všetko, čo je možné... [i] stať sa východiskovým bodom vašich výkonných základných štýlov- Eric Meyer
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, samec, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, formulár, štítok, legenda, tabuľka, titulok, tbody, tfoot, hlavička, tr, th, td, článok, bokom, plátno, detaily, vložiť, postava, fígcaption, päta, hlavička, 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; )
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;
Je dôležité zredukovať silu mnohých (alebo nie všetkých) prvkov na jednoduchý ekvivalent textu. Fragmenty sú vyradené z rovnakých prvkov, týmto spôsobom sa dá vyhnúť problémom * (margin: 0; padding: 0;). Potom môžeme definovať štýly pre tieto vyradené „neplatné“ autority, pričom máme istotu, že budú na stabilnej báze medzi prehliadačmi. Toto rozpoznávanie štýlov tiež slúži ako indikátor dopytu na nastavenie podobných štýlov pre tieto prvky.
PROBLÉMY SKIDANNYA NALASHTUVAN CSS
Vypustenie CSS bol dobrý nápad, ale zároveň, najmä pre myslenie rámcov, sa často používajú ako náhrada. Napríklad Erik predpokladal, že iní predajcovia začnú používať stránky založené na nasledujúcich štýloch zliav, čím ich ovplyvnia, a prvá verzia Meyer Reset okamžite obsahovala nasledujúce pravidlo:
/* nezabudnite, že musíte nastaviť štýly zaostrenia! */ :focus ( obrys: 0; )
Bohužiaľ, v skutočnosti nie každý priradil štýly na zameranie a Erik to videl z inej verzie.
Vynechajte zastosovuyuchi, máte pocit, že máte trochu chleba. Vynechanie štýlov prehliadača na spracovanie sťažuje veľkosť tých, ktoré sú zodpovedné za vzhľad prvku vzhľadu, čo tiež pomáha pri prepínaní, takže prvky sú zaseknuté za sémantikou a nie na ozdobu. Ale pre prvky typu i a em je štýl prehliadača rovnaký. Iné štýly prehliadača, ako napríklad smiešne veľká veľkosť textu hlavičky, sa zmenili a stali sa neznesiteľnejšími. Problémy nastanú, ak chcete po prenose uložiť vypustený prvok HTML bez použitia určených „nerušivých“ štýlov vhadzovania.
Najmenej dôležitým problémom pri zľavách je výpadok, ktorý vedie k spamu v nástrojoch prehliadača. Ak sa pokúšate vyriešiť problém s hlboko vnoreným prvkom CSS v kóde niekoho iného, nemôžeme vám pomôcť:
CSS pravidlá, ktoré sa opakujú počas kompresie
NORMALIZOVAŤ.CSS
Nicholas Gallagher a Jonathan Neal vyvinuli odlišný prístup pomocou Normalize.css, „malého súboru CSS, ktorý zaisťuje konzistenciu medzi jednotlivými prehliadačmi pri štylizácii prvkov HTML“. Rovnako ako v prípade zliav CSS nám poskytuje spoľahlivý východiskový bod medzi prehliadačmi - v prvom rade je to hlavný dôvod nedostatku zliav - ale tieto dva prístupy sa líšia z filozofického hľadiska.
Kvapku CSS možno použiť na úpravu agenta a otočenie anonymných prvkov do ich „neštylizovaného“ stavu, v ktorom môžete byť bezpečne prítomní. Potom však musíme rozpoznať štýly väčšiny prvkov, aby sme ich mohli použiť. Účel Normalize.css je zameraný iba na nekonzistentnosť štýlov agentov vývojárov, výber najvhodnejších parametrov pre úvahy, v ktorých spočíva. Tu máme tiež úplne bezpečný základ pre rôzne prehliadače, ktorý zahŕňa normalizované štýly klientskych agentov, ktoré sú pripravené na vývoj základných stavebných materiálov. Hlavný dôraz je kladený na idealizovanú verziu šablóny štýlov pre rôzne prehliadače založenú na CSS 2.1. V oboch prípadoch musíme do vytvoreného obrázka pridať viac dominantných štýlov, inak, ak stratíme prispôsobenie prehliadača v Normalize.css, musíme pridať menej štýlov.
Zmeny vykonané v Normalize.css sú cielenejšie; nástroje na vývoj vášho prehliadača nemajú kaskádu prepisov pravidiel. Os jednoduchej ul:, „zhoršené“ pre pomoc Meyer Reset a Normalize.css verzie 1 a 2:
Prvok „Vymazania“ neusporiadaného zoznamu
Meyerov reset
Zastosovamo Normalize.css v1
Aplikácia Normalize.css v2
Zdá sa, že existuje rozdiel vo filozofii, ak sa aplikácia Meyer Reset zobrazuje ako pár riadkov obyčajného textu bez okrajov alebo značiek, potom je aplikácia Normalize.css podobná štýlom za obalmi. Rozdiel v štýloch, ktoré boli konsolidované na túto úroveň, možno ľahko rozlíšiť.
Nie všetky štýly sú však zahrnuté v ul. Kvôli prehľadnosti urobte snímku obrazovky tej istej „zastrašujúcej“ snímky obrazovky spolu s viditeľnými štýlmi agenta, Firefox 21 a Opera Next 15.
Skidannya CSS(odstránenie štýlov) – to znamená vynulovanie dodatočných CSS a iných parametrov HTML prvkov, ktoré prehliadače nastavujú na propagáciu. Napríklad pred takéto prvky môžete pridať odseky (tagy), ktoré majú zvyčajne nenulové vertikálne polia (CSS), zoznamy s odrážkami (tagy), ktoré majú nielen polia, ale aj značky rovnakého typu (CSS) atď. .
Teraz sa zamyslime nad tým, čo potrebujeme, keď CSS vypustíme, čo mu môžeme dať? Je dobré vedieť, že ste napálili stránky svojho webu a nezmenili ste polia odsekov, ktoré vám nariadili prehliadače, pretože ich veľkosť máte úplne pod kontrolou. Ale povedzte mi, láskavo, prečo ste si mysleli, že všetky prehliadače na svete, ktoré už existujú a stále sa objavujú, vytvárajú polia tejto veľkosti? Prečo navyše veríte, že prehliadače, v ktorých ste testovali svoje rozloženie, nezmenia veľkosť týchto polí v ich aktuálnych verziách alebo ich neodstránia v budúcich verziách? Cítiš to, čo cítiš?
Takže pri odstraňovaní CSS sa návrhári rozloženia jednoducho chránia pred takýmito nezrovnalosťami tým, že najprv vymažú všetky „kritické“ hodnoty ovládacích prvkov CSS z prvkov a potom ich v prípade potreby pridajú späť, dokonca aj s vlastnými rozmermi. Preto vám môžeme pripomenúť, že stránka sa zobrazuje rovnako vo všetkých prehliadačoch. Štýly samozrejme nemôžete vymazať, ale jednoducho nastaviť požadované parametre prvkov počas rozloženia a tu hrozí, že sa tu všetko minie a v ďalšom okamihu sa všetko „doplní“.
Na základe vyššie uvedeného je jednou z vlastností CSS to, že po zmrazení veľa prvkov HTML stratí svoj pôvodný vzhľad. A hoci je strata okrajov v odsekoch pre začiatočníkov celkom pochopiteľná, napríklad skutočnosť, že tlačidlá vytvorené za dodatočnými značkami alebo reláciou sa viac podobali pôvodnému textu, je úplným sklamaním. Netreba vás však podvádzať a aj na tento účel sú štýly zľavnené, aby ich potom dizajnér layoutu nezabudol zadať znova.
Existuje veľa spôsobov, ako zmeniť štýly, a ktorý si vyberiete, je len na vás, ale môžem vám povedať jednu vec – najlepší spôsob je ten, ktorý ste si sami vytvorili, spoliehajúc sa na svoje vlastné znalosti a znalosti. Ak takéto informácie ešte nemáte, môžete sa rýchlo obrátiť na jednu z možností uvedených nižšie.
Nezabudnite najskôr zadať štýly na odoslanie CSS do základného kódu, inak sa akcie s parametrami nemusia spracovať štýlové priority, ktoré sú nainštalované prehliadačmi pri spracovaní HTML stránky a CSS kódu.
Skid CSS za pomoc univerzálneho selektora
* (rodina písma: inherit; /* všetky prvky sú zmenšené podľa ich typu písma */ font-style: inherit; /* obrázok je zmenšený */ font-weight: inherit; /* váha je znížená */ vertical-align: základná čiara /* vertikálne zarovnanie pozdĺž základnej čiary */ veľkosť písma: 100%;/* veľkosť písma 100% */ pozadie: transparentné /* pozadie všetkých prvkov obrázka */ okraj: 0; margin: 0 /* vyber polia */ padding: 0 /* vyber vstupy */ )Popis zadku
Koho zadok o pomoc univerzálny volič Zadané štýly sa okamžite aplikujú na všetky prvky HTML, ktoré budú na stránke prítomné. Ako vidíte, väčšina právomocí je vyhradená na účely poistenia, a preto ich význam naznačuje, ako môžu prehliadače primerane implementovať špecifikácie CSS. Ale ako už viete, v praxi nie je všetko tak, a keďže výkon je vo všetkých moderných prehliadačoch efektívne redukovaný prvkami od ich otcov, potom samotné externé polia, špecifikované silou CSS, nie sú vždy na začiatku rovnaké. na nulu.
A rozmerová os rámov (CSS) a obrysov (CSS) štandardne nepresahuje nulu, ale ani špecifikácie. Táto činnosť sa však vynulovala, takže projektant dispozície nezabudol zreteľne označiť, kde to bude potrebné.
Zrušte 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: kolaps; /* medzera medzi strednou tabuľkou */ border-spacing: 0; /* uvoľnenie medzery medzi stredom */ ) titulok,th ( text-align: left; /* zarovnanie textu na vľavo */ ) ol,ul ( štýl zoznamu: žiadny; /* výber značiek zoznamu */ ) h1,h2,h3,h4,h5,h6 (veľkosť písma: 100 %; hmotnosť písma: normálna; ) q: before,q :after ( content: ""; /* skresľuje labky značky Q */ )Popis zadku
Spoločnosť Yahoo nedávno vyvinula vlastnú možnosť vyradenia štýlov. Tu sa už mení sila špecifických prvkov, čo umožňuje väčšiu flexibilitu pri riadení vonkajšieho vzhľadu. Napríklad tu sú značky upratané zo zoznamov a značka má svoje nohy za dodatočnou silou CSS. Výhody tohto prístupu sú zrejmé a os nevýhod môže zahŕňať viac a niekedy nadbytočný kód. Ale nikto od vás nevyžaduje, aby ste zmenili CSS pre svoje vlastné potreby. Áno, môžete odstrániť veci, ktoré nepotrebujete selektory značiek alebo labky nielen upratať, ale rovno im dodať potrebný nový vzhľad.
CSS drop 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ár,štítok,legenda, tabuľka,nápis,tbody,tfoot,thead,tr,th,td,článok,strana,plátno, detaily,vložiť,obrázok,popis obrázku,päta,hlavička,hgroup,menu,nav, výstup,rubín, sekcia,súhrn,čas,značka,zvuk,video ( okraj: 0; výplň: 0; okraj: 0; veľkosť písma: 100 %; písmo: zdediť; zvislé zarovnanie: základný riadok; ) článok,na stranu,podrobnosti,popis obrázku, obrázok, päta, hlavička, hgroup, menu, nav, sekcia ( zobrazenie: blok; /* prvky bloku sú povinné (pre staršie prehliadače) */ ) telo ( výška riadku: 1; /* riadkovanie textu na stránke * / ) ol ,ul ( štýl zoznamu: žiadny; ) blockquote:before,blockquote:after, q:before,q:after ( content: ""; /* Preberanie labiek z Q a BLOCKQUOTE */ content: none; / * pridané pre presnosť */ ) blockquote,q ( úvodzovky: žiadne; /* iný spôsob, ako si urobiť poriadok */ ) tabuľka ( border-collapse: kolaps; ohraničenie: 0; )Popis zadku
Ďalším spôsobom, ako zrušiť CSS, je uverejniť Eric Meyer – populárny webový časopis. Tu ste už pridali zľavnené štýly pre tagy z HTML 5, ktoré, mimochodom, v čase písania tohto článku ešte slabo podporovali súčasné prehliadače. No, v prvom rade treba žasnúť nad budúcnosťou, však?
V skutočnosti by sa dalo v tomto článku pokračovať donekonečna, pretože, opakujem naposledy, v pravý okamih príde dizajnér dispozičného riešenia na svoju verziu zľavy, alebo nie vikorystvoy yogo zagali, spoliehajúc sa na jeho rešpekt.
