Бүгінгі веб-браузер кез-келген кросс-браузердің дәйектілігі қалаған ойлармен айналысатын күндерден ұзақ уақыт өтті. Бүгінгі веб-браузерлер - өте стандарттарға сай. Олар жақсы ойнайды және әртүрлі браузерлерде өте дәйекті бет көрсетуде. Бұған Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari және соңғы кездері веб-сайтқа кіру үшін қолданылатын көптеген мобильді құрылғыларда табылған түрлі браузерлер кіреді .
Дегенмен, веб-браузерлерге және олардың CSS-ны қалай көрсеткеніне қарамастан, прогреске қол жеткізілгенімен, әртүрлі бағдарламалық жасақтама нұсқаларының арасында сәйкессіздіктер бар. Қарапайым сәйкессіздіктердің бірі - бұл браузерлер әдепкі бойынша шеттер, толтырғыштар және шекараларды есептеп шығару.
Бокс үлгісінің осы аспектілеріне байланысты барлық HTML элементтері әсер етеді және олар бет орналасуларын жасауда маңызды болғандықтан, сәйкессіз көрсету беттің бір браузерде жақсы көрінуі мүмкін, бірақ басқа біреуден аздап көрінеді. Бұл мәселеге қарсы тұру үшін көптеген веб-дизайнерлер қорап үлгісінің осы аспектілерін қалыпқа келтіреді. Бұл тәжірибе маржа, толтырғыш және шекаралар үшін мәндерді «нөлдендіру» ретінде де белгілі.
Браузер әдепкі бойынша ескертпе
Веб-браузерлерде беттің кейбір дисплей аспектілері үшін әдепкі параметрлер бар. Мысалы, гиперсілтемелер көк түспен және әдепкі бойынша белгіленген. Бұл әртүрлі браузерлерде бірізділікке ие, алайда дизайнерлердің көбісі олардың нақты жобасының дизайнерлік қажеттіліктеріне сәйкес келетіндіктен, олардың барлығы бірдей әдепсіздікпен басталуы бұл өзгерістерді жеңілдетеді. Өкінішке орай, шекаралар, толтырғыштар және шекаралар үшін әдепкі мәндер браузерлердің бірізділігіне сәйкес келмейді.
Жақтаудың және толтырудың қалыпты мәндері
Сәйкес келмейтін қорап үлгісінің мәселесін шешудің ең жақсы жолы - HTML элементтерінің барлық шеттерін және толтыру мәндерін нөлге орнату. Бұл CSS ережесін сіздің стиль кестеңізге қосу үшін бірнеше әдістер бар:
* {margin: 0; толтыру: 0; }Бұл CSS ережесі * немесе қойылмалы таңбаны пайдаланады. Бұл таңба «барлық элементтерді» білдіреді және ол негізінен әр HTML элементін таңдап, шеттерін орнатады және 0-ге толтырады. Бұл ереже өте ерекше емес, себебі ол сіздің сыртқы стиль кестесінде болады, әдепкі браузерден жоғары ерекшелікке ие болады мәндер жасайды. Өйткені, бұл әдепкі параметрлер қайта жазылып жатқандықтан, бұл стиль сіз жасаған нәрсені орындайды.
Тағы бір нұсқа - бұл мәндерді HTML және дене элементтеріне қолдану. Сіздің бетіңіздің барлық элементтері осы екі элементтің балалары болатындықтан, CSS каскадты осы мәндерді барлық басқа элементтерге қолдануы керек.
html, body {margin: 0; толтыру: 0; }Бұл сіздің браузерлеріңізде бірдей орында бастайды, бірақ есте сақтаудың бір себебі - сіз кез-келген маржаны бұрып, толтыруды бастасаңыз, веб-парағыңыздың белгілі бір бөліктері үшін оларды таңдауды қайтадан таңдауыңыз керек және сіздің дизайныңыз қажет деп ойлаңыз.
Шекаралар
Сіз ойлауыңыз мүмкін «бірақ ешқандай браузерлер әдепкі бойынша дене элементінің айналасында шекарасы жоқ». Бұл қатаң емес. Internet Explorer-дің ескі нұсқалары элементтердің айналасында мөлдір немесе көрінбейтін шекарасы бар. Шекараны 0 мәніне орнатпаған болсаңыз, бұл шекара бет орналасуларыңызды араластыра алады. Егер сіз IE-дің бұл ескірген нұсқаларын қолдауды жалғастыра берсеңіз деп шешсеңіз, онда сіз денеңізге және HTML стильдеріне мыналарды қосып, оны шешуіңіз керек:
HTML, дене {
маржа: 0px;
толтыру: 0px;
шекара: 0px;
}
Жақтаудың және толтырғыштың өшірілуіне ұқсас, бұл жаңа стиль де әдепкі шекараларды өшіреді. Сондай-ақ, мақалада бұрын көрсетілген қойылмалы селекторды қолдану арқылы бірдей нәрсені жасай аласыз.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard 9/27/16 жылы редакцияланған.