Css zadane vrijednosti za html elemente. Resetirajte stilove pomoću CSS Reset. Izbjegavajte suvišne deklaracije svojstava kada koristite CSS Reset
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 pojedinačno za sebe, dok drugi koriste gotova rješenja. Ovdje predlažem započeti. Ima ih mnogo dobre opcije resetiranje stila, ali moj omiljeni je bio 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 najviše jednostavna 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 je gora jer degradira performanse dodavanjem jedne dodatne datoteke za 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.
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 inicijalno zadani listovi stilova preglednika Internet Explorer'a i Opera imali su ispunu popisa margin-left: 30pt;, dok su Firefox i KHTML došli s padding-left: 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;)
* (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. Ostali zadani stilovi preglednika, poput prethodnog, nekada su smiješni Veliki broj Tekstovi naslova su se promijenili i standardno su postali prilično podnošljivi. 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 resetiraj css, ponavlja se zbog nasljedstva
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 zadanom stilu 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.
Ovaj članak je prvi u nizu na temu kroćenja CSS-a. Danas ćemo se osvrnuti na tehnologiju CSS Reset.
Zašto je to potrebno?
Svaki preglednik postavlja vlastite zadane vrijednosti stila za različite HTML elemente. S koristeći CSS Poništi, možemo izravnati ovu razliku kako bismo osigurali kompatibilnost stilova s više preglednika.Na primjer, koristite element a u vašem dokumentu. Većina preglednika, poput Internet Explorera i Firefoxa, dodaje vezu Plava boja I podcrtavanje. Međutim, zamislite da za pet godina netko odluči napraviti novi preglednik (nazovimo ga UltraBrowser). Programerima preglednika nije se svidjela plava boja i živcirali su ih podcrtani pa su odlučili istaknuti linkove u crveno I podebljano. Na tome se temelji da ako postavite osnovnu vrijednost stila za element a, onda je zajamčeno da će biti onakav kakav želite, a ne kako ga programeri UltraBrowsera radije prikazuju.
Ali sada uopće nemamo uvlake, uključujući između pojedinačnih odlomaka! Što uraditi? Ne lažite i ne bojte se: ispod našeg resetiranja opisat ćemo pravilo koje nam je potrebno. Ovo se može učiniti različiti putevi: odredite uvlaku na dnu ili vrhu odlomka, odredite je u postocima, pikselima ili em.
Što je najvažnije, preglednik sada igra po našim pravilima, a ne mi po njegovim pravilima. Odlučio sam to napraviti ovako:
* ( margina: 0; padding: 0; ) p ( margina: 5px 0 10px 0; )
Kao rezultat, dobili smo ono što se može vidjeti u trećem primjeru.
Možete stvoriti vlastite stilove resetiranja ako rješavate određeni problem u svom projektu. Unatoč tome, nema vodič korak po korak o stvaranju vlastitog CSS Reset. Oslonite se na vlastita načela i vlastiti stil.
Kako bismo vam pomogli da napravite pravi izbor, evo još nekoliko poveznica:
- Manje je više - moj izbor Reset CSS (Ed Elliott).
2. Vaš CSS Reset je prva stvar koju preglednik treba vidjeti
Ponovno postavljanje stilova nakon postavljanja vlastitih stilova za elemente pogrešan je pristup. U ovom slučaju ne biste trebali očekivati ništa dobro od prikaza preglednika. Upamtite da uvijek prvo trebate uključiti CSS Reset, a zatim sve ostale stilove.Da, razumijem, zvučalo je smiješno, ali ovo je jedna od glavnih grešaka programera, mladih i starih. Mnogi ljudi jednostavno zaborave na ovo.
Neki bi mogli postaviti logično pitanje: zašto se to događa? Odgovor je jednostavan: pravila napisana niže u tekstu CSS datoteke (i još niže u svom redoslijedu u dokumentu) prebrišu pravila deklarirana ranije.
Nemojmo se previše udaljiti od teme i nastavimo. Primijenimo stilove Erica Meyera na naš primjer, ali nakon opise naših nekretnina, kao što je prikazano u primjeru 4. Matematičari bi rekli sljedeće: "To je ono što smo trebali dokazati."
3. Koristite zasebni CSS dokument za CSS Reset
Moram (ne, nikako nisam bio prisiljen) spomenuti ovaj savjet. Korištenje zasebne datoteke za resetiranje CSS-a uobičajena je praksa koju podržava veliki broj programeri.Zapravo zauzimam poziciju stvaranja jednu veliku CSS datoteku zbog veće učinkovitosti ovog pristupa. Ali po ovom pitanju sklon sam se složiti s većinom: CSS Reset treba premjestiti na zasebna datoteka(obično se naziva reset.css). U ovom slučaju, možete ga koristiti u različitim projektima bez ikakvog napora da ga odvojite od ostalih CSS pravila.
4. Pokušajte izbjeći korištenje univerzalnog selektora
Iako ovaj koncept funkcionira, njegova upotreba često nije poželjna zbog nekompatibilnosti s nekim preglednicima (na primjer, ovaj selektor nije ispravno obrađen u Internet Exploreru). Ovu biste tehniku trebali koristiti samo za jednostavne, male, statične i predvidljive stranice (ako ste to morali učiniti).Ovaj savjet je posebno važan kada razvijate rješenja kao što su CMS teme. Ne možete unaprijed predvidjeti kako će se koristiti ili kako će se modificirati. Bolje je opisati temeljna CSS pravila za sve elemente nego u tu svrhu koristiti nepredvidivi (iako manji) mehanizam univerzalnih selektora.
5. Izbjegavajte suvišne opise svojstava kada koristite CSS Reset
Još jedan razlog zašto mi se ne sviđa zasebna datoteka za CSS Reset je potencijalna redundantnost naknadnih deklaracija CSS svojstava. Ponavljanje vaših pojedinačnih stilova među cijelim skupom CSS datoteka je loš način i treba ga izbjegavati. Naravno, ponekad smo previše lijeni da mukotrpno prolazimo kroz niz stilova i kombiniramo neke od njih, ali trebali bismo barem pokušati!Vratimo se na Ericov CSS Reset. Postavlja zadane vrijednosti za visinu linije, boju i pozadinu elementa tijelo na sljedeći način:
tijelo (visina linije: 1; boja: crna; pozadina: bijela; )
Recimo da već znate kako će element izgledati tijelo:
- boja pozadine: #cccccc;
- boja: #996633;
- Želite vodoravno ponoviti određenu pozadinsku sliku.
U ovom slučaju, nema potrebe za stvaranjem novog selektora za opisivanje vaših svojstava - možete ih jednostavno uključiti u CSS Reset. Učinimo to:
tijelo (line-height: 1; color: #996633; background:#ccc url(tiled-image.gif) repeat-x gore lijevo; )
Nemojte se bojati izmijeniti sam CSS Reset. Prilagodite ga sebi, neka radi za vas. Mijenjajte, preslagujte, uklanjajte i dodajte prema potrebi u vašem konkretnom slučaju.
Eric Meyer je o tome rekao sljedeće: "ovo nije slučaj u kojem bi svatko trebao koristiti CSS Reset bez promjena."
CSS Zadani CSS za HTML elemente (2)
To je drugačije za svaki preglednik, pa:
- Firefox (Gecko):. Ili idite na resource://gre-resources/ i pogledajte html.css.
- Chrome/Safari (WebKit):
- Chrome (trepti):
- Internet Explorer (Trident), ranije verzije: http://web.archive.org/web/20170122223926/http://www.iecss.com/
Gdje mogu pronaći CSS za zadani CSS preglednika?
Mnogi HTML elementi imaju neke CSS svojstva zadane vrijednosti, što ponekad može dovesti do nepoznatog/neželjenog ponašanja. Na primjer, polja za unos različito se prikazuju u različitim preglednicima. Tražim mjesto koje pokriva nova svojstva CSS3 i nove HTML5 elemente.
Vidio sam u drugim (mnogo starijim) pitanjima (kao što su zadane tablice stilova CSS-a u preglednicima) koja predlažu rješenje za resetiranje CSS-a. Ovo rješenje ponekad nije potrebno, često bih želio sačuvati neka osnovna svojstva (kao što je isticanje polja za unos u Chromeu). Drugim riječima: Ne želim se riješiti stvari samo zato što ne znam čemu služe. .
Tako, postoji li stranica koja mi može dati sve te informacije (ili možda većinu)?
GitHub repozitorij za sve W3C HTML specifikacije i zadane CSS stilove za programere može se pronaći
1.
2. Standardni stilovi za Internet Explorer
3.
4. Standardni stilovi za Operu
5. Standardni stilovi za HTML4 (W3C specifikacija)
6. Standardni stilovi za HTML5 (W3C specifikacija)
Primjer, prema zadanoj W3C HTML4 specifikaciji:
Html, adresa, blok citat, tijelo, dd, div, dl, dt, fieldset, obrazac, okvir, frameset, h1, h2, h3, h4, h5, h6, bez okvira, ol, p, ul, centar, 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- grupa ) tbody ( prikaz: grupa-red-tablice ) tfoot ( prikaz: grupa-podnožje-tablice ) col ( prikaz: stupac-tablice ) colgroup ( prikaz: grupa-stupac-tablice ) td, th ( prikaz: ćelija-tablice ) naslov (display: table-caption) th (font-weight: bolder; text-align: center) caption (text-align: center) body (margina: 8px) h1 (font-size: 2em; margin: .67em 0) h2 (veličina fonta: 1.5em; margina: .75em 0) h3 (veličina fonta: 1.17em; margina: .83em 0) h4, p, citat, ul, skup polja, obrazac, ol, dl, dir, izbornik ( margina: 1.12em 0 ) h5 (veličina fonta: .83em; margina: 1.5em 0 ) h6 (veličina fonta: .75em; margina: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, snažna (težina fonta: podebljano) blok citat (margina-lijevo: 40px; margin-right: 40px ) i, cite, em, var, adresa (font-style: italic) pre, tt, code, kbd, samp (font-family: monospace) pre (white-space: pre) button, textarea, input, select ( display: inline-block ) big ( font-size: 1.17em ) small, 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 umetak ) ol, ul, dir, izbornik, dd ( margin-lijevo: 40px ) ol ( list-style-type: decimal ) ol ul, ul ol, ul ul, ol ol ( margin-top: 0; margin-bottom: 0 ) u, ins (ukras teksta: podcrtano) br:prije (sadržaj: "\A"; razmak: predcrta) središte (poravnanje teksta: središte) :link, :posjećeno (ukras teksta: podcrtano ) :focus ( obris: tanko točkasto obrnuto ) /* Započnite postavke dvosmjernosti (ne mijenjajte) */ BDO (smjer: ltr; unicode-bidi: bidi-nadjačaj) BDO (smjer: rtl; unicode-bidi: bidi-nadjačaj) * (smjer: ltr; unicode-bidi: ugraditi ) * ( smjer: rtl; unicode-bidi: ugraditi ) @media print ( h1 ( prijelom stranice-prije: uvijek ) h1, h2, h3, h4, h5, h6 ( prijelom stranice-poslije: izbjegavati ) ul, ol, dl ( prijelom stranice-prije: izbjegavati ) )
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 svoje vlastiti kod poništi CSS. 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; ) input, 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 preglednicima omogućuje konzistentnije prikazivanje svih elemenata u 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 na Windows Phoneu i 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 koristiti jednu od gore opisanih metoda resetiranja CSS stilovi za WordPress stranicu to se može učiniti na dva načina.
Prvi je da trebate kopirati reset kod na početak style.css datoteke vaše WordPress teme (nakon redaka o autoru i nazivu teme, odnosno nakon teksta okruženog 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.
Osim toga, za poboljšanje performansi, CSS tablice stilovi 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.