Resetirajte stilove pomoću CSS Reset. Poništavanje CSS stilova, primjeri radnih rješenja Zadani css stilovi za html 5

Prema zadanim postavkama preglednik postavlja vlastite postavke za neka svojstva u css-u. Ali problem je u tome što postoji mnogo web preglednika i svatko može postaviti vlastita pravila. Koje rješenje? Saznajte kako poništiti zadane CSS postavke i prebrisati ih svojima. Ali ovaj će članak biti posvećen tome kako se to može učiniti.

CSS Reset ili vraćanje na zadane postavke

CSS Reset je skup stilova koji poništavaju neke parametre, instaliran preglednikom zadano. Svaki web programer piše ovu datoteku za sebe pojedinačno, a neki uzimaju gotovo rješenje. Ovdje predlažem započeti. Postoji mnogo dobrih opcija za resetiranje stilova, ali moj omiljeni je ovaj koji je sastavio Eric Meyer:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Licenca: nema (javna domena)
*/
html, tijelo, div, raspon, aplet, objekt, iframe,
h1, h2, h3, h4, h5, h6, p, navodnik, pre,
a, skraćenica, akronim, adresa, veliko, citat, kod,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, centar,
dl, dt, dd, ol, ul, li,
set polja, obrazac, oznaka, legenda,
tablica, naslov, tijelo, stopalo, oglas, tr, th, td,
članak, na stranu, platno, detalji, ugraditi,
slika, figcaption, podnožje, zaglavlje, hgroup,
izbornik, navigacija, izlaz, ruby, odjeljak, sažetak,
vrijeme, oznaka, audio, video (
margina: 0;
ispuna: 0;
granica: 0;
veličina fonta: 100%;
font: naslijediti;
okomito poravnanje: osnovna linija;
}
/* HTML5 poništavanje uloge prikaza za starije preglednike */
članak, na stranu, detalji, figcaption, slika,
podnožje, zaglavlje, hgrupa, izbornik, navigacija, odjeljak (
prikaz: blok;
}
tijelo(
visina linije: 1;
}
ol, ul (
list-style: nijedan;
}
blockquote,q(
navodnici: nijedan;
}
blockquote:prije, blockquote:poslije,
q:prije, q:poslije (
sadržaj: "";
sadržaj: nema;
}
stol (
border-collapse: kolaps;
granični razmak: 0;
}

Malo ću komentirati kod. Prvo, ovdje se poništavaju unutarnje i vanjske margine za sve potrebne elemente. Drugo, postoji podrška za HTML5 elemente. Imaju skup pravila koji će im omogućiti ispravan prikaz u nekim verzijama preglednika. Treće, tipične postavke za ugodan rad s tablicama (uklonjeni su razmaci između ćelija i dvostruki rubovi). Standardne grafičke oznake za popise i navodnici za citate također su poništeni. Ove dijelove koda vrijedi ukloniti ako želite koristiti zadani stil.

Kako sami resetirati css postavke

Ako koliko-toliko normalno vladate CSS-om, možete pokušati sami napisati nekoliko pravila. Na primjer:

*{
margina: 0;
ispuna: 0;
}

Ovo je možda najjednostavnija naredba. Zvjezdica u ovom slučaju predstavlja sve selektore, tako da će se stilovi primijeniti na sve elemente na web stranici, poništavajući njihovu ispunu i ispunu. Možda ćete se iznenaditi, ali ove jednostavne linije koda mogu biti dovoljne da omoguće kompatibilnost s više preglednika u mnogim web preglednicima. Sva ostala pravila možete dodati po vlastitom nahođenju. Preporučujem dodavanje display: block za sve HTML5 oznake.

Gdje postaviti pravila resetiranja css-a

Ponudio sam vam kod iznad, ali gdje da ga ubacite? Ovdje postoje dvije opcije:

Umetnite ga na sam početak glavnog lista stilova na vašoj web stranici
Napravite novu css datoteku na poslužitelju i spremite kod u nju, zatim je spremite i povežite sa svim stranicama PRIJE stil glavne tablice.css .

Za više informacija o povezivanju css lista stilova s html-om, pogledajte

Po mom mišljenju, druga opcija gore, što smanjuje performanse dodavanjem jedne dodatne datoteke u preuzimanje. S druge strane, to će vam olakšati upravljanje tim pravilima. Ali zbog performansi, preporučujem korištenje prve opcije.

