તેઓ શું છે અને શા માટે તમારે તેનો ઉપયોગ કરવો જોઈએ
CSS વિક્રેતા ઉપસર્ગો, પણ ક્યારેક કે CSS બ્રાઉઝર ઉપસર્ગ તરીકે ઓળખાય છે, એ બ્રાઉઝર નિર્માતાઓ માટે નવા CSS સુવિધાઓ માટે સમર્થન ઉમેરવા માટેનો એક રસ્તો છે તે સુવિધાઓ તે તમામ બ્રાઉઝર્સમાં સંપૂર્ણપણે સમર્થિત છે તે પહેલાં. આ એક પ્રકારના પરીક્ષણ અને પ્રયોગોના સમયગાળા દરમિયાન થઈ શકે છે જ્યાં બ્રાઉઝર નિર્માતા નક્કી કરે છે કે આ નવી CSS સુવિધાઓ કેવી રીતે અમલમાં આવશે. આ ઉપસર્ગ થોડા વર્ષો પહેલા CSS3 ના ઉદભવ સાથે ખૂબ જ લોકપ્રિય બની ગયા હતા.
જ્યારે CCS3 ને સૌપ્રથમ રજૂ કરવામાં આવ્યું હતું, ત્યારે ઉત્સાહિત ગુણધર્મોની સંખ્યા અલગ અલગ સમયે વિવિધ બ્રાઉઝરોને હટાવવાનું શરૂ કર્યું. ઉદાહરણ તરીકે, વેબકિટ સંચાલિત બ્રાઉઝર્સ (સફારી અને ક્રોમ) એ પ્રથમ એનિમેશન-સ્ટાઇલ પ્રોપર્ટીઝ જેવાં કે પરિવર્તન અને સંક્રમણનો સમાવેશ કરે છે. વિક્રેતા પ્રીફિક્સ પ્રોપર્ટીઝનો ઉપયોગ કરીને, વેબ ડિઝાઇનર્સ તે નવી સુવિધાઓનો ઉપયોગ તેમના કામમાં કરી શક્યા હતા અને તેમને બ્રાઉઝર બ્રાઉઝર્સ પર જોઇ શક્યા છે, જે દરેક અન્ય બ્રાઉઝર ઉત્પાદકને મળવા માટે રાહ જોતા હોવાને બદલે તેમને સપોર્ટ કરે છે!
તેથી ફ્રન્ટ-એન્ડ વેબ ડેવલપરના પરિપ્રેક્ષ્યમાંથી, બ્રાઉઝર ઉપસર્ગોનો ઉપયોગ સાઇટ પર નવા CSS સુવિધાઓને ઉમેરવા માટે થાય છે, જ્યારે એ જાણીને આરામદાયક હોય છે કે બ્રાઉઝર્સ તે શૈલીઓને સપોર્ટ કરશે. આ ખાસ કરીને મદદરૂપ થઈ શકે છે જ્યારે જુદા જુદા બ્રાઉઝર ઉત્પાદકો ગુણધર્મો જુદા જુદા રીતે અથવા અલગ સિન્ટેક્ષ સાથે અમલીકરણ કરે છે.
CSS બ્રાઉઝર ઉપસર્ગ જે તમે ઉપયોગ કરી શકો છો (જે પ્રત્યેક એક અલગ બ્રાઉઝર માટે વિશિષ્ટ છે):
- Android: -વેબકીટ-
- ક્રોમ: -વેબકીટ-
- ફાયરફોક્સ: -મોઝ-
- ઇન્ટરનેટ એક્સપ્લોરર: -એમએસ-
- આઇઓએસ: -વેબકીટ-
- ઑપેરા: -ઓ-
- સફારી: -વેબકીટ-
મોટા ભાગના કિસ્સાઓમાં, એક નવી સી.એસ.એસ. સ્ટાઇલ પ્રોપર્ટીનો ઉપયોગ કરવા માટે, તમે પ્રમાણભૂત CSS પ્રોપર્ટી લો છો અને દરેક બ્રાઉઝર માટે પ્રીફિક્સ ઉમેરો છો. ઉપસંસ્કૃત આવૃત્તિઓ હંમેશા પ્રથમ આવે છે (કોઈપણ ક્રમમાં તમે પસંદ કરો છો) જ્યારે સામાન્ય સીએસએસ પ્રોપર્ટી છેલ્લામાં આવશે. ઉદાહરણ તરીકે, જો તમે તમારા દસ્તાવેજમાં CSS3 સંક્રમણ ઍડ કરવા માંગો છો, તો તમે નીચે બતાવ્યા પ્રમાણે સંક્રમણ મિલકતનો ઉપયોગ કરશો:
-વેબકીટ- સંક્રમણ: બધા 4s સરળતા;
-મોઝ- સંક્રમણ: બધા 4s સરળતા;
-એમએસ- સંક્રમણ: બધા 4s સરળતા;
-ઓ- સંક્રમણ: બધા 4s સરળતા;
સંક્રમણ: બધા 4s સરળતા;
નોંધ: યાદ રાખો, કેટલાક બ્રાઉઝર્સ પાસે અન્યની તુલનામાં ચોક્કસ ગુણધર્મો માટે એક અલગ વાક્યરચના છે, તેથી એવું માનતા નથી કે પ્રોપર્ટીનું બ્રાઉઝર-પ્રીફિક્સ વર્ઝન સ્ટાન્ડર્ડ પ્રોપર્ટી જેવું જ છે. ઉદાહરણ તરીકે, CSS ગ્રેડિઅન્ટ બનાવવા માટે, તમે લીનીયર-ગ્રેડિયન્ટ પ્રોપર્ટીનો ઉપયોગ કરો છો. ક્રોમ અને સફારીના ફાયરફોક્સ, ઓપેરા અને આધુનિક સંસ્કરણ, યોગ્ય ઉપસર્ગ સાથેની મિલકતનો ઉપયોગ કરે છે જ્યારે ક્રોમ અને સફારીના પ્રારંભિક વર્ઝનમાં પ્રિફિક્સ પ્રોપટટીનો ઉપયોગ થાય છે-વેબકિટ-ગ્રેડિએન્ટ. ઉપરાંત, ફાયરફોક્સ પ્રમાણભૂત મુદ્દાઓ કરતા અલગ મૂલ્યોનો ઉપયોગ કરે છે.
આ કારણ કે તમે હંમેશાં તમારી જાહેરાતને સામાન્ય, બિન-પ્રિફિક્સ આવૃત્તિ સાથે સમાપ્ત કરો છો, જ્યારે બ્રાઉઝર બ્રાઉઝરને ટેકો પૂરો પાડે છે, ત્યારે તે તે એકનો ઉપયોગ કરશે. યાદ રાખો કે CSS કેવી રીતે વાંચવામાં આવે છે. પછીના નિયમો અગાઉની સરખામણીમાં પ્રાધાન્ય લે છે જો ચોક્કસતા એ સમાન હોય છે, તેથી બ્રાઉઝર નિયમના વિક્રેતા સંસ્કરણને વાંચી લેશે અને તેનો ઉપયોગ કરશે જો તે સામાન્ય એકને સમર્થન આપતો નથી, પરંતુ એક વાર તે કરે છે, તો તે વિક્રેતા સંસ્કરણને ઓવરરાઇડ કરશે વાસ્તવિક સીએસએસ નિયમ
વિક્રેતા ઉપસર્ગો હેક નથી
જ્યારે વિક્રેતા ઉપસર્ગો પ્રથમ રજૂ કરવામાં આવ્યા ત્યારે ઘણા વેબ પ્રોફેશનલ્સ આશ્ચર્ય પામ્યા હતા કે જો તેઓ હેક હતા અથવા ઘાટા દિવસોમાં પાછા ફરતા હતા, તો તે વિવિધ બ્રાઉઝર્સને સમર્થન આપવા માટે વેબસાઇટના કોડને ભગાડવા (તે " આ સાઇટ IE માં શ્રેષ્ઠ રીતે જોઈ શકાય છે " સંદેશા યાદ રાખો). સીએસએસ વિક્રેતાઓ ઉપસર્ગો હેક્સ નથી, તેમછતાં, અને તમારા કાર્યમાં તેમને વાપરવા વિશે કોઈ રિઝર્વેશન ન હોવા જોઈએ.
અન્ય ગુણધર્મને યોગ્ય રીતે કામ કરવા માટે અન્ય ઘટક અથવા સંપત્તિના અમલીકરણમાં એક સીએસએસ હેક ભૂલોનું શોષણ કરે છે. ઉદાહરણ તરીકે, બૉક્સ મોડેલ વોઇસ-કૌટુંબિક સંપત્તિના પદચ્છેદનમાં અથવા બ્રાઉઝર્સ બેકસ્લેશ (\) પર કેવી રીતે પાર્સ કરે છે તેનો ઉપયોગ કરે છે. પરંતુ આ હેક્સનો ઉપયોગ કેવી રીતે ઈન્ટરનેટ એક્સપ્લોરર 5.5 બૉક્સ મોડેલને હાથ ધરે છે અને નેટસ્કેપ દ્વારા તેનો અર્થઘટન કેવી રીતે થાય છે, અને વૉઇસ ફેમિલી સ્ટાઇલ સાથે કરવાનું કંઈ નથી તેની સમસ્યાને ઉકેલવા માટે કરવામાં આવી હતી. આભારવશ રીતે આ બે જૂના બ્રાઉઝર એવા છે કે જે આ દિવસોમાં અમારી સાથે સંબંધિત નથી.
એક વિક્રેતા ઉપસર્ગ હેક નથી કારણ કે તે સ્પષ્ટીકરણને કેવી રીતે પ્રોપર્ટી અમલ કરી શકાય તે માટેના નિયમોને સેટ કરવાની પરવાનગી આપે છે, જ્યારે તે જ સમયે બ્રાઉઝર ઉત્પાદકોને બાકીની દરેક વસ્તુને તોડ્યા વગર કોઈ અલગ રીતે પ્રોપર્ટી અમલ કરવાની પરવાનગી આપે છે. વળી, આ ઉપસર્ગો CSS ગુણધર્મો સાથે કામ કરી રહ્યા છે જે છેવટે સ્પષ્ટીકરણનો એક ભાગ હશે . અમે વહેલી તકે મિલકતનો વપરાશ મેળવવા માટે કેટલાક કોડ ઉમેરી રહ્યા છીએ. આ એક બીજું કારણ છે કે તમે સામાન્ય, બિન-પ્રિફિક્સની મિલકત સાથે સીએસએસ નિયમનો અંત કરો છો. આ રીતે તમે પ્રિફિક્સ વર્ઝન છોડીને એકવાર સંપૂર્ણ બ્રાઉઝર સપોર્ટ મેળવી શકાય છે.
ચોક્કસ સુવિધા માટે બ્રાઉઝર સપોર્ટ શું છે તે જાણવા માગો છો? આ વેબસાઇટ CanIUse.com એ આ માહિતી ભેગી કરવા અને તમને કઈ બ્રાઉઝર્સ, અને તે બ્રાઉઝર્સનાં કયા સંસ્કરણો હાલમાં કોઈ સુવિધાને સમર્થન કરે છે તે જણાવવા માટે એક અદ્ભુત સ્ત્રોત છે.
વિક્રેતા ઉપસર્ગો નકામી પરંતુ કામચલાઉ છે
હા, તે બધા બ્રાઉઝર્સમાં કામ કરવા માટે ગુણધર્મોને 2-5 વખત લખી લેવા માટે હેરાન અને પુનરાવર્તિત લાગે છે, પરંતુ તે એક કામચલાઉ પરિસ્થિતિ છે. ઉદાહરણ તરીકે, થોડાક વર્ષો પહેલાં, બૉક્સ પર ગોળાકાર ખૂણાને સેટ કરવા માટે તમારે લખવું હતું:
-મોઝ-સીમા-ત્રિજ્યા: 10px 5px;
-વેબકીટ-સરહદ-ટોચના-ડાબા-ત્રિજ્યા: 10 પીએક્સ;
-વેબકીટ-સરહદ-ટોચના-જમણા- ત્રિજ્યા: 5 પીએક્સ;
-વેબકીટ-સરહદ-નીચે-જમણા ત્રિજ્યા: 10 પીએક્સ;
-વેબકીટ-સરહદ-નીચે-ડાબા-ત્રિજ્યા: 5 પીએક્સ;
સરહદ-ત્રિજ્યા: 10px 5px;
પરંતુ હવે તે બ્રાઉઝર્સ આ સુવિધાનો પૂરેપૂરો ટેકો પૂરો કરવા આવ્યા છે, તમને ખરેખર માત્ર માનકીકૃત સંસ્કરણની જ જરૂર છે:
સરહદ-ત્રિજ્યા: 10px 5px;
વર્ઝન 5.0 થી ક્રોમએ CSS3ની સંપત્તિને ટેકો આપ્યો છે, ફાયરફોક્સ તેને 4.0 ની આવૃત્તિમાં ઉમેરી છે, સફારીએ તેને 5.0, ઓપેરા 10.5, આઇઓએસ 4.0, અને 2.1 માં 2.1 માં ઉમેર્યા છે. ઇન્ટરનેટ એક્સપ્લોરર 9 પણ તેને ઉપસર્ગ વિના (અને IE 8 અને તેનાથી ઉપસર્ગો સાથે અથવા વગર તેનો સપોર્ટ કરતું નથી) સપોર્ટ કરે છે.
યાદ રાખો કે બ્રાઉઝર્સ હંમેશાં બદલાતા રહે છે અને જૂની બ્રાઉઝર્સને ટેકો આપવા માટેના સર્જનાત્મક અભિગમોની જરૂર રહેશે સિવાય કે તમે સૌથી વધુ આધુનિક પદ્ધતિઓના વર્ષો પાછળનાં વેબ પૃષ્ઠો બનાવવાનું આયોજન કરો. અંતમાં, બ્રાઉઝર ઉપસર્ગો લખવાથી ભૂલોને શોધવામાં અને શોષણ કરતાં વધુ સરળ બને છે જે ભવિષ્યના સંસ્કરણમાં સંભવિત રૂપે નિશ્ચિત કરવામાં આવશે, તે માટે તમારે અન્ય ભૂલનો ઉપયોગ કરવો અને તેથી વધુ ઉપયોગ કરવો પડશે.