CSS വെണ്ടർ പ്രീഫിക്സ്

അവർ എന്താണ്, എന്തിനാണ് അവയെ ഉപയോഗിക്കേണ്ടത്

എല്ലാ ബ്രൌസറുകളിലും പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നതിന് മുമ്പ് പുതിയ CSS സവിശേഷതകൾക്കായി ബ്രൌസർ നിർമ്മാതാക്കൾക്ക് പിന്തുണ ചേർക്കുന്നതിനുള്ള ഒരു മാർഗമാണ് CSS വെൻഡർ പ്രിഫിക്സുകൾ, അല്ലെങ്കിൽ സിഎഫ്ഒ ബ്രൗസർ പ്രിഫിക്സുകൾ. ബ്രൌസർ നിർമ്മാതാവിന് ഈ പുതിയ CSS സവിശേഷതകൾ എങ്ങനെ നടപ്പിലാക്കുമെന്നത് കൃത്യമായി നിർണ്ണയിക്കുന്ന ഒരു പരീക്ഷണ പരീക്ഷണ പരീക്ഷണ കാലഘട്ടത്തിൽ ഇത് ചെയ്യാം. ഏതാനും വർഷങ്ങൾക്കു മുൻപ് ഈ പ്രീഫിക്സ് വളരെ പ്രബലമായി .

CCS3 ആദ്യമായി അവതരിപ്പിക്കപ്പെട്ടപ്പോൾ, പല അവസരങ്ങളിലും വിവിധ ബ്രൌസറുകൾ അടിക്കാൻ തുടങ്ങി. ഉദാഹരണത്തിന്, വെബ്ബിറ്റ് പവർ ബ്രൗസറുകൾ (സഫാരി, ക്രോം) തുടങ്ങിയവയാണ് പരിവർത്തനം, ട്രാൻസിഷൻ പോലെയുള്ള ചില ആനിമേഷൻ-ശൈലിയിലുള്ള സവിശേഷതകൾ പരിചയപ്പെടുത്താൻ ആദ്യം തുടങ്ങിയത്. വെണ്ടർ പ്രിഫിക്സുള്ള പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചുകൊണ്ട്, വെബ് ഡിസൈനർമാർക്ക് അവരുടെ പുതിയ സവിശേഷതകളിൽ അവരുടെ കഴിവുകൾ ഉപയോഗിക്കാൻ കഴിഞ്ഞു, കൂടാതെ ബ്രൗസറിൽ ഉടൻ തന്നെ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകളിൽ നോക്കിക്കാണാനും മറ്റേതെങ്കിലും ബ്രൌസർ നിർമ്മാതാവിന് കാത്തിരിക്കേണ്ടിവരുമെന്നതിനുപകരം!

അതിനാൽ ഒരു ഫ്രണ്ട് എന്റ് വെബ് ഡവലപ്പറിന്റെ കാഴ്ചപ്പാടിൽ നിന്ന് ബ്രൌസർ പ്രീഫിക്സുകൾ സൈറ്റിലേക്ക് പുതിയ CSS സവിശേഷതകൾ ചേർക്കുവാൻ ഉപയോഗിക്കുന്നു. വിവിധ ബ്രൌസർ നിർമ്മാതാക്കൾ സ്വത്തുക്കൾ വ്യത്യസ്തമായ സിന്റാക്സ് ഉപയോഗിച്ച് അല്ലെങ്കിൽ വ്യത്യസ്തമായ സിന്റാക്സിൽ ഉപയോഗിക്കുമ്പോൾ പ്രത്യേകിച്ചും ഇത് സഹായകമാകും.

നിങ്ങൾ ഉപയോഗിക്കാനാകുന്ന CSS ബ്രൗസർ പ്രീഫിക്സ് (ഇതിൽ ഓരോ വ്യത്യസ്ത ബ്രൗസറിലും നിർദ്ദിഷ്ടമാണ്) ഇവയാണ്:

• Android: -webkit-
• Chrome: -webkit-
• ഫയർഫോക്സ്: -moz-
• ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ: -ms-
• iOS: -webkit-
• Opera:
• സഫാരി: -webkit-

മിക്കപ്പോഴും, ഒരു പുതിയ CSS സ്റ്റൈൽ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾ സ്റ്റാൻഡേർഡ് CSS പ്രോപ്പർട്ടി എടുത്ത് ഓരോ ബ്രൌസറിനും പ്രിഫിക്സ് ചേർക്കുക. സാധാരണ CSS പ്രോപ്പർട്ടി അവസാനമായി വരും മുൻഗണനയുള്ള പതിപ്പുകൾ എല്ലായ്പ്പോഴും ആദ്യം വരുന്നതാണ്. ഉദാഹരണത്തിന്, നിങ്ങളുടെ പ്രമാണത്തിലേക്ക് ഒരു CSS3 മാറ്റം ആവശ്യമുണ്ടെങ്കിൽ, താഴെ കാണിച്ചിരിക്കുന്നതുപോലെ നിങ്ങൾ ട്രാൻസിഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കും:

-വെബ്ബ്കിറ്റ്- ട്രാൻസിഷൻ: എല്ലാ 4 ഇസലും
-മോസ്- ട്രാൻസിഷൻ: എല്ലാം 4s എളുപ്പവും;
-ms- സംക്രമണം: എല്ലാ 4 ചെറുപ്പവും ;
-ഒരു പരിവർത്തനം: എല്ലാ 4s എളുപ്പവും;
പരിവർത്തനം: എല്ലാ 4 ചെറുപ്പവും;

ശ്രദ്ധിക്കുക: ചില ബ്രൌസറുകൾക്ക് ചില വിശേഷതകൾക്കായി വ്യത്യസ്തമായ സിന്റാക്സ് ഉണ്ട്, അതിനാൽ ഒരു വസ്തുവിന്റെ ബ്രൗസർ-പ്രിഫിക്സഡ് പതിപ്പ് തന്നെയാണോ ആ സ്റ്റാൻഡേർഡ് പ്രോപ്പർട്ടിക്ക് തുല്യമാണെന്നു കരുതരുത്. ഉദാഹരണത്തിന്, ഒരു CSS ഗ്രേഡിയന്റ് സൃഷ്ടിക്കുന്നതിനായി, നിങ്ങൾ ലീനിയർ-ഗ്രേഡിയന്റ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. Chrome, Safari എന്നിവയുടെ ആപ്പ്സ്, ഫയർഫോക്സ്, ഓപ്പറ, ആധുനിക പതിപ്പുകളും മുൻപുള്ള Chrome- ഉം Safari- ന്റെയും മുൻകാല പതിപ്പുകളാണെങ്കിൽ, prefix-property -webkit-gradient ഉപയോഗിക്കുന്നു. എതിരെ, ഫയർഫോക്സ് അടിസ്ഥാന മൂല്യങ്ങളെ അപേക്ഷിച്ച് വ്യത്യസ്ത മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നു.

നിങ്ങൾ എല്ലായ്പ്പോഴും നിങ്ങളുടെ ഡിക്ലറേഷൻ അവസാനിപ്പിക്കുന്നതിനുള്ള കാരണം, CSS പ്രോപ്പർട്ടി നോൺ-പ്രിഫിക്സുചെയ്ത പതിപ്പ്, ഒരു ബ്രൗസർ നിയമം പിന്തുണയ്ക്കുമ്പോൾ അത് അത് ഉപയോഗിക്കും. എങ്ങനെയാണ് CSS വായിക്കുന്നത് എന്ന് ഓർക്കുക. നിർദ്ദിഷ്ട ഒരു കാര്യം തന്നെയാണെങ്കിൽ, മുൻപത്തെ നിയമങ്ങൾ മുൻഗണനകളിൽ മുൻപന്തിയിലാണ്, അതിനാൽ ഒരു ബ്രൗസർ വെണ്ടർ വിർച്വൽ പതിപ്പ് വായിക്കുകയും, അത് സാധാരണ പിന്തുണയ്ക്കാതിരിക്കുകയും ചെയ്താൽ, അത് ഒരിക്കൽ ചെയ്താൽ, അത് വെൻഡർ പതിപ്പിനെ അസാധുവാക്കും യഥാര്ത്ഥ CSS ഭരണം.

വെണ്ടർ പ്രിഫിക്സ് ഒരു Hack അല്ല

