ඔබ ඒවා භාවිතා කළ යුත්තේ ඇයි?
CSS වෙළෙන්දන් උපසර්ගයන් වන අතර ඇතැම් විට CSS බ්රවුසර් උපසර්ග ලෙස හැඳින්වේ, බ්රවුසර් නිර්මාණකරුවන්ට නව CSS විශේෂාංගයන් සඳහා සහාය එකතු කිරීමට ක්රමයක් වනු ඇත. මෙම නව CSS විශේෂාංගයන් ක්රියාවට නංවන ආකාරය හරියට බ්රවුසරයේ නිශ්පාදකයා විසින් තීරණය කරනු ලබන ආකාරයේ පරීක්ෂණ හා අත්හදා බැලීමේ කාල පරිච්ඡේදය තුළ සිදු කළ හැකිය. මීට වසර කීපයකට පෙර CSS3 නැගීමත් සමග මෙම උපසර්ගය ඉතා ජනප්රිය විය.
CCS3 ප්රථම වරට හඳුන්වාදුන් විට, විවිධාකාර වූ ගුණාංග විවිධ කාලවලදී විවිධ බ්රව්සර්වලට පහර දුන්නේය. නිදසුනක් වශයෙන්, පරිවර්තකය සහ සංක්රමණය වැනි සජීවිකරණ-style ගුණාංග කිහිපයක් හඳුන්වා දෙන ලද පළමු වෙබ්ක්රියාවෙන් ක්රියාත්මක වන බ්රවුසර (සෆාරි සහ ක්රෝම්) විය. වෙබ් අඩවි නිර්මාණකරුවන්ට ඔවුන්ගේ නව කාර්යයන් භාවිතා කිරීමට හැකි වූ අතර, බ්රවුසරයේ සෑම අයෙකුටම එය බලාසිටිනවා වෙනුවට වහාම ඒවාට සහාය දුන් බ්රවුසරයේ දැක ගත හැකි විය.
එබැවින් ඉදිරිපස අවසානයේ වෙබ් සංවර්ධනකරුගේ දෘෂ්ටිකෝණයෙන්, වෙබ් බ්රව්සර උපසර්ගයන්, වෙබ් අඩවි වලට නව CSS විශේෂාංග එකතු කිරීම සඳහා උපයෝගී කරගනිමින් සැරිසැරීමේදී බ්රවුසරය එම මෝස්තර වලට සහාය වනු ඇත. විවිධ බ්රවුසර නිෂ්පාදකයින් තරමක් වෙනස් ආකාරයන් හෝ වෙනස් syntax සමඟ දේපල ක්රියාත්මක කරන විට එය විශේෂයෙන් ප්රයෝජනවත් විය හැකිය.
ඔබ භාවිතා කළ හැකි CSS බ්රවුසර උපකරණය (එක් එක් වෙනස් බ්රවුසරයට විශේෂිත වේ):
- ඇන්ඩ්රොයිඩ්: -බ්බිට්-
- Chrome: -webkit-
- ෆයර්ෆොක්ස්: -moz-
- Internet Explorer: -ms-
- iOS: -බ්බිට්-
- ඔපෙරා:
- සෆාරි: -බ්බිට්-
බොහෝ අවස්ථාවලදී, නව CSS ශෛලමය දේපලක් භාවිතා කිරීමට, ඔබ සම්මත CSS ගුණාංගය රැගෙන සෑම බ්රව්සරයකම උපසර්ගය එකතු කරන්න. පෙරසැකසුම් අනුවාදයන් පළමුවෙන්ම සිදුවනු ඇත (ඔබ කැමති කුමන අනුපිළිවෙලකට) සාමාන්ය CSS දේපල අවසන් වනු ඇත. උදාහරණයක් ලෙස, ඔබේ ලේඛනයට CSS3 පරිවර්තනයක් එක් කිරීමට අවශ්ය නම්, පහත දැක්වෙන ආකාරයට සංක්රාන්තිම ගුණාංගය භාවිතා කරනු ඇත:
-webkit- පරිවර්තනය: සියලු 4s පහසුයි;
-මොස්- සංක්රාන්තිය: සියලු 4s පහසුයි;
-ms- සංක්රාන්තිය: සියලු 4s පහසුයි;
--සංක්රාන්තිය : සියලු 4s පහසුයි;
සංක්රාන්තිය: සියලු 4s පහසුයි;
සටහන: අනිත් අයට වඩා සමහර ගුණාංග සඳහා වෙනත් ගවේශකයක් වෙනත් බ්රවුසර්වලට ඇති අතර, දේපළේ ඇති බ්රවුසරයේ පෙරසැකසුම් අනුව සම්මත ගුණාංගයට සමාන වේ යැයි අනුමාන නොකරන්න. උදාහරණයක් ලෙස, CSS අනුක්රමණය නිර්මාණය කිරීම සඳහා, ඔබ රේඛීය-gradient දේපල භාවිතා කරයි. ෆයර්ෆස්, ඔපෙරා සහ නවීන සංස්කරණවල Chrome සහ Safari මෙම ගුණාංගය සුදුසු උපසර්ගය භාවිතා කරයි. ක්රෝම් සහ සෆාරි හි මුල් සංස්කරණයේ පෙර ප්රත්යාවිතා දේපල -webkit-gradient භාවිතා කරයි. එසේම, ෆයර්ෆොක්ස් සම්මත සම්මතයන්ට වඩා වෙනස් වටිනාකම් භාවිතා කරයි.
ඔබ නිතරම ඔබේ ප්රකාශය සාමාන්යයෙන්, CSS දේපල වල නොවන පූර්ව අනුවාදය සහිතව අවසන් කර ඇති නිසා බ්රවුසරය පාලනයට අනුබල දෙන විට එයට එය භාවිතා කරනු ඇත. CSS කියවන ආකාරය මතක තබා ගන්න. පසුව නීති රීති වලට අනුකූල වන්නේ පෙර නිශ්චිතවම අනුකූල නම්, බ්රවුසරය රීතියේ වෙළෙන්දාගේ අනුවාදය කියවා එය සාමාන්යායට නොපවතී නම්, එය වරක් එය භාවිතා කරන විට එය වෙළෙන්දෝ අනුවාදය යටපත් කරනු ඇත සැබෑ CSS නීතියයි.
වෙළෙන්දාගේ Prefixes නොවේ
විකුණුම් උපසර්ග මුලින්ම හඳුන්වාදෙන විට බොහෝ වෙබ් වෘත්තිකයින් විවිධ බ්රවුසර් වලට සහාය දැක්වීම සඳහා වෙබ් අඩවියේ කේතය වෙබ් අඩවියේ කේතය ලබා ගැනීම සඳහා අඳුරු නෝට්ටුවකට හෝ මාරු වී ඇත්දැයි විමසීය. කෙසේ වෙතත්, CSS වෙළෙන්දන් උපසර්ග හෑස්කම් නොකෙරේ, ඔබේ වැඩ වලදී ඒවා භාවිතා කිරීම පිළිබඳව ඔබට රිසි නොවිය යුතුය.
වෙනත් දේපලක් නිවැරදිව වැඩ කිරීම සඳහා තවත් මූලද්රව්යයක් හෝ දේපලක් ක්රියාවට නැංවීම සඳහා CSS හැක් එකක් භාවිතා කරයි. නිදසුනක් ලෙස, කොටුව මොඩියුලය හැඩයේ පවුලේ දේපල විකාශනය කිරීමේදී හෝ බ්රවුසරයේ විවේචනය (\) විග්රහ කර ඇති දෝෂයන් උපයෝගී කර ගනී. නමුත් මෙම මෘදුකාංගය භාවිතා කර ඇත්තේ Internet Explorer 5.5 කොටුව මොඩියුලය හා Netscape එය අර්ථකථනය කරන ලද අතර, හඬ නාට්ය පවුල් ශෛලිය සමග කිසිදු සම්බන්ධයක් නොමැති බවය. ස්තුතියි මේ පරණ බ්රව්සර් දෙක මේ දවස්වල අපට අප ගැන සැලකිලිමත් නැත.
වෙළෙන්දා උපසර්ගයක් අහෝසි නොවී ඇති බැවින්, දේපළක් ක්රියාත්මක කළ හැකි ආකාරය පිළිබඳ නීති රීති වලට අනුකූල වීමට ඉඩ සලසන නිසා, අන් සියල්ලම බිඳ දැමීමෙන් තොරව බ්රවුසර්කරුවන්ට ඉඩමක් වෙනත් ආකාරයකින් ක්රියාත්මක කිරීමට ඉඩ සලසයි. තවදුරටත්, මෙම උපසර්ගය CSS ගුණාංග සමඟ කටයුතු කරනු ඇත, අවසානයේ පිරිවිතරයේ කොටසක් වනු ඇත . අපි ඉක්මනට දේපල ප්රවේශය ලබා ගැනීම සඳහා අපි යම් කේතයක් එකතු කරමු. CSS නීතිය සාමාන්යයෙන් නොතිබුනු දේපලක් සහිතව මෙය තවත් හේතුවකි. සම්පුර්ණ බ්රවුසර් සහය ලබා ගැනීමෙන් පසු ඔබට පෙර ඇමිණුම් අනුවාද ඉවත් කළ හැකිය.
යම් අංගයක් සඳහා බ්රවුසරයේ සහාය කුමක් දැයි දැන ගැනීමට අවශ්ය ද? මෙම වෙබ් අඩවියට CanIUse.com වෙබ් අඩවිය මෙම තොරතුරු රැස්කර ගැනීම සඳහා පුදුම සම්පතක් වන අතර එම වෙබ් බ්රව්සර සහ කුමන වෙබ් බ්රවුසරයේ සංස්කරණ කවුළුවකදැයි දැනගැනීමට පහසුකම් සපයයි.
වෙළෙන්දාගේ Prefixes විනීත නමුත් තාවකාලිකයි
ඔව්, එය සෑම බ්රව්සරයකටම වැඩ කිරීමට ලබා ගැනීමට 2-5 වාරයක් දේපළ ලිවීමට සිදු වන අතර, එය තාවකාලික තත්වයකි. නිදසුනක් වශයෙන්, මීට වසර කීපයකට පෙර ඔබ ලියන ලද පෙට්ටියක ඇති වටකුරු කවුළුවක් සැකසීම සඳහා:
-moz-මාදු-රේන්දස්: 10px 5px;
-webkit-දේශසීමා-ඉහළ-වම්-අරය: 10px;
-webkit-දේශසීමා-ඉහළ-දකුණු-අරය: 5px;
-webkit-දේශසීමා-පහළ-දකුණු-අරය: 10px;
-webkit-දේශසීමා-පහළ-වම්-අරය: 5px;
මායිම-අරය: 10px 5px;
නමුත් දැන් මෙම වෙබ් බ්රවුසරය මෙම අංගය සඳහා සම්පූර්ණ සහයෝගය ලබා දී ඇති අතර, ඔබ සැබැවින්ම ප්රමිතිගත අනුවාදය අවශ්ය වන්නේ:
මායිම-අරය: 10px 5px;
Chrome 5.0 වෙළුමේ සිට CSS3 දේපළට සහයෝගය ලබාදී ඇති අතර ෆයර්ෆස් 4.0 අනුවාදය එය එකතු කර ඇත. සෆාරි 5.0, ඔපෙරා 10.5, iOS 4.0, ඇන්ඩ්රොයිඩ් 2.1 සහ 2.1. Internet Explorer 9 පවා එය උපසර්ගයකින් තොරව සහාය දක්වයි (IE 8 සහ පහත් ඒවා උපසර්ගයන් සහිතව හෝ නොමැතිව එය සහාය නොදක්වයි).
බ්රවුසරයන් සැමවිටම වෙනස් වන බව මතක තබා ගන්න. නවීන ක්රමවේදයන් පිටුපස වසර ගණනාවක් ඇති වෙබ් අඩවි ගොඩනඟා ගැනීමට සැලසුම් නොකරන්නේ නම් පැරණි වෙබ් බ්රව්සර් වලට සහාය වීමට නිර්මාණශීලී ප්රවේශයන් අවශ්ය වනු ඇත. අවසාන වශයෙන්, බ්රව්සරයේ උපසර්ගයන් ලිවීමේදී සහ වඩාත් ප්රයෝජනවත් වනු ඇත අනාගත අනුවාදයේ බොහෝ දුරට සැකසීමට වඩා පහසු වනු ඇත, ඔබ ගවේෂණය කිරීම සඳහා තවත් දෝෂයක් සොයා ගත යුතුය.