CSS @property: કસ્ટમ પ્રોપર્ટીઝની શક્તિનો ઉપયોગ કરો

CSS કસ્ટમ પ્રોપર્ટીઝ (જેને CSS વેરિયેબલ્સ તરીકે પણ ઓળખવામાં આવે છે) એ આપણે જે રીતે CSS લખીએ છીએ અને મેનેજ કરીએ છીએ તેમાં ક્રાંતિ લાવી છે. તે આપણને ફરીથી વાપરી શકાય તેવા મૂલ્યોને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે જે આપણી સ્ટાઇલશીટમાં લાગુ કરી શકાય છે, જેનાથી આપણો કોડ વધુ જાળવણી યોગ્ય અને અપડેટ કરવામાં સરળ બને છે. પરંતુ શું થશે જો તમે સાદા મૂલ્ય બદલવાથી આગળ વધીને તમારી કસ્ટમ પ્રોપર્ટીઝના પ્રકાર, સિન્ટેક્સ, પ્રારંભિક મૂલ્ય, અને ઇન્હેરિટન્સ વર્તણૂક વ્યાખ્યાયિત કરી શકો? ત્યાં જ @property કામમાં આવે છે. આ માર્ગદર્શિકા @property at-rule ની શક્તિ અને સંભવિતતાનું અન્વેષણ કરશે, જે તમને તમારા પ્રોજેક્ટ્સમાં તેનો લાભ લેવા માટે જ્ઞાન અને ઉદાહરણો પ્રદાન કરશે.

CSS @property શું છે?

@property at-rule એ CSS માં એક શક્તિશાળી ઉમેરો છે જે તમને કસ્ટમ પ્રોપર્ટીઝને સ્પષ્ટપણે વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે. સ્ટાન્ડર્ડ CSS વેરિયેબલ્સથી વિપરીત, જેમને મૂળભૂત રીતે સ્ટ્રિંગ તરીકે ગણવામાં આવે છે, @property તમને ડેટા પ્રકાર, સિન્ટેક્સ, પ્રારંભિક મૂલ્ય અને પ્રોપર્ટી તેના પેરન્ટ એલિમેન્ટમાંથી તેનું મૂલ્ય વારસામાં મેળવે છે કે નહીં તે સ્પષ્ટ કરવા દે છે. આ એનિમેશન, વેલિડેશન અને તમારી કસ્ટમ પ્રોપર્ટીઝ પરના એકંદર નિયંત્રણ માટે રોમાંચક શક્યતાઓ ખોલે છે.

મૂળભૂત રીતે, @property CSS વેરિયેબલ્સને સુપરપાવર આપે છે.

@property શા માટે વાપરવું?

જ્યારે સ્ટાન્ડર્ડ CSS વેરિયેબલ્સ અતિ ઉપયોગી છે, ત્યારે તેમની મર્યાદાઓ છે. આ પરિસ્થિતિઓને ધ્યાનમાં લો જ્યાં @property શ્રેષ્ઠ છે:

• એનિમેશન અને ટ્રાન્ઝિશન્સ: સ્ટાન્ડર્ડ CSS વેરિયેબલ્સ, જે સ્ટ્રિંગ તરીકે ગણાય છે, તેમને વિવિધ પ્રકારના મૂલ્યો વચ્ચે સરળતાથી એનિમેટ કરી શકાતા નથી (દા.ત., સંખ્યાથી રંગ સુધી). @property તમને વેરિયેબલનો પ્રકાર વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે, જેનાથી સરળ ટ્રાન્ઝિશન્સ અને એનિમેશન શક્ય બને છે. કલ્પના કરો કે એક કસ્ટમ પ્રોપર્ટીને એનિમેટ કરી રહ્યા છો જે રંગના હ્યુ (hue) નું પ્રતિનિધિત્વ કરે છે; સ્ટાન્ડર્ડ CSS વેરિયેબલ સાથે, આ માટે જાવાસ્ક્રિપ્ટ હેક્સની જરૂર પડશે, પરંતુ @property સાથે અને સિન્ટેક્સને <color> તરીકે વ્યાખ્યાયિત કરીને, બ્રાઉઝર કુદરતી રીતે એનિમેશનને હેન્ડલ કરી શકે છે.
• પ્રકાર વેલિડેશન: તમે ખાતરી કરી શકો છો કે કસ્ટમ પ્રોપર્ટી ફક્ત ચોક્કસ પ્રકારના મૂલ્યો જ સ્વીકારે છે (દા.ત., <number>, <color>, <length>). આ ભૂલોને રોકવામાં મદદ કરે છે અને ખાતરી કરે છે કે તમારું CSS વધુ મજબૂત છે. જો તમે અમાન્ય મૂલ્ય અસાઇન કરવાનો પ્રયાસ કરશો, તો બ્રાઉઝર વ્યાખ્યાયિત પ્રારંભિક મૂલ્યનો ઉપયોગ કરશે. આ ડેવલપમેન્ટમાં પાછળથી સંભવિત ભૂલો પર આધાર રાખવા કરતાં વધુ વિશ્વસનીય છે.
• ડિફોલ્ટ મૂલ્યો અને ઇન્હેરિટન્સ: @property તમને પ્રોપર્ટી માટે પ્રારંભિક મૂલ્ય સ્પષ્ટ કરવા અને તેની ઇન્હેરિટન્સ વર્તણૂકને નિયંત્રિત કરવા દે છે. આ તમારા CSS ને સરળ બનાવે છે અને તેને વધુ અનુમાનિત બનાવે છે. જટિલ પ્રોજેક્ટ્સ માટે સ્પષ્ટ પ્રારંભિક મૂલ્યો વ્યાખ્યાયિત કરવા આવશ્યક બની જાય છે, જ્યારે કસ્ટમ પ્રોપર્ટી સ્પષ્ટપણે સેટ ન હોય ત્યારે અનિચ્છનીય વિઝ્યુઅલ ખામીઓને અટકાવે છે.
• સુધારેલ CSS વાંચનક્ષમતા અને જાળવણીક્ષમતા: તમારી કસ્ટમ પ્રોપર્ટીઝને @property સાથે સ્પષ્ટપણે વ્યાખ્યાયિત કરવાથી તમારું CSS સમજવામાં અને જાળવવામાં સરળ બને છે, ખાસ કરીને મોટા પ્રોજેક્ટ્સમાં. તે સ્વ-દસ્તાવેજીકરણ તરીકે કામ કરે છે, જે સ્પષ્ટ કરે છે કે કસ્ટમ પ્રોપર્ટીનો હેતુ શું છે અને તેનો ઉપયોગ કેવી રીતે કરવો જોઈએ.

@property સિન્ટેક્સ

@property at-rule આ મૂળભૂત સિન્ટેક્સને અનુસરે છે:

            @property --property-name {
 syntax: <value>;
 inherits: <boolean>;
 initial-value: <value>;
}

            

              
                Copy
              
            
          

ચાલો સિન્ટેક્સના દરેક ભાગને સમજીએ:

• --property-name: આ તમારી કસ્ટમ પ્રોપર્ટીનું નામ છે. તે બે હાઇફન (--) થી શરૂ થવું જોઈએ. ઉદાહરણ તરીકે, --primary-color.
• syntax: આ વ્યાખ્યાયિત કરે છે કે પ્રોપર્ટી કયા પ્રકારનું મૂલ્ય સ્વીકારી શકે છે. તે CSS <value> પ્રકારો જેવા જ સિન્ટેક્સનો ઉપયોગ કરે છે, જેમ કે <color>, <number>, <length>, <percentage>, <url>, <integer>, અને વધુ. તમે કોઈપણ મૂલ્યને મંજૂરી આપવા માટે વાઇલ્ડકાર્ડ * નો પણ ઉપયોગ કરી શકો છો.
• inherits: આ એક બુલિયન મૂલ્ય છે જે નક્કી કરે છે કે પ્રોપર્ટી તેના પેરન્ટ એલિમેન્ટમાંથી તેનું મૂલ્ય વારસામાં મેળવે છે કે નહીં. તે true અથવા false હોઈ શકે છે.
• initial-value: આ પ્રોપર્ટીનું ડિફોલ્ટ મૂલ્ય છે. તે સ્પષ્ટ કરેલ સિન્ટેક્સ મુજબ એક માન્ય મૂલ્ય હોવું આવશ્યક છે.

@property ના વ્યવહારુ ઉદાહરણો

ચાલો તમારા CSS ને બહેતર બનાવવા માટે @property નો ઉપયોગ કેવી રીતે કરવો તેના કેટલાક વ્યવહારુ ઉદાહરણો જોઈએ.

ઉદાહરણ 1: રંગને એનિમેટ કરવો

કલ્પના કરો કે તમે બટનના બેકગ્રાઉન્ડ રંગને એનિમેટ કરવા માંગો છો. સ્ટાન્ડર્ડ CSS વેરિયેબલ્સ સાથે, આ મુશ્કેલ હોઈ શકે છે. પરંતુ @property સાથે, તે સીધું છે:

            @property --button-bg-color {
 syntax: <color>;
 inherits: false;
 initial-value: #007bff;
}

.button {
 background-color: var(--button-bg-color);
 transition: --button-bg-color 0.3s ease;
}

.button:hover {
 --button-bg-color: #28a745;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, આપણે --button-bg-color નામની એક કસ્ટમ પ્રોપર્ટીને <color> ના સિન્ટેક્સ સાથે વ્યાખ્યાયિત કરીએ છીએ. આ બ્રાઉઝરને કહે છે કે પ્રોપર્ટી હંમેશા એક રંગ મૂલ્ય હોવી જોઈએ. જ્યારે બટન પર હોવર કરવામાં આવે છે, ત્યારે રંગ પ્રારંભિક વાદળી (#007bff) થી લીલા (#28a745) માં સરળતાથી ટ્રાન્ઝિશન થાય છે.

ઉદાહરણ 2: સંખ્યાને એનિમેટ કરવી

ધારો કે તમે પ્રોગ્રેસ બારની પહોળાઈને એનિમેટ કરવા માંગો છો. અહીં તમે @property સાથે તે કેવી રીતે કરી શકો છો તે છે:

            @property --progress-width {
 syntax: <percentage>;
 inherits: false;
 initial-value: 0%;
}

.progress-bar {
 width: var(--progress-width);
 height: 10px;
 background-color: #4CAF50;
 transition: --progress-width 0.5s ease-in-out;
}

.progress-bar.complete {
 --progress-width: 100%;
}

            

              
                Copy
              
            
          

અહીં, આપણે --progress-width નામની એક કસ્ટમ પ્રોપર્ટીને <percentage> ના સિન્ટેક્સ સાથે વ્યાખ્યાયિત કરીએ છીએ. પ્રારંભિક મૂલ્ય 0% પર સેટ કરેલ છે. જ્યારે .complete ક્લાસ પ્રોગ્રેસ બારમાં ઉમેરવામાં આવે છે, ત્યારે પહોળાઈ સરળતાથી 100% સુધી એનિમેટ થાય છે.

ઉદાહરણ 3: લંબાઈના મૂલ્યને વેલિડેટ કરવું

તમે એ સુનિશ્ચિત કરવા માટે @property નો ઉપયોગ કરી શકો છો કે કસ્ટમ પ્રોપર્ટી ફક્ત લંબાઈના મૂલ્યો જ સ્વીકારે છે:

            @property --spacing {
 syntax: <length>;
 inherits: true;
 initial-value: 10px;
}

.element {
 margin: var(--spacing);
}

.element.large {
 --spacing: 20px; /* Valid */
}

.element.invalid {
 --spacing: red; /* Invalid - will revert to initial-value */
}

            

              
                Copy
              
            
          

આ કિસ્સામાં, --spacing ને <length> સિન્ટેક્સ સાથે વ્યાખ્યાયિત કરવામાં આવ્યું છે. જો તમે બિન-લંબાઈ મૂલ્ય (જેમ કે red) અસાઇન કરવાનો પ્રયાસ કરશો, તો બ્રાઉઝર તેને અવગણશે અને પ્રારંભિક મૂલ્ય (10px) નો ઉપયોગ કરશે.

ઉદાહરણ 4: કસ્ટમ શેડો વ્યાખ્યાયિત કરવો

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

            @property --my-shadow {
 syntax: *;
 inherits: false;
 initial-value: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-box {
 box-shadow: var(--my-shadow);
}

.shadow-box:hover {
 --my-shadow: 0px 8px 12px rgba(0, 0, 0, 0.2);
 transition: --my-shadow 0.3s ease;
}

            

              
                Copy
              
            
          

વૈશ્વિક વિચારણાઓ અને શ્રેષ્ઠ પદ્ધતિઓ

જ્યારે વૈશ્વિક પ્રેક્ષકો માટેના પ્રોજેક્ટ્સમાં @property નો ઉપયોગ કરો, ત્યારે આ બાબતોને ધ્યાનમાં રાખો:

• એક્સેસિબિલિટી: ખાતરી કરો કે @property સાથે બનાવેલા કોઈપણ એનિમેશન અથવા ટ્રાન્ઝિશન્સ વિકલાંગ વપરાશકર્તાઓ માટે એક્સેસિબિલિટી સમસ્યાઓનું કારણ ન બને. જો જરૂરી હોય તો એનિમેશનને અક્ષમ કરવાના વિકલ્પો પ્રદાન કરો. યાદ રાખો કે વિશ્વના વિવિધ ભાગોમાં વપરાશકર્તાઓ પાસે ઇન્ટરનેટ કનેક્ટિવિટી અને હાર્ડવેર ક્ષમતાઓના વિવિધ સ્તરો હોઈ શકે છે. અતિશય જટિલ એનિમેશન ટાળો જે નીચા-સ્તરના ઉપકરણો પર પ્રભાવને નકારાત્મક રીતે અસર કરી શકે છે.
• આંતરરાષ્ટ્રીયકરણ (i18n) અને સ્થાનિકીકરણ (l10n): વિચારો કે કસ્ટમ પ્રોપર્ટીઝ વિવિધ ભાષાઓ અને સાંસ્કૃતિક સંદર્ભો સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરી શકે છે. જો તમે લેઆઉટ અથવા ટાઇપોગ્રાફીને નિયંત્રિત કરવા માટે કસ્ટમ પ્રોપર્ટીઝનો ઉપયોગ કરી રહ્યાં છો, તો ખાતરી કરો કે તમારી ડિઝાઇન વિવિધ ટેક્સ્ટ દિશાઓ અને કેરેક્ટર સેટ્સને યોગ્ય રીતે અનુકૂળ કરે છે. ઉદાહરણ તરીકે, જમણેથી-ડાબે (RTL) ભાષાઓમાં પ્રોગ્રેસ બારની ટેક્સ્ટ દિશા બદલવાની જરૂર પડી શકે છે.
• પ્રદર્શન: જ્યારે @property મૂળ CSS એનિમેશનને સક્ષમ કરીને પ્રદર્શનમાં સુધારો કરી શકે છે, ત્યારે પણ તમારા કોડને ઓપ્ટિમાઇઝ કરવું મહત્વપૂર્ણ છે. બિનજરૂરી ગણતરીઓ અથવા જટિલ એનિમેશન ટાળો જે પૃષ્ઠને ધીમું કરી શકે છે. વિવિધ ઉપકરણો અને બ્રાઉઝર્સ પર તમારા કોડનું પરીક્ષણ કરો જેથી ખાતરી થઈ શકે કે તે વિવિધ પ્લેટફોર્મ પર સારી રીતે કાર્ય કરે છે.
• બ્રાઉઝર સુસંગતતા: પ્રોડક્શનમાં @property નો ઉપયોગ કરતા પહેલા બ્રાઉઝર સુસંગતતા તપાસો. જ્યારે સપોર્ટમાં નોંધપાત્ર સુધારો થયો છે, ત્યારે એ સુનિશ્ચિત કરવું મહત્વપૂર્ણ છે કે તમારો કોડ જૂના બ્રાઉઝર્સમાં જે આ સુવિધાને સપોર્ટ નથી કરતા તેમાં ગ્રેસફુલી ડિગ્રેડ થાય છે. જ્યારે જરૂરી હોય ત્યારે ફોલબેક સ્ટાઇલ પ્રદાન કરવા માટે ફીચર ક્વેરીઝ (@supports) નો ઉપયોગ કરો. 2024 ના અંત સુધીમાં, બ્રાઉઝર સપોર્ટ ખૂબ સારો છે, જેમાં તમામ મુખ્ય બ્રાઉઝર્સ આ સુવિધાને સપોર્ટ કરે છે.
• નામકરણ સંમેલનો: તમારી કસ્ટમ પ્રોપર્ટીઝ માટે સ્પષ્ટ અને સુસંગત નામકરણ સંમેલનો અપનાવો. આ તમારા કોડને સમજવામાં અને જાળવવામાં સરળ બનાવશે, ખાસ કરીને જ્યારે ટીમમાં કામ કરતા હોવ. વર્ણનાત્મક નામોનો ઉપયોગ કરો જે પ્રોપર્ટીનો હેતુ સ્પષ્ટપણે દર્શાવે છે. ઉદાહરણ તરીકે, --color ને બદલે, --primary-button-color નો ઉપયોગ કરો.
• દસ્તાવેજીકરણ: તમારી કસ્ટમ પ્રોપર્ટીઝનું સંપૂર્ણ દસ્તાવેજીકરણ કરો, ખાસ કરીને જ્યારે મોટા પ્રોજેક્ટ્સ પર અથવા ટીમ સાથે કામ કરતા હોવ. દરેક પ્રોપર્ટીનો હેતુ, તેનો સિન્ટેક્સ, પ્રારંભિક મૂલ્ય અને અન્ય પ્રોપર્ટીઝ સાથેની કોઈપણ નિર્ભરતા અથવા ક્રિયાપ્રતિક્રિયાઓ સમજાવો. આ અન્ય ડેવલપર્સને તમારા કોડને અસરકારક રીતે સમજવામાં અને વાપરવામાં મદદ કરશે.
• થીમિંગ અને બ્રાન્ડિંગ: તમારી વેબસાઇટ અથવા એપ્લિકેશન માટે લવચીક અને કસ્ટમાઇઝ કરી શકાય તેવી થીમ્સ બનાવવા માટે @property નો ઉપયોગ કરો. રંગો, ફોન્ટ્સ, સ્પેસિંગ અને અન્ય ડિઝાઇન તત્વો માટે કસ્ટમ પ્રોપર્ટીઝ વ્યાખ્યાયિત કરો, અને વપરાશકર્તાઓને આ પ્રોપર્ટીઝમાં ફેરફાર કરીને વિવિધ થીમ્સ વચ્ચે સરળતાથી સ્વિચ કરવાની મંજૂરી આપો. આ ખાસ કરીને વૈશ્વિક બ્રાન્ડ્સ ધરાવતી સંસ્થાઓ માટે ઉપયોગી થઈ શકે છે જેમને વિવિધ પ્રદેશો અને ભાષાઓમાં સુસંગતતા જાળવવાની જરૂર હોય છે.

@property વાપરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

અહીં @property નો ઉપયોગ કરતી વખતે અનુસરવા માટેની કેટલીક શ્રેષ્ઠ પદ્ધતિઓ છે:

• સ્પષ્ટ રહો: હંમેશા તમારી કસ્ટમ પ્રોપર્ટીઝને @property સાથે વ્યાખ્યાયિત કરો, અસ્પષ્ટ સ્ટ્રિંગ-આધારિત વેરિયેબલ્સ પર આધાર રાખવાને બદલે. આ સ્પષ્ટતા, વેલિડેશન અને એનિમેશન ક્ષમતાઓ પ્રદાન કરે છે.
• સાચો સિન્ટેક્સ પસંદ કરો: પ્રકાર સલામતી અને યોગ્ય એનિમેશન વર્તણૂક સુનિશ્ચિત કરવા માટે દરેક પ્રોપર્ટી માટે સૌથી યોગ્ય સિન્ટેક્સ પસંદ કરો.
• પ્રારંભિક મૂલ્યો પ્રદાન કરો: હંમેશા તમારી કસ્ટમ પ્રોપર્ટીઝ માટે પ્રારંભિક મૂલ્ય સેટ કરો. જો પ્રોપર્ટી સ્પષ્ટપણે સેટ ન હોય તો આ અનપેક્ષિત વર્તણૂકને અટકાવે છે.
• ઇન્હેરિટન્સનો વિચાર કરો: કાળજીપૂર્વક વિચારો કે પ્રોપર્ટી તેના પેરન્ટ એલિમેન્ટમાંથી તેનું મૂલ્ય વારસામાં મેળવવી જોઈએ કે નહીં. જ્યારે યોગ્ય હોય ત્યારે inherits: true નો ઉપયોગ કરો, પરંતુ સંભવિત આડઅસરોથી સાવચેત રહો.
• અર્થપૂર્ણ નામોનો ઉપયોગ કરો: તમારા કોડને સમજવામાં અને જાળવવામાં સરળ બનાવવા માટે તમારી કસ્ટમ પ્રોપર્ટીઝ માટે વર્ણનાત્મક નામો પસંદ કરો.
• તમારા કોડનું દસ્તાવેજીકરણ કરો: દરેક કસ્ટમ પ્રોપર્ટીનો હેતુ અને તેનો ઉપયોગ કેવી રીતે થાય છે તે સમજાવવા માટે તમારા CSS માં ટિપ્પણીઓ ઉમેરો.
• સંપૂર્ણ પરીક્ષણ કરો: સુસંગતતા અને પ્રદર્શન સુનિશ્ચિત કરવા માટે તમારા કોડનું વિવિધ બ્રાઉઝર્સ અને ઉપકરણોમાં પરીક્ષણ કરો.

બ્રાઉઝર સુસંગતતા

2024 ના અંત સુધીમાં, @property ક્રોમ, ફાયરફોક્સ, સફારી અને એજ સહિતના તમામ મુખ્ય બ્રાઉઝર્સમાં સપોર્ટેડ છે. તેમ છતાં, પ્રોડક્શનમાં @property નો ઉપયોગ કરતા પહેલા Can I use જેવા સંસાધનો પર નવીનતમ બ્રાઉઝર સુસંગતતા માહિતી તપાસવી હંમેશા સારો વિચાર છે.

જૂના બ્રાઉઝર્સ માટે જે @property ને સપોર્ટ નથી કરતા, તમે ફોલબેક સ્ટાઇલ પ્રદાન કરવા માટે ફીચર ક્વેરીઝ (@supports) નો ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે:

            @supports (--custom-property: initial) {
 /* Styles for browsers that support custom properties */
}

@supports not (--custom-property: initial) {
 /* Fallback styles for older browsers */
}

            

              
                Copy
              
            
          

નિષ્કર્ષ

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

તો, @property ની શક્તિને અપનાવો અને તમારા આગલા પ્રોજેક્ટમાં CSS કસ્ટમ પ્રોપર્ટીઝની સંપૂર્ણ સંભવિતતાને અનલોક કરો!