• Տեղափոխել

Այս հոդվածը ցիկլից առաջինն է CSS Taming- ի թեմայով: Այսօր մենք կանդրադառնանք տեխնոլոգիային CSS վերականգնել:.

Ինչու է ձեզ հարկավոր:

Յուրաքանչյուր զննարկիչ սահմանում է իր լռելյայն ոճերը տարբեր HTML տարրերի համար: CSS- ի վերականգնման միջոցով մենք կարող ենք մակարդակ ունենալ այս տարբերությունը `ոճերի խաչի զննարկիչը ապահովելու համար:

Օրինակ, ապրանք եք օգտագործում Ա Ձեր փաստաթղթում: Բրաուզերների մեծ մասը դուր է գալիս Internet Explorer. եւ Firefox Ավելացնել հղում Կապույտ գույն մի քանազոր Սուր, Այնուամենայնիվ, պատկերացրեք, որ հինգ տարի հետո ինչ-որ մեկը որոշեց ստեղծել Նոր զննարկիչ (Եկեք այն անվանենք Ultrabrosser): Զննարկչի մշակողները դուր չեն եկել կապույտ եւ նյարդայնացնում շեշտը, ուստի նրանք որոշեցին հղումներ հատկացնել Կարմիր մի քանազոր համարձակ տառատեսակ, Դա հիմնված է դրա վրա, եթե նյութի համար ստեղծեք ոճերի հիմնական արժեքը Ա, Երաշխավորված կլինի այնպիսին, ինչպիսին ուզում եք տեսնել, եւ ոչ այնքան նախընտրելի է ցուցադրել ուլտրաբրահովվածների մշակողները:

Բայց հիմա մենք ընդհանրապես չունենք աններ, ներառյալ անհատական \u200b\u200bպարբերությունների միջեւ: Ինչ անել? Մի ստեք եւ մի վախեցեք. Մեր արտանետման ներքեւում մենք նկարագրում ենք մեր անհրաժեշտությունը: Ստիպեք դա անել տարբեր ճանապարհներՆշեք կետից ներքեւից կամ վերեւից ներքեւից, նշեք այն տոկոսով, պիքսելներով կամ em- ում:

Ամենակարեւորը, զննարկիչը այժմ խաղում է մեր կանոնների համաձայն, եւ ոչ թե մենք դրա համաձայն: Ես որոշեցի այս ձեւով կատարել.

* (0; 0; լիցք, 0;) p (լուսանցքը `5px 0 10px 0;)

Արդյունքում մենք ունեինք այն, ինչ կարելի էր տեսնել երրորդ օրինակով:

Դուք կարող եք ստեղծել ձեր սեփական ոճերը վերակայման համար, եթե ձեր նախագծում որոշակի որոշակի խնդիր եք լուծում: Չնայած դրան, չկա Քայլ առ քայլ ղեկավարություն Ստեղծելով ձեր սեփական CSS վերականգնումը: Առաջարկեք ձեր սեփական սկզբունքներին եւ ձեր սեփական ոճին:

Որպեսզի ընտրություն կատարեք, ես եւս զույգի հղումներ կտամ.

1. Ավելի քիչ է ավելին `վերականգնելու CSS (Ed Elliot) իմ ընտրությունը:

2. Ձեր CSS Reset- ը զննարկիչը տեսնելու առաջին բանն է

Վերականգնել ոճերը ձեր սեփական ոճերը իրերը տեղադրելուց հետո, սխալ մոտեցում է: Այս դեպքում ոչ մի լավ բան չպետք է սպասել զննարկչի ցուցադրմանը: Հիշեք, որ դուք առաջին հերթին միշտ կապում եք CSS վերականգնումը, իսկ հետո մնացած բոլոր ոճերը:

Այո, ես հասկանում եմ, որ ծիծաղելի էր, բայց սա Մալայի մշակողների գլխավոր սխալներից մեկն է: Շատերը պարզապես մոռանում են դրա մասին:

Ոմանք կարող են տրամաբանական հարց տալ. Ինչու է այն շարունակվում: Պատասխանը պարզ է. CSS ֆայլի տեքստի տակ գրանցված կանոնները (եւ նույնիսկ փաստաթղթերում իրենց կապից ցածր), վերաշարադրել ավելի վաղ հայտարարված կանոնները:

Եկեք մեծապես չշարժենք թեմայից եւ շարունակենք: Կիրառեք Էրիկ Մեյերի ոճերը մեր օրինակին, բայց հետո Մեր հատկությունների նկարագրությունները, ինչպես ցույց է տրված 4 օրինակով: Մաթեմատիկան կասեր հետեւյալը. «Այն, ինչ պահանջվում էր ապացուցել»:

3. Օգտագործեք CSS առանձին փաստաթուղթ CSS վերականգնելու համար

Ես պետք է (ոչ, նրանք ինձ ստիպեցին) նշել այս խորհուրդը: CSS Reset- ի առանձին ֆայլ օգտագործելը սովորական պրակտիկա է, որ մեծ թվով մշակողների աջակցում են:

Իրականում ես հավատարիմ եմ ստեղծագործության դիրքին մեկ մեծ CSS ֆայլ Այս մոտեցման ավելի մեծ կատարման պատճառով: Բայց Բ. Այս հարցը Ես հակված եմ առավելագույնս համաձայնել. CSS վերականգնումը պետք է ընդունվի առանձին ֆայլի մեջ (սովորաբար կոչվում է Reset.css): Այս դեպքում դուք կարող եք օգտագործել այն տարբեր նախագծերում, առանց որեւէ ջանք գործադրելու CSS այլ կանոններից:

4. Փորձեք խուսափել Universal Selector- ից օգտվելուց

Չնայած այն հանգամանքին, որ այս հայեցակարգը գործում է, դրա դիմումը ամենից հաճախ ցանկալի չէ որոշ զննարկիչների հետ անհամատեղելիության պատճառով (օրինակ, այս ընտրիչը սխալ է վերամշակվում Internet Explorer- ում): Դուք պետք է օգտագործեք այս տեխնիկան միայն պարզ, փոքր, ստատիկ եւ կանխատեսելի էջերի համար (եթե արդեն դա անեք):

Այս խորհուրդը հատկապես կարեւոր է, երբ զարգացնում եք լուծումներ, ինչպիսիք են CMS թեմաները: Նախապես չեք կարող կանխատեսել, թե ինչպես այն կօգտագործվի եւ ինչպես է այն փոփոխվելու: Ավելի լավ է նկարագրել CSS- ի հիմնարար կանոնները բոլոր ապրանքների համար, քան օգտագործել այս անկանխատեսելի (նույնիսկ ավելի փոքր ծավալի) մեխանիզմը համընդհանուր ընտրողների համար:

5. Խուսափեք ավելորդ հատկություններից, CSS վերականգնում օգտագործելիս

Մեկ այլ պատճառ, թե ինչու չեմ սիրում CSS- ի վերակայման առանձին ֆայլը CSS հատկությունների հետագա հայտարարագրերի հավանական ավելորդությունը: Ձեր ոճերի անհատների կրկնությունը CSS ֆայլերի ամբողջ շարքում շարժիչոն է եւ պետք է խուսափել: Իհարկե, երբեմն մենք չափազանց ծույլ ենք, որպեսզի շարունակենք ոճերի ոճը եւ համատեղենք դրանցից մի քանիսը, բայց գոնե փորձեք:

Եկեք վերադառնանք ERIC- ի CSS- ի վերակայմանը: Այն սահմանում է լռելյայն արժեքներ գծի բարձրության, գույնի եւ ֆոնի կետի համար Մարմին: Հաջորդ ձեւով.

Մարմինը (գծի բարձրությունը, 1; Գույն, սեւ; ֆոն. Սպիտակ;)

Ենթադրենք, արդեն գիտեք, թե ինչպես է նման տարիքը նման Մարմին::

1. Նախապատմություն-գույն. #CCCCCC;
2. Գույն, # 996633;
3. Դուք հորիզոնական եք ուզում կրկնել որոշակի ֆոնային պատկեր:

Այս դեպքում անհրաժեշտ չէ ստեղծել նոր ընտրող, ձեր հատկությունները նկարագրելու համար. Դուք պարզապես կարող եք դրանք միացնել CSS- ի վերակայմամբ: Եկեք անենք դա:

Մարմինը (գծի բարձրությունը. 1; Գույն, # 996633; ֆոն. #Ccc url (սալիկապատ պատկեր. Գ) կրկնել-x վերեւի ձախ;)

Մի վախեցեք փոփոխել CSS- ի վերակայումը: Ստեղծեք այն ինքներդ ձեզ համար, դարձրեք այն աշխատեք ինքներդ ձեզ վրա: Փոխեք, վերակառուցեք, հեռացրեք եւ ավելացրեք այն ձեր անհրաժեշտության դեպքում:

Այս մասին Էրիկ Մեյերը ասաց. «Դա այն դեպքը չէ, երբ բոլորը պետք է օգտագործեն CSS վերականգնել առանց փոփոխությունների»:

Վերականգնել CSS- ը: (Վերականգնել ոճերը) զրոյական է CSS- ով, HTML տարրերի որոշ պարամետրեր, որոնք զննարկիչները տեղադրվում են լռելյայն: Օրինակ, այս տարրերը պարունակում են պարբերություններ (պիտակ), որոնք ի սկզբանե ներկա են Nonzero ուղղահայաց դաշտերը (CSS), Նշված ցուցակները (Պիտակ), որը չունի միայն դաշտեր, այլեւ որոշակի տիպի մարկեր (CSS) եւ այլն:

Հիմա եկեք մտածենք այն, ինչ ձեզ հարկավոր է CSS CSS, ինչ կարող է տալ մեզ: Պատկերացրեք, որ դուք փառաբանեցիք ձեր կայքի էջերը եւ միեւնույն ժամանակ չեք փոխել այն կետերի դաշտերը, որոնք լռելյայն առաջարկվում են դրանց չափը: Բայց ասեք ինձ, խնդրում եմ, եւ որտեղ եք որոշել, որ աշխարհի բոլոր զննարկիչները, ովքեր արդեն գոյություն ունեն եւ դեռ հայտնվում են, կստեղծեն նույն չափի դաշտեր: Ավելին, ինչու եք կարծում, որ զննարկիչները, որոնցում փորձարկել եք ձեր դասավորությունը, նրանց մեջ չի փոխվի Հաջորդ տարբերակները Այս ոլորտների չափը բոլորովին էլ ամբողջովին հանված չէ: Զգալ ինչ հոտ է գալիս:

Այսպիսով, CSS- ը նետելը, համարները պարզապես սահմանափակվում են նման թյուրիմացություններից, այսինքն, նրանք առաջին հերթին վերականգնում են CSS հատկությունների բոլոր «կրիտիկական» արժեքները, եւ հետո դրանք ավելացնում են այն, բայց իրենց չափերով: Այսպիսով, դուք կարող եք վստահ լինել, որ բոլոր զննարկիչներում կայքը հավասարապես տեսք կունենա: Դուք, անշուշտ, չեք վերականգնում ոճերը, բայց պարզապես դասավորությունը սահմանելու համար Անհրաժեշտ պարամետրերը Տարրեր, բայց կա ռիսկ, որ ինչ-որ տեղ ինչ-որ բան կարոտվի եւ որոշակի պահի ամեն ինչ «լողում է»:

Ելնելով վերոհիշյալից, CSS Relief- ի առանձնահատկություններից մեկը այն է, որ դրա օգտագործման ավարտից շատ HTML տարրեր կորցնում են իրենց սովորական տեսքը: Եվ եթե պարբերություններում առկա դաշտերի կորուստը սկսնակների համար է, սկսնակների համար ինչ-որ բան սպասվում է, ապա, օրինակ, այն փաստը, որ կոճակները ստեղծում են պիտակների օգտագործմամբ կամ հանկարծակի են դարձել սովորական տեքստին, ամբողջական անակնկալ է: Բայց սա չպետք է ամաչի, քանի որ այդ ոճերի համար եւ վերափոխվում են, այնպես որ ոտնահարողը այդ ժամանակ չի մոռացել նորը նշել դրանք:

Ձողիկներ վերափոխելու շատ եղանակներ կան, եւ ինչ եք ընտրում, դա կախված է միայն ձեզանից, բայց ես կարող եմ ձեզ ասել, որ դուք ինքներդ եք ստեղծել, ձեր փորձի եւ սովորությունների հիման վրա: Եթե \u200b\u200bդեռ նման փորձ չունեք, կարող եք օգտագործել ստորեւ առաջարկվող տարբերակներից մեկը:

Միշտ նշեք ոճերը `CSS- ը վերականգնելու համար ծածկագրի հենց սկզբում, հակառակ դեպքում որոշ պարամետրեր կարող են չաշխատել, քանի որ Ոճի առաջնահերթություններըորոնք տեղադրված են զննարկիչներ HTML էջի եւ CSS ծածկագիրը մշակելիս:

Վերականգնել CSS- ը համընդհանուր ընտրողի հետ

* (Տառատեսակ-ընտանիք. Ժառանգություն; / * Բոլոր տարրերը, որոնք ժառանգում են իրենց ծնողական տառատեսակի ականջակալից * / տառատեսակ ոճը. * / * Ժառանգել դիզայնը * / * ժառանգել. Ելակետ; / * Ուղղահայաց ելակետային հավասարեցում * / Տառատեսակի չափը, 100%; / * Տառատեսակի չափը 100% * / * Թափանցիկ. 0; / * Հեռացրեք. 0; / * Հեռացրեք ուրվագիծը * / լուսանցք. 0; / * Հեռացրեք դաշտերը * / լիցք. 0; / * Հեռացրեք կետերը * /)

Օրինակի նկարագրությունը

Այս օրինակում Ունիվերսալ ընտրիչ Նշված ոճերը անմիջապես վերականգնում են HTML բոլոր տարրերը, որոնք ներկա կլինեն էջում: Ինչպես տեսնում եք, մեծամասնությունը ճշգրտորեն նշվում է անվտանգության ցանցի համար, որպես դրանց արժեքներ, եւ որ զննարկիչները պետք է փոխարինեն լռելյայն `համաձայն CSS ճշգրտման: Բայց ինչպես արդեն գիտեք, գործնականում, այս ամենը բոլորովին այլ է, եւ եթե գույքն իսկապես ժառանգվում է իր ծնողների տարրերով, բոլոր առաջատար բրաուզերում, միշտ չէ, որ նախապես հավասար է զրոյի:

Բայց շրջանակի (CSS) եւ ուրվագծերի չափերը (CSS) լռելյայն զրո չեն, բայց արդեն ըստ ճշգրտման: Այնուամենայնիվ, դրանց հաստությունը վերափոխվել է, այնպես որ ջրաչափը չի մոռանա հստակ նշել այն, որտեղ անհրաժեշտ կլինի:

Վերագործարկեք CSS- ը Yahoo!

Մարմին, Div, DL, DT, DD, UL, OL, LI, H1, H2, H6, H4, H5, H6, Pre, Form, Fieldset, մուտք, տեքստար, P, BlockQuote, Th, TD (լուսանցք. 0; Լիցք, 0;) դաշտը, IMG, ABBR, հապավում (սահման, 0;) Հասցե, վերնագիր, մեջբերում, Կոդ, DFN, VAR (տառատեսակ, նորմալ; տառերով) (Սահմանի փլուզումը. Փլուզումը; / * Սեղանի սեղանների ընդհանուր սահմաններ * / սահմանային տարածություն. 0; / * զրոյական հեռավորությունը բջիջների միջեւ * / * տեքստի հավասարեցում ձախ եզրին * /) ol, ul (ցուցակի ոճը. Ոչ մեկը; / * Հեռացրեք ցուցակների ցուցիչները * /) H1, H2, H6 (տառատեսակ. 100%; Նախկինում, Q: Հետո (բովանդակություն. "»; / * Մենք չենք դադարեցնում մեջբերումները Q * /)

Օրինակի նկարագրությունը

Yahu- ն միանգամից մշակել է իր սեփական աչքերի վերականգնման տարբերակը: Այստեղ արդեն փոխվում են հատուկ տարրերի հատկությունները, ինչը հնարավորություն է տալիս հասնել ավելի մեծ ճկունության: Արտաքին տեսակներ, Օրինակ, ցուցիչները հանվում են ցուցակներից, եւ պիտակը մեջբերում է CSS գույքը: Այս մոտեցման առավելությունները ակնհայտ են, բայց մինուսները ներառում են ավելի ծավալուն եւ երբեմն ավելորդ կոդ: Բայց ոչ ոք ձեզ անհանգստացնում է, որ փոխեք ձեր կարիքներին որեւէ CSS վերականգնել: Ենթադրենք, որ կարող եք ջնջել ձեզանից մի քանիսը: Պիտակների ընտրավարներ Կամ ոչ միայն հեռացնել մեջբերումները, բայց անմիջապես հարցրեք նրանց անհրաժեշտ տեսքը:

Վերականգնել CSS- ը Էրիկ Մեյերից

HTML, Body, Div, Span, Applet, Office, Iframe, H1, H2, H6, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, ARROMANN, Հասցե, Big, Difn, EM, IMG, INS, KBD, Q, S, SAMP, Small, Strike, Stuff, Sup, Sup, TT, Var, B, U, I, Center, DL, DT, DD, OL, UL, LI, Field, Ձեւ, պիտակներ, լեգենդ, սեղան, վերնագիր, վերնագիր, TOT, TOOT, THEEN, TR, TH, TD, ACTION, DESIVE, FORME, FIGCAPTION, FOUNER, HEAT, OUTRUP, RUMY, Բաժին, ամփոփում, ժամանակ, նշան, աուդիո, տեսանյութ (լուսանցք. 0; լիցք, 0; Սահման: 0; տառատեսակ;) Հոդված, մանրամասներ, պատկերացում, Գծապատկեր, ոտնահետք, վերնագիր, HGroup, Menu անկ, Menu, NAV, բաժին (ցուցադրում. / * Մենք պատրաստում ենք բլոկի իրեր (հին զննարկիչների համար) * /) մարմնի (/ *) Գծի տարածություն Տեքստը * /) ol, ul (ցուցակի ոճը. Ոչ մեկը;) բլոկոտ. Նախկինում, բլոկոտ. Հետո, Q: Դրանից հետո (բովանդակություն. Ոչ մեկը; / * Ավելացնել հավատարմության համար * /) բլոկոտ, q (մեջբերում. Ոչ մեկը; / * Այլ միջոց, աղյուսակ (սահմանի փլուզումը. 0;)

Օրինակի նկարագրությունը

CSS առաջարկված Eric Meyer- ի (Eric Meyer) վերափոխման հաջորդ ճանապարհը `վեբ մշակող, որը հայտնի է որոշակի շրջանակներում: Այստեղ նա արդեն ավելացրել է HTML 5 պիտակների համար ոճերի վերականգնում, ինչը, ի դեպ, այս հոդվածը գրելու պահին եւ իրենք դեռ շատ վատ են աջակցվում Ժամանակակից զննարկիչներ, Բայց միշտ պետք է հեռանկարային նայեք, այնպես չէ:

Փաստորեն, այս հոդվածը կարող է շարունակվել անսահմանություն, քանի որ կրկնում եմ եւս մեկ անգամ, որոշակի պահի յուրաքանչյուր չափիչ գալիս է լիցքաթափման կամ ընդհանրապես չի օգտագործում իր ուշադրության կենտրոնում:

Շատ ուղղահայացներն օգտագործվում են այսպես կոչված CSS վերականգնել:Ծառայելով տարբեր զննարկիչների առանձնահատկությունները վերացնելու համար: Իրականում, Այս ֆայլը Ոճերը վերագործարկում են CSS լռելյայն բոլոր հատկությունները, Այս հոդվածում ես կցուցադրեմ այս ֆայլի ծածկագիրը եւ կասեմ Արժե օգտագործել CSS վերականգնումը, թե ոչ.

Ես տեսել եմ շատ տարբեր CSS վերականգնել:Բոլորը նույնն են: Կարող եք օգտագործել սա.

HTML, մարմին, Div, Span, Applet, Object, Iframe,
H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre,
A, abbr, հապավեք, հասցեն, մեծ, մեջբերման, կոդ,
DEL, DFN, EM, տառատեսակ, IMG, Ins, KBD, Q, S, SAMP,
Փոքր, գործադուլ, ուժեղ, ենթահող, sup, tt, var,
B, u, I, կենտրոն,
DL, DT, DD, OL, UL, LI,
Դաշտ, ձեւ, պիտակ, լեգենդ,
Աղյուսակ, վերնագիր, նրբություն, TFOOT, THEAH, TR, TH, TD (
Նախապատմություն. Թափանցիկ;
Սահման. 0;
Տառատեսակի չափը, 100%;
լուսանցք. 0;
Ուրվագիծ. 0;
Լիցք, 0;
Ուղղահայաց-հավասարեցում. Ելակետ;
}
Մարմին (
Տող-բարձրությունը `1;
}
Ol, ul (
Ոմանց -ական. Ոչ մեկը;
}
BlockQuote, Q (
Մեջբերումներ. Ոչ մեկը;
}
BlockQuote. Նախկինում, բլոկոտ. Հետո,
Հ. Նախկինում, Q: Հետո (
Բովանդակություն. "";
Բովանդակություն. Ոչ մեկը;
}
կենտրոնանալ (
Ուրվագիծ. 0;
}
Աղյուսակ (
Սահմանի փլուզումը. Փլուզումը;
Սահմանամերձ, 0;
}

Կարծում եմ, որ դրա օգտագործումը պայմանավորված է եւ այնքան հասկանալի է, բայց ինչու, օրինակ, ես չեմ օգտագործում, ինչպես շատ այլ vertickers, արժե պատմել դրա մասին: Նախ, դա է Լրացուցիչ ֆայլ, Երկրորդ, Հասկացում Վերամշակման համար, բայց ամենակարեւորը `ինձ դուր է գալիս լռելյայն հատկությունները: Օրինակ, սեղանի նույն դաշտերը: Ի վերջո, լռելյայն բոլոր հատկությունները ոչ միայն դուր չեն գալիս, այլ, առավելագույնը Օպտիմալ տարբերակ Տարբեր տարրերի ցուցադրում: Ես հավաստիացնում եմ ձեզ, վերափոխեք Լիցք Սեղանի բջիջները, ամենայն հավանականությամբ, այն կվերադարձնեք հիմնական ֆայլում: Եվ հեռու նրանից, որ արժեքը տարբերվելու է այն բանի, թե որն է լռելյայնը: Այսպիսով, պարզվում է, որ մենք առաջին հերթին մաքրում ենք այն, եւ հետո նույն վերադարձը: Եվ առաջին թերությունների հետ մեկտեղ (լրացուցիչ ֆայլ եւ լրացուցիչ կոդ), շատ ուղղահայացներ ընդհանրապես չեն օգտագործվում: CSS վերականգնել:.

Համենայն դեպս, Ստիլինգի արտանետման օգտագործումը վատ չէԱյսպիսով, դուք կարող եք ապահով օգտագործել այն, եթե կարծում եք, որ տարբեր զննարկիչների ներքո կայքի հարմարվելու պարզեցումը իսկապես ձեզ ամբողջությամբ պարզեցնում է:

Յուրաքանչյուր ոք ունի իրենց նախապես տեղադրված կանոններ `դրանց վրա վեբ էջեր եւ տարրեր նախագծելու համար (օգտագործողի գործակալների ոճը) ինքնաբերաբար միացված է լռելյայն: Այնուամենայնիվ, նոր նախագիծ ստեղծելու ժամանակ բոստրողների մեծ մասը հատուկ է ավելացնում Ֆայլի վերակայումը: CSS, ինչը կազմում է CSS ոճերի ամբողջական վերականգնում եւ թույլ է տալիս մշակողներին ստեղծել «մաքուր թերթիկ»: Ինչու եւ ինչպես է ամեն ինչ արված `սաղը ընթացիկ հոդվածում:

Եթե \u200b\u200bնայեք գրառման նկարը-նախադիտումը, կտեսնեք, որ Safari- ում սովորական գիծը, Chrome- ն եւ Firefox- ը ցուցադրվում են բացարձակապես: Տարբեր ձեւերով, Այո, երբեմն դրանց մեջ կանոնները համընկնում են, օրինակ, բոլորը թաքցնում են գլխի պիտակը ցուցադրման միջոցով. Ոչ մի տարբերակ, սակայն էջում օբյեկտներ մատուցելիս շատ դեպքերում կան լուրջ տարբերություններ: Ես կասկածում եմ, որ ձեր հաճախորդներից ոմանք գուցե դուր չեն գալիս, երբ դասավորության վերջնական տարբերակը նման չէ դասավորության վրա:

Հետեւաբար, եթե դուք նորաստեղծ վեբ մշակող եք, հրատարակությունը միանշանակ օգտակար կլինի ընդհանուր զարգացման համար: Դա այս նշման թարգմանությունն է `2018 թվականին CSS- ի վերագործարկման պայմանների ակնարկով: Վստահ եմ, որ 2019-ին եւ հետագայում այս ամենը դեռեւս տեղին կլինի, քանի որ Այս թեման արդեն եղել է ավելի քան 10 տարի (առաջին նման լուծումը թողարկելու պահից):

Ինչու եք պետք վերականգնելու CSS պարամետրերը

Ինչպես արդեն հասկացել եք անդամակցությունից, նրանք թույլ են տալիս վերացնել վեբ զննարկիչների հիմնական ոճերի միջեւ ընդլայնումը եւ դրանք տանել մեկ գումարած-մինուս ստանդարտացված մտքի միջեւ: Միշտ դիմեք հենց սկզբից դեպի սովորական զարգացումներ: Հոդվածում Էրիկ Մեյերը տաս տարի առաջ CSE- ի վերագործարկման մասին է, նշվում է այս մոտեցման հիմնական պատճառը, որոնք տարիները դեռ տեղին են.

Խնդիրը կայանում է նրանում, որ տարբեր բրաուզերներն ունեն իրենց լռելյայն պարամետրերը, եւ բոլորն էլ նույնը չեն: Մենք կարծում ենք, որ մեր ծածկագիրը փոխում է սկզբնական էջի ձեւավորումը, բայց սա ամբողջովին այդպես չէ, եւ վերականգնելու ֆայլերի օգնությամբ մենք կարող ենք այս ստանդարտ տեսակը դարձնել բոլոր ծրագրերի համար: Հետեւաբար, ավելի քիչ ժամանակ կլինի ծախսել հիմնականի դեմ պայքարի վրա Տեղադրում Firefox, Chrome եւ այլն:

Բայց հիմա իրավիճակը պակաս հակասում է դասավորությանը:

Այո, իսկապես, մեր ժամանակներում օգտագործողի գործակալի շատ պարամետրեր ավելի նման են: Գրեթե ամենուրեք H1 վերնագրերը սահմանում են տառատեսակի չափը 2-ը եւ հորիզոնական կետը 0,67 գ: Այնուամենայնիվ, դրանք բոլորը համեմատաբար նոր փոփոխություններ են, եւ նվազագույնը, դուք պետք է հաշվի առնեք ծրագրերի հին տարբերակների աջակցությունը, որտեղ չկա այդպիսի հետեւողականություն:

Բացի այդ, որոշ դեպքերում, կախված CSS զրոյացման տեսակից (այս մասին ստորեւ), այս չիպը մեզ համար դեռ օգտակար է, նույնիսկ եթե դիտարկվեին միայն ժամանակակից զննարկիչները:

Բայց արդյոք մենք կիրառում ենք մեր ոճերը, գերակշռում ենք հիմնականը:

Այս մոտեցումը այս մոտեցման մրցակիցների հիմնական վերացականներից մեկն է `ի վերջո, այնուամենայնիվ, այդ կամ այլ պարամետրերը փոխարինվում են իրենց ոճով: Կարող եք ավելացնել եւս մեկ լրացուցիչ ֆայլ եւ նվազեցնել: Չնայած այն հանգամանքին, որ այս արտահայտությամբ դա իմաստ ունի, վերականգնման օգտագործումը արդարացված է երկու պահով.

• Նախ, այն օգնում է գրել ավելի մաքուր կոդ: Մենք կկարողանանք այն բաժանել մի քանի մասի. Առանձնապես `վեբ նախագծի նախագծման եւ հատուկ զննարկիչների առանձնահատկությունների ներքո ուղղված կանոնների շարք: Սա հիմնական CSS ֆայլը չի \u200b\u200bբարձրանում բոլոր տեսակի IE Hacks- ի հետ եւ այլն:
• Երկրորդ, բոլոր վերագործարկումը կշռում է շատ քիչ, եւ դրանց ներբեռնումը չի պահանջում Մեծ թիվ Ժամանակը

Տեսակները CSS RESET (հոդվածում կարող եք ներբեռնել հղումներ)

Սկսած հեռավոր 2004-ից, երբ հայտնվեցին առաջին նման զարգացումները, այժմ կան բավականին շատ մեթոդներ, որոնք տարբերվում են դժվարությամբ եւ դրանց առանձնահատկությամբ: Փաստորեն, կա 3 գոլ, որոնք փորձում են լուծել CSS ոճերի վերականգնումը.

1. Ամրագրել սխալը օգտվողի գործակալների ոճով:
2. Ոչ ստանդարտ բնօրինակ ձեւավորման չեղարկում ինտերնետ զննարկիչներում:
3. Ստեղծելով համընդհանուր համատեղելի ոճի բազա:

Կան տարբերակներ, որոնք որոշում են բոլոր երեք առաջադրանքներն ու նրանց, որոնք խստացվում են միայն մեկ հատուկ խնդրի տակ:

Ուղղում / սխալի ուղղում

Դիտարկենք վերը նշված նպատակներից առաջինը: Ինչպես արդեն հասկացել եք, զննարկիչների տարբեր թերությունների եւ կոշիկների վերացումը առավել կարեւոր է հնացած թողարկումներին աջակցելու համար: Նման իրավիճակի լավ օրինակներից մեկը, երբ HTML5- ի հայտնվելուց հետո նույն Internet Explorer 9-ը չի կիրառել նոր օբյեկտների ցուցադրման ճիշտ տեսակը:

Հետեւաբար, LOOTHELIZE.CSS- ի լուծումներում բոլոր սխալները հաշվի են առնվում եւ մշակվում.

/ ** * Ավելացնել ճիշտ էկրանը IE- ում: * / Հիմնական (ցուցադրում. Բլոկ;)

/ ** * Ավելացնել ճիշտ էկրանը IE- ում: * / Հիմնական (ցուցադրում, բլոկ;)

Քանի որ այս գործողությունները անհրաժեշտ են միայն հին ծրագրակազմի համար, իմաստ ունի օգտագործել փոստային բաժանմունքներ, ինչպիսիք են Փոստերը նորմալացնում են զննարկչի հետ միասին, որպեսզի դրանք ավելացնեք միայն այն դեպքում, երբ անհրաժեշտ է իրականացնել որոշակի զննարկիչների աջակցությունը:

Մաքուր CSS- ից կոդերի մեկ այլ օրինակ, որը հարմար է, ներառյալ ժամանակակից վեբ ծրագրերը `ամրագրել ցուցադրման տարրերը եւ թաքնված հատկանիշը:

[Թաքնված] (Display ուցադրում. Ոչ մեկը: Կարեւոր; // Լավ օգտագործման դեպքերից մեկը: կարեւոր է }

(Display ուցադրել. Ոչ մեկը, կարեւոր; // լավ օգտագործման դեպքերից մեկը. Կարեւոր է)

Հեռացրեք զննարկիչների յուրօրինակ ոճերը

Սա CSS պարամետրերի վերափոխման երկրորդ պատճառն է: Սկզբունքորեն, նրանց կարծիքներից յուրաքանչյուրը, թե որն է օգտագործողի կողմից գործակալի ոճերը, համարվում է «յուրահատկություն»: Բնօրինակ նոտայի հեղինակի սահմանումը բավականին տրամաբանական է. Սա ոճ է, որը տարրի ցուցադրման «մերկ» տարբերակ չէ:, Օրինակ, 2EM- ում վերնագրերի ներթափանցում ավելացնելը (քանիսը), գաղափարը վատ չէ, բայց ինչու է 2-ը, ոչ թե 3-ը: Այս դեպքում հիմնական տարբերակը կլինի ցանկացած դեպքի բացակայությունը, այսինքն, զրոյական լուսանցք:

Ամենապարզ Համընդհանուր մոտեցումՏեղադրման / դաշտի պիտակների հեռացում.

* (Մարգին. 0; Լիցք, 0;)

* (Մարգին. 0; Լիցք, 0;)

Այս մեթոդը չափազանց արմատական \u200b\u200bէ, քանի որ Դիմում է բոլոր օբյեկտներին, նույնիսկ այնտեղ, որտեղ դուք չեք ակնկալում (նույն մուտքագրում): Այլընտրանքորեն, հաճախ օգտագործվում է Eric Meyer Reset CSS, որը հեռացնում է մարժայի / լիցքաթափման պարամետրերը, սահմանները եւ տառատեսակի չափը (0 կամ ոչ), որտեղ տրամաբանորեն արդարացված է.

HTML, Body, Div, Span, Applet, Office, Iframe, H1, H2, H6, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, ARROMANN, Հասցե, Big, Difn, EM, IMG, INS, KBD, Q, S, SAMP, Small, Strike, Stuff, Sup, Sup, TT, Var, B, U, I, Center, DL, DT, DD, OL, UL, LI, Field, Ձեւ, պիտակներ, լեգենդ, սեղան, վերնագիր, վերնագիր, TOT, TOOT, THEEN, TR, TH, TD, ACTION, DESIVE, FORME, FIGCAPTION, FOUNER, HEAT, OUTRUP, RUMY, Բաժին, ամփոփում, ժամանակ, նշան, աուդիո, վիդեո (լուսանցք. 0; լիցք, 0; Սահման `0; տառատեսակ; ուղղահայաց;

hTML, Body, Div, Span, Applet, Office, Iframe, H1, H2, H6, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, ARROMANN, Հասցե, Big, Difn, EM, IMG, INS, KBD, Q, S, SAMP, Small, Strike, Stuff, Sup, Sup, TT, Var, B, U, I, Center, DL, DT, DD, OL, UL, LI, Field, Ձեւ, պիտակներ, լեգենդ, սեղան, վերնագիր, վերնագիր, TOT, TOOT, THEEN, TR, TH, TD, ACTION, DESIVE, FORME, FIGCAPTION, FOUNER, HEAT, OUTRUP, RUMY, Բաժին, ամփոփում, ժամանակ, նշան, աուդիո, տեսանյութ (լուսանցք. 0; լիցք, 0; Սահման, 0; տառատեսակ; տառատեսակ;

Գերազանց ոճեր

Ի տարբերություն նախորդ հատվածի, այստեղ հիմնական խնդիրն է `որոշակի առարկաներից CSS- ի վերագործարկումը, այլեւ նրանց ներկայիս արժեքներով գերակշռել:

Օրինակ, 1EM եւ Margins \u003d 0-ի բոլոր չափը `Sanitize.cs- ում, այլ արժեքներ սահմանվում են.

/ ** * Ուղղեք տառատեսակի չափը եւ մարժան, «Հ 1» տարրերի վրա `Chrome- ում, Firefox- ում եւ Safari- ում: * / H1 (տառատեսակ `չափը, 2EM; Մարժան, 0. 67 վարպետ 0;)

/ ** * Ուղղեք տառատեսակի չափը եւ մարժան, «Հ 1» տարրերի վրա `Chrome- ում, Firefox- ում եւ Safari- ում: * / H1 (տառատեսակի չափը, 2EM; Մարժան, 0.67EM 0;)

Bootstrap- ի վերաբեռնումը կգտնի ներկայիս առաջադրանքի մեկ այլ նկարազարդում: Մշակողները գնացին մի փոքր այլ եւ սահմանված տառատեսակներ եւ ֆոնային գույն:

// մարմին // // 1. Հեռացրեք լուսանցքը բոլոր զննարկիչներում: // 2. Որպես լավագույն փորձ, կիրառեք լռելյայն `ֆոնային-գույնը // 3. Սահմանեք հստակ նախնական տեքստի հավասարեցման արժեքը, որպեսզի հետագայում օգտագործենք // «Ժառանգություն» արժեքը նման բաների վրա	- տարրեր: Մարմինը (0/1 տառատեսակ. Ընտանիք. $ Տառատեսակ - Ընտանեկան հիմք; տառատեսակ. $ Տառատեսակ `$ - Հիմք; Գույն, $ մարմին - գույն; տեքստ- հավասարեցում. Ձախ; // 3)

// մարմին // // 1. Հեռացրեք լուսանցքը բոլոր զննարկիչներում: // 2. Որպես լավագույն փորձ, կիրառեք լռելյայն `ֆոնային-գույնը // 3. Սահմանեք հստակ նախնական տեքստի հավասարեցման արժեքը, որպեսզի հետագայում կարողանանք օգտագործել «ժառանգական» արժեքը `նման բաների վրա: - տարրեր: Մարմին (0 // 1 տառատեսակ). $ Տառատեսակ, տառատեսակի չափը. $ Տառատեսակ, տառատեսակ, $ Տառատեսակ, $ -Բազ; Գույն, $ մարմնի գույն; տեքստի հավասարեցում. Ձախ; // 3 ֆոնային գույնը `$ 2)

Ընդհանուր: Ինչ ընտրել

Բնօրինակ նոտայում կա համապատասխան հետազոտության արդյունք

Այս հոդվածում մենք կխոսենք ոճերի վերագործարկման մասին եւ հաշվի առնենք նման վերափոխման .CSS ֆայլ ստեղծելու օրինակ:

Ստեղծման գաղափարը հայտնվեց մոտ 10 տարի առաջ: Որոնք փաստորեն եզրակացրել են, որ CSS ոճերի փոքր փաթեթի օգնությամբ էջի տեսակետը բերեց բոլոր զննարկիչներում նույնը: Իհարկե, միշտ չէ, որ աշխատում է, բայց որոշ պահեր կարելի է շտկել, օրինակ, սահմանը չի հասկանում, թե որտեղ է գտնվում այս պահը որոշ վարկածներով: Կամ կապույտ հարված (ուրվագիծ) դաշտերում:

Ոչ մի դիմային մշակողների համար ոչ մի գաղտնիք չէ, որ զննարկիչները շատ հաճելի են եւ յուրաքանչյուր գործընթաց hTML տարրեր Իր ձեւով ավելացնելով ձեր ստանդարտ ոճերը:

Քանի որ այս գաղափարները երկար ժամանակ կրակ են բռնել, զարմանալի չէ, որ արդեն կա Պատրաստի ֆայլեր Վերագործարկեք, սովորաբար կոչվում է RESET.CSS եւ միացեք բոլոր նախագծերին:

Ինչու ներս Առանձին ֆայլ? Այո, պարզապես այն պատճառով, որ ավելի հարմար է դրանք նախագծից փոխանցել նախագիծ:

Ահա 2007 թվականից վերափոխման օրինակ.

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 լիցենզիա. Ոչ մեկը (հանրային տիրույթ) * / HTML, մարմին, Div, H3, H4, H5, H6, H, BlockQuote, Preon, Abbra, Մեծ, մեջբերում, կոդ, դել, DFN, EM, IMG, Ins, KBD, Q, S, SAMP, SAMP, SPATE, TT, VAR, B, U, I, TT, VAR, B, U, i, կենտրոն, dl, dt, dd, ol, ul, li, դաշտ, ձեւ, պիտակ, լեգենդ, սեղան, վերնագիր, tho, td, td, հոդված, մի կողմ, կտավ, մանրամասներ, Տեղադրեք, գործիչ, figcaption, profer, hgroup, մենյու, նավ, ելք, կարմրություն, հատված, ամփոփում, ժամանակ, նշան, աուդիո, տեսանյութեր (սահման. 0; տառ. ; Տառատեսակ, ժառանգություն; Ուղղահայաց-հավասարեցում. Ելակետ;) / * HTML5 Display ուցադրման դերի վերականգնում հին զննարկիչների համար * / հոդված, մի կողմ, վերնագիր, վերնագիր (ցուցադրում, բլոկ; ) Մարմինը (գծի բարձրությունը. 1;) ol, ul (ցուցակի ոճ. Ոչ մեկը;) բլոկոտ, q (մեջբերում.) Բլոկոտ, Q: Բովանդակություն. Ոչ մեկը;) Աղյուսակ (սահմանափակում. C. Ollapse; Սահմանամերձ, 0; )

Սա հենց այս ֆայլի ստանդարտ է վեբ մշակողների որոշակի շրջանակի կողմից:

Ես խորհուրդ եմ տալիս ձեզ, անկախ նրանից, թե դուք փորձառու ծրագրավորող եք, թե պարզապես սկսնակներ `ձեր վերակայման ֆայլը մշակելու համար: Հիմք ընդունելով, կարող եք վերցնել վերեւում նկարագրված ստանդարտը, լրացնել այն իր ընտրողների հետ կամ փոխել առկաները: Ահա այնպիսի ֆայլի օրինակ, որը ես մշակեցի ինքս ինձ համար.

Մուտք, տեքստար, A, կոճակ, ընտրեք (ուրվագիծ, ոչ մեկը) IMG (սահման. Ոչ մեկը;) HR (պարզ. Երկուսն էլ.) * (*) * (* * *) * (* *) * (* * *) * (*) Display ուցադրման դերի վերականգնում հին զննարկիչների համար * / հոդված, մի կողմ, մանրամասներ, ficcaption, figure, pointer, վերնագիր, HGroup, Menu անկություն, NAV, բաժին (ցուցադրում. 1;) ol, ul (List անկ -Style: Ոչ մեկը; Մարժ. 0; Լիցք, 0;) բլոկոտ, q (մեջբերում. (Սահմանի փլուզումը. Փլուզումը; սահմանի տարածումը `0;)

Դուք կարող եք վարկավորել վերը նշված կոդերից որեւէ մեկը անձնական օգտագործման համար, բայց եթե այն օգտագործում եք ձեր հոդվածներում `հղում տեղադրեք աղբյուրին: