વિશ્વમાં સૌથી વધુ ઉપયોગમાં લેવાતું વેબ બ્રાઉઝર ક્રોમ છે. તે લોકો જાણે છે કે જેઓ નથી જાણતા કે બહાદુર અથવા વિવાલ્ડી વ્યવહારીક રીતે સમાન વસ્તુ કરી શકે છે. અત્યાર સુધી ઉલ્લેખિત ત્રણ ક્રોમિયમ એન્જિનનો ઉપયોગ કરે છે, અને ત્યાં પ્રભુત્વ વધુ જબરજસ્ત છે. બાકીનો બજાર હિસ્સો એજ દ્વારા વિવાદિત છે, વિન્ડોઝમાં ડિફોલ્ટ વિકલ્પ, સફારી, મેકઓએસ/આઇફોન શું વાપરે છે અને ફાયરફોક્સ, શ્રેષ્ઠ હેતુવાળા બ્રાઉઝર્સમાંનું એક જે ઘણા Linux વિતરણો પર ડિફોલ્ટ છે.
ખરાબ બાબત એ છે કે ફાયરફોક્સ, સ્પર્ધા કરવા માટે, વસ્તુઓ યોગ્ય રીતે કરવી પડશે. તે ઘણી પરિસ્થિતિઓમાં કરે છે, પરંતુ CSS માં પૂરતું નથી. તેમના નવીનતમ પ્રકાશનોની સમાચાર સૂચિમાં આપણે વાંચી શકીએ "X CSS નિયમ અથવા ફંક્શન હવે સપોર્ટેડ છે" જેવા બિંદુઓ, અને તે સારું છે, પરંતુ બધું ઝડપથી આગળ વધી રહ્યું છે અને ક્રોમિયમની સરખામણીમાં મોઝિલા ઘણું પાછળ છે. અહીં હું તમારી સાથે કેટલાક ઉદાહરણો વિશે વાત કરવા જઈ રહ્યો છું, જો કે તેમાંથી પ્રથમ સારા માટે છે.
ફાયરફોક્સ + આધુનિક CSS = સમસ્યાઓ?
મેં HTML, CSS નો અભ્યાસ કર્યો અને એકેડેમીમાં JavaScriptનો ચહેરો જોયો. અમે બેઝિક્સ શીખ્યા, અને મેં કરેલી એક પ્રેક્ટિસમાં મને વેબ ડિઝાઇનરને સાંભળવાનું થયું જેણે કહ્યું કે આપણે ઉપયોગ ન કરવો જોઈએ. position: fixed હેડરમાં અને અમે ઉપયોગ કરીશું sticky. મેં વિચાર્યું કે તે એક સારો વિચાર છે: જો પ્રથમનો ઉપયોગ કરવામાં આવે, તો તત્વ "જગ્યા લેતું નથી", એટલે કે, તે ઉપર જાય પછી શું છે, તેથી ગણતરીઓ કરવી પડશે જેથી તે આવરી લેવામાં ન આવે. બીજું, જો કે તે તેના માટે રચાયેલ નથી, તે "જગ્યા લે છે", તેથી તેમાં શું ઓછું છે ડોમ નીચે રહે છે. ઠીક છે: ફાયરફોક્સે મને ગડબડ કરી અને હું તમને શક્ય તેટલી મહત્તમ સંખ્યામાં બ્રાઉઝર માટે ડિઝાઇન કરવાની સખત રીત શીખી ગયો.
તે સમજાવવા માટે ટૂંકી વાર્તા બધું ક્રોમિયમ એન્જિનની આસપાસ ફરે છે. અમે બધાએ Chromium માં પરીક્ષણ કર્યું, અને તે ત્યાં કેવું દેખાશે તે વિશે વિચાર્યું. પછી આપણે સફારીને જોઈએ છીએ, અને જો તે તેમાં સારી રીતે કામ કરે છે, સામાન્ય રીતે, એજ તેને ટૂંક સમયમાં સપોર્ટ કરે છે અને ફાયરફોક્સ... ટકાવારી ખૂબ ઓછી છે, "તેમને ક્રોમનો ઉપયોગ કરવા દો," તેઓ કહે છે.
નેસ્ટિંગ અથવા નેસ્ટેડ CSS નિયમો
2023 માં, W3C કન્સોર્ટિયમ પાસેથી ઉધાર લેવામાં આવ્યું સાસ, CSS માટે ટેક્સ્ટ પ્રી-પ્રોસેસર, ધ નેસ્ટેડ સિન્ટેક્સ o માળો અંગ્રેજી માં. જેઓ CSS વિશે કશું જાણતા નથી તેઓને કંટાળો ન આવે તે માટે અમે તે શું છે તેનો ટૂંકમાં સાર આપવાનો પ્રયત્ન કરીશું. ત્યાં સુધી, જો આપણે ટૅગ, ક્લાસ અથવા ID પર CSS નિયમ અને કર્સરને હોવર કરે ત્યારે અલગ રાખવા માંગતા હોય, તો અમારે આના જેવું કંઈક મૂકવું પડશે:
પ્રતિ {
રંગ:લાલ;
}
a:હોવર {
રંગ: લીલો;
}
હવે નિયમોનું માળખું કરવું શક્ય છે, જેથી પેટા વર્ગ :hover લેબલ બ્લોકની અંદર છે a:
પ્રતિ {
રંગ:લાલ;
&:હોવર {
રંગ: લીલો;
}
}
એક વાક્યરચના અથવા અન્ય વધુ સારી છે કે કેમ તે મૂલ્યાંકન કરવા માટે અમે અહીં દાખલ થવાના નથી. દરેક એક નક્કી કરવા માટે. સત્ય એ છે કે સાસનો ઉપયોગ એવી વેબસાઇટ્સ પર પણ કરવામાં આવતો હતો જ્યાં કોડ શેર કરવામાં આવે છે, અને તેઓએ તેને એક કારણસર અમલમાં મૂક્યો છે. સિદ્ધાંત માં, તે વધુ સારી રીતે વાંચે છે અને રેખાઓ બચાવે છે.
CSS નેસ્ટિંગ અગાઉના ઉદાહરણ કરતાં વધુ આવરી લે છે, પરંતુ અહીં અમને જે રુચિ છે તે છે કે Firefox તેને 100% સપોર્ટ કરે છે. હકીકતમાં, શું હું ઉપયોગ કરી શકું છું અમને કહે છે તે કરનાર પ્રથમ કોણ હતું. એવા બ્રાઉઝર્સ છે જે તમને નેસ્ટેડ સિલેક્ટર (&) નો ઉપયોગ કરવા માટે દબાણ કરે છે, એક લેબલને બીજા (label1 label2) ની અંદર મૂકવા માટે પણ, અને Firefox તેના વિના સંપૂર્ણ રીતે કામ કરે છે. આ રીત છે. આગામી એક ખૂબ નથી.
જાવાસ્ક્રિપ્ટ વિના એનિમેશન સ્ક્રોલ કરો
En આ લિંક ડેવલપર મોઝિલા (MDN) તરફથી બીજી નવીનતા છે જે ફાયરફોક્સમાં એટલી સારી રીતે કામ કરી રહી નથી. સારું, તે કામ કરતું નથી. રસપ્રદ વાત એ છે કે MDN તેના પોતાના નામે ફાયરફોક્સના સર્જકનું નામ ધરાવે છે, અને તેનો બ્લોગ તે છે જ્યાં મને આ નવીનતા પણ 2023 થી મળી. અહીં આપણે સિન્ટેક્સ વિશે આટલી વાત કરવાની જરૂર નથી અને આપણે સાથે રહેવાનું છે. આધાર તે, અને તે પણ, ત્યાં સુધી, સૌથી સામાન્ય બાબત હતી સ્ક્રોલ સ્થિતિ બતાવો જાવાસ્ક્રિપ્ટ સાથે. તે JS માં હતું જ્યાં અમે પૃષ્ઠ પર ક્યાં છીએ તેના આધારે અમારે ઇવેન્ટ લિસનર ઉમેરવાનું હતું અને કન્ટેનર ઉગાડવાનું હતું. હવે તમે માત્ર CSS વડે જ કરી શકો છો.
મેં આ પૃષ્ઠ પર એક ઉદાહરણનો કોડ ઉમેરવાની સ્વતંત્રતા લીધી છે (જો તમે તેને જુઓ, તો z-ઇન્ડેક્સને અવગણો). જો તમે ક્રોમ/ક્રોમિયમ, વિવાલ્ડી અને બ્રેવ સાથે લોગ ઇન કરો છો, તો કેટલાક નામ આપવા માટે, તમે જોશો કે ટોચ પર એક બાર છે જે સામગ્રીની બાજુમાં સ્ક્રોલ કરે છે (જો કંઈ ખોટું થયું નથી). જો કે, ફાયરફોક્સમાં બાર 100% પહોળાઈ પર જોવા મળશે.
સફારી ફાયરફોક્સ કરતાં વધુ સારી નથી, પરંતુ…
સફારીમાં પણ એનિમેશન જોવા મળશે નહીં, અથવા આ લેખ લખતી વખતે નહીં. તે અન્ય મુખ્ય બ્રાઉઝર છે જે CSS માં પાછળ છે, પરંતુ તે બરાબર એ જ કેસ નથી. MacOS પર Safari એ ડિફૉલ્ટ બ્રાઉઝર છે, અને તે તેના ઇકોસિસ્ટમમાં ખૂબ સારી રીતે કાર્ય કરે છે. તે પણ તે છે જેનો ઉપયોગ iPhone કરે છે, અને આને કારણે તે નોંધપાત્ર બજાર હિસ્સો ધરાવે છે. તેથી, જેમ આપણે ઉલ્લેખ કર્યો છે, તે બીજું બ્રાઉઝર છે જેનું કોઈપણ વેબ ડિઝાઇનર વિશ્લેષણ કરે છે.
જ્યારે તમે કંઈક નવું અમલમાં મૂકવા માંગતા હો અને તમે શું હું ઉપયોગ કરો છો તેની મુલાકાત લો, જે સંદર્ભ છે, તમે પહેલા ક્રોમ, પછી સફારી અને પછી બાકીનાને જુઓ. જો તમે કોઈ વસ્તુનો અમલ ન કરવાનું નક્કી કરો છો, તો એવું નથી કારણ કે તે ફાયરફોક્સમાં ઉપલબ્ધ નથી; કારણ કે તે સફારી માટે નથી. તેથી, મોઝિલા તમારે તમારા બ્રાઉઝરમાં સુધારો કરવો જોઈએ, ઓછામાં ઓછા સફારી કરતાં વધુ. સદભાગ્યે તે તે કરી રહ્યો છે, પરંતુ જો તે ક્રોમિયમથી પ્રકાશ વર્ષ દૂર રહેવા માંગતો ન હોય તો તે ખૂબ જ ધીરે ધીરે.