Resetiranje postavki jedna je od mjera kojom se osigurava kompatibilnost stranice s više preglednika, odnosno isti prikaz u različitim web preglednicima. Naravno, ovo nisu sve mjere koje će osigurati isto izgled, o ostalom ću pisati kasnije na ovom blogu. Pretplatite se ako ste zainteresirani.

Svi elementi HTML stranice imaju vlastite zadane vrijednosti. I, nažalost, različiti preglednici ih ne tumače jednako. Kao rezultat toga, trpi dizajn stranice, čiji se dizajn mijenja promjenom preglednika (internetski preglednik). Svrha postupka resetiranja stila je smanjiti nedosljednost preglednika u stvarima kao što su visina redaka, margine, veličina fonta zaglavlja itd.

Primjeri skripti za poništavanje CSS stila

Postoji mišljenje da bi svaki webmaster koji poštuje sebe trebao napisati vlastiti CSS reset kod. Ali ja sam pristalica drugačijeg pristupa: uzeti gotovo rješenje, razumjeti ga i prilagoditi ako treba.

Eric Meyer CSS Reset

Scenarij resetiranja Erica Meyera, prema riječima samog autora, namjerno je vrlo općenit. Na primjer, element tijela nema zadanu postavljenu boju pozadine. Stoga se mora modificirati, uređivati, proširivati i na drugi način prilagoditi vašim potrebama. Dodajte boje koje želite za stranice, poveznice i tako dalje.

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licenca: ništa (javna domena) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronim, adresa, 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, obrazac, label, legenda, table, caption, tbody, tfoot, thead, tr, th, td, article, side, canvas, details, embed, figure, figcaption, footer, header, hgroup, izbornik, navigacija, izlaz, rubin, odjeljak, sažetak, vrijeme, oznaka, audio, video ( margina: 0; padding: 0; granica: 0; veličina fonta: 100%; font: naslijediti; okomito poravnanje: osnovna linija ; ) /* HTML5 poništavanje uloge prikaza za starije preglednike */ članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, izbornik, nav, odjeljak ( prikaz: blok; ) tijelo ( visina retka: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- kolaps: kolaps; granični razmak: 0; )

Yahoo! (YUI 3) Poništi CSS

CSS Reset YUI 3 ublažava nedosljedno stiliziranje HTML elemenata u preglednicima, baš kao i svaka druga skripta za resetiranje CSS-a, kako bi se stvorio čvrst temelj za izradu web stranica i web aplikacija.

/* YUI 3.18.1 Autorska prava 2014 Yahoo! Inc. Sva prava pridržana. Licencirano pod BSD licencom. http://yuilibrary.com/license/ */ /* TODO će morati ukloniti postavke na HTML-u budući da ga ne možemo postaviti u imenski prostor. TODO s prefiksom, trebam li grupirati prema biraču ili svojstvu radi uštede težine? */ html( boja:#000; pozadina:#FFF; ) /* TODO ukloniti postavke na BODY jer ne možemo to postaviti u imenski prostor. */ /* TODO test stavlja razred na HEAD. - Ne uspijeva na FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legenda, input, textarea, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO razmislite o drugačijem rukovanju nasljeđivanjem, možda pustite da IE6 malo zakaže ... */ address, caption, cite, code, dfn, em, strong, th, var ( font-style:normal; font-weight:normal; ) ol, ul ( list-style:none; ) caption, th (text-align:left;) h1, h2, h3, h4, h5, h6 (font-size:100%; font-weight:normal; ) q:prije, q:poslije (sadržaj:""; ) abbr, acronym ( border:0; font-variant:normal; ) /* za očuvanje visine retka i izgleda selektora */ sup (vertical-align:text-top; ) sub (vertical-align:text-bottom; ) unos, textarea , odaberite ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*za omogućavanje promjene veličine za IE*/ ) /*zato što legenda ne nasljeđuje u IE * / legenda (boja:#000;) /* YUI CSS pečat otkrivanja */ #yui3-css-stamp.cssreset ( prikaz: ništa; )

Ponovno postavljanje normalize.css stilova

Normalize.css je prilagođena CSS datoteka koja omogućuje preglednicima dosljedniji prikaz svih elemenata iu skladu s modernim standardima. Njegovi autori istraživali su razlike među stilovima različitim preglednicima prema zadanim postavkama prilagoditi samo one stilove kojima je potrebna normalizacija.

/*! normaliziraj.css v6.0.0 | MIT licenca | github.com/necolas/normalize.css */ /* Dokument ====================================== = ======================================= */ /** * 1. Ispravite liniju visina u svim preglednicima. * 2. Spriječite prilagođavanje veličine fonta nakon promjene orijentacije u * IE on Windows Phone i u iOS-u. */ html (line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Odjeljci ================================================= ============================ */ /** * Dodajte ispravan prikaz u IE 9-. */ article, aside, footer, header, nav, section ( display: block; ) /** * Ispravite veličinu fonta i marginu na elementima `h1` unutar konteksta `section` i * `article` u Chromeu, Firefoxu i Safari. */ h1 (veličina fonta: 2em; margina: 0,67em 0; ) /* Grupiranje sadržaja ============================ = ==================================================== ========= */ /** *Dodaj ispravan prikaz u IE 9-. * 1. Dodajte ispravan prikaz u IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Dodajte ispravnu marginu u IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Dodajte ispravan okvir dimenzioniranje u Firefoxu. * 2. Prikaži preljev u Edgeu i IE. */ hr ( box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ ) /** * 1. Ispravite nasljeđivanje i skaliranje veličine fonta u svim preglednicima. * 2. Ispravite čudnu veličinu fonta `em` u svim preglednicima. */ pre ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /* Semantika na razini teksta ================ ==================================================== === ========= */ /** * 1. Uklonite sivu pozadinu na aktivnim vezama u IE 10. * 2. Uklonite praznine u podcrtanim vezama u iOS 8+ i Safari 8+. */ a ( background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Uklonite donji obrub u preglednicima Chrome 57- i Firefox 39- . * 2. Dodajte ispravan ukras teksta u Chromeu, Edgeu, IE, Operi i Safariju. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ ) /** * Spriječite dvostruku primjenu `bolder ` prema sljedećem pravilu u pregledniku Safari 6. */ b, jak ( font-weight: inherit; ) /** * Dodajte ispravnu težinu fonta u pregledniku Chrome, Edge i Safari. */ b, jak ( font-weight: bolder; ) /** * 1. Ispravite nasljeđivanje i skaliranje veličine fonta u svim preglednicima. * 2. Ispravite čudnu veličinu fonta `em` u svim preglednicima. */ code, kbd, samp (font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Dodajte ispravan stil fonta u Androidu 4.3-. */ dfn ( font-style: italic; ) /** * Dodajte ispravnu pozadinu i boju u IE 9-. */ mark ( background-color: #ff0; color: #000; ) /** * Dodajte ispravnu veličinu fonta u svim preglednicima. */ small (font-size: 80%; ) /** * Sprječava da elementi `sub` i `sup` utječu na visinu reda u * svim preglednicima. */ sub, sup (veličina fonta: 75%; line-height: 0; position: relative; vertical-align: baseline; ) sub ( bottom: -0.25em; ) sup ( top: -0.5em; ) /* Ugrađeni sadržaj ================================================== ================ =========================== */ /** * Dodajte ispravan prikaz u IE 9-. */ audio, video ( display: inline-block; ) /** * Dodajte ispravan prikaz u iOS 4-7. */ audio:not() ( display: none; height: 0; ) /** * Uklonite okvir na slikama unutar poveznica u IE 10-. */ img ( border-style: none; ) /** * Sakrij preljev u IE. */ svg:not(:root) ( overflow: hidden; ) /* Obrasci ================================= = =================================================== ====== */ /** * Uklonite marginu u Firefoxu i Safariju. */ button, input, optgroup, select, textarea ( margin: 0; ) /** * Prikaži preljev u IE. * 1. Pokažite preljev u Edgeu. */ gumb, unos ( /* 1 */ overflow: visible; ) /** * Uklonite nasljeđivanje transformacije teksta u Edgeu, Firefoxu i IE. * 1. Uklonite nasljeđivanje transformacije teksta u Firefoxu. */ gumb, odaberite ( /* 1 */ text-transform: none; ) /** * 1. Spriječite WebKit bug gdje (2) uništava izvorne `audio` i `video` * kontrole u Androidu 4. * 2. Ispravite nemogućnost stiliziranja klikabilnih vrsta u iOS-u i Safariju. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Uklonite unutarnju granicu i ispunu u Firefoxu. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner (border-style: none; padding: 0; ) /** * Vraćanje stilova fokusa nepostavljenih prethodnim pravilom. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( outline: 1px dotted ButtonText; ) /** * 1. Ispravite prelamanje teksta u Edgeu i IE. * 2. Ispravite nasljeđivanje boja iz elemenata `fieldset` u IE. * 3. Uklonite ispunu kako programeri ne bi bili uhvaćeni kada nuliraju * elemente `fieldset` u svim preglednicima. */ legenda ( box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0 ; /* 3 */ razmak: normalno; /* 1 */ ) /** * 1. Dodajte ispravan prikaz u IE 9-. * 2. Dodajte ispravno okomito poravnanje u Chromeu, Firefoxu i Operi. */ napredak ( display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Uklonite zadanu okomitu traku za pomicanje u IE. */ textarea ( overflow: auto; ) /** * 1. Dodajte ispravnu veličinu okvira u IE 10-. * 2. Uklonite ispunu u IE 10-. */ , ( box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Ispravite stil pokazivača gumba za povećanje i smanjenje u Chromeu. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( visina: automatski; ) /** * 1. Ispravite neobičan izgled u Chromeu i Safariju. * 2. Ispravite stil obrisa u Safariju. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Uklonite unutarnje ispune i gumbe za otkazivanje u Chromeu i Safariju na macOS-u. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Ispravite nemogućnost stiliziranja klikabilnih vrsta u iOS-u i Safariju. * 2. Promijenite svojstva fonta u `naslijediti` u Safariju. */ ::-webkit-file-upload-button ( -webkit-appearance: gumb; /* 1 */ font: naslijediti; /* 2 */ ) /* Interaktivno ============= ==================================================== === ============ */ /* * Dodajte ispravan prikaz u IE 9-. * 1. Dodajte ispravan prikaz u Edge, IE i Firefox. */ detalji, /* 1 */ izbornik ( prikaz: blok; ) /* * Dodajte ispravan prikaz u svim preglednicima. */ sažetak ( display: list-item; ) /* Skriptiranje ===================================== = ====================================== */ /** * Dodajte ispravan prikaz u IE 9-. */ platno ( display: inline-block; ) /** * Dodajte ispravan prikaz u IE. */ predložak ( display: none; ) /* Skriveno ======================================= ===================================== */ /** * Dodajte ispravan prikaz u IE 10 - . */ ( prikaz: ništa; )

Reset putem univerzalnog birača * (zvjezdica)

Na prvi pogled ovo se može činiti kao najjednostavnije i najuspješnije rješenje; zašto opisivati sve HTML elemente i dodjeljivati im vrijednosti kada možete koristiti selektor *, jer se njegov učinak odnosi na sav HTML.

* ( margina: 0; ispuna: 0; )

No, nažalost, to nije dobra praksa. Vrlo je teško (dugotrajno u usporedbi s drugim postupcima resetiranja CSS-a) pregledniku primijeniti pravila na svaki element u dokumentu, posebno na velikim web stranicama, a također može uništiti mnogo dobrih zadanih stilova.

Ponovno postavljanje stilova i WordPressa

Ako želite upotrijebiti jednu od gore opisanih metoda za resetiranje CSS stilova za WordPress web mjesto, to možete učiniti na dva načina.

Prvi je da trebate kopirati kod za resetiranje na vrh vaše style.css datoteke WordPress teme(iza redaka o autorstvu i naslovu teme, odnosno iza teksta uokvirenog razlomkom i zvjezdicom /* ... */.

@import "reset.css";

Ako u CSS-u postoji direktiva @import, onda bi trebala biti na samom početku tablice (ispred svih pravila). U suprotnom, preglednik bi to mogao zanemariti.

Međutim, kako bi se poboljšala izvedba, CSS listovi stilova se u pravilu kombiniraju u jednu datoteku. Stoga ne biste trebali koristiti @import osim ako postoji stvarna potreba.

Kao što vidite, resetiranje stilova u WordPressu nije ništa posebno.

Priznanja

Prilikom pisanja ovog članka korišteni su sljedeći izvori.

Po definiciji, razvoj stilske datoteke uključuje specificiranje CSS svojstva nove vrijednosti. Datoteke složenog stila na kraju narastu do točke u kojoj se CSS vrijednosti moraju potpuno ukloniti, tj. vratiti na zadane vrijednosti. U nekim su slučajevima te zadane vrijednosti dobro poznate i lako ih je zapamtiti, ali to ne vrijedi za sva svojstva. Srećom, moderne CSS značajke daju nam jednostavan način za ponovno postavljanje vrijednosti svojstava.

Resetiraj

Pretpostavimo da ste postavili slike da lebde ulijevo:

Img (float: lijevo;)

Nakon toga, slike u posebnim slučajevima, kao što su one s klasom .recall, moraju biti postavljene da se ne pojavljuju u mjehurićima, ali se ne možete sjetiti kako je to svojstvo točno napisano.

Drugim riječima, znate da je zadana postavka no float, ali se ne sjećate kako postaviti no float. Umjesto da pokušavate smisliti kako ovo napisati, možete jednostavno dodati sljedeći redak u svoju tablicu stilova:

Img.recall ( float : početno; )

Postoji uobičajena zabluda da zadana vrijednost vraća vrijednost svojstva na prvu vrijednost koja je postavljena na to svojstvo u datoteci stila ili na zadanu vrijednost u CSS specifikacije. Ali obje su ove opcije pogrešne: primjena zadane vrijednosti vraća svojstvo na zadanu vrijednost za korisnički preglednik.

U većini slučajeva zadana vrijednost bit će ista ili slična za sve preglednike. Ova vrijednost je posebno korisna u sljedećim situacijama:

Primjeri korištenja

Zadana vrijednost može se koristiti za poništavanje postavki boja. Zadana boja teksta u većini preglednika je crna, a CSS kod u nastavku poništit će postavke boja za elemente zaglavlja:

Tijelo ( boja : hsl(333 , 50 % , 25 % ) ; ) h1, h2, h3 ( boja : početna; )

Imajte na umu da crna neće nužno biti zadana boja, jer ova vrijednost ovisi o preglednicima i naposljetku o samim korisnicima. Isto tako i sljedeći unos:

Na stranu (obitelj-fontova: početno;)

dat će različite rezultate u različitim preglednicima, a izlazni font neće nužno biti Times New Roman, jer različiti preglednici mogu imati različite zadane fontove.

Postoji nekoliko drugih upotreba zadane vrijednosti:

Ponovno postavljanje vrijednosti z-indeksa elementa na zadanu vrijednost.

Ponovno postavite ispunu i transformirajte vrijednosti na njihove zadane vrijednosti.

Ograničenja uporabe

Jedan od glavnih razloga za prilično rijetku upotrebu zadane CSS je potpuni nedostatak podrške za nju u Internet preglednik Explorer, iako ga drugi preglednici podržavaju mnogo godina. Međutim Edge preglednik podržava ovu vrijednost, pa je vjerojatno da će se zadana vrijednost češće pojavljivati u stilskim datotekama u budućnosti.

Prijevod – Dežurna soba

Od autora: Izrada web stranice na Internetu može biti kao izgradnja na živom pijesku. Preglednici rade istu stvar, ali s vremena na vrijeme prave iritantno nepredvidive razlike. Na primjer, svi preglednici imaju "listove stilova korisničkog agenta" - zadani skup CSS stilova kako bi zaglavlje izgledalo kao zaglavlje, itd., čak i prije nego što dodijelite stilove stranici1. Naravno, svaki motor preglednika koristi nešto drugačije zadane skupove.

Jedan od primjera bili su zadani stilovi popisa, gdje su zadani listovi stilova preglednika Internet Explorera i Opere u početku imali rubni rub lijevo: 30pt;, dok su Firefox i KHTML dolazili s rubnim rubom lijevo: 40px;. Ako želite promijeniti zadani ispun definiranjem ul (padding-left: 0;), to bi dalo vrlo različite rezultate u preglednicima.

RESET CSS POSTAVKE

Kako bi postigli malu stabilnost, neki programeri poništavaju sve margine i ispune pomoću univerzalnog selektora:

* (margina: 0; ispuna: 0;)

Definiranjem uvlačenja popisa i pokretanjem vaše tablice stilova ondje ćete dobiti ono što očekujete. Međutim, korištenje * značilo je da su zadana margina i ispuna pali za sve elemente, a čim ste dodali element obrasca, stvari su postale jako loše.

Svrha resetiranja je resetirati sve što možete... [i] poslužiti kao polazište za vaše vlastite osnovne stilove- Eric Meyer

html, tijelo, div, raspon, aplet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blok citat, pre, a, skraćenica, akronim, adresa, veliki, citirati, kod, 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, obrazac, oznaka, legenda, tablica, natpis, tbody, tfoot, thead, tr, th, td, članak, na stranu, platno, detalji, ugraditi, figura, figcaption, podnožje, zaglavlje, hgroup, izbornik, nav, izlaz, ruby, odjeljak, sažetak, vrijeme, oznaka, audio, video (margina: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; )

html, tijelo, div, raspon, aplet, objekt, iframe,

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

a, skraćenica, akronim, adresa, veliko, citat, kod,

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

small, strike, strong, sub, sup, tt, var,

b, u, i, centar,

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

set polja, obrazac, oznaka, legenda,

tablica, naslov, tijelo, stopalo, oglas, tr, th, td,

članak, na stranu, platno, detalji, ugraditi,

slika, figcaption, podnožje, zaglavlje, hgroup,

izbornik, navigacija, izlaz, ruby, odjeljak, sažetak,

vrijeme, oznaka, audio, video (

margina: 0;

ispuna: 0;

granica: 0;

veličina fonta: 100%;

font: naslijediti;

okomito poravnanje: osnovna linija;

Vraća neka svojstva mnogih (ali ne svih) elemenata na ekvivalent običnog teksta. Budući da se poništavaju samo odgovarajući elementi, time se izbjegavaju neki problemi * (margina: 0; padding: 0;). Zatim možemo definirati stilove za ta odbačena "nestilizirana" svojstva, uvjereni da gradimo na stabilnom temelju za više preglednika. Ova dodjela stila također djeluje kao signal za potrebu svjesnog postavljanja odgovarajućih stilova za ove elemente.

PROBLEMI S RESETIRANJEM CSS POSTAVKI

Resetiranje CSS-a bilo je spas, ali sada, posebno s porastom wireframeova, često se koriste takvi kakvi jesu. Na primjer, Eric je pretpostavio da će drugi programeri početi graditi web-mjesta oko njegovih predloženih stilova resetiranja, nadjačavajući ih u skladu s tim, a prva verzija Meyer Reseta privremeno je uključivala ovo pravilo:

/* ne zaboravite definirati stilove fokusa! */ :fokus ( obris: 0; )

Nažalost, nisu svi zapravo definirali stilove fokusa, a Eric ga je uklonio iz druge verzije.

Korištenje resetiranja čini da se osjećate pomalo perverznjakom. Ponovno postavljanje zadanih stilova preglednika tjera vas da razmislite o tome kako bi svaki element trebao biti prikazan, što pomaže osigurati da se elementi primjenjuju na temelju semantike, a ne na temelju zadanih stilova. Ali za elemente poput i i em gotovo uvijek postoji zadani stil preglednika. Drugi zadani stilovi preglednika, kao što je nekoć smiješno velika veličina teksta zaglavlja, promijenili su se i sada su prilično podnošljivi prema zadanim postavkama. Problemi počinju kada netko želi naknadno proslijediti HTML element za poništavanje samo s dodijeljenim stilovima za poništavanje bez stila.

Za mene je najveći problem s resetiranjem nasljeđivanje, koje dovodi do spama u alatima preglednika. Kada pokušavate pronaći problem duboko ugniježđenog elementa CSS u tuđem kodu, ovo neće pomoći:

Pravila resetiranja CSS-a ponavljaju se zbog nasljeđivanja

NORMALIZIRAJ.CSS

Nicholas Gallagher i Jonathan Neal zauzeli su drugačiji pristup s Normalize.css, "malom CSS datotekom koja osigurava bolju dosljednost između preglednika u zadanim stilovima HTML elemenata." Kao i kod poništavanja CSS-a, daje nam snažnu početnu točku za više preglednika - glavni razlog za korištenje poništavanja na prvom mjestu - ali ta su dva pristupa filozofski različita.

Resetiranje CSS-a nadjačava stilove korisničkog agenta i vraća mnoge elemente u njihovo "nestilizirano" stanje, neku ravnu podlogu na kojoj se može sigurno graditi. Međutim, tada moramo oblikovati većinu elemenata prije nego što možemo graditi s njima. Umjesto toga, Normalize.css rješava samo nedosljednosti u stilu korisničkog agenta, odabirući najprikladnije zadane postavke kako bi napravile razliku. Ovdje također dobivamo sigurnu osnovu za više preglednika, ali onu koja uključuje normalizirane stilove korisničkih agenata kao osnovne građevne blokove spremne za korištenje. To je u osnovi nešto poput idealizirane verzije zadanog CSS 2.1 stylesheeta za više preglednika. U oba slučaja tada moramo dodati vlastite dominantne stilove kako bismo stvorili sliku, ali budući da zadane postavke preglednika u Normalize.css ostaju, postoji manje stilova za dodavanje ukupno.

Budući da su promjene u Normalize.css više ciljane, ne postoji kaskadno nasljeđivanje prepisanih pravila u razvojnim alatima vašeg preglednika. Evo jednostavnog ul:-a, destilovanog s Meyer Reset i Normalize.css verzijama 1 i 2:

"Nestiliziran" element nesređenog popisa

Primjena Meyer Reset

Primijenite Normalize.css v1

Primjena Normalize.css v2

Postoji jasna razlika u filozofiji kada se primjer Meyer Reset pojavljuje kao nekoliko redaka običnog teksta bez margina, uvlaka ili grafičkih oznaka, dok primjeri Normalize.css izgledaju kao zadani stilovi. Razlika u stilovima primijenjenim na ovu ulicu također je lako uočljiva.

Međutim, ovo nisu svi stilovi primijenjeni na ul. Za usporedbu, ovdje je ista "nestilizirana" snimka zaslona, ali s vidljivim stilovima korisničkog agenta, u Firefoxu 21 i Operi Next 15.

U ovom ćemo članku govoriti o resetiranju stilova i pogledati primjer stvaranja takve reset.css datoteke.

Ideja o bacanju stilova pojavila se prije otprilike 10 godina. Što se zapravo sastojalo od toga da stranica izgleda isto u svim preglednicima pomoću malog skupa CSS stilova. Naravno, to ne funkcionira uvijek, ali neke se stvari mogu ispraviti - na primjer, granica nije jasna odakle dolazi u nekim verzijama IE-a. Ili plavi obris (obris) u blizini polja.

Nije tajna nijednom front-end programeru da su preglednici vrlo izbirljivi i da svaki obrađuje HTML elementi na svoj način, dodajući svoje standardne stilove.

Budući da ova ideja postoji već duže vrijeme, ne čudi da već postoje gotove reset datoteke, obično nazvane reset.css, a povezane su sa svim projektima.

Zašto u posebnoj datoteci? Da, jednostavno zato što je praktičnije prenositi ih s projekta na projekt.

Evo primjera reset.css iz 2007.:

Ovo je samo standard za ovu datoteku koji je usvojio određeni krug web programera.

Savjetujem vam, bilo da ste iskusan programer ili tek počinjete, da razvijete vlastitu datoteku za resetiranje. Možete uzeti gore opisani standard kao osnovu, nadopuniti ga vlastitim selektorima ili promijeniti postojeće. Evo primjera takve datoteke koju sam razvio za sebe:

input, textarea,a , button, select(outline:none) img (border:none;) hr ( clear:both; border:none; background:none; ) * ( background-repeat:no-repeat; ) /* HTML5 poništavanje uloge prikaza za starije preglednike */ članak, na stranu, detalji, naslov slike, slika, podnožje, zaglavlje, hgroup, izbornik, nav, odjeljak ( prikaz: blok; ) tijelo ( visina retka: 1; ) ol, ul ( popis -style: none; margin:0; padding:0; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) tablica (border-collapse: kolaps; border-spacing: 0; )

Možete kopirati bilo koji od gornjih kodova za osobna upotreba, ali ako ga koristite u svojim člancima, navedite vezu na izvor.