Resetovanie vstupov CSS na nulu.

Vyhľadajte na stránke

Hľadať

Všetky HTML prvky 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

Dumping CSS štýlu YUI 3 vylepší vynikajúci štýl HTML prvkov v prehliadačoch, ako aj akýkoľvek iný CSS dumping skript, aby 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é.

/*! 3-. */ progress ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Odstráňte predvolený vertikálny posuvník v IE.

Licencovanie pod licenciou BSD.

http://yuilibrary.com/license/ */ /* TODO sa vyžaduje na odstránenie nastavení v HTML, pretože ho nemôžeme použiť v mennom priestore. color:#000; background:#FFF; ) /* TODO odstrániť nastavenia v BODY, pretože sme can't namespace it */ /* TODO test uvedenie triedy na FF */ body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6. , pre, kód, formulár, sada polí, legenda, vstup, textová oblasť, p, bloková úvodzovka, 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 ( 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, acronym ( border:0; font-variant:normal; ) /* na zachovanie výšky riadka a vzhľadu selektora */ sup ( vertikálne - 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 Detect ion 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 v súlade so súčasnými štandardmi.

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 /* ... */) .

@import "reset.css";

Keďže v CSS existuje direktíva @import, musí sa použiť na tabuľku (pred všetkými pravidlami).

V opačnom prípade ho môže prehliadač ignorovať.

Na zvýšenie rýchlosti kódu sú šablóny štýlov CSS zvyčajne spojené do jedného súboru.

Preto nie je dobré vikorizovať @import bez reálneho využitia.

Ako vidíte, dumping štýlu WordPress sa nezdá byť nič zvláštne.

Podyaki Pri písaní článku boli takéto slová vikorista.

Pohľad autora:

Život na mieste v Merezhi je podobný životu na drsnom piesku.

Prehliadače stále fungujú rovnako, no niekedy nedokážu zobraziť neprenesené prihlasovacie údaje.

Napríklad všetky prehliadače majú „šablón so štýlmi používateľského agenta“ – súbor štýlov CSS na zalamovanie, takže hlavička vyzerá ako hlavička atď., a to ešte pred pridaním štýlov bočného panela1.

Jednou z aplikácií boli zoznamy štýlov a najčastejšie v šablónach štýlov prehliadačov pre Internet Explorer a Opera, zoznam vľavo na okraji: 30pt; Rovnako ako Firefox a KHTML prišli s padding-left: 40px;.

Ak ste chceli zmeniť vstup na ul (padding-left: 0;), prinieslo to v prehliadačoch odlišné výsledky. VÍKENDOVÁ ZĽAVA CSS NA MIERU

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ý, štrajk, 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, hlavička, tr, th, td, článok, bokom, plátno, detaily, vložiť, postava, figcaption, 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; )

Je dôležité zredukovať silu mnohých (alebo nie všetkých) prvkov na jednoduchý ekvivalent textu.

Úlomky sú vyradené zo všetkých ostatných prvkov, čím sa predíde akémukoľvek problému * (okraj: 0; výplň: 0;).

Potom môžeme definovať štýly pre tieto vyradené „neplatné“ autority, pričom máme istotu, že to bude na stabilnej báze medzi prehliadačmi.

Toto rozpoznanie štýlov tiež funguje ako indikátor potreby informovanej inštalácie požadovaných štýlov pre tieto prvky.

PROBLÉMY S SCROSING CSS

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 nadmerné používanie smiešne veľkého textu hlavičky, sa zmenili a stali sa nepríjemnými.

Problémy začínajú, ak chcete nastaviť vypustený HTML element po prenose bez použitia „nevhodných“ štýlov dropu.

Menej dôležitým problémom zliav je ich pokles, 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ť:

"Zastaraný" prvok 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 zobrazí ako niekoľko riadkov obyčajného textu bez okrajov, prístupu 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 rovnakú „pôsobivú“ snímku obrazovky spolu s viditeľnými štýlmi agenta, Firefox 21 a Opera Next 15.

V tomto článku si povieme o vynechaní štýlov a pozrieme sa na to, ako vytvoriť takýto súbor reset.css.

Nápad na štýly Wikipedie sa objavil asi pred 10 rokmi.

Snažil som sa čo najlepšie použiť malú sadu štýlov CSS, aby stránka vyzerala rovnako vo všetkých prehliadačoch.

Je dôležité, aby ste to neopúšťali stále, ale určité body je možné opraviť - napríklad hranica nie je pochopená, znaky sa berú v určitých verziách IE.

Úč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ď.

Alebo je tam modrý obrys (obrys) polí.

Pre žiadneho front-endového vývojára nie je žiadnym tajomstvom, že prehliadače sú veľmi flexibilné a pridávajú za seba prvky HTML a pridávajú svoje vlastné štandardné štýly.

Fragmenty tejto myšlienky sa vznietili už dávno, nie je prekvapujúce, že súbory na stiahnutie sú už pripravené, nazývajú sa reset.css a sú zahrnuté vo všetkých projektoch.

Prečo v súbore?

Tento článok je prvým zo série na tému Upratovanie CSS. Dnes sa pozrieme na technológiu.

Obnoviť CSS

Prehliadač nainštaluje hodnoty vlastného štýlu pre rôzne prvky HTML. Pomocou CSS Reset môžeme tento rozdiel znížiť, aby sme zabezpečili kompatibilitu štýlov medzi prehliadačmi. Napríklad ste vikoristickým živlom aі pri dokumente. Väčšina prehliadačov, ako je Internet Explorer a Firefox, poskytuje modrá farbaі kreslo. Pomocou CSS Reset môžeme tento rozdiel znížiť, aby sme zabezpečili kompatibilitu štýlov medzi prehliadačmi. Mali by ste však vedieť, že do piatich minút si budete musieť vytvoriť nový prehliadač (nazývaný UltraBrowser).

Používateľom prehliadača sa nepáčila modrá farba a kreslá, takže mohli vidieť správu

červená farba

tučným písmom

.

V skutočnosti, ak nastavíte základné hodnoty štýlu pre prvok

, potom je zaručené, že bude taký, aký ho chcete mať, a nie taký, ako sa naňho spoliehajú vydavatelia UltraBrowser, aby bol najlepší.

1. Ale teraz nemáme žiadne užitočnejšie prístupy, zblízka, medzi nasledujúcimi odsekmi!

Čo je to nesmelé?

Peniaze môžete zarábať rôznymi spôsobmi: zadajte položku v dolnej alebo hornej časti odseku, zadajte ju do zobrazení, pixelov alebo em.

Najdôležitejšie je, že prehliadač teraz hrá podľa našich pravidiel, nie podľa mojich.

Nechoďme od nich príliš ďaleko a pokračujme. Stagnujeme štýly Erica Meyera na zadok, ale po

Súpis našich úradov, ako je uvedený v 4. prílohe.

3. Vickory dokument CSS pre resetovanie CSS Som vinný (nie, vôbec ma neobťažovali), že som uhádol túto radosť. Výber správneho súboru na resetovanie CSS je základnou praxou, pretože existuje veľké množstvo vývojárov.

V skutočnosti siaham po pozícii tvorcu

prostredníctvom vyššej produktivity takéhoto prístupu.

Ale v tomto prípade som veľmi dobrý v používaní viac: CSS Reset by sa malo pridať do nasledujúceho súboru (nazvať ho reset.css).

4. Jednoznačne použite univerzálny volič Bez ohľadu na to, ako tento koncept funguje, jeho implementácia je často spôsobená nezrovnalosťami s určitými prehliadačmi (napríklad tento selektor nie je správne spracovaný v Internet Exploreri). Túto techniku ​​by ste mali používať iba pre jednoduché, malé, statické a pohyblivé stránky (ako s nimi náhodou pracujete).

Toto je obzvlášť dôležité, ak vyvíjate riešenia, ako sú riešenia pre CMS.

1. Stručne opíšte základné pravidlá CSS pre všetky prvky bez zdôrazňovania mechanizmu univerzálnych selektorov.
2. 5. Odhaľte nadprirodzené opisy autorít pod hodinou CSS Reset
3. Ďalším dôvodom, prečo nepotrebujem samostatný súbor na resetovanie CSS, je sila súčasných vyhlásení autorít CSS.

V tomto prípade nie je potrebné vytvárať nový selektor na popis vašich ovládacích prvkov – môžete ich jednoducho odstrániť z CSS Reset.

Zrobimo tse:

Upokojte to pod sebou, precvičte si to na sebe.

Zmeňte to, zmeňte to, urobte poriadok a pridajte to podľa potreby pre vašu konkrétnu situáciu.

Erik Meyer povedal toto: „Nie je to isté, ak každý nasleduje CSS Reset bez zmien.“

Po hodnotách sa súbor štýlov odovzdá orgánom CSS s novými hodnotami.

Súbory skladacieho štýlu časom rastú do bodu, keď je potrebné hodnoty CSS úplne odstrániť, aby sa na ne hodili hodnoty pre propagáciu.

V niektorých situáciách sú tieto významy dobre pochopiteľné a ľahko sa na ne zabúda, ale to neplatí pre všetky autority.

Našťastie súčasná schopnosť CSS nám dáva jednoduchý spôsob, ako znížiť hodnotu sily.

Skidannya nalashtuvan

Predpokladajme, že nastavíte obrázky tak, aby mali schopnosť spájania vľavo:

Img (plávajúci: vľavo;)

Preto, aby ste mohli zobraziť v špeciálnych situáciách, napríklad v tichých situáciách, ako je class.recall, musíte nastaviť frekvenciu zlúčenia, inak nemôžete uhádnuť, ako sa tento výkon zaznamenáva.

Inými slovami, viete, že odtok je každý deň, ale nepamätáte si, ako nastaviť dátum odtoku.

Namiesto toho, aby ste zistili, ako to zapísať, môžete jednoducho pridať prvý riadok do šablóny štýlov: 50 % , 25 % Img.recall (float: initial;)

Upozorňujeme, že čierna farba nemusí byť nevyhnutne farbou pre výrobu, ale je dôležité zostať pri prehliadačoch a prinajmenšom u samotných výrobcov.

V podobnom poradí, urážlivý záznam:

Aside (skupina písiem: iniciála; )

bude produkovať rôzne výsledky v rôznych prehliadačoch a výstupné písmo nemusí byť nevyhnutne Times New Roman, pretože rôzne prehliadače môžu vytvárať rôzne písma.

Pre výrobnú hodnotu je k dispozícii niekoľko ďalších možností:

Obnovte hodnotu z-indexu prvku na hodnotu prvku.

Znižovanie hodnoty externých vstupov a transformácia ich hodnôt na výrobu.

Obezhennya vikoristnya

Jedným z hlavných dôvodov umiestnenia vzácnej prémie na propagačné akcie CSS je pretrvávajúca prítomnosť tejto podpory v prehliadači Internet Explorer, hoci iné prehliadače ponúkajú veľkú podporu.