വെണ്ടർ പ്രിഫിക്സുകൾ ആദ്യമായി അവതരിപ്പിക്കപ്പെട്ടപ്പോൾ, പല ബ്രൌസറുകളെ പിന്തുണയ്ക്കുന്നതിന് ഒരു വെബ്സൈറ്റിന്റെ കോഡ് ഫോർമാറ്റ് ചെയ്ത ഇരുണ്ട ദിനങ്ങളിൽ ഒരു ഹാക്കിലേക്കോ ഷിപ്പിൻറെയോ ആകട്ടെ, പല വെബ് പ്രൊഫഷണലുകളും ആശ്ചര്യപ്പെട്ടു. ( ഈ സൈറ്റ് " ഏറ്റവും മികച്ചത് IE പേജിൽ കണ്ടത് " ഓർക്കുക). CSS വെണ്ടർമാർക്സ് പ്രീക്സുകൾ ഹാക്ക് ചെയ്യാറില്ല, എന്നാൽ നിങ്ങളുടെ ജോലിയുടെ ഉപയോഗത്തെക്കുറിച്ച് നിങ്ങൾക്ക് യാതൊരു സംവാദവുമില്ല.

മറ്റൊരു വസ്തുവിനെ ശരിയായി പ്രവർത്തിപ്പിക്കുന്നതിന് മറ്റൊരു മൂലകമോ സ്വത്തോ സ്ഥാപനമോ നിർവ്വഹിക്കുന്നതിൽ വൈകല്യങ്ങളെ ഒരു CSS ഹാക്ക് ദുരുപയോഗം ചെയ്യുന്നു. ഉദാഹരണമായി, ബോക്സ് മോഡൽ ഹാക്കും ശബ്ദ-കുടുംബ സ്വത്തിന്റെ പാഴ്സലിംഗും അല്ലെങ്കിൽ ബ്രൗസറുകൾ പിൻവലിക്കലുകളും (\) എങ്ങനെയാണ് പ്രവർത്തിക്കുന്നത്. എന്നാൽ ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ 5.5 ബോക്സ് മോഡൽ എങ്ങനെ കൈകാര്യം ചെയ്തു, നെറ്റ്സ്കേപ് അതിനെ വ്യാഖ്യാനിച്ചതെങ്ങനെയെന്ന വ്യത്യാസത്തെക്കുറിച്ചും വോയ്സ് കുടുംബ ശൈലിയിൽ ഒന്നും ചെയ്യാൻ കഴിയാത്തതും തമ്മിലുള്ള വ്യത്യാസം പരിഹരിക്കാൻ ഈ ഹാക്കുകൾ ഉപയോഗിച്ചു. നന്ദി, ഈ രണ്ട് കാലത്തെ ബ്രൌസറുകൾ നമ്മൾ ഇക്കാലത്ത് നമ്മെക്കുറിച്ച് ആശങ്കപ്പെടുന്നില്ല.

ഒരു വെണ്ടർ പ്രിഫിക്സ് ഒരു ഹാക്ക് അല്ല കാരണം ഇത് ഒരു വസ്തുവിനെ എങ്ങനെ നടപ്പാക്കാമെന്നതിനുള്ള നിയമങ്ങൾ വ്യക്തമാക്കാൻ അനുവദിക്കുന്നു, അതേ സമയം ബ്രൌസർ നിർമ്മാതാക്കൾ മറ്റെല്ലായിടത്തും മറ്റെല്ലായിടത്തും തകർന്നുകിടക്കുന്ന ഒരു വസ്തുവിനെ അനുവദിക്കുകയാണ് ചെയ്യുന്നത്. കൂടാതെ, ഈ പ്രിഫിക്സുകൾ CSS പ്രോപ്പർട്ടികളുമായി പ്രവർത്തിക്കുന്നു, അത് ഒടുവിൽ സ്പെസിഫിക്കേഷന്റെ ഭാഗമായിരിക്കും . ഞങ്ങൾ എളുപ്പത്തിൽ വസ്തുവിന് ആക്സസ് ലഭിക്കുന്നതിന് ചില കോഡ് ചേർക്കുന്നു. സിഎസ്എസ് ഭരണം സാധാരണ, നോൺ-പ്രിഫിക്സഡ് പ്രോപ്പർട്ടിയിൽ അവസാനിപ്പിക്കേണ്ട മറ്റൊരു കാരണമാണ് ഇത്. പൂർണ്ണ ബ്രൌസർ പിന്തുണ കൈവരിച്ചാൽ നിങ്ങൾക്ക് മുൻഗണനാ പതിപ്പുകൾ ഡ്രോപ്പ് ചെയ്യാൻ കഴിയും.

