Normaliser css-fil. Endnu en freelance blog

Fra forfatteren: Opbygning af hjemmesider på internettet kan være som at bygge på kviksand. Browsere gør det samme, men fra tid til anden gør de irriterende uforudsigelige forskelle. For eksempel har alle browsere "brugeragent-typografiark" - et standardsæt af CSS-typografier for at få headeren til at ligne en header osv., selv før du tildeler typografier til side1. Selvfølgelig bruger hver browsermotor lidt forskellige standardsæt.

Et eksempel var standard listestile, hvor Internet Explorer og Operas standardbrowser-typografiark oprindeligt havde list-padding margin-left: 30pt;, mens Firefox og KHTML kom med padding-left: 40px;. Hvis du ville ændre standardudfyldningen ved at definere ul (udfyldning-venstre: 0;), ville dette give meget forskellige resultater i browsere.

NULSTIL CSS-INDSTILLINGER

For at opnå lidt stabilitet nulstiller nogle udviklere alle marginer og polstring ved hjælp af en universel vælger:

* (margin: 0; polstring: 0;)

* (margin: 0; polstring: 0;)

Ved at definere listens indrykning og starte dit stylesheet der, får du, hvad du forventer. Men brugen af ​​* betød, at standardmargenen og polstringen gik ned for alle elementer, og så snart du tilføjede et formularelement, gik det virkelig galt.

Formålet med en nulstilling er at nulstille alt hvad du kan ... [og] tjene som udgangspunkt for dine egne grundlæggende stilarter- Erik Meyer

html, brødtekst, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blokcitat, pre, a, forkortelse, akronym, adresse, stor, citer, kode, del, dfn, em, img, ins, kbd, q, s, samp, lille, strejke, stærk, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, etiket, forklaring, tabel, billedtekst, tbody, tfoot, thead, tr, th, td, artikel, til side, lærred, detaljer, indlejring, figur, figcaption, footer, sidehoved, hgroup, menu, nav, output, rubin, sektion, resumé, tid, mærke, lyd, video (margin: 0; udfyldning: 0; kant: 0; skriftstørrelse: 100%; skrifttype: arv; lodret justering: grundlinje; )

html, body, div, span, applet, objekt, iframe,

h1, h2, h3, h4, h5, h6, p, blokcitat, pre,

a, forkortelse, akronym, adresse, stor, citer, kode,

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

lille, strejke, stærk, sub, sup, tt, var,

b, u, i, center,

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

feltsæt, form, etiket, forklaring,

tabel, billedtekst, tbody, tfoot, thead, tr, th, td,

artikel, til side, lærred, detaljer, indlejring,

figur, figcaption, footer, header, hgroup,

menu, nav, output, rubin, sektion, oversigt,

tid, mærke, lyd, video (

margin: 0;

polstring: 0;

grænse: 0;

skriftstørrelse: 100%;

skrifttype: arve;

vertikal-align: baseline;

Det nulstiller nogle egenskaber for mange (men ikke alle) elementer til den almindelige tekst-ækvivalent. Da kun matchende elementer nulstilles, undgår dette nogle problemer * (margin: 0; polstring: 0;). Vi kan derefter definere stilarter for disse kasserede "ustilede" egenskaber i overbevisning om, at vi bygger på et stabilt fundament på tværs af browsere. Denne stilopgave fungerer også som et signal om behovet for bevidst at sætte passende stile for disse elementer.

PROBLEMER MED NULSTILLING AF CSS-INDSTILLINGER

CSS-nulstillinger var en livredder, men nu, især med fremkomsten af ​​wireframes, bruges de ofte som de er. For eksempel antog Eric, at andre udviklere ville begynde at bygge steder omkring hans foreslåede nulstillingsstile og tilsidesætte dem i overensstemmelse hermed, og den første version af Meyer Reset inkluderede midlertidigt denne regel:

/* husk at definere fokusstile! */ :fokus ( kontur: 0; )

Desværre var det ikke alle, der faktisk definerede fokusstile, og Eric fjernede det fra den anden version.

Brug af nulstillinger får dig til at føle dig lidt af en pervers. Nulstilling af browserstandardstile tvinger dig til at tænke over, hvordan hvert element skal vises, hvilket hjælper med at sikre, at elementer anvendes baseret på semantik snarere end standardtypografier. Men for elementer som i og em er der næsten altid en standard browserstil. Andre browserstandardstile, såsom den engang latterligt store tekststørrelse i overskriften, er ændret og er nu ret acceptable som standard. Problemerne starter, når nogen ønsker at post-passe et nulstillet HTML-element med kun de tildelte "ustilede" nulstile.

For mig er det største problem med nulstillinger arv, hvilket fører til spam i browserværktøjer. Når du prøver at spore et dybt indlejret element CSS-problem i en andens kode, hjælper dette ikke:

CSS-nulstillingsregler gentages på grund af nedarvning

NORMALIZE.CSS

Nicholas Gallagher og Jonathan Neal tog en anden tilgang med Normalize.css, "en lille CSS-fil, der sikrer bedre konsistens på tværs af browsere i standardstilene for HTML-elementer." Som med CSS-nulstillinger giver det os et stærkt kryds-browser-udgangspunkt - hovedårsagen til at bruge en nulstilling i første omgang - men de to tilgange er filosofisk forskellige.

CSS-nulstillinger tilsidesætter brugeragent-stile og returnerer mange elementer til deres "ustilede" tilstand, et niveau, som de kan bygge sikkert på. Vi skal dog så style de fleste elementer, før vi kan bygge med dem. I stedet adresserer Normalize.css kun uoverensstemmelser i brugeragentstilen og vælger de mest passende standardindstillinger for at gøre forskellen. Også her får vi et sikkert fundament på tværs af browsere, men et der inkluderer normaliserede brugeragent-stile som klar-til-brug grundlæggende byggeklodser. Det er dybest set noget som en idealiseret cross-browser version af standard CSS 2.1 stylesheet. I begge tilfælde skal vi så tilføje vores egne dominerende stilarter for at skabe billedet, men fordi standard browserindstillingerne i Normalize.css forbliver, er der færre stilarter at tilføje samlet.

Fordi ændringerne i Normalize.css er mere målrettede, er der ingen kaskade af nedarvning af de omskrevne regler i dine browserudviklingsværktøjer. Her er en simpel ul:, destylet med Meyer Reset og Normalize.css version 1 og 2:

"Ustylet" element i en uordnet liste

Anvender Meyer Reset

Anvend Normalize.css v1

Anvender Normalize.css v2

Der er en klar forskel i filosofien, når Meyer Reset-eksemplet vises som et par linjer med almindelig tekst uden margener, indrykning eller punkttegn, hvorimod Normalize.css-eksemplerne ligner standardtypografier. Forskellen i de stilarter, der anvendes på denne ul, er også let mærkbar.

Det er dog ikke alle de stilarter, der anvendes på ul. Til sammenligning er her det samme "ustylede" skærmbillede, men med synlige brugeragent-stile, i Firefox 21 og Opera Next 15.

Fed form for CSS-nulstilling! Jeg bruger det konstant som en ekstra "normalisering" af styles.

Normalize.css - Tvinger browsere til at vise alle elementer mere systematisk, konsekvent og i overensstemmelse med moderne standarder. Den retter sig KUN mod stilarter, der skal normaliseres.

/*! normalize.css v8.0.1 | MIT-licens | github.com/necolas/normalize.css */ /* Dokument =============================================== ============================================= */ /** * 1. Ret linjehøjden i alle browsere. * 2. Undgå justeringer af skriftstørrelse efter retningsændringer i iOS. */ html ( linjehøjde : 1,15 ; /* 1 */ -webkit-tekst-størrelse-adjust : 100% ; /* 2 */ ) /* Sektioner ================================================ ============================= */ /** * Fjern margenen i alle browsere. */ krop (margin: 0;) /** * Gengiv "hovedelementet" konsekvent i IE. */ main(display:blok;) /** * Ret skriftstørrelsen og margenen på `h1`-elementer i `sektion` og * `artikel`-kontekster i Chrome, Firefox og Safari. */ h1 (skriftstørrelse: 2em; margin: 0,67em 0;) /* Gruppering af indhold ============================================== ============================== */ /** * 1. Tilføj den korrekte boksstørrelse i Firefox. * 2. Vis overløbet i Edge og IE. */ hr ( box-sizing : content-box; /* 1 */ højde : 0 ; /* 1 */ overflow : synlig; /* 2 */ ) pre ( font-family : monospace, monospace; /* 1 */ font -størrelse: 1em; /* 2 */) /* Semantik på tekstniveau ============================================= ==============================================* /** * Fjern den grå baggrund på aktive links i IE 10. */ a (baggrundsfarve: gennemsigtig;) /** * 1. Fjern den nederste kant i Chrome 57- * 2. Tilføj den korrekte tekstdekoration i Chrome, Edge, IE, Opera og Safari. */ abbr ( kant-bund : ingen; /* 1 */ tekst-dekoration: understregning; /* 2 */ tekst-dekoration: understregning prikket; /* 2 */ ) /** * Tilføj den korrekte skrifttypevægt i Chrome, Edge og Safari. */ b , stærk ( font-weight : dristigere; ) /** * 1. Ret nedarvning og skalering af skriftstørrelse i alle browsere. * 2. Ret den ulige `em`-skriftstørrelse i alle browsere. */ kode , kbd , samp ( skrifttypefamilie : monospace , monospace ; /* 1 */ font-size : 1em ; /* 2 */ ) /** * Tilføj den korrekte skriftstørrelse i alle browsere. */ lille (skriftstørrelse: 80%; ) /** * Forhindrer `sub` og `sup` elementer i at påvirke linjehøjden i * alle browsere. */ sub , sup ( skriftstørrelse : 75 % ; linjehøjde : 0 ; position : relativ; lodret justering : basislinje; ) sub ( bund : -0.25em ; ) sup ( top : -0.5em ; ) /* Indlejret indhold =============================================== ============================== */ /** * Fjern grænsen på billeder inde i links i IE 10. */ img ( kant-stil: ingen;) /* Formularer =============================================== ==============================================* /** * 1. Skift skrifttypestilene i alle browsere. * 2. Fjern margenen i Firefox og Safari. */ knap , input , optgroup , vælg , tekstområde ( font-family : herit ; /* 1 */ font-size : 100% ; /* 1 */ line-height : 1.15 ; /* 1 */ margin : 0 ; /* 2 */ ) /** * Vis overløbet i IE. * 1. Vis overløbet i Edge. */ knap , input ( /* 1 */ overløb : synlig;) /** * Fjern nedarvningen af ​​teksttransformation i Edge, Firefox og IE. * 1. Fjern nedarvningen af ​​teksttransformation i Firefox. */ knap , vælg ( /* 1 */ tekst-transform : ingen;) /** * Ret manglende evne til at style klikbare typer i iOS og Safari. */ knap , , , ( -webkit-udseende : knap; ) /** * Fjern den indre kant og polstring i Firefox. */ knap ::-moz-fokus-indre, ::-moz-fokus-indre, ::-moz-fokus-indre, ::-moz-fokus-indre (kant-stil: ingen; polstring: 0;) /** * Gendan fokusstilene, der ikke er indstillet af den forrige regel. */ knap :-moz-fokusering, :-moz-fokusering, :-moz-fokusering, :-moz-fokusering (kontur: 1px prikket knaptekst;) /** * Ret udfyldningen i Firefox. */ feltsæt (polstring: 0,35em 0,75em 0,625em;) /** * 1. Ret tekstombrydningen i Edge og IE. * 2. Ret farvearven fra `fieldset`-elementer i IE. * 3. Fjern polstringen, så udviklere ikke bliver fanget, når de nulstiller * `fieldset`-elementer i alle browsere. */ forklaring ( boksstørrelse : border-box; /* 1 */ farve: arv; /* 2 */ display: tabel; /* 1 */ maks. bredde: 100%; /* 1 */ polstring: 0; / * 3 */ mellemrum : normal; /* 1 */ ) /** * Tilføj den korrekte lodrette justering i Chrome, Firefox og Opera. */ fremskridt ( vertikal-align : baseline; ) /** * Fjern standard lodret rullepanel i IE 10+. */ tekstområde (overløb: auto;) /** * 1. Tilføj den korrekte boksstørrelse i IE 10. * 2. Fjern polstringen i IE 10. */, ( kassestørrelse : kantkasse; /* 1 */ polstring : 0 ; /* 2 */ ) /** * Ret markørstilen for stignings- og reduktionsknapper i Chrome. */::-webkit-indre-spin-knap , ::-webkit-ydre-spin-knap (højde: auto;) /** * 1. Ret det mærkelige udseende i Chrome og Safari. * 2. Ret dispositionsstilen i Safari. */( -webkit-udseende : tekstfelt; /* 1 */ konturforskydning : -2px ; /* 2 */ ) /** * Fjern den indre polstring i Chrome og Safari på macOS. */::-webkit-search-decoration (-webkit-udseende: ingen;) /** * 1. Ret manglende evne til at style klikbare typer i iOS og Safari. * 2. Skift skrifttypeegenskaber til 'arve' i Safari. */::-webkit-fil-upload-knap (-webkit-udseende: knap; /* 1 */ skrifttype: arv; /* 2 */) /* Interaktiv =============================================== ==============================================* /* * Tilføj den korrekte skærm i Edge, IE 10+ og Firefox. */ detaljer (display: blok;) /* * Tilføj den korrekte visning i alle browsere. */ resumé (visning: listeelement;) /* Diverse =============================================== ==============================================* /** * Tilføj den korrekte skærm i IE 10+. */ skabelon (visning: ingen;) /** * Tilføj den korrekte skærm i IE 10. */(display: ingen;)

At have det rigtige sæt værktøjer ved hånden kan fremskynde processen med at udvikle et websted eller en webapplikation markant. I dagens artikel finder du en liste over de nyeste og mest nyttige værktøjer til CSS-udvikling.

Ren CSS

Pure er et sæt CSS-moduler udviklet af Yahoo, som du kan bruge som grundlag for ethvert webprojekt. Rammerne gør CSS-udvikling meget lettere, og hvis du ikke har hørt om det endnu, er det tid til at prøve det.

CSS-kun responsiv navigation

Responsive layouts bliver mere og mere populære, hvilket jeg synes er en god ting. På linket nedenfor finder du en responsiv menu lavet udelukkende i CSS, tilgængelig til download og genbrug.

CSS Trashman

Når man udvikler et stort projekt, kan det være ret svært at holde CSS-filer rene og kompakte. Men du skal ikke bekymre dig om det, CSS Trashman får arbejdet gjort. Dette nyttige onlineværktøj vil scanne dit websted, komprimere dine CSS-stile og til sidst give dig mulighed for at downloade en ny, optimeret version af din CSS-fil.

Lim

I stedet for at indlæse mange små billeder, er det meget bedre at bruge ét stort billede og CSS sprites-teknik. Glue er et simpelt kommandolinjeværktøj, der kombinerer en samling billeder til en enkelt fil. Så du kan nemt bruge CSS sprites på din hjemmeside. Meget behageligt.

Meget ofte indeholder store CSS-filer ubrugte stilarter, som desværre ikke er så nemme at opdage. Helium er et browserbaseret JavaScript-værktøj, der registrerer ubrugte stilarter fra din CSS-fil.

Topcoat er et meget pænt CSS-klassebibliotek med speciale i formelementer: knapper, afkrydsningsfelter, skydere osv. Den nemmeste måde at dekorere din hjemmeside eller webapplikation på på få minutter.

Fitgrd er et solidt grundlag for at skabe din egen responsive hjemmeside. Alt er i dine hænder, undtagen gitteret, Fitgrd vil tage sig af det, hvilket sparer dig for en masse tid på at skrive uvigtig kode.

Normalize.css er et HTML5-alternativ til CSS-nulstillinger. Det tvinger browseren til at gengive alle elementer mere konsekvent og i overensstemmelse med moderne standarder. Normalize.css bruges af mange populære websteder såsom Twitter Bootstrap, Soundcloud, TweetDeck og mange flere.

Bjørn CSS

Bear CSS er ikke kun en smuk hjemmeside, men også et meget nyttigt værktøj. Bare opret et HTML-dokument og upload der. Bear CSS genererer automatisk en CSS-fil, der kan downloades, baseret på de HTML-elementer, du bruger. Fantastisk tidsbesparelse!

Hvis du nogensinde har afgivet en kommerciel ordre til layout, er du sandsynligvis stødt på et sådant krav som cross-browser-kompatibilitet, det vil sige, at din side skal vises så ens som muligt i alle browsere. Og så opstår spørgsmålet - hvad skal man vælge, nulstille eller normalisere?

Hvad er bedre reset.css eller normalize.css?

Lad os først finde ud af, hvad hver af filerne gør:

Nulstil. css- som du kan se af navnet på filen, nulstiller den de fleste browserstile, der er indstillet som standard (og der er virkelig nogle, bare åbn den blottede HTML).

normalisere. css- denne fil sætter ikke kun standardstile, hvor det er nødvendigt, men retter også nogle mangler i ældre browsere (hej IE).

Som du forstår, er det ikke engang helt korrekt at sammenligne disse 2 filer, da de har lidt forskellige "filosofier". Så hvad er forskellen, og hvad skal du vælge?

Hvad er forskellene mellem normalisere og nulstille css

  1. I modsætning til nulstilling, efter tilslutning af normalize css, vil du være i stand til visuelt at bestemme, hvor dine forskellige elementer er placeret; de samme afsnit har eksterne indrykning. Derfor vil du ved at bruge et "nulstil stilark" simpelthen tvinge et stort antal elementer i ét look.
  2. Baseret på regel 1 følger det, at vi skal skrive stile fra bunden, fordi... vi har nulstillet alt, hvilket for mig personligt allerede er ikke comme il faut.
  3. Normalize css har rettelser til forskellige almindelige fejl, såsom visning af HTML5-tags eller de samme formularer
  4. Når du arbejder med fejlfindingsværktøjer i browsere, såsom firebug, vil du ved at forbinde en nulstilling få et enormt "ark" af egenskaber, som i sidste ende vil øge din tid på at skrive nye stilarter og søge efter gamle.
  5. I normalize er hver enkelt regel dokumenteret og du kan nemt forstå hvad den er der for, og hvis du er sikker på at du ikke har brug for den, kan du nemt fjerne den
  6. normalize.css er inkluderet som standard i bootstrap :)

Det tror jeg, du selv forstår normalisere vinder i alle henseender. Det er også værd at huske de perverse, der bruger noget i denne stil:

* (margin: 0; polstring: 0;)

Som du forstår, bør du ikke gøre dette.

Afslutningsvis vil jeg sige, at jeg endnu ikke har mødt en person, der vil mene, at det overhovedet giver mening at bruge reset.css. Det forekommer mig, at det kun blev brugt, fordi de ikke kendte til "normalisering af stilarter" :)

Der er en mening om, at det er værd at forbinde stilarter i hovedet "inline", i det mindste for den "første skærm" - det vil sige noget, der straks vil vise en person, når han åbner dit websted, og dette er virkelig en meget god praksis . Du kan finde denne anbefaling i google sidehastighed.

Måske vil det være nyttigt for dig - inline normalisere css og bootstrap grid🙂 Vi skriver dette i hovedet, så skriver vi også vores egne styles til den første skærm, og du vil følge en af ​​anbefalingerne + din side vil ikke vakle ved indlæsning, fordi de vigtigste vigtigste stilarter, nemlig grid, normalize og "first screen" er allerede blevet indlæst.

Her er også en version uden kommentarer:

Html(font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;) body(margin:0;) article, side, details, figcaption, figur, footer, header, main, menu, nav, sektion, summary(display:block;) audio, canvas, progress, video(display:inline-block;vertical-align:baseline;) audio:not())(display : ingen;højde:0;) , skabelon(display:ingen;) a(baggrundsfarve:transparent;) a:active, a:hover(outline:0;) abbr(border-bund:ingen;tekst-dekoration: understreg ;tekst-dekoration:understreg prikket;) b, stærk(font-weight:herit;) b, strong(font-weight:bolder;) dfn(font-style:italic;) h1(font-size:2em;margin : 0.67em 0;) mark(baggrundsfarve:#ff0;farve:#000;) small(font-size:80%;) sub, sup(font-size:75%;line-height:0;position: relativ ;vertical-align:baseline;) sup(top:-0.5em;) sub(bottom:-0.25em;) img(border:0;) svg:not(:root)(overflow:hidden;) figur(margin) : 1em 40px;) hr(box-sizing:content-box;height:0;overflow:visible;) pre(overflow:auto;) code, kbd, pre, samp(font-family:monospace, monospace;font-size : 1em;) knap, input, optgroup, select, textarea(font:inherit;margin:0;) button(overflow:visible;) button, select(text-transform:none;) button, html input, input, input( - webkit-udseende:knap;markør:markør;)-knap, html-input(cursor:standard;)-knap::-moz-focus-inner, input::-moz-focus-inner(border:0;padding:0; ) knap:-moz-focusring, input:-moz-focusring(outline:1px prikket ButtonText;) input(line-height:normal;) input, input(box-sizing:border-box;padding:0;) input: : -webkit-indre-spin-knap, input::-webkit-ydre-spin-knap(højde:auto;) input(-webkit-udseende:tekstfelt;) input::-webkit-search-annuller-knap, input : :-webkit-search-decoration(-webkit-udseende:ingen;) fieldset(border:1px solid #c0c0c0;margin:0 2px;polstring:0.35em 0.625em 0.75em;) legend(border:0;polstring:0 ; ) textarea(overflow:auto;) optgroup(font-weight:bold;)

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // vise min miniaturestørrelse?>

For at sikre, at en side vises lige godt i forskellige browsere, skal du arbejde på dens kompatibilitet på tværs af browsere. Test af siden og fejlretning af html/css-markup hjælper os med dette. Men der er værktøjer, der kan hjælpe dig med at reducere besværet med styling og sikre, at de grundlæggende stilarter er de samme i forskellige browsere. Hvilken slags værktøjer er disse, hvorfor og hvordan man bruger dem - vi vil overveje yderligere.

Browsere og basisstile

Faktum er, at hver browser som standard har et bestemt sæt grundlæggende stilarter, som den anvender på siden som standard. Og hvis vi opretter en side i "bar" html uden design og stilarter, vil browseren stadig vise tagget

stor størrelse og fed stil,

lidt mindre i størrelse og så videre. Browseren vil fremhæve teksten i tagget kursiv, vil gøre det understreget, og - fed.

Dette vil ske, fordi browseren allerede har sine egne stilarter for elementer, der som standard anvendes på sider, der er åbnet i den. Og faktum er, at i forskellige browsere er disse regler lidt forskellige fra browser til browser. For omkring 10 år siden var disse forskelle ret dramatiske og meget mærkbare. Nu er de minimale, men de findes stadig.

For at fjerne disse forskelle og få siden til at vises ens i alle browsere som standard, skal du bruge en speciel .css-fil: reset.css eller normalize.css

reset.css - hvad det gør, og hvordan man bruger det

Den første fil, der dukkede op, var reset.css. Denne css-fil indeholder en liste over alle mulige html-tags og nulstiller deres værdi. Det vil sige, at det fjerner alle mulige indrykninger, gør skrifttypen ens i alle tags, nulstiller alle tekststile. Så alle overskrifter og afsnit vises i almindelig tekst, samme størrelse og uden indrykning. Som et resultat får vi standardstilene nulstillet i alle browsere.

Det fungerer sådan her: først inkluderer vi reset.css-filen på siden, og derefter vores egen fil med stilarter. Som et resultat heraf nulstiller vi først alle stile, og først derefter indstiller vi designet af html-tags i style.css. På denne måde opnår vi, at alle browsere nulstiller deres stilarter til standard, og al opmærkning vil være baseret på de stilarter, som vi indstiller i style.css.

Download reset.css

Du kan downloade reset.css på cssreset.com

Eller du kan downloade versionen Eric Meyers "Nulstil CSS" 2.0 via knappen nedenfor, fra min blog:

normalize.css - hvordan virker det, og hvad er forskellen

Efter at reset.css er forbundet til siden, skal alle styles omskrives. Og hver gang bliver denne aktivitet trættende. Derfor blev nulstilling erstattet af et andet værktøj - normaliser. Normailze - som navnet antyder, nulstiller ikke alle stilarter, men normaliserer dem, hvilket bringer dem til et enkelt udseende i alle browsere. Efter dens anvendelse er de grundlæggende stilarter til visning af overskrifter, skriftstørrelser, indrykning ... samlet og vises identisk i alle browsere. Ved at bruge det kan du spare en vis mængde tid, som i tilfælde af nulstilling ville blive brugt på at skrive nulstillingsstile.

Hvis du ikke har brugt normalize.css endnu, anbefaler jeg at prøve det i dit næste projekt, og hvem ved, måske kan du ikke afvise det 😉

Download normalize.css

Du kan downloade normalize.css fra necolas.github.io/normalize.css

Eller download fra min blog:

Hvad er bedre at nulstille eller normalisere?

Der er ikke noget klart svar.

Den første nulstiller alle stilarter, den anden fører til en enkelt nævner. Erfarne layoutdesignere, der bruger reset.css, har som regel deres egne sæt stilarter, der straks medtages efter nulstilling for at style indholdet. Og de behøver ikke at omdefinere stilarter for grundlæggende elementer hver gang i et nyt layout. Det gør jeg også. Jeg er komfortabel, og jeg ved, hvilke stilarter jeg indstiller som standard, og hvordan de fungerer.

normalisere er praktisk, hvis du studerer dets struktur, du kan ændre det, så det passer til dig selv - ved at justere det grundlæggende udseende af tags. Og det vil også være praktisk at arbejde med det i farten - når du skal sætte meget og ofte.

Hvert værktøj er godt, det vigtigste er at bruge det korrekt 😉