இன்றைய வலை உலாவி குறுக்கு உலாவி நிலைத்தன்மையும் எந்த வகையான விருப்பமான சிந்தனை இருந்தது பைத்தியம் நாட்களில் இருந்து ஒரு நீண்ட வழி வந்துவிட்டது. இன்டர்நெட் வலை உலாவிகள் எல்லாமே தரநிலைகள்-இணக்கமானவை. அவர்கள் நன்றாக ஒன்றாக விளையாட மற்றும் பல்வேறு உலாவிகளில் முழுவதும் மிகவும் நிலையான பக்கம் காட்சி வழங்க. இதில் கூகிள் குரோம், மைக்ரோசாஃப்ட் எட்ஜ், மொஸில்லா ஃபயர்ஃபாக்ஸ், ஒபேரா, சபாரி மற்றும் பல இணைய உலாவிகளில் சமீபத்திய இணைய பதிப்புகள் உள்ளன.
வலை உலாவிகள் மற்றும் அவர்கள் CSS ஐ எப்படி காண்பிக்கும் போது நிச்சயமாக முன்னேற்றம் செய்யப்பட்டுள்ளது, இந்த பல்வேறு மென்பொருள் விருப்பங்களுக்கு இடையே இன்னும் முரண்பாடுகள் உள்ளன. பொதுவான முரண்பாடுகளில் ஒன்று அந்த உலாவிகளில் முன்னிருப்பாக விளிம்புகள், திணிப்பு மற்றும் எல்லைகளை கணக்கிடுகின்றன.
பாக்ஸ் மாதிரியின் அனைத்து அம்சங்களுமே இந்த HTML உறுப்புகளின் விளைவைக் கொண்டிருப்பதால், அவை பக்கம் தளவமைப்பை உருவாக்குவதில் அவசியமானவை, ஏனெனில் ஒரு சீரற்ற காட்சி என்பது ஒரு பக்கம் ஒரு உலாவியில் அழகாக இருக்கலாம், ஆனால் இன்னொரு பக்கத்தில் சற்று கவனமாக இருங்கள். இந்த சிக்கலை எதிர்த்து, பல வலை வடிவமைப்பாளர்கள் பாக்ஸ் மாதிரி இந்த அம்சங்களை சீராக்கிறார்கள். இந்த நடைமுறையில் விளிம்புகள், திணிப்பு, எல்லைகள் ஆகியவற்றிற்கான மதிப்புகள் "வெளியேறுகிறது" என்றும் அறியப்படுகிறது.
உலாவி இயல்புநிலைகளில் ஒரு குறிப்பு
வலை உலாவிகளில் ஒரு பக்கத்தின் சில காட்சி அம்சங்களுக்கு இயல்புநிலை அமைப்புகள் உள்ளன. உதாரணமாக, ஹைப்பர்லிங்க்ஸ் நீல மற்றும் முன்னிருப்பாக கோடிட்டுக் காட்டப்பட்டுள்ளன. பல்வேறு உலாவிகளில் இது நிலையானது, பெரும்பாலான வடிவமைப்பாளர்கள் தங்கள் குறிப்பிட்ட திட்டத்தின் வடிவமைப்பு தேவைகளுக்கு ஏற்ப மாறியுள்ள போதிலும், அவை அனைத்தும் ஒரே இயல்புநிலைகளுடன் தொடங்கி வருகின்றன என்பதால் இந்த மாற்றங்களை எளிதாக்குகிறது. துரதிருஷ்டவசமாக, விளிம்புகள், திணிப்பு மற்றும் எல்லைகளுக்கு இயல்புநிலை மதிப்பு குறுக்கு உலாவி நிலைத்தன்மையின் அதே நிலைப்பாட்டை அனுபவிக்கவில்லை.
விளிம்புகள் மற்றும் பேடிங்கிற்கான மதிப்புகள் இயல்பாக்குதல்
சீரற்ற பாக்ஸ் மாதிரியின் சிக்கலைத் தீர்ப்பதற்கான சிறந்த வழி, HTML உறுப்புகளின் அனைத்து விளிம்புகளையும் திணிப்பு மதிப்பையும் பூஜ்யமாக அமைக்க வேண்டும். நீங்கள் இதை செய்ய முடியும் என்று ஒரு சில வழிகள் உள்ளன உங்கள் நடைதாளுடன் இந்த CSS விதி சேர்க்க வேண்டும்:
* {margin: 0; திணிப்பு: 0; }இந்த CSS விதி * அல்லது வைல்டு கார்டைப் பயன்படுத்துகிறது. அந்த பாத்திரம் "அனைத்து உறுப்புகளும்" என்று பொருள்படும், அது ஒவ்வொரு HTML உறுப்புகளையும் தேர்ந்தெடுத்து, ஓரங்கள் மற்றும் திணிப்புகளை 0 என அமைக்க வேண்டும். இந்த விதி மிகவும் விசேஷமானது என்றாலும் கூட, அது உங்கள் வெளிப்புற நடைவழியில் உள்ளது, மதிப்புகள் செய்ய. அந்த தவறுகள் நீங்கள் மேலெழுதும்போது, இந்த பாணி நீங்கள் என்ன செய்யப்போகிறீர்கள் என்பதை நிறைவேற்றும்.
இந்த விருப்பத்தை HTML மற்றும் உடல் உறுப்புகளுக்கு பயன்படுத்துவது மற்றொரு விருப்பமாகும். ஏனெனில் உங்கள் பக்கத்தில் உள்ள மற்ற அனைத்து உறுப்புகளும் இந்த இரு கூறுகளின் குழந்தைகளாக இருக்கும், CSS அடுக்குகள் இந்த மதிப்புகளை இந்த மற்ற உறுப்புகளுக்கு பொருந்த வேண்டும்.
html, உடல் {margin: 0; திணிப்பு: 0; }இது அனைத்து உலாவிகளில் உள்ள அதே இடத்தில் உங்கள் வடிவமைப்புகளைத் துவக்கும், ஆனால் ஒரு விஷயம் நினைவில் கொள்ளும்போது, நீங்கள் அனைத்து விளிம்புகளையும், திணிப்புகளையும் அணைத்துவிட்டால், நீங்கள் தோராயமாக உங்கள் வலைப்பக்கத்தின் குறிப்பிட்ட பாகங்களுக்கு தோற்றத்தை திரும்பப்பெற வேண்டும். மற்றும் உங்கள் வடிவமைப்பு அழைப்பு என்று நினைக்கிறேன்.
எல்லைகளற்ற
நீங்கள் நினைத்து இருக்கலாம் "ஆனால் உலாவிகளில் இயல்புநிலையில் உடல் உறுப்பு சுற்றி ஒரு எல்லை உள்ளது". இது கண்டிப்பாக உண்மை இல்லை. இன்டர்நெட் எக்ஸ்ப்ளோரர் பழைய பதிப்புகள் கூறுகளை சுற்றி ஒரு வெளிப்படையான அல்லது கண்ணுக்கு தெரியாத எல்லை உள்ளது. நீங்கள் எல்லை அமைக்க 0 வரை, அந்த எல்லை குழப்பம் உங்கள் பக்கம் அமைப்பு முடியும். நீங்கள் IE இன் இந்த பழமையான பதிப்புகளில் தொடர்ந்து ஆதரவளிப்பீர்கள் என்று முடிவு செய்திருந்தால், உங்கள் உடல் மற்றும் HTML பாணிகளை பின்வரும் வகையில் சேர்ப்பதன் மூலம் இதைச் செய்ய வேண்டும்:
HTML, உடல் {
விளிம்பு: 0px;
திணிப்பு: 0px;
எல்லை: 0px;
}
நீங்கள் விளிம்புகளையும் திணிப்புகளையும் எப்படி முடக்கியது போலவே, இந்த புதிய பாணி இயல்புநிலை எல்லைகளை அணைக்கும். முந்தைய கட்டுரையில் காட்டப்பட்ட வைல்டு கார்ட் செலக்டர் பயன்படுத்துவதன் மூலம் நீங்கள் இதைச் செய்யலாம்.
ஜெனிபர் கிரைனின் அசல் கட்டுரை. 9/27/16 அன்று ஜெர்மி ஜார்டு திருத்தப்பட்டது.