• Pārskaitījums

Šis raksts ir pirmais cikls CSS tēmas tēmā. Šodien mēs apskatīsim tehnoloģiju CSS atiestatīt..

Kāpēc jums tas ir nepieciešams?

Katrs pārlūks nosaka noklusējuma stilus dažādiem HTML elementiem. Ar CSS atiestatīšanas palīdzību mēs varam novērtēt šo atšķirību, lai nodrošinātu stilu pārrobežu pārlūkprogrammu.

Piemēram, jūs izmantojat objektu a. Dokumentā. Lielākā daļa pārlūku, piemēram, Internet Explorer. un Firefox pievienot saiti zila krāsa un straujš. Tomēr iedomājieties, ka piecu gadu laikā kāds nolēma izveidot jauna pārlūkprogramma (Zvanīsim ultrabrowser). Pārlūkprogrammas izstrādātājiem nepatika zilā un kaitinoša uzmanība, tāpēc viņi nolēma piešķirt saites sarkans un drosmīgs fonts. Tas ir balstīts uz to, ja iestatāt objekta stilu pamatvērtību a., tas tiks garantēts, kā jūs vēlaties to redzēt, nevis kā vēlams, lai parādītu attīstītājus Ultrabrowser.

Bet tagad mums nav nekādu ievilkumu vispār, tostarp starp atsevišķiem punktiem! Ko darīt? Nelietojiet meli un nebaidieties: zem mūsu budžeta izpildes apstiprināšanas mēs aprakstām noteikumu, kas mums nepieciešams. Padariet to var izdarīt dažādi ceļi: Norādiet ievilkumu no apakšpunktā vai virs rindkopas, norādiet to procentos, pikseļos vai em.

Vissvarīgākais, pārlūks tagad spēlē saskaņā ar mūsu noteikumiem, nevis mēs, pēc tā. Es nolēmu šādā veidā izdarīt:

* (Margin: 0; polsterējums: 0;) p (rezerve: 5px 0 10px 0;)

Tā rezultātā mums bija tas, ko varētu redzēt trešajā piemērā.

Jūs varat izveidot savus stilus reset, ja jūs atrisināt kādu konkrētu uzdevumu savā projektā. Neskatoties uz to, nav nē soli pa solim vadību Izveidojot savu CSS atiestatīšanu. Ieteikt saviem principiem un savu stilu.

Lai palīdzētu jums izdarīt izvēli, es sniegšu pāris vairāk saites:

1. Mazāk ir vairāk - mana izvēle reset CSS (Ed Eliot).

2. Jūsu CSS atiestatīšana ir pirmā lieta, lai redzētu pārlūkprogrammu

Atjaunot stilus pēc jūsu pašu stilu uzstādīšanas priekšmetiem ir nepareiza pieeja. Šajā gadījumā nekas nav labs gaidīt pārlūka displeju. Atcerieties, ka jūs vispirms vienmēr pievienojat CSS atiestatīšanu un pēc tam visus citus stilus.

Jā, es saprotu, ka tas bija smieklīgi, bet tas ir viens no galvenajām kļūdām attīstītājiem no malas lieliski. Daudzi vienkārši aizmirst par to.

Daži var uzdot loģisku jautājumu: kāpēc tas notiek? Atbilde ir vienkārša: Noteikumi, kas reģistrēti zem CSS faila tekstā (un pat zemāks par to savienojumu dokumentā), pārraksta iepriekš deklarētos noteikumus.

Netiksimies lielā mērā no tēmas un turpināt. Piesakies Eric Meyer stili mūsu piemērā, bet pēc Mūsu īpašumu apraksti, kā parādīts 4 piemēros. Matemātika teiktu: "Kas bija nepieciešams, lai pierādītu."

3. Izmantojiet atsevišķu CSS dokumentu CSS atiestatīšanai

Man ir (nē, viņi mani nepiešķira), lai pieminētu šo padomu. Izmantojot atsevišķu failu CSS atiestatīšanai ir izplatīta prakse, ka liels skaits izstrādātāju atbalsta.

Patiesībā es ievēroju radīšanas stāvokli viens liels CSS fails Šīs pieejas lielākas izpildes dēļ. Bet B. Šis jautājums Man ir tendence piekrist lielākajai daļai: CSS atiestatīšana jāņem atsevišķā failā (parasti sauc par reset.css). Šādā gadījumā to varat izmantot dažādos projektos, neveicot nekādus centienus filiālei no citiem CSS noteikumiem.

4. Mēģiniet izvairīties no universāla selektora lietošanas

Neskatoties uz to, ka šis jēdziens darbojas, tā piemērošana visbiežāk nav vēlama, jo nesaderība ar dažām pārlūkprogrammām (piemēram, šis selektors ir nepārtraukti apstrādāts Internet Explorer). Jums jāizmanto šī tehnika tikai vienkāršas, mazas, statiskas un paredzamas lapas (ja jums jau bija to darīt).

Šis padoms ir īpaši svarīgs, izstrādājot tādus risinājumus kā CMS tēmas. Jūs nevarat iepriekš prognozēt, kā tas tiks izmantots un kā tas tiks mainīts. Labāk ir aprakstīt CSS fundamentālos noteikumus par visiem priekšmetiem, nevis izmantot šo neparedzamo (pat mazāku universālo selektīvu) mehānismu.

5. Izvairieties no atlaistajām īpašībām, izmantojot CSS atiestatīšanu

Vēl viens iemesls, kāpēc man nepatīk atsevišķs fails CSS atiestatīšanai ir iespējamā atlaišana turpmāko CSS īpašumu deklarāciju. Jūsu stilu indivīdu atkārtošana starp visu CSS failu komplektu ir movietons un jāizvairās. Protams, dažreiz mēs esam pārāk slinki, lai sekotu līdzi stilam stilu un apvienotu dažas no tām, bet vismaz mēģiniet!

Atgriezīsimies pie CSS atiestatīšanas no Eric. Tā nosaka līnijas augstuma, krāsu un fona posteņa noklusējuma vērtības Ķermenis. Šādā veidā:

Ķermenis (līnijas augstums: 1; Krāsa: melna; fons: balts;)

Pieņemsim, ka jūs jau zināt, kā elements izskatīsies Ķermenis.:

1. fona krāsa: #CCCCCC;
2. krāsa: # 996633;
3. Jūs vēlaties horizontāli atkārtot konkrētu fona attēlu.

Šajā gadījumā nav nepieciešams izveidot jaunu selektoru, lai aprakstītu jūsu rekvizītus - jūs varat vienkārši iespējot tos CSS atiestatīšanā. Darīsim to:

Ķermenis (līnijas augstums: 1; Krāsa: # 996633; Priekšvēsture: #CCC URL (flīžu-image.gif) atkārtošana-x augšējā kreisajā pusē;)

Nebaidieties mainīt CSS atiestatīšanu. Iestatiet to sev, dariet to darbu pie sevis. Izmaiņas, atjaunot, noņemt un pievienot to, cik nepieciešams jūsu konkrētajā gadījumā.

Eric Meyer teica par to: "Tas nav gadījums, kad ikvienam jāizmanto CSS atiestatīšana bez izmaiņām."

Atiestatīt CSS. (Atiestatīšanas stili) ir nulles ar CSS, daži no HTML elementu parametriem, kurus pārlūkprogrammas ir instalētas pēc noklusējuma. Piemēram, šie elementi ietver punktus (tag), kas sākotnēji rada nulles vertikālos laukus (CSS), \\ t atzīmētie saraksti (Tag), kas nav tikai lauki, bet arī noteiktus tipa marķierus (CSS) un tā tālāk.

Tagad domāsim par to, kas jums ir nepieciešams šis atiestatīt CSS, ko viņš var dot mums? Nu, iedomājieties, ka jūs pagodinājāt jūsu vietnes lapas, un tajā pašā laikā nav mainījuši punktus, kurus pārlūkos pēc noklusējuma, jo to lielums ir pilnībā sakārtots. Bet pastāstiet man, lūdzu, un kur jūs nolēmāt, ka visas pasaules pārlūkprogrammas, kuras jau pastāv un joprojām parādās, radīs tāda paša izmēra laukus? Turklāt, kāpēc jūs domājat, ka pārlūkprogrammas, kurās jūs pārbaudījāt savu izkārtojumu, to nemainīsies nākamās versijas Šo lauku lielums vispār nav pilnībā noņemts? Jūtieties kādas smaržās?

Tātad, throwing CSS, panti ir vienkārši tikai no šādiem pārpratumiem, tas ir, viņi pirmo reizi reset visas "kritiskās" vērtības CSS īpašumu, un tad viņi to pievieno atpakaļ, bet ar saviem izmēriem. Tādējādi jūs varat būt pārliecināti, ka visās pārlūkprogrammās vietne izskatīsies vienādi. Jūs noteikti nevarat atiestatīt stilus, bet vienkārši iestatīt izkārtojumu nepieciešamie parametri Elementi, bet pastāv risks, ka kaut kur kaut kas tiks izlaists, un noteiktā brīdī viss "peld".

Pamatojoties uz iepriekš minēto, viena no CSS reljefa iezīmēm ir tas, ka pēc tās lietošanas daudzi HTML elementi zaudē savu parasto izskatu. Un, ja rindu zudums punktos ir iesācējiem, kaut kas gaidāms iesācējiem, tad, piemēram, fakts, ka pogas, kas izveidotas, izmantojot tagus vai pēkšņi kļuva ārēji līdzīgi parastajam tekstam - ir pilnīgs pārsteigums. Bet tas nedrīkst būt neērts, jo par šiem stiliem un tiek atiestatīti, lai Pedigreer tad neaizmirstiet tos norādīt jaunā.

Ir daudz veidu, kā atiestatīt stilus, un ko jūs izvēlaties - tas ir atkarīgs tikai no jums, bet es varu jums pateikt vienu - labākais atiestatīts ir tas, ko jūs izveidojāt sevi, pamatojoties uz jūsu pieredzi un paradumiem. Ja jums nav šādas pieredzes, varat izmantot kādu no turpmāk piedāvātajām iespējām.

Vienmēr norādiet stilus, lai atiestatītu CSS pašā koda sākumā, pretējā gadījumā daži parametri var nedarboties, jo stila prioritātesKas ir uzstādītas pārlūkprogrammas, apstrādājot HTML lapu un CSS kodu.

Atiestatiet CSS ar universālu selektoru

* (Fonts-ģimene: mantot; / * Visi elementi mantot no viņu mātes fonta austiņas * / fonta stila: mantot; / * mantot dizainu * / fonta svars: mantot; / * mantot tauku * / vertikālā sakārtota: bāzes līnija; / * vertikālā bāzes saskaņošana * / fonta izmērs: 100%; / * fonta izmērs 100% * / fons: caurspīdīgs; / * Visu elementu fona Caurspīdīga * / Robeža: 0; / * Noņemiet rāmi * / kontūra: 0; / * Noņemt kontūras * / rezerve: 0; / * Noņemiet laukus * / polsterējums: 0; / * Noņemt INDENS * /)

Piemēra apraksts

Šajā piemērā ar universāls selektors Noteiktie stili tiek atiestatīti uzreiz visos HTML elementos, kas būs klāt lapā. Kā redzat, lielākā daļa īpašības ir precīzi norādītas drošības tīklam, kā to vērtības un tā, ka pārlūkprogrammām pēc noklusējuma ir jāaizstāj saskaņā ar CSS specifikāciju. Bet, kā jūs jau zināt, praksē tas viss ir pilnīgi atšķirīgs, un, ja īpašumu patiešām manto elementi no saviem vecākiem visās vadošajās pārlūkprogrammās, tie paši ārējie lauki CSS īpašumā, ne vienmēr ir sākotnēji vienādi ar nulli.

Bet sistēmas (CSS) un kontūru (CSS) izmēri pēc noklusējuma nav nulles, bet jau saskaņā ar specifikāciju. Tomēr to biezums tika atiestatīts, lai mērītājs neaizmirsīs to skaidri norādīt, kur tas būtu nepieciešams.

Atiestatīt CSS no Yahoo!

Ķermenis, DIV, DL, DT, DD, UL, OL, LI, H1, H2, H3, H4, H5, H6, H3, H4, H5, H6, Pre, Forma, Fields, Input, Textarea, P, BlockQuote, TH, TD (rezerve: 0; Polsterējums: 0;) Fieldset, IMG, ABBR, Akronīms (robeža: 0;) Adrese, parakstu, Cite, kodu, DFN, EM, stipri, th, var (fonta stils: normāls; fonta svars: normāls;) tabula (Border-sabrukums: sabrukums; / * Kopīgās robežas tabulām tabulas * / Robežu atstatums: 0; / * Nulles attālums starp šūnām * /) parakstu, th (teksta saskaņošana: pa kreisi; / * teksta izlīdzināšana līdz kreisajai malai * /) ol, ul (saraksta stils: neviens; / * Noņemiet sarakstu marķierus * /) H1, H2, H3, H4, H5, H6 (fonta lielums: 100%; Fonta svars: normāls;) J: Pirms, Q: pēc (saturs: ""; / * Mēs atceļam citātus no atzīmes Q * /)

Piemēra apraksts

Yahu vienā reizē ir izstrādājusi savu acu atiestatīšanas versiju. Šeit īpašo elementu īpašības jau mainās, kas ļauj panākt lielāku elastību, kontrolējot tos. Ārējās sugas. Piemēram, marķieri tiek noņemti no sarakstiem, un tag ir citātus, izmantojot CSS īpašumu. Šīs pieejas priekšrocības ir acīmredzamas, bet mīnusi ietver vairāk apjomīgu un dažreiz lieku kodu. Bet neviens neļauj jums mainīt jebkuru CSS atiestatīšanu uz jūsu vajadzībām. Pieņemsim, ka jūs varat izdzēst kādu nevajadzīgu jums. atslēgvārdu selektori Vai ne tikai noņemt citātus, bet uzreiz uzdodiet viņiem nepieciešamo izskatu.

Atiestatīt CSS no Eric Meyer

HTML, ķermenis, div, span, sīklietotne, objekts, iframe, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, Abbr, Acronym, Adrese, Big, Cite, Code, DEL, DFN, Em, img, ins, kbd, q, s, Samp, mazs, streiks, spēcīgs, sup, sup, tt, var, b, u, i, centrs, dl, dt, dd, ol, ul, li, fieldset, Forma, etiķete, leģenda, galds, uzraksts, tbody, tfund, tead, tr, th, td, raksts, malā, audekls, detaļas, iegult, skaitlis, figaCaption, kājene, galvene, hgroup, izvēlne, nav, jauda, \u200b\u200brubīns, Sadaļa, kopsavilkums, laiks, marķējums, audio, video (rezerve: 0; polsterējums: 0; robeža: 0; fonta izmērs: 100%; fonts: mantojums; vertikālā sakara: bāzes līnija;) pants, atmatā, detaļas, figaCaption, Skaitlis, kājene, galvene, hgroup, izvēlne, NAV, sadaļa (displejs: / * Mēs izgatavojam bloka priekšmetus (veciem pārlūkiem) * /) korpusa (līnijas augstums: 1; / * līnijas atstarpe Teksts lapā * /) ul (saraksta stils: nav;) BlockQuote: Pirms, BlockQuote: Pēc, Q: Pirms, Q: pēc (saturs: ""; / * Noņemiet citātus Q un BlockQuote * / Saturs: Neviens; / * Pievienot lojalitātei * /) BlockQuote, Q (citāti: nav; / * Vēl viens veids, kā noņemt citātus * /) tabulu (robežu sabrukums: sabrukums; Robežu atstatums: 0;)

Piemēra apraksts

Nākamais veids, kā atiestatīt CSS ierosināja Eric Meyer (Eric Meyer) - Web izstrādātājs pazīstams dažos lokos. Šeit viņš jau ir pievienojis stilu atiestatīšanu tagiem no HTML 5, kas, starp citu, brīdī rakstot šo rakstu, un paši joprojām ir ļoti slikti atbalstīti mūsdienu pārlūkprogrammas. Bet jums vienmēr ir nepieciešams apskatīt perspektīvā, vai ne?

Faktiski šis raksts varētu turpināt bezgalību, jo, es atkārtoju vēlreiz, noteiktā brīdī, katrs gabarīts nāk uz viņa atbrīvošanas versiju vai neizmanto to vispār, paļaujoties uz tās uzmanību.

Daudzi verteri tiek izmantoti tā saukto CSS atiestatīt.kalpo, lai novērstu dažādu pārlūkprogrammu funkcijas. Faktiski, Šis fails Stili atiestata visus CSS noklusējuma īpašības. Šajā rakstā es parādīšu šī faila kodu un pateikt ir vērts izmantot CSS atiestatīšanu vai ne.

Es esmu redzējis daudz dažādu CSS atiestatīt.Visi no tiem ir aptuveni vienādi. To var izmantot:

HTML, ķermenis, div, span, sīklietotne, objekts, iframe,
H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre,
A, abbr, akronīms, adrese, liels, citēt, kods,
DEL, DFN, EM, Fonts, IMG, INS, KBD, Q, S, SAMP,
Mazs, streiks, spēcīgs, sub, sup, tt, var,
B, u, es, centrs,
DL, DT, DD, OL, UL, LI,
Lauks, forma, etiķete, leģenda,
Galds, paraksti, tbody, tfoot, tead, tr, th, td (
Pamatinformācija: caurspīdīgs;
Robeža: 0;
Fonta lielums: 100%;
Margin: 0;
Kontūra: 0;
Polsterējums: 0;
Vertikālā sakārtošana: bāzes līnija;
}
Korpuss (
Līnijas augstums: 1;
}
Ol, ul (
Saraksta stils: Nav;
}
Bloķēt, q (
citāti: nav;
}
Blockquote: Pirms, bloķēt: pēc,
J: Pirms, Q: pēc (
Saturs: "";
Saturs: Nav;
}
: fokuss (
Kontūra: 0;
}
Tabula (
Robežu sabrukums: sabrukums;
Robežu atstatums: 0;
}

Es domāju, ka tā izmantošana ir saistīta ar un saprotamu, bet kāpēc, piemēram, es nelietoju, tāpat kā daudzi citi vertikeri, ir vērts pastāstīt par to. Pirmkārt, tas ir papildu fails, Otrkārt, saprašana Apstrādei, bet vissvarīgākais - man patīk noklusējuma īpašības. Piemēram, tās pašas jomas pie galda. Galu galā, visas noklusējuma īpašības ne tikai tāpat kā visvairāk optimāla iespēja Dažādu elementu parādīšana. Es jums apliecinu, atiestatīt polsterējums. Tabulas šūnas, visticamāk, jūs to atgriezīsiet galvenajā failā. Un tālu no fakta, ka vērtība atšķirsies no tā, kāda bija noklusējuma. Tāpēc izrādās, ka mēs to vispirms tīrīt, un tad tas pats atgriešanās. Un kopā ar pirmajiem trūkumiem (papildu failu un papildus kodu), daudzi vertelleri netiek izmantoti vispār. CSS atiestatīt..

Jebkurā gadījumā, izmantojot stila izlādes nav sliktaLai jūs varētu droši izmantot, ja jūs domājat, ka vietnes pielāgošanās vienkāršošana dažādās pārlūkprogrammās tiešām vienkāršos jūs kopumā.

Ikvienam ir iepriekš instalēti noteikumi, lai izstrādātu tīmekļa lapas un elementus uz tiem (lietotāja aģents stylesheet) automātiski pievienots pēc noklusējuma. Tomēr lielākā daļa no vestoru, veidojot jaunu projektu, pievieno īpašu failu atiestatīšana. CSS, kas padara pilnu CSS stilu atiestatīšanu un ļauj izstrādātājiem izveidot ar "tīru lapu". Kāpēc un kā tas viss ir izdarīts - siets pašreizējā rakstā.

Ja paskatās uz attēla priekšskatījumu pastu, jūs redzēsiet, ka parastā līnija Safari, Chrome un Firefox tiek parādīts pilnīgi. dažādos veidos. Jā, dažreiz noteikumi, kas tiem sakrīt, piemēram, visi slēpt galvas tagu caur displeju: nav iespējams, tomēr daudzos gadījumos ir nopietnas atšķirības, kad atveidojot objektus lapā. Man ir aizdomas, ka daži no jūsu klientiem var nebūt līdzīgi, kad izkārtojuma galīgā versija nav līdzīga izkārtojumam.

Tāpēc, ja esat iesācēju tīmekļa izstrādātājs, publikācija būs nepārprotami noderīga vispārējai attīstībai. Tā ir tulkojums šajā piezīmē ar pārskatu par CSS atjauno apstākļus 2018. gadā. Esmu pārliecināts, ka 2019. gadā un vēlāk tas viss joprojām būs būtisks, jo Šis temats jau ir bijis vairāk nekā 10 gadus (no pirmā līdzīgā risinājuma izlaišanas brīža).

Kāpēc jums ir nepieciešams atiestatīt CSS iestatījumus

Kā jūs jau sapratāt no pievienošanās, tie ļauj novērst paplašinājumu starp galvenajiem stiliem tīmekļa pārlūkprogrammas un vadīt tos uz vienu plus-mīnus standartizētu prātu. Vienmēr piemērojiet pašā sākumā uz citiem pielāgotiem notikumiem. Rakstā Erik Meyer par Reset CSS pirms desmit gadiem, galvenais iemesls šai pieejai ir minēts, kuri joprojām ir svarīgi:

Problēma ir tā, ka dažādām pārlūkprogrammām ir noklusējuma iestatījumi, un visi no tiem nav vienādi. Mēs domājam, ka mūsu kods maina sākotnējo lapu dizainu, bet tas nav pilnīgi tik, un, izmantojot atiestatīšanas failus, mēs varam padarīt šo standarta dokumenta veidu vairāk montējošu visām programmām. Tāpēc būs mazāk laika tērēt cīņai pret pamata iekārtas Firefox, Hroms, utt pēc noklusējuma.

Bet tagad situācija ir mazāk pretrunā izkārtojumam?

Jā, protams, mūsu laikā daudzi parametri lietotāju aģentā ir kļuvuši līdzīgāki. Gandrīz visur galvene H1 nosaka fonta izmēru 2em un horizontālo ievilkumu 0,67em. Tomēr tās ir salīdzinoši jaunas izmaiņas, un vismaz ir jāņem vērā veco programmu versiju atbalsts, kur nav šādas konsekvences.

Turklāt dažos gadījumos, atkarībā no CSS nulles veida (par to zemāk), šī mikroshēma joprojām ir noderīga mums pat tad, ja tika izskatītas tikai mūsdienīgas tīmekļa pārlūkprogrammas.

Bet vai mēs pielietojam mūsu stilus, pārsniedzot pamata?

Šī pieeja ir viens no šīs pieejas pretinieku galvenajiem abstraktiem - jebkurā gadījumā tie vai citi parametri tiek aizstāti ar savu stilu.CSS, tad kāpēc pievienot vēl vienu papildu failu un samazināt? Neskatoties uz to, ka šajā frāzē ir jēga, atiestatīšanas izmantošana ir pamatota ar diviem momentiem:

• Pirmkārt, tas palīdz uzrakstīt tīrāku kodu. Mēs varēsim sadalīt to vairākās daļās: atsevišķi dizainu tīmekļa projektu un noteikumu kopumu, kas orientēti saskaņā ar konkrētu pārlūkprogrammu specifiku. Tas nav kāpt uz galveno CSS failu ar visu veidu IE hacks, utt
• Otrkārt, visas atiestatījumi ir ļoti maz, un to lejupielādei nav nepieciešama liels skaits laiks.

Veidi CSS atiestatīt (jūs varat lejupielādēt saites rakstā)

Sākot no 2004. gada attāluma, kad parādījās pirmais šāds notikums, tagad ir diezgan daudz metodes, kas atšķiras ar grūtībām un to specifiku. Faktiski ir 3 mērķi, kuri cenšas atrisināt CSS stilu atiestatīšanu:

1. Fix kļūdu lietotāja aģenta stilu.
2. Nestandarta oriģinālā dizaina anulēšana interneta pārlūkprogrammās.
3. Izveidojot universālu saderīgu stila bāzi.

Ir iespējas, kas izlemj visus trīs uzdevumus un tos, kas ir asināti tikai vienā konkrētā problēma.

Korekcijas / kļūdu korekcija

Apsveriet pirmās iepriekš izteiktos mērķus. Kā jūs jau saprotat, dažādu trūkumu un pārlūku trūkumu novēršana ir visbiežāk atbalstīt novecojušus izlaidumus. Viens no labajiem piemēriem šādā situācijā - kad pēc izskatu HTML5 to pašu Internet Explorer 9 nav piemērot pareizo veidu displeja jauniem objektiem.

Tāpēc, risinājumos pēc veida normalizēt.CSS, visas kļūdas tiek ņemtas vērā un apstrādāti:

/ ** * Pievienojiet pareizo displeju IE. * Galvenais (displejs: bloks;)

/ ** * Pievienojiet pareizo displeju IE. * / Main (displejs: bloks;)

Tā kā šie pasākumi ir nepieciešami tikai vecajai programmatūrai, ir lietderīgi izmantot Postcss postprocessor, piemēram, Postcss normalizēt kopā ar browserlist, lai tos pievienotu tikai tad, ja jums ir nepieciešams, lai īstenotu dažu pārlūkprogrammu atbalstu.

Vēl viens piemērs kodu no tīra CSS, kas ir piemērots, tostarp modernas tīmekļa programmas - noteikt displeja elementus un atribūtu slēptu.

[Hidden] (displejs: Nav svarīgi; // viens no labajiem lietošanas gadījumiem! }

(Displejs: Neviens! Svarīgi; // Viens no labajiem lietošanas gadījumiem!

Noņemiet pārlūkprogrammu savdabīgos stilus

Šis ir otrais iemesls CSS iestatījumu atiestatīšanai. Principā katrs no viņu viedokļiem par to, ko izpilde lietotāju aģentu stilu tiek uzskatīta par "savdabīgu". Autora definīcija sākotnējā piezīme ir diezgan loģiska: tas ir stils, kas nav elementa displeja "kails" versija.. Piemēram, pievienojot ievilkumus virsrakstiem 2EM (cik daudz to darīt), ideja nav slikta, bet kāpēc tas ir 2em, nevis 3em vai ne 4em. Šajā gadījumā pamata variants būtu bez jebkāda biežuma neesamība, nulles rezerve.

Vienkāršākais universāla pieejaIetekiņu / lauka tagu noņemšana:

* (Margin: 0; polsterējums: 0;)

* (Margin: 0; polsterējums: 0;)

Šī metode ir pārāk radikāla, jo Attiecas uz visiem objektiem, pat ja jūs negaidiet (tajā pašā ievadīšanā). Alternatīvi, bieži izmanto Eric Meyer Reset CSS, kas novērš rezerves / polsterējuma, robežu un fonta lieluma parametrus (0 vai nav), kur tas ir loģiski pamatots:

HTML, ķermenis, div, span, sīklietotne, objekts, iframe, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, Abbr, Acronym, Adrese, Big, Cite, Code, DEL, DFN, Em, img, ins, kbd, q, s, Samp, mazs, streiks, spēcīgs, sup, sup, tt, var, b, u, i, centrs, dl, dt, dd, ol, ul, li, fieldset, Forma, etiķete, leģenda, galds, uzraksts, tbody, tfund, tead, tr, th, td, raksts, malā, audekls, detaļas, iegult, skaitlis, figaCaption, kājene, galvene, hgroup, izvēlne, nav, jauda, \u200b\u200brubīns, Sadaļa, kopsavilkums, laiks, marķējums, audio, video (rezerve: 0; polsterējums: 0; robeža: 0; fontu izmērs: 100%; fonts: mantojums; vertikāls - saskaņot: bāzes līnija;)

hTML, ķermenis, div, span, sīklietotne, objekts, iframe, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, Abbr, Acronym, Adrese, Big, Cite, Code, DEL, DFN, Em, img, ins, kbd, q, s, Samp, mazs, streiks, spēcīgs, sup, sup, tt, var, b, u, i, centrs, dl, dt, dd, ol, ul, li, fieldset, Forma, etiķete, leģenda, galds, uzraksts, tbody, tfund, tead, tr, th, td, raksts, malā, audekls, detaļas, iegult, skaitlis, figaCaption, kājene, galvene, hgroup, izvēlne, nav, jauda, \u200b\u200brubīns, Sadaļa, kopsavilkums, laiks, marķējums, audio, video (rezerve: 0; polsterējums: 0; robeža: 0; fonta lielums: 100%; fonts: mantojums; vertikālā sakārtošana: bāzes līnija;)

Ignorēt stilus

Atšķirībā no iepriekšējās sadaļas, šeit galvenais uzdevums nav atiestatīt CSS no dažiem objektiem, bet ignorēt tos ar savām pašreizējām vērtībām.

Piemēram, tā vietā, lai iestatītu visu izmēru 1M un margins \u003d 0 sanitize.css, citas vērtības ir iestatītas:

/ ** * Labojiet fonta lielumu un margas on` H1` elementus `sadaļā" un * `rakstu" kontekstos Chrome, Firefox un Safari. * H1 (fonta izmērs: 2em; starpība: 0. 67EM 0;)

/ ** * Labojiet fonta lielumu un margas on` H1` elementus `sadaļā" un * `rakstu" kontekstos Chrome, Firefox un Safari. * / H1 (fonta lielums: 2em; starpība: 0,67em 0;)

Bootstrap atsāknēšana atradīs citu ilustrāciju pašreizējā uzdevumā. Izstrādātāji devās nedaudz tālāk un parakstījuši fontus un fona krāsu ķermenim.

// ķermenis // // 1. Noņemiet rezervi visās pārlūkprogrammās. // 2. Kā labākā prakse, piemērojiet noklusējuma "fona krāsu" / 3. Iestatiet skaidru sākotnējo teksta saskaņotību, lai mēs varētu vēlāk izmantot // "mantot" vērtību par lietām, piemēram, "	`Elementi. Virsbūve (rezerve: 0; // 1 Font- Ģimene: $ fonts - ģimenes bāze; Font- Izmērs: $ fonts - izmērs; Font- Svars: $ fonts - svars; Line augstums: $ Line - Augstums - bāze; Krāsa: $ virsbūve - Krāsa; Teksta saskaņošana: pa kreisi; // 3 Background - Krāsa: $ Body - BG; // 2)

// ķermeņa // // 1. Noņemiet rezervi visās pārlūkprogrammās. // 2. Kā labākā prakse, piemērojiet noklusējuma "fona krāsu" 3. Iestatiet skaidru sākotnējo teksta saskaņotību, lai mēs vēlāk varētu izmantot // "mantojuma vērtību par lietām, piemēram," `Elementi. Ķermenis (rezerve: 0; // 1 fonta ģimene: $ fonta-sejas bāze; fonta lielums: $ fonta izmēra bāze; fonta svars: $ fonta svara bāze; līnijas augstums: $ line augstums -Base; Krāsa: $ ķermeņa krāsa; Teksta izlīdzināšana: pa kreisi; // 3 fona krāsa: $ ķermeņa-bg; // 2)

KOPĀ. Ko izvēlēties

Sākotnējā piezīmē ir rezultāts atbilstošā aptauja no

Šajā rakstā mēs runājam par stilu atiestatīšanu un apsvērsiet piemēru, kā izveidot šādu atiestatīšanu.css failu.

Ideja par stilu izmetšanu parādījās apmēram pirms 10 gadiem. Kas faktiski secināja, ka ar nelielu CSS stilu komplektu, cēla skatu uz lapu visās pārlūkprogrammās uz to pašu. Protams, tas ne vienmēr strādā, bet daži mirkļi var tikt izlaboti - piemēram, robeža nesaprot, kur IE, kas notiek dažās versijās. Vai zilā insulta (kontūra) laukos.

Ne par vienu front-end attīstītājs nav noslēpums, ka pārlūkprogrammas ir ļoti picky un katru procesu hTML elementi Savā veidā, pievienojot savu standarta stilus.

Tā kā šīs idejas ilgu laiku aizdedzināja uguni, tas nav pārsteigums, ka jau ir gatavie faili Atjaunot, parasti sauc par reset.css un izveidojiet savienojumu ar visiem projektiem.

Kāpēc atsevišķs fails? Jā, tikai tāpēc, ka tas ir ērtāk nodot tos no projekta uz projektu.

Šeit ir piemērs reset.CSS no 2007. gada:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licence: Nav (publisks domēns) * / HTML, ķermenis, div, span, sīklietotne, objekts, IFRAME, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, Abbr, Acronym, adrese, Liels, citēt, kods, del, DFN, em, img, ins, kbd, q, s, Samp, mazs, streiks, spēcīgs, sub, sup, tt, var, b, u, i, tt, var, b, U, I, Centrs, DL, DT, DD, OL, UL, LI, Fieldset, forma, etiķete, leģenda, galds, uzraksts, tbood, tfoot, tead, tr, th, td, raksts, malā, audekls, detaļas, Iegult, skaitlis, figaCaption, kājene, galvene, hgroup, izvēlne, NAV, izejas, rubīna, sadaļa, kopsavilkums, laiks, marķējums, audio, video (rezerve: 0; polsterējums: 0; robeža: 0; fonta lielums: 100% ; Fonts: mantojums; vertikālā sakārtota: bāzes līnija;) / * HTML5 displeja lomu reset vecākiem pārlūkiem * / raksts, malā, detaļas, figaCaption, skaitlis, kājene, galvene, hgroup, izvēlne, NAV, sadaļa (displejs: bloks; ) Virsbūve (līnijas augstums: 1;) ul, ul (saraksta stils: nav;) Blockquote, Q (citāti: nav;) BlockQuote: Pirms, BlockQuote: Afterter, Q: Pirms, Q: pēc (saturs: ""; Saturs: Nav;) Tabula (robežu sabrukums: C. Olapse; Robežu atstatums: 0; )

Tas ir tikai šī faila standarts, ko veic noteikta tīmekļa izstrādātāju lokā.

Es jums ieteiktu, vai esat pieredzējis programmētājs vai tikai iesācējs, lai izstrādātu jūsu reset failu. Kā pamatu jūs varat veikt iepriekš aprakstīto standartu, papildiniet to ar saviem selektoriem vai mainīt esošos. Šeit ir šāda faila piemērs, ko es pats izstrādāju:

ievade, textarea, a, poga, izvēlieties (kontūra: nav) img (robeža: nav;) HR (skaidrs: abi; robeža: nav; Priekšvēsture: nav;) * (fona atkārtošana: nav atkārtot;) / * html5 Displeja lomu atiestatīšana vecākiem pārlūkiem * / raksts, malā, detaļas, figaCaption, skaitlis, kājene, galvene, hgroup, izvēlne, NAV, sadaļa (displejs: bloks;) korpuss (līnijas augstums: 1;) ol, ul (saraksts -Style: nav; rezerve: 0; polsterējums: 0;) blokhquote, q (citāti: nav;) blokquote: pirms, bloķēt: pēctera, Q: Pirms, Q: pēc (saturs: "; saturs: nav;) tabula (Robežu sabrukums: sabrukums; Robežu atstatums: 0;)

Jūs varat KIP jebkuru no iepriekš minētajiem kodiem personiskai lietošanai, bet, ja jūs to izmantojat jūsu rakstos - ievietojiet saiti uz avotu.