CSS விற்பனையாளர் முன்னுரிமைகள்

அவர்கள் என்ன, ஏன் நீ அவற்றை பயன்படுத்த வேண்டும்

CSS விற்பனையாளர் முன்னுரிமைகள், சில நேரங்களில் அறியப்பட்ட அல்லது CSS உலாவி முன்னொட்டுகள், உலாவி தயாரிப்பாளர்கள் அந்த அம்சங்கள் முழுமையாக அனைத்து உலாவிகளில் ஆதரவு முன் புதிய CSS அம்சங்கள் ஆதரவு சேர்க்க ஒரு வழி. உலாவி உற்பத்தியாளர் இந்த புதிய CSS அம்சங்களை எவ்வாறு நடைமுறைப்படுத்துவது என்பதை நிர்ணயிக்கும் ஒரு சோதனை மற்றும் பரிசோதனையின் போது இது செய்யப்படலாம். இந்த முன்னுரிமைகள் ஒரு சில ஆண்டுகளுக்கு முன்னர் CSS3 எழுச்சிக்கு மிகவும் பிரபலமானது.

CCS3 முதன்முதலாக அறிமுகப்படுத்தப்பட்டபோது, ​​பல உற்சாகமான பண்புகள் வெவ்வேறு நேரங்களில் வெவ்வேறு உலாவிகளைத் தாக்கத் தொடங்கின. உதாரணமாக, வெப்கிட்-இயங்கும் உலாவிகளில் (சஃபாரி அண்ட் க்ரோம்) முதலில் மாற்றங்கள் மற்றும் மாற்றம் போன்ற சில அனிமேஷன்-பாணி பண்புகளை அறிமுகப்படுத்தியது. விற்பனையாளர் முன்னுரிமை பண்புகளை பயன்படுத்துவதன் மூலம், வலை வடிவமைப்பாளர்கள் அந்த புதிய அம்சங்களை தங்கள் வேலையில் பயன்படுத்திக் கொள்ள முடிந்தது, ஒவ்வொரு உலாவி உற்பத்தியாளருக்காகவும் காத்திருப்பதற்குப் பதிலாக, அவர்களுக்கு உடனடியாக ஆதரவளித்த உலாவிகளில் அவற்றைப் பார்க்க முடிந்தது!

எனவே ஒரு முன் இறுதியில் வலை டெவலப்பர் முன்னோக்கு இருந்து, உலாவி முன்னொட்டுகள் உலாவிகளில் அந்த பாணிகள் ஆதரவு என்று தெரிந்தும் ஆறுதல் போது ஒரு தளம் மீது புதிய CSS அம்சங்களை சேர்க்க பயன்படுத்தப்படுகின்றன. பல்வேறு உலாவி உற்பத்தியாளர்கள் சற்று வித்தியாசமான வழிகளில் பண்புகளை அல்லது வெவ்வேறு தொடரியல் கொண்டிருக்கும் போது இது குறிப்பாக உதவியாக இருக்கும்.

CSS உலாவி நீங்கள் பயன்படுத்த முடியும் என்று முன்னொட்டு (வேறுபட்ட உலாவி குறிப்பிட்ட ஒவ்வொரு):

• அண்ட்ராய்டு: -webkit-
• Chrome: -webkit-
• பயர்பாக்ஸ்: -moz-
• இன்டர்நெட் எக்ஸ்புளோரர்: -ms-
• iOS: -webkit-
• ஓபரா: -ஓ-
• Safari: -webkit-

பெரும்பாலான சந்தர்ப்பங்களில், ஒரு புதிய CSS பாணி சொத்து பயன்படுத்த, நீங்கள் நிலையான CSS சொத்து எடுத்து ஒவ்வொரு உலாவி முன்னொட்டு சேர்க்க. சாதாரண CSS சொத்து இறுதியாக வரும் போது முன்னொட்டு பதிப்புகள் எப்போதும் (எந்த வரிசையில் நீங்கள் விரும்பினால்) முதல் வரும். உதாரணமாக, நீங்கள் உங்கள் ஆவணத்தில் ஒரு CSS3 மாற்றம் சேர்க்க விரும்பினால், நீங்கள் கீழே மாற்றம் என மாற்றும் சொத்து பயன்படுத்த வேண்டும்:

-webkit- மாற்றம்: அனைத்து 4s எளிதாக;
-எம்ஓஸ்- மாற்றம்: அனைத்து 4s எளிதாக;
-ms- மாற்றம்: அனைத்து 4s எளிதாக;
-ஓ- மாற்றம்: அனைத்து 4s எளிதாக;
மாற்றம்: அனைத்து 4s எளிதாக;

