Mga default na halaga ng css para sa mga elemento ng html. Paggamit ng default na halaga ng CSS upang i-reset ang mga setting. Gumamit ng hiwalay na dokumento ng CSS para sa Pag-reset ng CSS

Ang ResourceBundle.Control class ay may set ng mga external na pamamaraan na tinatawag ng ResourceBundle.getBundle() na paraan kapag naghahanap at naglo-load ng mga bundle. Sa pamamagitan ng paggawa ng iyong Control class, maaari mong baguhin ang default na gawi para sa paglo-load at pag-cache.

Sa kasong ito, kailangan mong lumikha ng pagpapatupad ng dalawang paraan ng Control class: getFormats() at newBundle() . Ang getFormats() method ay responsable para sa pagsuporta sa XML na format, at newBundle() gumagana sa resource bundle. Mayroong mga paraan ng helper sa Control base class upang i-convert ang mga pangunahing pangalan ng set sa aktwal na mga pangalan ng mapagkukunan.

Ang pagpapatupad na ito ng ResourceBundle.Control class ay may kasamang subclass ng XMLResourceBundle. Ang subclass na ito ay ginagamit upang mag-load ng data mula sa isang XML file at gamitin ito sa ResourceBundle method.

Ang sumusunod ay isang paglalarawan ng Control class at ang pagpapatupad ng ResourceBundle method:

import java.io.*;
import java.net.*;
import java.util.*;

Ang XMLResourceBundleControl ng pampublikong klase ay nagpapalawak ng ResourceBundle.Control (
pribadong static na String XML = "xml" ;

Pampublikong Listahan getFormats(String baseName) (
ibalik ang Collections.singletonList(XML);
}

Public ResourceBundle newBundle ( String baseName, Locale locale,
String format, ClassLoader loader,
boolean reload)
nagtatapon IllegalAccessException, InstantiationException, IOException{
kung ((baseName == null ) || (locale == null ) || (format == null )
|| (loader == null )) (
magtapon ng bagong NullPointerException () ;
}
ResourceBundle bundle = null ;
kung (format.equals(XML)) (
String bundleName = toBundleName(baseName, locale) ;
String resourceName = toResourceName
(bundleName, format) ;
URL url = loader.getResource
(ResourceName);
kung (url != null ) (
Koneksyon ng URLConnection = url.openConnection() ;
kung (koneksyon != null ) (
kung (i-reload) (
connection.setUseCaches(false);
}
InputStream stream = connection.getInputStream() ;
kung (stream != null ) (
BufferedInputStream bis = bagong BufferedInputStream (
stream);
bundle = bagong XMLResourceBundle(bis);
bis.close();
}
}
}
}
ibalik na bundle;
}

Ang pribadong static na klase na XMLResourceBundle ay nagpapalawak ng ResourceBundle (
pribadong Properties props;

Ang XMLResourceBundle(InputStream stream) ay nagtatapon ng IOException(
props = bagong Properties();
props.loadFromXML(stream);
}

Protected Object handleGetObject(String key) (
ibalik ang props.getProperty(key);
}

Public Enumeration getKeys() (
Itakda ang handleKeys = props.stringPropertyNames() ;
ibalik ang Collections.enumeration(handleKeys);
}
}

Pampublikong static void main (String args) (
("Pagsusulit2",
bagong XMLResourceBundleControl()) ;
String string = bundle.getString
("HelpKey");
System.out.println ("HelpKey: " + string );
}
}

Kasama sa pagpapatupad na ito ang isang pagsubok na programa ng tatlong linya:

ResourceBundle bundle = ResourceBundle.getBundle("Test2", bagong XMLResourceBundleControl()) ;
String string = bundle.getString
("HelpKey");
System.out.println ("HelpKey: " + string );

Ang unang linya ay pinaka-interesante dito. Kailangan mong ipasa ang iyong Control sa getBundle() method. Pagkatapos nito, maaari mong gamitin ang set tulad ng sa anumang iba pang kaso.

Nasa ibaba ang isang halimbawa ng XML file na Test2.xml:

http://java.sun.com/dtd/properties.dtd" > OK Kanselahin Tulong Oo Hindi

Ang resulta ng pagpapatupad ng XMLResourceBundleControl program ay:

> java XMLResourceBundleControl HelpKey: Tulong

Ang pagpapatupad sa itaas ay hindi gumagamit ng getTimeToLive() at needsReload() na mga pamamaraan:

pampublikong mahabang getTimeToLive( String baseName, Locale locale)

Pampublikong boolean needsReload( String baseName,
Lokal na lokal,
Format ng string
ClassLoader loader
Bundle ng ResourceBundle
mahabang oras ng pagkarga)

Ang getTimeToLive() method ay nagbabalik ng panghabambuhay para sa mga resource bundle na ginawa gamit ang ResourceBundle.Control . Ang mga hanay ng mapagkukunan ay iniimbak sa cache upang mapabilis ang proseso ng pag-reload. Kaya, kapag na-download muli ang set, ito ay nasa cache. Tinutukoy ng positibong time-to-live na value, sa mga millisecond, kung gaano katagal mananatili ang isang set sa cache nang hindi muling sinusuri. Ang default na halaga na ibinalik ng getTimeToLive() na paraan ay TTL_NO_EXPIRATION_CONTROL, na hindi pinapagana ang pagsuri sa pag-expire ng cache. Kung ayaw mong i-cache ang set, ibalik ang value na TTL_DONT_CACHE . Kung ibinalik ang 0, naka-cache ang bundle, ngunit sinusuri ito sa tuwing tatawagin ang getBundle(). Upang i-clear ang cache, tawagan ang static na clearCache() na paraan ng ResourceBundle na klase. Mayroon itong opsyonal na argumento ng ClassLoader na nagpapahintulot sa mga cache na ginawa ng isang partikular na loader na ma-clear.

Tinutukoy ng pamamaraang needsReload() kung dapat i-reload ang naka-cache na set. Nangangahulugan ang value na true na kailangang i-reload ang set, at ang false ay nangangahulugan na hindi na ito kailangang i-reload. Makokontrol mo kung kailangang i-reload ang isang resource set sa pamamagitan ng overloading sa needsReload() method. Halimbawa, kung gusto mong palaging ma-reload ang resource set, ang needsReload() method ay dapat palaging bumalik true . Sa kasong ito, dapat palaging ibalik ng getTimeToLive() method ang value na 0. Kung hindi, maiimbak ang set nang mas matagal kaysa sa inaasahan.

Para sa higit pang impormasyon tungkol sa mga pagpapahusay na nauugnay sa mga proseso ng internationalization sa Mustang, maaari kang sumangguni sa blog ni John Oconer, Sun software developer, sa

Ang artikulong ito ay ang una sa isang serye sa paksa ng pagpapaamo ng CSS. Ngayon ay titingnan natin ang teknolohiya I-reset ang CSS.

Bakit kailangan ito?

Ang bawat browser ay nagtatakda ng sarili nitong mga default na halaga ng istilo para sa iba't ibang elemento ng HTML. Gamit ang CSS Reset maaari nating i-level out ang pagkakaibang ito para matiyak ang cross-browser compatibility ng mga istilo.

Halimbawa, ginagamit mo ang elemento a sa iyong dokumento. Karamihan sa mga browser, tulad ng Internet Explorer at Firefox, ay nagdaragdag ng link asul At salungguhit. Gayunpaman, isipin na limang taon mula ngayon ay may nagpasya na gumawa ng bagong browser (tawagin natin itong UltraBrowser). Hindi nagustuhan ng mga developer ng browser ang asul na kulay at naiinis sila sa salungguhit, kaya nagpasya silang i-highlight ang mga link sa pula At matapang. Nakabatay dito na kung itatakda mo ang halaga ng base na istilo para sa isang elemento a, kung gayon ito ay garantisadong magiging paraang gusto mo ito, at hindi kung paano ito gustong ipakita ng mga developer ng UltraBrowser.

Ngunit ngayon wala na kaming mga indent, kasama ang pagitan ng mga indibidwal na talata! Ano ang gagawin? Huwag magsinungaling at huwag matakot: sa ibaba ng aming pag-reset, ilalarawan namin ang panuntunang kailangan namin. Magagawa ito sa iba't ibang paraan: tukuyin ang indent sa ibaba o itaas ng talata, tukuyin ito sa porsyento, pixel o em.

Pinakamahalaga, gumaganap na ngayon ang browser ayon sa aming mga panuntunan, at hindi kami ayon sa mga panuntunan nito. Nagpasya akong gawin ito sa ganitong paraan:

* ( margin: 0; padding: 0; ) p ( margin: 5px 0 10px 0; )

Bilang resulta, nakuha namin ang makikita sa ikatlong halimbawa.

Maaari kang lumikha ng iyong sariling mga istilo ng pag-reset kung nilulutas mo ang isang partikular na problema sa iyong proyekto. Sa kabila nito, walang step-by-step na gabay para sa paglikha ng iyong sariling CSS Reset. Umasa sa iyong sariling mga prinsipyo at sa iyong sariling istilo.

Upang matulungan kang gumawa ng tamang pagpili, narito ang ilang higit pang mga link:

  1. Mas kaunti - ang aking piniling I-reset ang CSS (Ed Elliott).

2. Ang iyong CSS Reset ang unang bagay na dapat makita ng browser

Ang pag-reset ng mga istilo pagkatapos magtakda ng sarili mong mga istilo para sa mga elemento ay ang maling diskarte. Sa kasong ito, hindi ka dapat umasa ng anumang mabuti mula sa display ng browser. Tandaan na dapat mong palaging isama ang CSS Reset muna, at pagkatapos ay ang lahat ng iba pang mga estilo.

Oo, naiintindihan ko na ito ay nakakatawa, ngunit ito ay isa sa mga pangunahing pagkakamali ng mga developer, bata at matanda. Maraming mga tao ang nakakalimutan lang tungkol dito.

Ang ilan ay maaaring magtanong ng isang lohikal na tanong: bakit ito nangyayari? Ang sagot ay simple: ang mga panuntunang nakasulat na mas mababa sa teksto ng CSS file (at kahit na mas mababa sa kanilang pagkakasunud-sunod ng pagsasama sa dokumento) ay i-overwrite ang mga panuntunang idineklara kanina.

Huwag tayong masyadong lumayo sa paksa at magpatuloy. Ilapat natin ang mga istilo ni Eric Meyer sa ating halimbawa, ngunit pagkatapos mga paglalarawan ng aming mga ari-arian, tulad ng ipinapakita sa halimbawa 4. Sasabihin ng mga mathematician ang sumusunod: "Iyan ang kailangan naming patunayan."

3. Gumamit ng hiwalay na dokumento ng CSS para sa Pag-reset ng CSS

Dapat kong (hindi, hindi ako pinilit) na banggitin ang payong ito. Ang paggamit ng isang hiwalay na file para sa Pag-reset ng CSS ay isang karaniwang kasanayan na sinusuportahan ng isang malaking bilang ng mga developer.

Sa katunayan, kinukuha ko ang posisyon ng paglikha isang malaking CSS file dahil sa mas mataas na pagganap ng diskarteng ito. Ngunit sa isyung ito ay hilig kong sumang-ayon sa karamihan: Ang CSS Reset ay dapat ilagay sa isang hiwalay na file (karaniwang tinatawag na reset.css). Sa ganoong paraan, magagamit mo ito sa iba't ibang mga proyekto nang hindi kinakailangang maglagay ng anumang pagsisikap sa paghihiwalay nito sa iba pang mga panuntunan ng CSS.

4. Subukang iwasan ang paggamit ng universal selector

Bagama't gumagana ang konseptong ito, kadalasang hindi kanais-nais ang paggamit nito dahil sa hindi pagkakatugma sa ilang mga browser (halimbawa, ang tagapili na ito ay hindi naproseso nang tama sa Internet Explorer). Dapat mo lamang gamitin ang diskarteng ito para sa simple, maliit, static at predictable na mga pahina (kung kailangan mong gawin iyon).

Ang payong ito ay lalong mahalaga kapag gumagawa ka ng mga solusyon gaya ng mga tema ng CMS. Hindi mo mahuhulaan nang maaga kung paano ito gagamitin o kung paano ito babaguhin. Mas mainam na ilarawan ang mga pangunahing panuntunan ng CSS para sa lahat ng elemento kaysa gamitin ang hindi mahuhulaan (kahit mas maliit) na mekanismo ng mga universal selector para sa layuning ito.

5. Iwasan ang Mga Redundant na Paglalarawan ng Property Kapag Gumagamit ng CSS Reset

Ang isa pang dahilan kung bakit hindi ko gusto ang isang hiwalay na file para sa CSS Reset ay ang potensyal na kalabisan ng mga kasunod na deklarasyon ng ari-arian ng CSS. Ang pag-uulit ng mga indibidwal na istilo mo sa buong hanay ng mga CSS file ay masamang asal at dapat iwasan. Siyempre, kung minsan ay tamad tayong magsagawa ng isang hanay ng mga istilo at pagsamahin ang ilan sa mga ito, ngunit dapat nating subukan!

Bumalik tayo sa Pag-reset ng CSS ni Eric. Nagtatakda ito ng mga default na halaga para sa taas ng linya, kulay at background ng elemento katawan gaya ng sumusunod:

katawan ( linya-taas: 1; kulay: itim; background: puti; )

Sabihin nating alam mo na kung ano ang magiging hitsura ng elemento katawan:
  1. kulay ng background: #cccccc;
  2. kulay: #996633;
  3. Gusto mong ulitin ang isang partikular na larawan sa background nang pahalang.

Sa kasong ito, hindi na kailangang gumawa ng bagong tagapili upang ilarawan ang iyong mga pag-aari - maaari mo lang silang isama sa Pag-reset ng CSS. Gawin natin ito:

body ( line-height: 1; color: #996633; background:#ccc url(tile-image.gif) repeat-x kaliwa sa itaas; )

Huwag matakot na baguhin ang CSS Reset mismo. Iangkop ito sa iyong sarili, gawin itong gumana para sa iyo. Baguhin, muling ayusin, alisin at idagdag kung kinakailangan sa iyong partikular na kaso.

Sinabi ni Eric Meyer ang sumusunod tungkol dito: "hindi ito isang kaso kung saan dapat gamitin ng lahat ang CSS Reset nang walang mga pagbabago."



CSS Default na CSS para sa HTML Elements (2)

Ang bawat browser ay naiiba, kaya:

  • Firefox (Tuko):. O pumunta sa resource://gre-resources/ at tingnan ang html.css.
  • Chrome/Safari (WebKit):
    • Chrome (Blink):
  • Internet Explorer (Trident), mga naunang bersyon: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Saan ko mahahanap ang CSS para sa default na CSS ng browser?

Maraming elemento ng HTML ang may ilang mga default na katangian ng CSS na kung minsan ay maaaring humantong sa hindi alam/hindi gustong pag-uugali. Halimbawa, iba ang ipinapakita ng mga input field sa iba't ibang browser. Naghahanap ako ng lugar na sumasaklaw sa mga bagong katangian ng CSS3 at mga bagong elemento ng HTML5.

Nakakita ako sa iba pang (mas luma) na mga tanong (gaya ng mga default na CSS stylesheet sa mga browser) na nagmumungkahi ng solusyon sa pag-reset ng CSS. Minsan hindi kailangan ang solusyong ito, kadalasan gusto kong panatilihin ang ilang pangunahing katangian (tulad ng pag-highlight ng mga input field sa Chrome). Sa madaling salita: Ayokong alisin ang mga bagay-bagay dahil lang sa hindi ko alam kung ano ang ginagawa nila. .

Kaya, mayroon bang site na maaaring magbigay sa akin ng lahat ng impormasyong ito (o marahil karamihan)?

Isang GitHub repository para sa lahat ng W3C HTML specifications at default na CSS stylesheet para sa mga developer ay matatagpuan

1.

2. Mga karaniwang istilo para sa Internet Explorer

3.

4. Mga karaniwang istilo para sa Opera

5. Mga karaniwang istilo para sa HTML4 (spesipikasyon ng W3C)

6. Mga karaniwang istilo para sa HTML5 (spesipikasyon ng W3C)

Halimbawa, ayon sa default na detalye ng W3C HTML4:

Html, address, 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- pangkat ) tbody ( display: table-row-group ) tfoot ( display: table-footer-group ) col ( display: table-column ) colgroup ( display: table-column-group ) td, th ( display: table-cell ) caption (display: table-caption) th (font-weight: bolder; 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 ( margin: 1.12em 0 ) h5 ( font-size: .83em; margin: 1.5em 0 ) h6 ( font-size: .75em; margin: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, malakas (font-weight: bolder) blockquote (margin-left: 40px; margin-right: 40px ) i, cite, em, var, address ( font-style: italic ) pre, tt, code, kbd, samp ( font-family: monospace ) pre ( white-space: pre ) button, textarea, input, piliin ang ( display: inline-block ) malaki ( font-size: 1.17em ) maliit, 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 ( outline: thin dotted invert ) /* Simulan ang mga setting ng bidirectionality (huwag baguhin) */ BDO ( direction: ltr; unicode-bidi: bidi-override ) BDO ( direction: rtl; unicode-bidi: bidi-override ) * ( direksyon: ltr; unicode-bidi: embed ) * ( direksyon: rtl; unicode-bidi: embed ) @media print ( h1 ( page-break-before: always ) h1, h2, h3, h4, h5, h6 ( page-break-after: iwasan ) ul, ol, dl ( page-break-before: iwasan ) )

Mula sa may-akda: Ang pagbuo ng website sa Internet ay maaaring maging tulad ng pagtatayo sa kumunoy. Ginagawa ng mga browser ang parehong bagay, ngunit paminsan-minsan ay gumagawa sila ng nakakainis na hindi nahuhulaang mga pagkakaiba. Halimbawa, ang lahat ng browser ay may "mga style sheet ng user agent" - isang default na hanay ng mga estilo ng CSS upang gawing parang header ang header, atbp., kahit na bago ka magtalaga ng mga istilo sa page1. Siyempre, ang bawat browser engine ay gumagamit ng bahagyang magkakaibang mga default na hanay.

Ang isang halimbawa ay ang mga default na istilo ng listahan, kung saan ang default na browser style sheet ng Internet Explorer at Opera ay may padding na margin-left: 30pt;, habang ang Firefox at KHTML ay may padding-left: 40px;. Kung gusto mong baguhin ang default na padding sa pamamagitan ng pagtukoy sa ul (padding-left: 0;), ito ay magbubunga ng ibang mga resulta sa mga browser.

I-RESET ANG MGA SETTING ng CSS

Upang makamit ang kaunting katatagan, ni-reset ng ilang developer ang lahat ng margin at padding gamit ang isang universal selector:

* (margin: 0; padding: 0;)

* ( margin : 0 ; padding : 0 ; )

Sa pamamagitan ng pagtukoy sa indentation ng listahan at pagsisimula ng iyong stylesheet doon, makukuha mo ang iyong inaasahan. Gayunpaman, ang paggamit ng * ay nangangahulugan na ang default na margin at padding ay nag-crash para sa lahat ng mga elemento, at sa sandaling magdagdag ka ng isang elemento ng form, ang mga bagay ay talagang naging masama.

Ang layunin ng pag-reset ay i-reset ang lahat ng magagawa mo... [at] magsilbi bilang panimulang punto para sa sarili mong mga pangunahing istilo- Eric Meyer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, malaki, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, maliit, strike, malakas, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, seksyon, buod, oras, marka, audio, 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, malaki, sipi, code,

del, dfn, em, img, ins, kbd, q, s, samp,

maliit, strike, malakas, sub, sup, tt, var,

b, u, i, gitna,

dl, dt, dd, ol, ul, li,

fieldset, form, label, alamat,

talahanayan, caption, tbody, tfoot, thead, tr, th, td,

artikulo, bukod, canvas, mga detalye, i-embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, seksyon, buod,

oras, marka, audio, video (

margin: 0;

padding: 0;

hangganan: 0;

laki ng font: 100%;

font: magmana;

vertical - align : baseline ;

Nire-reset nito ang ilang mga katangian ng marami (ngunit hindi lahat) na elemento sa katumbas ng plain text. Dahil nagre-reset lang ang mga tumutugmang elemento, iniiwasan nito ang ilang problema * (margin: 0; padding: 0;). Pagkatapos ay maaari naming tukuyin ang mga istilo para sa mga itinapon na "hindi naka-istilong" property na ito, tiwala na kami ay nagtatayo sa isang matatag na pundasyon ng cross-browser. Ang pagtatalaga ng istilo na ito ay gumaganap din bilang isang senyales para sa pangangailangang sinasadyang magtakda ng mga naaangkop na istilo para sa mga elementong ito.

MGA ISYU SA PAG-RESET NG CSS SETTING

Ang mga pag-reset ng CSS ay isang lifesaver, ngunit ngayon, lalo na sa pagtaas ng mga wireframe, ang mga ito ay madalas na ginagamit kung ano-ano. Halimbawa, ipinalagay ni Eric na ang ibang mga developer ay magsisimulang bumuo ng mga site sa paligid ng kanyang mga iminungkahing istilo ng pag-reset, na ino-override ang mga ito nang naaayon, at ang unang bersyon ng Meyer Reset ay pansamantalang kasama ang panuntunang ito:

/* tandaan na tukuyin ang mga estilo ng focus! */ :focus ( outline: 0; )

Sa kasamaang palad, hindi lahat ay aktwal na tinukoy ang mga estilo ng focus, at inalis ito ni Eric mula sa pangalawang bersyon.

Ang paggamit ng mga pag-reset ay nagpaparamdam sa iyo na parang isang pervert. Pinipilit ka ng pag-reset ng mga default na istilo ng browser na isipin kung paano dapat ipakita ang bawat elemento, na tumutulong upang matiyak na ang mga elemento ay inilalapat batay sa mga semantika sa halip na mga default na istilo. Ngunit para sa mga elemento tulad ng i at em halos palaging may default na istilo ng browser. Iba pang mga istilo ng default ng browser, tulad ng dating katawa-tawang laki ng text ng header, ay nagbago at ngayon ay medyo matatagalan bilang default. Magsisimula ang mga problema kapag may gustong mag-post-pass ng reset HTML element na may mga nakatalagang "unstyled" reset styles lang.

Para sa akin, ang pinakamalaking problema sa mga pag-reset ay mana, na humahantong sa spam sa mga tool sa browser. Kapag sinusubukang subaybayan ang isang malalim na nested elemento CSS isyu sa code ng ibang tao, hindi ito makakatulong:

Naulit ang mga panuntunan sa pag-reset ng CSS dahil sa mana

NORMALIZE.CSS

Sina Nicholas Gallagher at Jonathan Neal ay gumawa ng ibang diskarte sa Normalize.css, "isang maliit na CSS file na nagsisiguro ng mas mahusay na cross-browser na pare-pareho sa default na pag-istilo ng mga elemento ng HTML." Tulad ng mga pag-reset ng CSS, nagbibigay ito sa amin ng isang malakas na cross-browser na panimulang punto - ang pangunahing dahilan sa paggamit ng pag-reset sa unang lugar - ngunit ang dalawang diskarte ay magkaiba sa pilosopiya.

Ino-override ng mga pag-reset ng CSS ang mga istilo ng user agent at ibinabalik ang maraming elemento sa kanilang "hindi naka-istilong" katayuan, isang antas ng ground kung saan ligtas na buuin. Gayunpaman, kailangan nating i-istilo ang karamihan sa mga elemento bago tayo makabuo gamit ang mga ito. Sa halip, tinutugunan lamang ng Normalize.css ang mga hindi pagkakapare-pareho ng istilo ng user agent, na pinipili ang pinakaangkop na mga default na setting upang makagawa ng pagkakaiba. Dito rin kami nakakakuha ng secure na cross-browser na pundasyon, ngunit isa na kinabibilangan ng mga normalized na istilo ng user agent bilang ready-to-use na basic building blocks. Ito ay karaniwang isang bagay tulad ng isang perpektong cross-browser na bersyon ng default na CSS 2.1 stylesheet. Sa parehong mga kaso, kailangan nating magdagdag ng sarili nating mga dominanteng istilo upang gawin ang larawan, ngunit dahil nananatili ang mga default na setting ng browser sa Normalize.css, mas kaunting mga istilo ang idaragdag sa pangkalahatan.

Dahil mas naka-target ang mga pagbabago sa Normalize.css, walang cascade of inheritance ng mga rewritten rules sa iyong browser development tools. Narito ang isang simpleng ul:, destyled na may Meyer Reset at Normalize.css na bersyon 1 at 2:

"Hindi naka-istilo" na elemento ng isang hindi nakaayos na listahan

Paglalapat ng Meyer Reset

Ilapat ang Normalize.css v1

Paglalapat ng Normalize.css v2

Mayroong malinaw na pagkakaiba sa pilosopiya kapag ang halimbawa ng Meyer Reset ay lumalabas bilang isang pares ng mga linya ng plain text na walang mga margin, padding, o bullet, habang ang mga halimbawa ng Normalize.css ay mukhang mga default na istilo. Ang pagkakaiba sa mga istilong inilapat sa ul na ito ay madaling mapansin.

Gayunpaman, hindi ito lahat ng mga istilong inilapat sa ul. Para sa paghahambing, narito ang parehong "hindi naka-istilong" screenshot, ngunit may mga nakikitang istilo ng user agent, sa Firefox 21 at Opera Next 15.