બહુવિધ સીએસએસ પસંદગીકારોનું જૂથબદ્ધ કરવું

ગ્રુપ બહુવિધ સીએસએસ પસંદગીકારો લોડ ઝડપ સુધારો

સફળ વેબસાઇટમાં કાર્યક્ષમતા એ મહત્વનો પરિબળ છે. તે સાઇટ ઓનલાઇન કેવી રીતે છબીઓનો ઉપયોગ કરે છે તે કાર્યક્ષમ હોવી જોઈએ. આ તેની ખાતરી કરવામાં મદદ કરશે કે સાઇટ મુલાકાતીઓ માટે સારી કામગીરી કરે છે અને તેમના ઉપકરણો પર ઝડપથી લોડ કરે છે. તમારી એકંદર પ્રક્રિયાનો એક ભાગ હોવો જોઈએ, સમયસર અને બજેટ પર સાઇટની પ્રગતિ રાખવામાં તમને મદદ કરશે.

અંતે, વેબસાઇટની સર્જન અને લાંબા ગાળાના સફળતાની તમામ પાસાઓમાં કાર્યક્ષમતા ભૂમિકા ભજવે છે, જેમાં તે સાઇટની CSS શીટ્સ માટે લખવામાં આવેલી શૈલીઓનો સમાવેશ થાય છે. પાતળું બનાવવા માટે સમર્થ હોવા, ક્લીનર CSS ફાઇલો આદર્શ છે, અને તમે આને હાંસલ કરી શકો તેમાંથી એક રીતે અનેક સીએસએસ પસંદગીકારો સાથે મળીને જૂથબદ્ધ છે.

જૂથ પસંદગીકારો

જ્યારે તમે CSS પસંદગીકારોનો સમૂહ કરો છો , ત્યારે તમે તમારી સ્ટાઈલશીટમાં શૈલીઓનું પુનરાવર્તન કર્યા વગર ઘણા અલગ ઘટકો પર સમાન શૈલીઓ લાગુ કરો. તેના બદલે બે અથવા ત્રણ અથવા વધુ સીએસએસ નિયમો હોવાના, જે બધા તે જ વસ્તુ (ઉદાહરણ તરીકે, કંઈક રંગ લાલ કરવા માટે) કરે છે, તમારી પાસે એક સિંગલ સીએસએસ નિયમ છે જે તમારા પૃષ્ઠ માટે પૂર્ણ કરે છે.

આ ઘણા બધા કારણો છે કે શા માટે "પસંદગીકારોનું જૂથ" પૃષ્ઠને લાભ આપે છે. પ્રથમ ઑફિટ, તમારી શૈલી શીટ નાની હશે અને વધુ ઝડપથી લોડ થશે એ સાચું છે કે, લોડીંગ સાઇટ્સને ધીમુ થતી વખતે સ્ટાઇલ શીટ્સ મુખ્ય ગુનેગારોમાંનો એક નથી. CSS ફાઇલો ટેક્સ્ટ ફાઇલો છે, તેથી ખરેખર લાંબી CSS શીટ્સ અનપ્ટિમેઇઝ થયેલ ઈમેજોની તુલનામાં, નાના-કદની મુજબની છે. હજી પણ, દરેક થોડો ગણતરીઓ, અને જો તમે તમારા CSS નાં કદને હજામત કરી શકો છો અને તે પૃષ્ઠોને વધુ ઝડપી લોડ કરી શકો છો, જે હંમેશા કરવા માટે સારી બાબત છે

સામાન્ય રીતે, સાઇટ્સ માટે સરેરાશ સરેરાશ લોડ ઝડપ 3 સેકંડથી ઓછી હોય છે; 3 થી 7 સેકન્ડ વિશે સરેરાશ છે, અને 7 સેકંડથી વધુ માત્ર ખૂબ ધીમા છે આ નીચા નંબરોનો અર્થ છે કે, તમારી સાઇટથી તેમને પ્રાપ્ત કરવા માટે, તમારે જે કરી શકે તે બધું જ કરવાની જરૂર છે! આ માટે તમે શામેલ CSS પસંદગીકારોનો ઉપયોગ કરીને તમારી સાઇટને ઝડપી રાખવામાં સહાય કરી શકો છો.

કેવી રીતે જૂથ પસંદગીકારોની પસંદગી કરવી

તમારી સ્ટાઇલશીટમાં સી.એસ.એસ. પસંદગીકારોને એકસાથે ભેગા કરવા માટે, તમે શૈલીમાં બહુવિધ જૂથ પસંદગીકારોને અલગ કરવા માટે અલ્પવિરામનો ઉપયોગ કરો છો . નીચેના ઉદાહરણમાં, શૈલી p અને div તત્વોને અસર કરે છે:

div, p {color: # f00; }

અલ્પવિરામ મૂળભૂત રીતે "અને" નો અર્થ છે તેથી આ પસંદગીકાર બધા ફકરા તત્વો અને તમામ વિભાજન ઘટકોને લાગુ પડે છે. જો અલ્પવિરામ ખૂટતું હતું, તો તેના બદલે તમામ ફકરા ઘટકો હશે જે એક ભાગનું બાળક છે. તે એક ખૂબ જ અલગ પ્રકારની પસંદગીકાર છે, તેથી આ અલ્પવિરામ ખરેખર પસંદગીકારનો અર્થ બદલી દે છે!

પસંદગીકારનો કોઈ પણ પ્રકાર કોઈપણ અન્ય પસંદગીકર્તા સાથે જૂથ કરી શકાય છે. આ ઉદાહરણમાં, વર્ગ પસંદગીકાર ID પસંદગીકાર સાથે જૂથ થયેલ છે:

p.red, #sub {color: # f00; }

તેથી આ શૈલી "લાલ" ના વર્ગની વિશેષતા, અને કોઈપણ ઘટક (કારણ કે અમે કોઈ પ્રકારનો ઉલ્લેખ કર્યો નથી કારણ કે) "પેટા" ના ID લક્ષણ ધરાવે છે તે કોઈપણ ફકરોને લાગુ પડે છે.

તમે એક પણ પસંદગીકારો સાથે એકસાથે જૂથ કરી શકો છો, જેમાં પસંદગીકારો કે જે એક શબ્દ અને કમ્પંડ પસંદગીકારો છે. આ ઉદાહરણમાં ચાર અલગ અલગ પસંદગીકારોનો સમાવેશ થાય છે:

પૃષ્ઠ, .red, #sub, div a: link {color} # f00; }

તેથી આ સીએસએસ નિયમ નીચેના પર લાગુ થશે:

• કોઈપણ ફકરા તત્વ
• "લાલ" વર્ગના કોઈપણ તત્વ
• "પેટા" ના ID સાથે કોઈપણ તત્વ
• એક ડિવિઝનના ડેક્વેંડન્ટ્સ છે તેવા એન્કર તત્વોના "લિંક" સ્યુડો વર્ગ.

તે છેલ્લો પસંદગીકાર એક સંયોજન પસંદગીકાર છે. તમે જોઈ શકો છો કે આ સી.એસ.એસ. શાસનમાં અન્ય પસંદગીકારો સાથે સરળતાથી જોડવામાં આવે છે. તે નિયમ સાથે, અમે આ 4 પસંદગીકારો પર # એફએક્સ (જે લાલ છે) ના રંગ સુયોજિત કરી રહ્યા છે, જે સમાન પરિણામ પ્રાપ્ત કરવા માટે 4 અલગ પસંદગીકારોને લખવા માટે પ્રાધાન્ય છે.

જૂથ પસંદગીકારોનો બીજો લાભ એ છે કે, જો તમારે ફેરફાર કરવાની જરૂર હોય, તો તમે બહુવિધ લોકોની જગ્યાએ એક જ CSS નિયમને સંપાદિત કરી શકો છો. આનો અર્થ એ છે કે આ અભિગમ તમારા પૃષ્ઠના વજન અને સમયને સાચવે છે જ્યારે તે ભવિષ્યમાં સાઇટને જાળવવાની વાત કરે છે.

કોઈપણ પસંદગીકાર જૂથ બનાવી શકાય છે

જેમ જેમ ઉપરના ઉદાહરણોમાંથી તમે જોઈ શકો છો, કોઈ પણ માન્ય પસંદગીકારને જૂથમાં મૂકી શકાય છે, અને દસ્તાવેજમાંના તમામ ઘટકો જે તમામ જૂથિત તત્વો સાથે મેળ ખાય છે તે શૈલીની મિલકત પર આધારિત સમાન શૈલી હશે.

કેટલાક લોકો કોડમાં સુવાચ્યતા માટે અલગ લીટીઓ પર જૂથ કરેલ ઘટકોની સૂચિબદ્ધ કરવાનું પસંદ કરે છે. વેબસાઈટ પર દેખાવ અને લોડ ઝડપ એ જ રહે છે. ઉદાહરણ તરીકે, તમે કોડ્સના એક વાક્યમાં અલ્પવિરામ દ્વારા એક સ્ટાઇલ પ્રોપર્ટીમાં વિભાજિત શૈલીઓનો સંયોજિત કરી શકો છો:

th, td, p.red, div # firstred {color: red; }

અથવા તમે સ્પષ્ટતા માટે વ્યક્તિગત લીટીઓ પર શૈલીઓ સૂચિબદ્ધ કરી શકો છો:

મી,
ટીડી,
પી.આરડી,
div # firstred
{
રંગ: લાલ;
}

તમે બહુવિધ સીએસએસ પસંદગીકારોની રચના કરવા માટે જે પદ્ધતિનો ઉપયોગ કરો છો તે તમારી સાઇટને ઝડપી બનાવે છે અને શૈલીઓને લાંબા ગાળા માટે મેનેજ કરવાનું સરળ બનાવે છે.

જેનિફર કિનાન દ્વારા મૂળ લેખ. 5/8/17 ના રોજ જેરેમી ગીરર્ડ દ્વારા સંપાદિત