குறிப்பு: சில உலாவிகளில் சிலவற்றைக் காட்டிலும் வேறுசில அம்சங்களைக் கொண்ட வேறுபட்ட தொடரினைக் கொண்டுள்ளன என்பதை நினைவில் கொள்ளுங்கள், எனவே ஒரு சொத்தின் உலாவி-முன்னுரை செய்யப்பட்ட பதிப்பு நிலையான தரநிலையைப் போலவே இருக்கும் என்று நினைத்து விடாதீர்கள். உதாரணமாக, ஒரு CSS சாய்வு உருவாக்க, நீங்கள் நேரியல்-சாய்வு சொத்து பயன்படுத்த. பயர்பாக்ஸ், ஒபேரா மற்றும் Chrome மற்றும் Safari இன் நவீன பதிப்புகள், Chrome மற்றும் Safari இன் முந்தைய பதிப்புகள் முன்னொட்டுள்ள சொத்துக்களை பயன்படுத்துகின்றன -வெப்கிட்-சாய்வு. மேலும், பயர்பாக்ஸ் தரநிலைகளை விட பயர்பாக்ஸ் பயன்படுத்துகிறது.

நீங்கள் எப்பொழுதும் உங்கள் அறிவிப்பை முடிக்க வேண்டியது சாதாரண, CSS அல்லாத சொற்களின் பதிப்பு அல்ல, அதனால் ஒரு உலாவி ஆட்சிக்கு ஆதரவு கொடுக்கும் போது, ​​அது ஒன்றைப் பயன்படுத்தும். CSS எப்படி படிக்க வேண்டும் என்பதை நினைவில் கொள்க. குறிப்பிட்ட விதிகள் ஒரே மாதிரியானவை என்றால், முந்தைய உலாவிகளில் முந்தைய விதிகள் முன்னுதாரணமாக இருக்கும், எனவே ஒரு உலாவி விற்பனையாளரின் பதிப்பை ஒரு விதிமுறையை வாசித்து, சாதாரணமாக ஒரு சாராரை ஆதரிக்கவில்லை எனில், அது ஒருமுறை விற்பனையாளர் பதிப்பை உண்மையான CSS விதி.

விற்பனையாளர் முன்னுரிமைகள் ஒரு ஹேக் இல்லை

விற்பனையாளர் முன்னொட்டுகள் முதன்முதலாக அறிமுகப்படுத்தப்பட்டபோது, ​​பல வலைத்தள வல்லுநர்கள் வெவ்வேறு உலாவிகளுக்கு ஆதரவளிக்க வலைத்தளத்தின் குறியீட்டைக் கையாளுவதற்கு இருண்ட நாட்களுக்கு முன்பாக ஒரு ஹேக் அல்லது மாற்றத்தை மீண்டும் மீண்டும் நினைவூட்டினர் ( இந்த தளம் " IE ஐ சிறந்த முறையில் பார்வையிட்டது " செய்திகளை நினைவில் கொள்ளவும்). CSS விற்பனையாளர்கள் முன்னொட்டுகள் ஹேக்ஸ், எனினும், நீங்கள் உங்கள் வேலையை பயன்படுத்தி பற்றி எந்த முன்பதிவு வேண்டும்.

ஒரு CSS ஹேக் சரியாக வேலை செய்ய மற்றொரு சொத்து பெறுவதற்காக மற்றொரு உறுப்பு அல்லது சொத்து செயல்படுத்த குறைபாடுகள் சுரண்டுகிறது. உதாரணமாக, குரல்-குடும்பச் சொத்து பாகுபடுத்துவதில் பாக்ஸ் மாதிரி ஹேக் சுரண்டப்பட்ட குறைபாடுகள் அல்லது உலாவிகளில் பின்சாய்வுக் கோடுகள் (\) எவ்வாறு ஒத்திவைக்கப்படுகின்றன. ஆனால் இன்டர்நெட் எக்ஸ்ப்ளோரர் 5.5 பாக்ஸ் மாதிரியை எவ்வாறு கையாளுகிறது மற்றும் எப்படி நெட்ஸ்கேப் அதை விளக்குவது, மற்றும் குரல் குடும்ப பாணியில் எதுவும் செய்யாதது போன்ற வித்தியாசத்தின் சிக்கலை சரிசெய்ய இந்த ஹேக்ஸ் பயன்படுத்தப்பட்டது. அதிர்ஷ்டவசமாக இந்த இரண்டு காலாவதியான உலாவிகளில் நாம் இந்த நாட்களில் நம்மை பற்றி கவலை இல்லை.

