આજે વેબ બ્રાઉઝર ઉન્મત્ત દિવસોથી એક લાંબી રસ્તો આવે છે જ્યાં કોઇપણ પ્રકારના ક્રોસ બ્રાઉઝર સુસંગતતા કશુંક કરવા ઇચ્છુક હતી. આજેના વેબ બ્રાઉઝર્સ બધા ખૂબ ધોરણો-સુસંગત છે. તેઓ સરસ રીતે એકસાથે રમે છે અને વિવિધ બ્રાઉઝર્સમાં એકદમ સુસંગત પૃષ્ઠ પ્રદર્શિત કરે છે. તેમાં ગૂગલ ક્રોમ, માઇક્રોસોફ્ટ એજ, મોઝિલા ફાયરફોક્સ, ઓપેરા, સફારી અને મોબાઇલ બ્રાઉઝર્સના અસંખ્ય બ્રાઉઝર્સની વેબસાઇટ પર પ્રવેશવા માટે ઉપયોગમાં લેવાતા આધુનિક બ્રાઉઝરનો સમાવેશ થાય છે.
જ્યારે વેબ બ્રાઉઝર્સની વાત આવે છે અને તેઓ કેવી રીતે CSS પ્રદર્શિત કરે છે ત્યારે પ્રગતિ ચોક્કસપણે બનાવવામાં આવી છે, આ સૉફ્ટવેર વિકલ્પો વચ્ચેની અસાતત્યતા હજુ પણ છે. એક સામાન્ય અસાતત્યતા એ છે કે તે બ્રાઉઝર્સ મૂળભૂત રીતે માર્જિન, પેડિંગ અને બોર્ડર્સની ગણતરી કરે છે.
બૉક્સ મોડેલના આ પાસાઓના કારણે તમામ HTML તત્વો અસર કરે છે, અને કારણ કે તે પૃષ્ઠ લેઆઉટ્સ બનાવવા માટે જરૂરી છે, એક અસંગત પ્રદર્શનનો અર્થ છે કે કોઈ પૃષ્ઠ એક બ્રાઉઝરમાં સરસ દેખાય છે, પરંતુ બીજામાં થોડી રાહ જુઓ. આ સમસ્યાનો સામનો કરવા માટે, ઘણા વેબ ડીઝાઈનર બોક્સ મોડેલના આ પાસાઓને સામાન્ય બનાવે છે. આ પ્રથાને માર્જિન, પેડિંગ અને બોર્ડર્સ માટેના મૂલ્યો "શૂન્યિંગ આઉટ" તરીકે પણ ઓળખવામાં આવે છે.
બ્રાઉઝર ડિફૉલ્ટ્સ પર નોંધ
પૃષ્ઠનાં ચોક્કસ પ્રદર્શન પાસાં માટે વેબ બ્રાઉઝર્સ પાસે ડિફોલ્ટ સેટિંગ્સ છે. હમણાં પૂરતું, હાયપરલિંક્સ વાદળી છે અને મૂળભૂત રીતે રેખાંકિત છે. આ વિવિધ બ્રાઉઝર્સમાં સુસંગત છે, અને જો તે કંઈક છે જે મોટાભાગના ડિઝાઇનરો તેમના ચોક્કસ પ્રોજેક્ટની ડિઝાઇનની જરૂરિયાતોને અનુકૂળ બદલાય છે, હકીકત એ છે કે તેઓ બધા જ ડિફૉલ્ટ્સથી શરૂ થઈ રહ્યા છે જેથી આ ફેરફારો કરવા માટે સરળ બને છે દુર્ભાગ્યે, માર્જિન, પેડિંગ અને બોર્ડર્સ માટે ડિફૉલ્ટ મૂલ્ય ક્રોસ-બ્રાઉઝર સુસંગતતાના સમાન સ્તરનો આનંદ માણી શકતા નથી.
માર્જિન્સ અને પેડિંગ માટે મૂલ્યોનું સામાન્યકરણ
અસંગત બોક્સ મોડેલની સમસ્યાનું નિરાકરણ કરવાનો શ્રેષ્ઠ માર્ગ, HTML ઘટકોના તમામ માર્જિન અને પેડિંગ મૂલ્યોને શૂન્યમાં સેટ કરવા છે. તમે આ સ્ટાઇલશીટમાં આ સીએસએસ નિયમને ઉમેરવા માટે આ કરી શકો તેવા કેટલાક રીત છે:
* {માર્જીન: 0; પેડિંગ: 0; }આ સીએસએસ નિયમ * અથવા વાઇલ્ડકાર્ડ અક્ષરનો ઉપયોગ કરે છે. તે અક્ષર "બધા ઘટકો" નો અર્થ છે અને તે મૂળભૂત રીતે દરેક HTML તત્વ પસંદ કરશે અને માર્જિન અને પેડિંગને 0 માં સુયોજિત કરે છે. આ નિયમ ખૂબ જ અચોક્કસ હોવા છતાં, કારણ કે તે તમારી બાહ્ય સ્ટાઇલશીટમાં છે, તે ડિફૉલ્ટ બ્રાઉઝર કરતાં ઊંચી વિશિષ્ટતા હશે મૂલ્યો કરવું તે ડિફોલ્ટ્સ છે જે તમે ઓવરરાઇટ કરી રહ્યાં છો, આ એક શૈલી તમે જે કરવા માટે સેટ કરી રહ્યા છો તે પૂર્ણ કરશે.
બીજો વિકલ્પ આ મૂલ્યોને એચટીએમએલ અને બૉડી તત્વોમાં લાગુ કરવા છે. કારણ કે તમારા પૃષ્ઠ પરના અન્ય બધા ઘટકો આ બે ઘટકોના બાળકો હશે, કારણ કે CSS કાસ્કેડ આ બધા અન્ય તત્વોમાં આ મૂલ્યો લાગુ પાડશે.
html, શરીર {ગાળો: 0; પેડિંગ: 0; }આ તમારી ડિઝાઇનને તમામ બ્રાઉઝર્સ પર એક જ સ્થાને શરૂ કરશે, પરંતુ યાદ રાખવું એક વસ્તુ એ છે કે એકવાર તમે બધા માર્જિન અને પેડિંગ બંધ કરો છો, તમારે દેખાવને પ્રાપ્ત કરવા માટે તમારા વેબ પૃષ્ઠના ચોક્કસ ભાગો માટે તેને પસંદ કરીને તેને ફરીથી પસંદ કરવાની જરૂર પડશે અને લાગે છે કે તમારી ડિઝાઇન માટે કહે છે.
બોર્ડર્સ
તમે વિચારી શકો છો "પરંતુ કોઈ બ્રાઉઝર્સ પાસે ડિફૉલ્ટ રૂપે બૉડી તત્વની આસપાસ સરહદ નથી". આ કડક સત્ય નથી. ઈન્ટરનેટ એક્સપ્લોરરના જૂના વર્ઝનમાં તત્વોની આસપાસ પારદર્શક અથવા અદૃશ્ય સરહદ છે. જ્યાં સુધી તમે સરહદ 0 માં સેટ નહીં કરો ત્યાં સુધી તે સરહદ તમારા પૃષ્ઠ લેઆઉટને ગડબડ કરી શકે છે. જો તમે નક્કી કર્યું છે કે તમે IE ની આ જૂની આવૃત્તિઓનું સમર્થન કરવાનું ચાલુ રાખશો, તો તમારે આને તમારા શરીર અને HTML શૈલીઓનો ઉમેરીને સંબોધિત કરવાની જરૂર પડશે:
HTML, શરીર {
માર્જિન: 0 પીએક્સ;
ગાદી: 0 પીએક્સ;
સરહદ: 0 પીએક્સ;
}
તમે માર્જિન અને પેડિંગને કેવી રીતે બંધ કર્યું તે જ રીતે, આ નવી શૈલી પણ ડિફોલ્ટ સરહદો બંધ કરશે. અગાઉ લેખમાં બતાવેલ વાઇલ્ડકાર્ડ પસંદગીકારનો ઉપયોગ કરીને તમે આ જ વસ્તુ પણ કરી શકો છો.
જેનિફર કિનાન દ્વારા મૂળ લેખ. 9/27/16 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત