Այսօրվա վեբ-բրաուզերը խելահեղ օրերից երկար ճանապարհ է անցել, որտեղ ցանկացած բրաուզերի հետեւողականություն ցանկալի մտածողություն էր: Այսօրվա վեբ բրաուզերները բոլոր չափանիշներին համապատասխանում են: Նրանք խաղում են լավ միասին եւ բավականաչափ հետեւողական էջ են ցուցադրում տարբեր բրաուզերում: Սա ներառում է Google Chrome- ի, Microsoft Edge- ի, Mozilla Firefox- ի, Opera- ի, Safari- ի վերջին տարբերակները եւ տարբեր բրաուզերները, որոնք հայտնաբերվել են այսօրվա կայքից օգտվելու համար օգտագործված բազմաթիվ բջջային սարքերի վրա:
Թեեւ առաջընթացը, իհարկե, արվել է այն ժամանակ, երբ խոսքը վերաբերում է վեբ բրաուզերներին եւ թե ինչպես են դրանք ցուցադրում CSS- ն, դեռ առկա են տարբեր ծրագրային տարբերակների միջեւ անհամապատասխանություններ: Ընդհանուր անհամապատասխանություններից մեկը այն է, թե ինչպես են այդ բրաուզերները լռելյայնորեն հաշվարկում ծածկույթները, լիցքավորումը եւ սահմանները:
Քառակուսի մոդելի այս ասպեկտների պատճառով բոլոր HTML տարրերը ազդեցություն են ունենում, եւ քանի որ դրանք կարեւոր են էջի դասավորության ստեղծման համար, անհամապատասխան ցուցադրումը նշանակում է, որ էջը կարող է մեծ լինել մեկ բրաուզերում, բայց մի փոքր այլ կերպ նայել: Այս խնդիրը հաղթահարելու համար շատ վեբ դիզայներները նորմալացնում են բռնցքամարտի մոդելի այս ասպեկտները: Այս պրակտիկան նաեւ հայտնի է որպես «զրոյացնել» սահմանային գծերի արժեքները, լցված եւ սահմանները:
Ծանոթագրություն Browser Defaults- ի վերաբերյալ
Վեբ բրաուզերները բոլորն ունեն էջի որոշակի ցուցադրման համար նախատեսված լռելյայն պարամետրեր: Օրինակ, հիպերհղումները կապույտ են եւ ընդգծված են լռելյայն: Սա համահունչ է տարբեր բրաուզերների վրա, եւ չնայած այն, որ դիզայներների մեծ մասը փոխում է իրենց կոնկրետ ծրագրի նախագծային կարիքները, այն փաստը, որ նրանք սկսում են նույն նախնական արժեքները, ավելի հեշտացնում են այդ փոփոխությունները: Ցավոք, ծայրահեղությունների, padding- ի եւ սահմանների կանխադրված արժեքը չեն վայելում խաչաձեւ զննարկչի հետեւողականության նույն մակարդակը:
Նարգելի արժեքներ ծայրամասերի եւ լցնումների համար
Անհամապատասխան տուփ մոդելի խնդիրը լուծելու լավագույն տարբերակն այն է, որ HTML- ի տարրերի բոլոր ծավալի եւ լրացուցիչ արժեքները սահմանվեն զրոյի վրա: Կան մի քանի եղանակ, որը դուք կարող եք դա անել, այս CSS կանոնը ձեր ոճաթերթին ավելացնելու համար.
* {margin: 0; լրացնելով `0; }Այս CSS կանոնը օգտագործում է * կամ wildcard բնույթ: Այդ բնույթը նշանակում է «բոլոր տարրերը» եւ հիմնականում ընտրում է յուրաքանչյուր HTML տարր եւ սահմանում սահմանները եւ լրացնելու համար 0: Թեեւ այս կանոնը շատ յուրահատուկ է, քանի որ այն ձեր արտաքին ոճաթերթում է, այն կունենա ավելի բարձր առանձնահատկություն, քան ստանդարտ զննարկիչը արժեքները: Քանի որ այդ ստանդարտները, որոնք վերագրանցվում են, այս մեկ ոճը կկատարի այն, ինչ դուք եք պատրաստվում անել:
Մեկ այլ տարբերակ `այս արժեքները կիրառել HTML- ի եւ մարմնի տարրերի վրա: Քանի որ ձեր էջի բոլոր մյուս տարրերը լինելու են այս երկու տարրերի երեխաները, CSS- ի կասկադը պետք է կիրառի այդ արժեքները բոլոր մյուս տարրերին:
html, մարմին {margin: 0; լրացնելով `0; }Սա կսկսվի ձեր դիզայնը նույն տեղում բոլոր բրաուզերների վրա, բայց հիշելու մեկ բանը այն է, որ միանգամից բոլոր ծածկույթները դարձնում եւ հպում եք, դուք պետք է ընտրեք դրանք վերադառնալու ձեր վեբ էջի կոնկրետ մասերի համար, որպեսզի տեսնեք եւ զգալ, որ ձեր դիզայնը կոչ է անում:
Սահմանները
Կարող եք մտածել, «բայց բրաուզերները սահմանը չունեն մարմինի տարրի շուրջ»: Սա խիստ ճշմարիտ չէ: Internet Explorer- ի հին տարբերակներն ունեն թափանցիկ կամ անտեսանելի սահման: Եթե սահմանը սահմանեք մինչեւ 0, այդ սահմանը կարող է խառնաշփոթ ձեր էջի դասավորությունը: Եթե որոշել եք, որ դուք կշարունակեք աջակցել IE- ի այս հնացած տարբերակներին, ապա ձեզ հարկավոր է դիմել հետեւյալը `ավելացնելով ձեր մարմինը եւ HTML ոճերը.
HTML, մարմին {
margin: 0px;
padding: 0px;
սահման: 0px;
}
Նմանապես, ինչպես եք անջատել ծածկույթները եւ լիցքավորումը, այս նոր ոճը նույնպես անջատելու է լռելյայն սահմանները: Դուք կարող եք նաեւ նույն բանը անել, հոդվածում նախորդում նշված նախընտրած ընտրիչից օգտվելով:
Իրական հոդվածը Ջենիֆեր Քրինինն է: Փոփոխված է Ջերեմի Գիրարդը, 9/27/16 թ .: