Poništi css padding. Resetirajte stilove pomoću CSS Reset. Izbjegavajte suvišne deklaracije svojstava kada koristite CSS Reset

💖 Sviđa li vam se? Podijelite vezu sa svojim prijateljima

Svaki ima vlastita unaprijed postavljena pravila za dizajn web stranica i elemenata na njima (korisnički agent stylesheet), koji se prema zadanim postavkama automatski povezuju. Međutim, kada stvaraju novi projekt, većina dizajnera izgleda mu dodaje posebnu datoteku Reset CSS, koja potpuno resetira CSS stilove i omogućuje razvojnim programerima stvaranje od nule. Zašto i kako se to sve radi objasnit ću u ovom članku.

Ako pogledate pretpreglednu sliku za objavu, vidjet ćete da se obična linija prikazuje na potpuno različite načine u Safariju, Chromeu i Firefoxu. Da, ponekad su pravila ista, na primjer, svi skrivaju oznaku glave putem opcije display: none!, ali u mnogim slučajevima postoje ozbiljne razlike u tome kako se objekti prikazuju na stranici. Pretpostavljam da se nekima od vaših klijenata možda neće svidjeti kada konačni izgled izgleda drugačije od izgleda.

Stoga, ako ste web developer početnik, publikacija će vam svakako biti od koristi za cjelokupni razvoj. Prijevod je ove bilješke s pregledom stanja na području CSS Reseta u 2018. godini. Sigurna sam da će i 2019. i kasnije sve ovo biti aktualno, jer... Ova tema je stara već više od 10 godina (od izlaska prvog takvog rješenja).

Zašto trebate resetirati CSS postavke?

Kao što ste već shvatili iz uvoda, oni vam omogućuju da uklonite razlike između osnovnih stilova web preglednika i dovedete ih u jedan, plus ili minus, standardizirani oblik. Uvijek se koriste na samom početku prije drugih korisničkih razvoja. Članak Erica Meyera o Reset CSS-u od prije deset godina spominje glavni razlog za ovaj pristup, koji je još uvijek relevantan godinama kasnije:

Problem je u tome što različiti preglednici imaju svoje zadane postavke, a nisu sve iste. Mislimo da naš kod mijenja početni dizajn stranice, ali to nije sasvim točno, a uz pomoć datoteka za resetiranje možemo ovaj standardni prikaz dokumenta učiniti ujednačenijim za sve programe. Stoga ćete morati trošiti manje vremena na borbu s osnovnim zadanim postavkama Firefoxa, Chromea itd.

Ali sada je situacija u izgledu manje kontroverzna?

Da, doista, danas su mnogi parametri u korisničkom agentu postali sličniji. Gotovo posvuda naslov H1 ima veličinu fonta od 2 em i horizontalnu marginu od 0,67 em. Međutim, sve su to relativno nove promjene i barem trebate razmotriti podršku za starije verzije programa gdje takva dosljednost ne postoji.

Osim toga, u nekim slučajevima, ovisno o vrsti poništavanja CSS-a (više o tome u nastavku), ova bi nam značajka i dalje trebala čak i da gledamo samo moderne web preglednike.

Ali mi primjenjujemo vlastite stilove, nadjačavajući one osnovne?

Ovo je jedna od glavnih teza protivnika ovakvog pristupa - na kraju, svejedno, određeni parametri se zamjenjuju vlastitim style.css, pa zašto dodati još jednu dodatnu datoteku i smanjiti ? Unatoč činjenici da ova fraza ima smisla, korištenje resetiranja opravdano je s dvije točke:

  • Prvo, pomaže vam da napišete čistiji kod. Možemo ga podijeliti u nekoliko dijelova: zasebno za dizajn samog web projekta i skup pravila usmjerenih na specifičnosti pojedinih preglednika. To će vam omogućiti da ne zatrpavate glavnu CSS datoteku svim vrstama IE hakova, itd.
  • Drugo, sva resetiranja teže vrlo malo, a njihovo učitavanje ne zahtijeva puno vremena.

Vrste resetiranja CSS-a (možete preuzeti s poveznica u članku)

