CSS પસંદગીકારોમાં અલ્પવિરામ શું છે?

શા માટે સરળ અલ્પવિરામ કોડિંગ સરળ બનાવે છે?

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

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

હા, CSS ફાઇલો લાંબી મેળવી શકે છે. જ્યારે કોઈ સાઇટ પરફોર્મન્સ અને ડાઉનલોડ ઝડપ પર આવે છે ત્યારે આ એક મોટી સમસ્યા નથી, કારણ કે લાંબી CSS ફાઇલ પણ ખૂબ નાની થવાની શક્યતા છે (કેમ કે તે ખરેખર એક ટેક્સ્ટ દસ્તાવેજ છે). તેમ છતાં, જ્યારે પૃષ્ઠની ઝડપ પર આવે ત્યારે દરેક થોડો ગણતરી થાય છે, તેથી જો તમે તમારી શૈલી શીટને લીનર બનાવી શકો છો, તે એક સારો વિચાર છે. આ તે છે જ્યાં "અલ્પવિરામ" તમારી શૈલી શીટમાં ખૂબ જ સરળ થઈ શકે છે!

અલ્પવિરામ અને CSS

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

ઉદાહરણ તરીકે, ચાલો નીચે કેટલાક સીએસએસ જોઈએ.

મી (રંગ: લાલ; }
ટીડી {રંગ: લાલ; }
p.red {color: red; }
div # firstred {color: red; }

આ વાક્યરચના સાથે, તમે એમ કહી રહ્યા છો કે તમે ઇચ્છો છો કે ટૅગ્સ, ટીડી ટેગ, ક્લાસ લાલ સાથે ફકરા ટેગ, અને ID ને સાથેની ટેગ ટેગ, સ્ટાઇલ કલર લાલ હોય તે માટે સૌ પ્રથમ.

આ સંપૂર્ણપણે સ્વીકાર્ય સીએસએસ છે, પરંતુ આ રીતે લખવા માટે બે નોંધપાત્ર ખામીઓ છે:

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

આ ખામીઓ ટાળી શકો છો, અને તમારી સીએસએસ ફાઇલ સ્ટ્રીમલાઇન કરવા માટે, અમે અલ્પવિરામનો ઉપયોગ કરવાનો પ્રયાસ કરીશું.

પસંદગીકારો અલગ કરવા માટે અલ્પવિરામનો ઉપયોગ કરવો

4 અલગ CSS પસંદગીકારો અને 4 નિયમો લખવાને બદલે, તમે આ બધા પ્રકારોને એક નિયમની મિલકતમાં અલ્પવિરામ સાથે વ્યક્તિગત પસંદગીકારોને અલગ કરીને જોડી બનાવી શકો છો. તે કેવી રીતે કરવામાં આવશે તે અહીં છે:

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

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

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

સિન્ટેક્સ વેરિએશન

કેટલાક લોકો ઉપર પ્રમાણેની એક લીટી પર બધાને લખવાને બદલે, દરેક પસંદગીકારને તેની પોતાની લીટી પર અલગ કરીને સી.એસ.એસ.ને વધુ સુસ્પષ્ટ બનાવવાનું પસંદ કરે છે. આ કેવી રીતે કરવામાં આવશે તે આ છે:

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

નોંધ લો કે તમે દરેક પસંદગીકાર પછી અલ્પવિરામ મૂકો અને પછી આગામી પસંદગીકર્તાને તેની પોતાની લાઇન પર તોડવા માટે "દાખલ કરો" નો ઉપયોગ કરો. તમે અંતિમ પસંદગીકાર પછી અલ્પવિરામ ઉમેરી શકતા નથી.

તમારા પસંદગીકારો વચ્ચે અલ્પવિરામ વાપરીને, તમે વધુ કોમ્પેક્ટ સ્ટાઇલ શીટ બનાવો જે ભવિષ્યમાં અપડેટ કરવાનું સરળ બને છે અને તે આજે વાંચવામાં સરળ છે!

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