ஒரு விற்பனையாளர் முன்னுரை ஒரு ஹேக் அல்ல, ஏனென்றால், ஒரு சொத்து எவ்வாறு நடைமுறைப்படுத்தப்பட வேண்டும் என்பதற்கான விதிகள் அமைக்க அனுமதிக்கப்படுகிறது, அதே நேரத்தில் உலாவி தயாரிப்பாளர்கள் மற்றவற்றை உடைத்து வேறு விதமாக ஒரு சொத்துக்களை செயல்படுத்த அனுமதிக்கிறது. மேலும், இந்த முன்னுரிமைகள் CSS பண்புகளுடன் இணைந்து செயல்படுகின்றன, இது இறுதியில் விவரக்குறிப்பின் ஒரு பகுதியாக இருக்கும் . ஆரம்பத்தில் சொத்துக்கான அணுகலை பெற சில குறியீடுகளை நாங்கள் சேர்த்துக்கொள்கிறோம். இந்த சாதாரண விதி, அல்லாத முன்னமைக்கப்பட்ட சொத்து கொண்ட CSS விதி முடிவு ஏன் மற்றொரு காரணம். முழு உலாவி ஆதரவு அடைய முடிந்தவுடன் நீங்கள் முன்னொட்டு பதிப்புகள் கைவிடலாம்.

ஒரு குறிப்பிட்ட அம்சத்திற்கான உலாவி ஆதரவு என்னவென்று தெரிந்து கொள்ள வேண்டுமா? CanIUse.com வலைத்தளம் இந்த தகவலை சேகரிக்க மற்றும் நீங்கள் எந்த உலாவிகளில், மற்றும் அந்த உலாவிகளில் எந்த பதிப்புகள், இப்போது ஒரு அம்சம் ஆதரவு தெரியப்படுத்துகிறேன் ஒரு அற்புதமான ஆதாரமாக உள்ளது.

விற்பனையாளர் முன்னுரிமைகள் எரிச்சலூட்டும் ஆனால் தற்காலிகமானது

ஆமாம், எல்லா உலாவிகளிலும் வேலை செய்வதற்கு, 2-5 முறைகளை எழுத வேண்டியிருக்கும், ஆனால் அது ஒரு தற்காலிக நிலைமை. உதாரணமாக, ஒரு சில ஆண்டுகளுக்கு முன்பு, நீங்கள் எழுத வேண்டியிருந்தது ஒரு பெட்டி மீது வட்டமான மூலையை அமைக்க:

-ஒஸ்-எல்லை-ஆரம்: 10px 5px;
-வெப்கிட்-எல்லை-மேல்-இடது-ஆரம்: 10px;
-வெப்கிட்-எல்லை-மேல்-வலது-ஆரம்: 5px;
-வெப்கிட்-எல்லை-கீழ்-வலது-ஆரம்: 10px;
-வெப்கிட்-எல்லை-கீழ்-இடது-ஆரம்: 5px;
எல்லை-ஆரம்: 10px 5px;

ஆனால் இப்போது அந்த உலாவிகள் முழுமையாக இந்த அம்சத்தை ஆதரிக்க வந்திருக்கின்றன, நீங்கள் உண்மையில் தரப்படுத்தப்பட்ட பதிப்பை மட்டுமே கொண்டிருக்க வேண்டும்:

எல்லை-ஆரம்: 10px 5px;

குரோம் பதிப்பு 5.0 முதல் CSS3 சொத்துக்களை ஆதரிக்கிறது, பயர்பாக்ஸ் பதிப்பு 4.0 இல் சேர்த்தது, சஃபாரி 5.0, ஓபரா 10.5, 4.0 இல் iOS மற்றும் 2.1 ஆண்ட்ராய்டில் சேர்க்கப்பட்டது. இன்டர்நெட் எக்ஸ்ப்ளோரர் 9 முன்னொட்டு இல்லாமல் (மற்றும் IE 8 மற்றும் குறைவான முன்னுரிமைகள் இல்லாமல் அல்லது அதை ஆதரிக்கவில்லை) இல்லாமல் ஆதரிக்கிறது.

உலாவிகளில் எப்போதும் மாறிக்கொண்டிருக்கின்றன என்பதை நினைவில் கொள்ளுங்கள், பழைய உலாவிகளுக்கு ஆதரவளிக்கும் ஆக்கப்பூர்வமான அணுகுமுறைகள் நீங்கள் வலைப்பக்கங்களை உருவாக்குவதற்கான திட்டங்களைத் தவிர்த்து, மிக நவீன முறைகள் பின்னால் இருக்கும். முடிவில், உலாவி முன்னொட்டுகளை எழுதுவது தவறுகளை கண்டுபிடிப்பது மற்றும் சுரண்டுவதை விட மிகவும் எளிதானது, இது எதிர்கால பதிப்பில் மிகச் சரியாக இருக்கும் என்று நீங்கள் நினைக்கிறீர்கள், அதற்கு பதிலாக மற்றொரு பிழைகளை நீங்கள் சுரண்டுவதற்கும், அதற்கான பலவகைகளையும் கண்டுபிடிப்பது அவசியம்.