ഒരു പ്രത്യേക സവിശേഷതയ്ക്കായുള്ള ബ്രൌസർ പിന്തുണ എന്താണെന്ന് അറിയണോ? ഈ വിവരം ശേഖരിക്കുന്നതിനുള്ള ഒരു അത്ഭുതകരമായ വിഭവമാണ് CanIUse.com വെബ്സൈറ്റ്, ഏത് ബ്രൌസറുകളാണ് നിങ്ങൾക്കറിയാമെന്ന് അറിയിക്കുന്നത്, ആ ബ്രൌസറുകളുടെ ഏത് പതിപ്പാണ് നിലവിൽ ഉപയോഗിക്കുന്നത്, നിലവിൽ ഒരു സവിശേഷതയെ പിന്തുണയ്ക്കുന്നു.

വെണ്ടർ പ്രിഫിക്സ് ശല്യപ്പെടുത്തൽ എന്നാൽ താൽക്കാലിക ആകുന്നു

അതെ, എല്ലാ ബ്രൗസറുകളിലും പ്രവർത്തിക്കാൻ അത് രസകരമായ, ആവർത്തനസ്വഭാവം 2-5 പ്രാവശ്യം എഴുതിയിരിക്കണം, പക്ഷേ അത് ഒരു താൽകാലിക അവസ്ഥയാണ്. ഉദാഹരണത്തിന്, ഏതാനും വർഷം മുമ്പ്, നിങ്ങൾക്ക് എഴുതേണ്ട ഒരു ചതുരത്തിൽ ഒരു ഉരുണ്ട കോണുകൾ സജ്ജമാക്കാനായി:

-മോസ്-ബോർഡർ-ആരം: 10px 5px;
-വെബ്കിറ്റ്-ബോർഡർ-മുകളിൽ ഇടത്-ആരം: 10px;
-വെബ്കിറ്റ്-ബോർഡർ-ടോപ്പ്-വലത്-ആരം: 5px;
-വെബ്കിറ്റ്-ബോർഡർ-വലത്-വലത്-ആരം: 10px;
-വെബ്കിറ്റ്-ബോർഡർ-താഴെ-ഇടത്-ആരം: 5px;
ബോർഡർ-ആരം: 10px 5px;

എന്നാൽ ഈ ബ്രൗസറുകൾ പൂർണ്ണമായി ഈ സവിശേഷതയ്ക്ക് പൂർണ്ണ പിന്തുണ നൽകാൻ ഇപ്പോൾ വന്നിട്ടുണ്ട്, നിങ്ങൾക്ക് ശരിക്കും സ്റ്റാൻഡേർഡ് ചെയ്ത പതിപ്പ് മാത്രമേ ആവശ്യമുള്ളൂ:

ബോർഡർ-ആരം: 10px 5px;

Chrome 5.0 ന്റെ പതിപ്പ് മുതൽ CSS3 സ്വത്ത് പിന്തുണച്ചിട്ടുണ്ട്, Firefox 4.0 ലും, സഫാരി 5.0 ൽ, 10.5 ൽ Opera, 4.0 ൽ iOS, 2.1 ൽ ആൻഡ്രോയ്ഡ്. ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 9 ഒരു പ്രിഫിക്സ് ഇല്ലാതെ തന്നെ പിന്തുണയ്ക്കുന്നു (ഒപ്പം IE 8 ഉം കുറഞ്ഞത് പ്രീഫിക്സുകളോ അല്ലാതെയോ ഇത് പിന്തുണയ്ക്കുന്നില്ല).

ബ്രൗസറുകൾ എല്ലായ്പ്പോഴും മാറാൻ പോകുന്നുവെന്നും പഴയ ബ്രൗസറുകൾക്ക് പിന്തുണ നൽകുന്ന സൃഷ്ടിപരമായ സമീപനങ്ങളേക്കാൾ വളരെ ആധുനിക രീതികൾക്കു പിന്നിലുളള വെബ് പേജുകൾ നിർമ്മിക്കുന്നതിനിടയിലാണെങ്കിൽ മാത്രം ആവശ്യമായി വരും. അവസാനമായി, ബ്രൗസർ പ്രിഫിക്സുകൾ എഴുതുമ്പോൾ പിശകുകൾ കണ്ടെത്തുന്നതിനും ചൂഷണം ചെയ്യുന്നതിനേക്കാളും വളരെ എളുപ്പമാണ്, ഭാവിയിൽ ഇത് കൂടുതൽ ഭാവിയിൽ പരിഹരിക്കപ്പെടാൻ സാധ്യതയുണ്ട്, ഇത് മറ്റൊരു പിശക് കണ്ടുപിടിക്കാൻ ആവശ്യപ്പെടുന്നു.