Od daleke 2004. godine, kada su se pojavili prvi slični razvoji, sada postoji dosta metoda koje se razlikuju po složenosti i specifičnosti. U suštini, postoje 3 cilja koja poništavanje CSS stilova pokušava riješiti:

  1. Ispravljanje grešaka u tablici stilova korisničkog agenta.
  2. Uklanjanje nestandardnog originalnog dizajna u internetskim preglednicima.
  3. Stvaranje univerzalne kompatibilne stilske baze.

Postoje opcije koje rješavaju sva tri problema i one koje su prilagođene samo jednom konkretnom problemu.

Ispravak/ispravak pogreške

Razmotrimo prvi od gore navedenih ciljeva. Kao što već razumijete, uklanjanje raznih nedostataka i zastoja preglednika najrelevantnije je za podršku zastarjelim izdanjima. Jedan dobar primjer ove situacije je kada, nakon pojave HTML5, isti Internet Explorer 9 nije primijenio ispravnu vrstu prikaza na nove objekte.

Stoga se u rješenjima poput Normalize.css sve pogreške uzimaju u obzir i obrađuju:

/** * Dodajte ispravan prikaz u IE. */ glavni (prikaz: blok; )

/** * Dodajte ispravan prikaz u IE. */ glavni ( prikaz: blok; )

Budući da su te radnje potrebne samo za stariji softver, ima smisla koristiti PostCSS postprocesor kao što je PostCSS Normalize u kombinaciji s Browserlistom kako biste ih dodali samo kada trebate podržati određene preglednike.

Još jedan primjer koda iz Pure CSS-a, koji je također prikladan za moderne web programe, je ispravljanje elemenata prikaza i skrivenog atributa.

[ skriveno] ( prikaz: ništa ! važno; // Jedan od dobrih slučajeva upotrebe !important }

( display: none !important; // Jedan od dobrih slučajeva upotrebe !important )

Uklanjanje osebujnih stilova preglednika

Ovo je drugi razlog za resetiranje CSS postavki. U načelu, svatko ima svoje mišljenje o tome koji se dizajn u tablici stilova korisničkog agenta smatra "čudnim". Definicija autora izvorne bilješke sasvim je logična: ovo je stil koji nije "gola" verzija prikaza elementa. Na primjer, dodavanje 2em ispune za naslove (kao što mnogi čine) nije loša ideja, ali zašto 2em, a ne 3em ili 4em. U ovom slučaju, osnovna opcija bila bi odsutnost bilo kakvog uvlačenja, odnosno nulta margina.

Najjednostavniji univerzalni pristup koji uklanja ispune/margine s oznaka:

* (margina: 0; ispuna: 0;)

* ( margina: 0; ispuna: 0; )

Ova metoda je previše radikalna, jer odnosi se na sve objekte, čak i one gdje ne očekujete (u istom unosu). Kao alternativa, češće se koristi Eric Meyer Reset CSS, koji uklanja parametre margine/padding, obrube i veličinu fonta (na 0 ili ništa) gdje je to logično opravdano:

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, naslov, 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; obrub: 0; veličina fonta: 100%; font: naslijediti; okomito poravnanje: osnovna linija;)

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, naslov, 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; )

Prevladavajući stilovi

Za razliku od prethodnog odjeljka, ovdje glavni zadatak nije resetirati CSS određenih objekata, već ih redefinirati njihovim stvarnim vrijednostima.

Na primjer, umjesto postavljanja svih fontova na veličinu 1em i margine = 0, Sanitize.css je postavljen na druge vrijednosti:

/** * Ispravite veličinu fonta i marginu na elementima `h1` unutar konteksta `odjeljak` i * `članak` u Chromeu, Firefoxu i Safariju. */ h1 (veličina fonta: 2em; margina: 0,67em 0 ;)

/** * Ispravite veličinu fonta i marginu na elementima `h1` unutar konteksta `section` i * `article` u Chromeu, Firefoxu i Safariju. */ h1 (veličina fonta: 2em; margina: 0,67em 0; )

U Bootstrapovom ponovnom pokretanju pronaći ćete još jednu ilustraciju trenutnog zadatka. Programeri su otišli malo dalje i odredili fontove i boju pozadine za tijelo.

// Tijelo // // 1. Uklonite marginu u svim preglednicima. // 2. Kao najbolja praksa, primijenite zadanu `background-color`. // 3. Postavite eksplicitnu početnu vrijednost poravnanja teksta tako da kasnije možemo koristiti // vrijednost `naslijediti` na stvarima poput ` `elemenata. tijelo ( margina: 0 ; // 1 font- obitelj: $font - obitelj- osnova; font- veličina: $font - veličina- osnova; font- težina: $font - težina- osnova; linija- visina: $line - visina - baza; boja: $body - boja; poravnanje teksta: lijevo;

// Tijelo // // 1. Uklonite marginu u svim preglednicima. // 2. Kao najbolja praksa, primijenite zadanu `background-color`. // 3. Postavite eksplicitnu početnu vrijednost poravnanja teksta tako da kasnije možemo koristiti // vrijednost `naslijediti` na stvarima poput ` `elemenata. tijelo ( margina: 0; // 1 obitelj-fontova: $font-family-base; veličina-fonta: $font-size-base; font-weight: $font-weight-base; line-height: $line-height -osnova; boja: $body-color; text-align: left; // 3 background-color: $body-bg;

Ukupno. Što izabrati

Izvorna bilješka sadrži rezultat odgovarajuće ankete iz

Poništi CSS(resetiranje stila) je resetiranje pomoću CSS-a, nekih parametara HTML elemenata koje preglednici postavljaju prema zadanim postavkama. Na primjer, takvi elementi uključuju odlomke (tag), koji u početku imaju vertikalna polja različita od nule (CSS), popise s grafičkim oznakama (tag), koji već imaju ne samo polja, već i markere određene vrste (CSS) i tako dalje.

Razmislimo sada o tome čemu služi ovo resetiranje CSS-a, što nam može dati? Pa, zamislite da ste rasporedili stranice svoje stranice i da niste promijenili margine odlomaka koje preglednici nude prema zadanim postavkama, budući da vam njihova veličina sasvim odgovara. Ali recite mi, molim vas, zašto ste odlučili da će svi preglednici na svijetu koji već postoje i koji će se pojaviti stvarati polja iste veličine? Štoviše, zašto mislite da preglednici u kojima ste testirali svoj izgled neće promijeniti veličinu ovih polja u svojim sljedećim verzijama ili ih u potpunosti ukloniti? Osjećate li kako miriše?

Dakle, poništavanjem CSS-a dizajneri izgleda jednostavno se štite od takvih nesporazuma, odnosno prvo poništavaju sve "kritične" vrijednosti CSS svojstava za elemente, a zatim ih po potrebi dodaju natrag, ali s vlastitim veličinama. Na taj način možete biti sigurni da će stranica izgledati isto u svim preglednicima. Možete, naravno, ne poništiti stilove, već jednostavno postaviti potrebne parametre elementima kako izgled napreduje, ali postoji rizik da će se nešto negdje propustiti iu određenom trenutku sve će "isplivati".

Na temelju gore navedenog, jedna od značajki resetiranja CSS-a je da nakon njegove primjene mnogi HTML elementi gube svoj uobičajeni izgled. A ako je gubitak margina u odlomcima nešto očekivano za početnike, onda je, na primjer, činjenica da su gumbi stvoreni pomoću oznaka ili odjednom počeli izgledati kao obični tekst potpuno iznenađenje. Ali to vas ne bi trebalo zbuniti, jer se stilovi resetiraju u tu svrhu, tako da ih dizajner izgleda kasnije ne zaboravi ponovno navesti.

Postoji mnogo načina za resetiranje stilova, a koji ćete odabrati ovisi samo o vama, ali jedno vam mogu reći - najbolji reset je onaj koji ste sami kreirali, na temelju svog iskustva i navika. Ako još nemate takvo iskustvo, možete upotrijebiti jednu od opcija predloženih u nastavku.

Uvijek navedite CSS reset stilove na samom početku koda, inače neke od opcija možda neće raditi zbog stilski prioriteti, koje postavljaju preglednici prilikom obrade HTML i CSS koda stranice.

Ponovno postavljanje CSS-a pomoću univerzalnog selektora

* ( font-family: inherit; /* svi elementi nasljeđuju font fonta od svog roditelja */ font-style: inherit; /* nasljeđuju stil */ font-weight: inherit; /* nasljeđuju podebljanost */ vertical-align : osnovna linija; /* okomito poravnanje s osnovnom linijom */ veličina fonta: 100% */ pozadina: prozirna */ obrub: 0; / obris: 0; /* uklanjanje obrisa */ margina: 0; /* uklanjanje margina */ padding: 0;

Opis primjera

U ovom primjeru, korištenjem univerzalni selektor navedeni stilovi se odmah poništavaju za sve HTML elemente koji će biti prisutni na stranici. Kao što vidite, većina svojstava navedena je samo radi sigurnosti, budući da njihove vrijednosti već odgovaraju onima koje preglednici trebaju postaviti prema zadanim postavkama prema CSS specifikaciji. Ali kao što već znate, u praksi je sve to potpuno pogrešno i ako je svojstvo doista naslijeđeno elementima od svojih roditelja u svim vodećim preglednicima, tada iste vanjske margine navedene svojstvom CSS nisu uvijek početno jednake nuli.

Ali veličine okvira (CSS) i obrisa (CSS) nisu standardno jednake nuli, već prema specifikaciji. Međutim, njihova je debljina također vraćena na nulu kako dizajner izgleda ne bi zaboravio to eksplicitno naznačiti gdje je to potrebno.

Poništi CSS s Yahooa!

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td ( margina: 0; padding: 0;) fieldset,img,abbr,acronym ( border: 0; ) address,caption,cite,code,dfn,em,strong,th,var (font-style: normal; font-weight: normal; ) table ( border-collapse: kolaps; /* uobičajeni obrubi za ćelije tablice */ border-spacing: 0; /* poništi udaljenost između ćelija */ ) caption,th ( text-align: lijevo; /* poravnaj tekst ulijevo * / ) ol,ul ( list-style: ništa; /* uklonite oznake popisa */ ) h1,h2,h3,h4,h5,h6 (font-size: 100%; font-weight: normal; ) q:prije, q :after ( content: ""; /* uklonite navodnike iz Q oznake */ )

Opis primjera

Tvrtka Yahoo svojedobno je razvila vlastitu verziju resetiranja stilova. Ovdje se svojstva pojedinih elemenata već mijenjaju, što omogućuje veću fleksibilnost u kontroli njihovog izgleda. Na primjer, ovdje su grafičke oznake uklonjene s popisa, a navodnici su uklonjeni iz oznaka pomoću CSS svojstva. Prednosti ovog pristupa su očite, ali nedostaci uključuju obimniji i ponekad redundantni kod. Ali nitko vas ne sprječava da promijenite bilo koji reset CSS-a kako bi odgovarao vašim potrebama. Recimo da možete ukloniti neke koje vam ne trebaju selektori oznaka ili ne samo ukloniti navodnike, već im odmah dati traženi izgled.

Ponovno postavljanje CSS-a od Erica Meyera

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,acronym,address,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,oznaka,legenda, tablica,naslov,tbody,tfoot,thead,tr,th,td,article,aside,canvas, detalji,ugradi,figura,figcaption,footer,header,hgroup,menu,nav, output,ruby, odjeljak,sažetak,vrijeme,oznaka,audio,video ( margina: 0; ispuna: 0; obrub: 0; veličina fonta: 100%; font: naslijediti; okomito poravnanje: osnovna linija; ) članak,na stranu,pojedinosti,naslov slike, figure, footer,header,hgroup,menu,nav,section ( display: block; /* napravi blok elemenata (za starije preglednike) */ ) body ( line-height: 1; /* prored teksta na stranici */ ) ol ,ul ( list-style: none; ) blockquote:before,blockquote:after, q:before,q:after ( content: ""; /* Uklonite navodnike iz Q i BLOCKQUOTE */ content: none; /* dodaj za dobru mjeru */ ) blockquote,q ( navodnici: nema; /* još jedan način za uklanjanje navodnika */ ) tablica ( border-collapse: kolaps; granični razmak: 0; )

Opis primjera

Još jednu metodu resetiranja CSS-a predložio je Eric Meyer, poznati web programer u određenim krugovima. Ovdje je već dodao reset stilova za oznake iz HTML 5, koji su, usput rečeno, u vrijeme pisanja ovog članka još uvijek bili vrlo slabo podržani od strane modernih preglednika. Ali uvijek treba gledati u budućnost, zar ne?

Zapravo, ovaj bi se članak mogao nastaviti na neodređeno vrijeme, jer, ponavljam još jednom, u određenom trenutku svaki dizajner izgleda dolazi do vlastite opcije resetiranja ili je uopće ne koristi, oslanjajući se na vlastitu pozornost.

  • Prijevod

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. Pomoću CSS Reset 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, dodaju 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. To se može učiniti na različite načine: 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, ne postoji vodič korak po korak za stvaranje vlastitog CSS Resetiranja. Oslonite se na vlastita načela i vlastiti stil.

Kako bismo vam pomogli da napravite pravi izbor, evo još nekoliko poveznica:

  1. 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 velik broj programera.

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 staviti u zasebnu datoteku (obično se zove reset.css). U ovom slučaju, možete ga koristiti u različitim projektima bez ikakvih 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:
  1. boja pozadine: #cccccc;
  2. boja: #996633;
  3. Ž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."

  • Prijevod

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. Pomoću CSS Reset 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, dodaju 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. To se može učiniti na različite načine: 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, ne postoji vodič korak po korak za stvaranje vlastitog CSS Resetiranja. Oslonite se na vlastita načela i vlastiti stil.

Kako bismo vam pomogli da napravite pravi izbor, evo još nekoliko poveznica:

  1. 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 velik broj programera.

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 staviti u zasebnu datoteku (obično se zove reset.css). U ovom slučaju, možete ga koristiti u različitim projektima bez ikakvih 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:
  1. boja pozadine: #cccccc;
  2. boja: #996633;
  3. Ž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."

Mnogi dizajneri prijeloma koriste tzv CSS Reset, koji služi za uklanjanje osobitosti različitih preglednika. Zapravo, ova stilska datoteka vraća sva CSS svojstva na zadane. U ovom ću članku pokazati kod ove datoteke i reći vam kako Trebam li koristiti CSS Reset ili ne?.

Vidio sam puno različitih CSS Reset, svi su otprilike isti. Možete koristiti ovaj:

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, font, 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, natpis, ttjelo, tpodnožje, oglas, tr, th, td (
pozadina: prozirna;
granica: 0;
veličina fonta: 100%;
margina: 0;
obris: 0;
ispuna: 0;
okomito poravnanje: osnovna linija;
}
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;
}
:usredotočenost (
obris: 0;
}
stol (
border-collapse: kolaps;
granični razmak: 0;
}

Mislim da je razlog njegove upotrebe već jasan, ali zašto ga, na primjer, ja ne koristim, kao i mnogi drugi dizajneri izgleda, vrijedi razgovarati. Prvo, ovo dodatna datoteka, drugo, višak vremena za obradu, ali što je najvažnije, sviđaju mi ​​se zadana svojstva. Na primjer, ista polja u tablici. Uostalom, sva zadana svojstva su napravljena s razlogom, ali kao najoptimalnija opcija za prikaz raznih elemenata. Uvjeravam vas, nakon resetiranja podstava za ćelije tablice, najvjerojatnije ćete ga vratiti u glavnoj datoteci. I daleko je od činjenice da će se vrijednost razlikovati od one koja je bila prema zadanim postavkama. Tako ispada da ga prvo uklonimo, a zatim vratimo. I zajedno s prvim nedostacima (dodatna datoteka i dodatni kod), mnogi dizajneri izgleda ne koriste CSS Reset.

svejedno, korištenje resetiranja stila nije loša stvar, tako da ga možete sigurno koristiti ako mislite da će pojednostavljenje prilagodbe stranice različitim preglednicima doista pojednostaviti vaš izgled u cjelini.

reci prijateljima