CSS લોજિકલ પ્રોપર્ટીઝ લેવલ 2: ઉન્નત રાઇટિંગ મોડ સપોર્ટ સાથે ખરેખર વૈશ્વિક વેબનું નિર્માણ

દાયકાઓથી, વેબ ડેવલપર્સે ભૌતિક દુનિયામાં મૂળ ધરાવતી શબ્દાવલિનો ઉપયોગ કરીને લેઆઉટ બનાવ્યા છે: ઉપર, નીચે, ડાબે, અને જમણે. અમે margin-left, padding-top, અને border-right સેટ કરીએ છીએ. આ માનસિક મોડેલ ત્યારે સારું કામ કરતું હતું જ્યારે વેબ મુખ્યત્વે ડાબે-થી-જમણે, ઉપર-થી-નીચેનું માધ્યમ હતું. જોકે, વેબ વૈશ્વિક છે. તે બધી ભાષાઓ અને સંસ્કૃતિઓ માટેનું એક પ્લેટફોર્મ છે, જેમાંથી ઘણી આ સરળ દિશાનિર્દેશક પ્રવાહને અનુસરતી નથી.

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

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

ઝડપી પુનરાવર્તન: લોજિકલ પ્રોપર્ટીઝના મુખ્ય ખ્યાલો (લેવલ 1)

લેવલ 2 માં ઉમેરાયેલી બાબતોની પ્રશંસા કરતાં પહેલાં, આપણે લેવલ 1 દ્વારા નાખવામાં આવેલા પાયાની મજબૂત સમજ હોવી જોઈએ. આખી સિસ્ટમ બે મુખ્ય ખ્યાલો પર બનેલી છે: રાઇટિંગ મોડ અને પરિણામી બ્લોક અને ઇનલાઇન અક્ષો.

ચાર રાઇટિંગ મોડ્સ

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

• horizontal-tb: આ મોટાભાગની પશ્ચિમી ભાષાઓ માટે ડિફોલ્ટ છે. ટેક્સ્ટ આડું (ઇનલાઇન અક્ષ) ડાબે-થી-જમણે (અથવા દિશાના આધારે જમણે-થી-ડાબે) વહે છે, અને લાઇનો ઉપર-થી-નીચે (બ્લોક અક્ષ) સ્ટેક થાય છે.
• vertical-rl: પરંપરાગત પૂર્વ એશિયન ટાઇપોગ્રાફી (દા.ત., જાપાનીઝ, ચાઇનીઝ) માટે વપરાય છે. ટેક્સ્ટ ઊભું ઉપર-થી-નીચે (ઇનલાઇન અક્ષ) વહે છે, અને લાઇનો જમણે-થી-ડાબે (બ્લોક અક્ષ) સ્ટેક થાય છે.
• vertical-lr: ઉપરોક્ત જેવું જ, પરંતુ લાઇનો ડાબે-થી-જમણે (બ્લોક અક્ષ) સ્ટેક થાય છે. ઓછું સામાન્ય છે, પરંતુ કેટલાક સંદર્ભોમાં જેમ કે મોંગોલિયન લિપિમાં વપરાય છે.
• sidelong-rl / sidelong-lr: આ વિશિષ્ટ ઉપયોગના કિસ્સાઓ માટે છે જ્યાં તમે ગ્લિફ્સને તેમની બાજુ પર મૂકવા માંગો છો. સામાન્ય વેબ સામગ્રીમાં તે ઓછા સામાન્ય છે.

મહત્વપૂર્ણ ખ્યાલ: બ્લોક વિરુદ્ધ ઇનલાઇન અક્ષ

આ સમજવા માટેનો સૌથી મહત્વપૂર્ણ ખ્યાલ છે. તાર્કિક દુનિયામાં, આપણે "ઊભું" અને "આડું" વિશે વિચારવાનું બંધ કરીએ છીએ અને બ્લોક અને ઇનલાઇન અક્ષોના સંદર્ભમાં વિચારવાનું શરૂ કરીએ છીએ. તેમની દિશા સંપૂર્ણપણે writing-mode પર આધાર રાખે છે.

• ઇનલાઇન અક્ષ એ દિશા છે જેમાં ટેક્સ્ટ એક જ લાઇનમાં વહે છે.
• બ્લોક અક્ષ એ દિશા છે જેમાં નવી લાઇનો સ્ટેક કરવામાં આવે છે.

ચાલો જોઈએ કે આ કેવી રીતે કામ કરે છે:

• પ્રમાણભૂત અંગ્રેજીમાં (writing-mode: horizontal-tb): ઇનલાઇન અક્ષ આડું ચાલે છે, અને બ્લોક અક્ષ ઊભું ચાલે છે.
• પરંપરાગત જાપાનીઝમાં (writing-mode: vertical-rl): ઇનલાઇન અક્ષ ઊભું ચાલે છે, અને બ્લોક અક્ષ આડું ચાલે છે.

કારણ કે આ અક્ષો બદલાઈ શકે છે, width અને height જેવી પ્રોપર્ટીઝ અસ્પષ્ટ બની જાય છે. શું width આડા અક્ષની સાથેનું કદ છે કે ઇનલાઇન અક્ષની સાથેનું? લોજિકલ પ્રોપર્ટીઝ આ અસ્પષ્ટતાને હલ કરે છે. હવે આપણી પાસે દરેક અક્ષ માટે start અને end છે:

• block-start: અંગ્રેજીમાં "ઉપર", પરંતુ ઊભા જાપાનીઝમાં "જમણે".
• block-end: અંગ્રેજીમાં "નીચે", પરંતુ ઊભા જાપાનીઝમાં "ડાબે".
• inline-start: અંગ્રેજીમાં "ડાબે", પરંતુ ઊભા જાપાનીઝમાં "ઉપર".
• inline-end: અંગ્રેજીમાં "જમણે", પરંતુ ઊભા જાપાનીઝમાં "નીચે".

ભૌતિકને લોજિકલ પ્રોપર્ટીઝ સાથે મેપ કરવું (લેવલ 1)

લેવલ 1 એ ભૌતિકથી લોજિકલ પ્રોપર્ટીઝના મેપિંગ્સનો એક વ્યાપક સેટ રજૂ કર્યો. અહીં કેટલાક મુખ્ય ઉદાહરણો છે:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (પોઝિશનિંગ માટે) → inset-inline-start / inset-inline-end
• top / bottom (પોઝિશનિંગ માટે) → inset-block-start / inset-block-end

લેવલ 1 એ અમને margin-inline (શરૂઆત અને અંત માટે) અને padding-block (શરૂઆત અને અંત માટે) જેવા ઉપયોગી શોર્ટકટ્સ પણ આપ્યા.

લેવલ 2 માં આપનું સ્વાગત છે: નવું શું છે અને તે શા માટે મહત્વનું છે

જ્યારે લેવલ 1 એક મોટું પગલું હતું, ત્યારે તેણે કેટલીક નોંધનીય ખામીઓ છોડી દીધી હતી. float, clear, અને resize જેવી કેટલીક મૂળભૂત CSS પ્રોપર્ટીઝના કોઈ તાર્કિક સમકક્ષ નહોતા. વધુમાં, border-radius જેવી પ્રોપર્ટીઝને તાર્કિક રીતે નિયંત્રિત કરી શકાતી ન હતી, જેના કારણે ડેવલપર્સને સૂક્ષ્મ સ્ટાઇલિંગ માટે ભૌતિક પ્રોપર્ટીઝ પર પાછા ફરવાની ફરજ પડી હતી. આનો અર્થ એ થયો કે તમે લોજિકલ પ્રોપર્ટીઝ સાથે 90% લેઆઉટ બનાવી શકો છો, પરંતુ જુદા જુદા રાઇટિંગ મોડ્સ માટે હજુ પણ ભૌતિક ઓવરરાઇડ્સની જરૂર પડશે, જે આંશિક રીતે હેતુને નિષ્ફળ બનાવે છે.

CSS લોજિકલ પ્રોપર્ટીઝ લેવલ 2 આ ખામીઓને સીધી રીતે સંબોધિત કરે છે. તે કોઈ આમૂલ નવી સિસ્ટમ રજૂ કરવા વિશે નથી, પરંતુ લેવલ 1 માં શરૂ થયેલી સિસ્ટમને પૂર્ણ કરવા વિશે છે. તે આ બે પ્રાથમિક રીતે પ્રાપ્ત કરે છે:

1. નવી લોજિકલ પ્રોપર્ટીઝ અને વેલ્યુઝ રજૂ કરવી જૂની CSS સુવિધાઓ માટે જે સ્વાભાવિક રીતે ભૌતિક હતી (જેમ કે float).
2. જટિલ શોર્ટકટ્સ માટે લોજિકલ પ્રોપર્ટી મેપિંગ્સ ઉમેરવું જે અગાઉ અવગણવામાં આવ્યા હતા (જેમ કે border-radius).

લેવલ 2 સાથે, સંપૂર્ણપણે પ્રવાહ-સંબંધિત સ્ટાઇલિંગ સિસ્ટમની દ્રષ્ટિ લગભગ પૂર્ણ થઈ ગઈ છે, જે આપણને જટિલ, સુંદર અને મજબૂત ઘટકો બનાવવાની મંજૂરી આપે છે જે દરેક જગ્યાએ, દરેક માટે, હેક્સ અથવા ઓવરરાઇડ્સ વિના કામ કરે છે.

ઊંડાણપૂર્વક અભ્યાસ: લેવલ 2 માં નવી લોજિકલ વેલ્યુઝ અને પ્રોપર્ટીઝ

ચાલો આપણે લેવલ 2 આપણા ડેવલપર ટૂલકિટમાં લાવેલા સૌથી પ્રભાવશાળી ઉમેરાઓનું અન્વેષણ કરીએ. આ એવા સાધનો છે જે ખાલી જગ્યાઓ ભરે છે અને ખરેખર સાર્વત્રિક ઘટક ડિઝાઇનને સશક્ત બનાવે છે.

Float અને Clear: તાર્કિક ક્રાંતિ

float પ્રોપર્ટી વર્ષોથી CSS લેઆઉટનો પાયાનો પથ્થર રહી છે, પરંતુ તેની વેલ્યુઝ, left અને right, ભૌતિક દિશાની વ્યાખ્યા છે. જો તમે અંગ્રેજીમાં ફકરાની left બાજુએ એક છબી ફ્લોટ કરો છો, તો તે સાચું લાગે છે. પરંતુ અરબી માટે દસ્તાવેજની દિશા જમણે-થી-ડાબે (RTL) માં બદલો, અને છબી હવે ટેક્સ્ટ બ્લોકની "ખોટી" બાજુએ છે. તે જમણી બાજુએ હોવી જોઈએ, જે લાઇનનો પ્રારંભ છે.

લેવલ 2 float પ્રોપર્ટી માટે બે નવા, તાર્કિક કીવર્ડ્સ રજૂ કરે છે:

• float: inline-start; આ એક ઘટકને ઇનલાઇન દિશાની શરૂઆતમાં ફ્લોટ કરે છે. LTR ભાષાઓમાં, આ ડાબી બાજુ છે. RTL ભાષાઓમાં, તે જમણી બાજુ છે. vertical-rl રાઇટિંગ મોડમાં, તે ઉપરની બાજુ છે.
• float: inline-end; આ એક ઘટકને ઇનલાઇન દિશાના અંતમાં ફ્લોટ કરે છે. LTR માં, આ જમણી બાજુ છે. RTL માં, તે ડાબી બાજુ છે. vertical-rl માં, તે નીચેની બાજુ છે.

તેવી જ રીતે, clear પ્રોપર્ટી, જે ફ્લોટેડ ઘટકોની આસપાસ સામગ્રીના રેપિંગને નિયંત્રિત કરવા માટે વપરાય છે, તેના તાર્કિક સમકક્ષો મેળવે છે:

• clear: inline-start; ઇનલાઇન-સ્ટાર્ટ બાજુ પર ફ્લોટ્સ સાફ કરે છે.
• clear: inline-end; ઇનલાઇન-એન્ડ બાજુ પર ફ્લોટ્સ સાફ કરે છે.

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

લોજિકલ Resize સાથે ઉન્નત નિયંત્રણ

resize પ્રોપર્ટી, જે સામાન્ય રીતે textarea પર વપરાય છે, વપરાશકર્તાઓને ઘટકનું કદ બદલવાની મંજૂરી આપે છે. તેની પરંપરાગત વેલ્યુઝ horizontal, vertical, અને both છે. પરંતુ વર્ટિકલ રાઇટિંગ મોડમાં "હોરિઝોન્ટલ" નો અર્થ શું છે? તેનો અર્થ હજુ પણ ભૌતિક આડા અક્ષ સાથે કદ બદલવાનો છે, જે વપરાશકર્તા અથવા ડિઝાઇનરનો ઇરાદો ન પણ હોય. વપરાશકર્તા સંભવતઃ લાઇનોને લાંબી અથવા ટૂંકી બનાવવા માટે તેના ઇનલાઇન અક્ષ સાથે ઘટકનું કદ બદલવા માંગે છે.

લેવલ 2 resize માટે લોજિકલ વેલ્યુઝ રજૂ કરે છે:

• resize: inline; ઇનલાઇન અક્ષ સાથે કદ બદલવાની મંજૂરી આપે છે.
• resize: block; બ્લોક અક્ષ સાથે કદ બદલવાની મંજૂરી આપે છે.

અંગ્રેજીમાં ટેક્સ્ટએરિયા પર resize: block; નો ઉપયોગ કરવાથી વપરાશકર્તા તેને ઊંચું બનાવી શકે છે. વર્ટિકલ રાઇટિંગ મોડમાં તેનો ઉપયોગ કરવાથી વપરાશકર્તા તેને પહોળું બનાવી શકે છે (જે બ્લોક દિશા છે). તે બસ કામ કરે છે.

`caption-side`: ટેબલ કેપ્શન્સ માટે લોજિકલ પોઝિશનિંગ

caption-side પ્રોપર્ટી ટેબલના caption નું સ્થાન નક્કી કરે છે. જૂની વેલ્યુઝ top અને bottom હતી. ફરીથી, આ ભૌતિક છે. જો ડિઝાઇનરનો ઇરાદો ટેબલની સામગ્રી પહેલાં કેપ્શન મૂકવાનો હોય, તો top હોરિઝોન્ટલ રાઇટિંગ મોડ્સ માટે કામ કરે છે. પરંતુ vertical-rl મોડમાં, બ્લોક પ્રવાહની "શરૂઆત" જમણી બાજુએ છે, ઉપર નહીં.

લેવલ 2 તાર્કિક ઉકેલ પૂરો પાડે છે:

• caption-side: block-start; કેપ્શનને બ્લોક પ્રવાહની શરૂઆતમાં મૂકે છે.
• caption-side: block-end; કેપ્શનને બ્લોક પ્રવાહના અંતમાં મૂકે છે.

`text-align`: એક મૂળભૂત લોજિકલ વેલ્યુ

જ્યારે text-align માટે start અને end વેલ્યુઝ થોડા સમયથી છે, તે લોજિકલ પ્રોપર્ટીઝ ફિલોસોફીનો મુખ્ય ભાગ છે અને તેને મજબૂત કરવા યોગ્ય છે. text-align: left; નો ઉપયોગ કરવો એ એક સામાન્ય ભૂલ છે જે તરત જ RTL ભાષાઓમાં લેઆઉટ સમસ્યાઓનું કારણ બને છે. સાચો, આધુનિક અભિગમ હંમેશા ઉપયોગ કરવાનો છે:

• text-align: start; ટેક્સ્ટને ઇનલાઇન દિશાની શરૂઆતમાં સંરેખિત કરે છે.
• text-align: end; ટેક્સ્ટને ઇનલાઇન દિશાના અંતમાં સંરેખિત કરે છે.

લેવલ 2 નું તાજ રત્ન: લોજિકલ `border-radius`

કદાચ લેવલ 2 માં સૌથી મહત્વપૂર્ણ અને શક્તિશાળી ઉમેરો એ બોર્ડર રેડિઆઈને તાર્કિક રીતે નિયંત્રિત કરવા માટેની પ્રોપર્ટીઝનો સેટ છે. અગાઉ, જો તમે ઇચ્છતા હો કે કાર્ડના ખૂણા ફક્ત "ઉપર" ગોળાકાર હોય, તો તમે border-top-left-radius અને border-top-right-radius નો ઉપયોગ કરશો. આ વર્ટિકલ રાઇટિંગ મોડમાં સંપૂર્ણપણે તૂટી જાય છે, જ્યાં "ઉપર" ના ખૂણા હવે start-start અને end-start ખૂણા છે.

લેવલ 2 ચાર નવી લોંગહેન્ડ પ્રોપર્ટીઝ રજૂ કરે છે જે ઘટકના ચાર ખૂણાઓ સાથે પ્રવાહ-સંબંધિત રીતે મેપ થાય છે. નામકરણ સંમેલન border-[block-edge]-[inline-edge]-radius છે.

• border-start-start-radius: તે ખૂણો જ્યાં block-start અને inline-start બાજુઓ મળે છે.
• border-start-end-radius: તે ખૂણો જ્યાં block-start અને inline-end બાજુઓ મળે છે.
• border-end-start-radius: તે ખૂણો જ્યાં block-end અને inline-start બાજુઓ મળે છે.
• border-end-end-radius: તે ખૂણો જ્યાં block-end અને inline-end બાજુઓ મળે છે.

આને શરૂઆતમાં વિઝ્યુઅલાઈઝ કરવું મુશ્કેલ હોઈ શકે છે, તેથી ચાલો તેને જુદા જુદા રાઇટિંગ મોડ્સ માટે મેપ કરીએ:

`writing-mode: horizontal-tb` (દા.ત., અંગ્રેજી) માં `border-radius` નું મેપિંગ

• border-start-start-radius top-left-radius સાથે મેપ થાય છે.
• border-start-end-radius top-right-radius સાથે મેપ થાય છે.
• border-end-start-radius bottom-left-radius સાથે મેપ થાય છે.
• border-end-end-radius bottom-right-radius સાથે મેપ થાય છે.

`dir="rtl"` (દા.ત., અરબી) સાથે `writing-mode: horizontal-tb` માં `border-radius` નું મેપિંગ

અહીં, ઇનલાઇન દિશા ઉલટાવી દેવામાં આવી છે.

• border-start-start-radius top-right-radius સાથે મેપ થાય છે. (Block-start ઉપર છે, inline-start જમણે છે).
• border-start-end-radius top-left-radius સાથે મેપ થાય છે.
• border-end-start-radius bottom-right-radius સાથે મેપ થાય છે.
• border-end-end-radius bottom-left-radius સાથે મેપ થાય છે.

`writing-mode: vertical-rl` (દા.ત., જાપાનીઝ) માં `border-radius` નું મેપિંગ

અહીં, બંને અક્ષો ફેરવવામાં આવ્યા છે.

• border-start-start-radius top-right-radius સાથે મેપ થાય છે. (Block-start જમણે છે, inline-start ઉપર છે).
• border-start-end-radius bottom-right-radius સાથે મેપ થાય છે.
• border-end-start-radius top-left-radius સાથે મેપ થાય છે.
• border-end-end-radius bottom-left-radius સાથે મેપ થાય છે.

આ નવી પ્રોપર્ટીઝનો ઉપયોગ કરીને, તમે ખૂણાના રેડિઆઈને વ્યાખ્યાયિત કરી શકો છો જે ભૌતિક સ્ક્રીન સાથે નહીં, પરંતુ સામગ્રીના પ્રવાહ સાથે અર્થપૂર્ણ રીતે જોડાયેલા છે. "start-start" ખૂણો હંમેશા સાચો ખૂણો હશે, ભાષા અથવા ટેક્સ્ટ દિશાને ધ્યાનમાં લીધા વિના.

વ્યવહારુ અમલીકરણ: ગ્લોબલ-રેડી ઘટકનું નિર્માણ

સિદ્ધાંત સારો છે, પરંતુ ચાલો જોઈએ કે આ વ્યવહારમાં કેવી રીતે કામ કરે છે. અમે એક સરળ પ્રોફાઇલ કાર્ડ ઘટક બનાવીશું, પહેલા જૂની ભૌતિક પ્રોપર્ટીઝનો ઉપયોગ કરીને, અને પછી તેને લેવલ 1 અને લેવલ 2 બંનેમાંથી આધુનિક લોજિકલ પ્રોપર્ટીઝનો ઉપયોગ કરવા માટે રિફેક્ટર કરીશું.

કાર્ડમાં એક બાજુ ફ્લોટ થયેલ ઇમેજ, એક શીર્ષક, થોડું ટેક્સ્ટ અને સુશોભન બોર્ડર અને ગોળાકાર ખૂણા હશે.

"જૂની" રીત: એક બરડ, ભૌતિક-પ્રોપર્ટી કાર્ડ

અહીં છે કે આપણે થોડા વર્ષો પહેલા આ કાર્ડને કેવી રીતે સ્ટાઇલ કર્યું હોત:

/* --- CSS (ભૌતિક પ્રોપર્ટીઝ) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

પ્રમાણભૂત અંગ્રેજી LTR સંદર્ભમાં, આ સારું લાગે છે. પરંતુ જો આપણે આને dir="rtl" અથવા writing-mode: vertical-rl વાળા કન્ટેનરમાં મૂકીએ, તો લેઆઉટ તૂટી જાય છે. સુશોભન બોર્ડર ખોટી બાજુએ છે, અવતાર ખોટી બાજુએ છે, માર્જિન ખોટું છે, અને ગોળાકાર ખૂણા ખોટી જગ્યાએ છે.

"નવી" રીત: એક મજબૂત, લોજિકલ-પ્રોપર્ટી કાર્ડ

હવે, ચાલો લોજિકલ પ્રોપર્ટીઝનો ઉપયોગ કરીને સમાન ઘટકને રિફેક્ટર કરીએ. અમે લેવલ 1 અને લેવલ 2 ના નવા ઉમેરાઓ બંનેમાંથી પ્રોપર્ટીઝનો લાભ લઈશું.

/* --- CSS (લોજિકલ પ્રોપર્ટીઝ) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` શોર્ટકટ પહેલેથી જ લોજિકલ છે! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* લેવલ 2 ની શક્તિ! */

  border-end-start-radius: 8px; /* લેવલ 2 ની શક્તિ! */

}

.logical-card .avatar {

  float: inline-start; /* લેવલ 2 ની શક્તિ! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

પરીક્ષણ અને ચકાસણી

આ નવા CSS સાથે, તમે ઘટકને કોઈપણ કન્ટેનરમાં મૂકી શકો છો, અને તે આપમેળે અનુકૂલન કરશે.

• LTR સંદર્ભમાં: તે મૂળ ભૌતિક સંસ્કરણ જેવું જ દેખાશે.
• RTL સંદર્ભમાં (dir="rtl"): અવતાર જમણી બાજુ ફ્લોટ થશે, તેનું માર્જિન ડાબી બાજુ હશે, સુશોભન બોર્ડર જમણી બાજુ હશે, અને ટેક્સ્ટ સ્ટાર્ટ-એલાઇન (જમણી બાજુએ) હશે. ગોળાકાર ખૂણા યોગ્ય રીતે ઉપર-જમણે અને નીચે-જમણે હશે. તે બસ કામ કરે છે.
• વર્ટિકલ સંદર્ભમાં (writing-mode: vertical-rl): કાર્ડની "પહોળાઈ" (હવે તેનું વર્ટિકલ inline-size) 300px હશે. અવતાર "ઉપર" (inline-start) ફ્લોટ થશે અને તેની "નીચે" (inline-end) પર માર્જિન હશે. સુશોભન બોર્ડર જમણી બાજુ (inline-start) પર હશે, અને ગોળાકાર ખૂણા ઉપર-જમણે અને ઉપર-ડાબે હશે. ઘટકે કોઈપણ મીડિયા ક્વેરીઝ અથવા ઓવરરાઇડ્સ વિના પોતાને સંપૂર્ણપણે યોગ્ય રીતે ફરીથી ગોઠવી લીધું છે.

બ્રાઉઝર સપોર્ટ અને ફોલબેક્સ

આ બધું અદ્ભુત લાગે છે, પરંતુ બ્રાઉઝર સપોર્ટ વિશે શું? સારા સમાચાર એ છે કે લેવલ 1 લોજિકલ પ્રોપર્ટીઝ માટે સપોર્ટ બધા આધુનિક બ્રાઉઝર્સમાં ઉત્તમ છે. તમે આજે margin-inline-start અને padding-block જેવી પ્રોપર્ટીઝનો ઉપયોગ કરી શકો છો અને કરવો જોઈએ.

નવી લેવલ 2 સુવિધાઓ માટે સપોર્ટ ઝડપથી સુધરી રહ્યો છે પરંતુ હજુ સુધી સાર્વત્રિક નથી. float, clear, અને resize માટે લોજિકલ વેલ્યુઝ સારી રીતે સપોર્ટેડ છે. લોજિકલ border-radius પ્રોપર્ટીઝ સૌથી નવી છે અને હજુ પણ ફીચર ફ્લેગ્સ પાછળ અથવા તાજેતરના બ્રાઉઝર સંસ્કરણોમાં હોઈ શકે છે. હંમેશની જેમ, તમારે સૌથી અપ-ટુ-ડેટ સુસંગતતા ડેટા માટે MDN વેબ ડૉક્સ અથવા CanIUse.com જેવા સંસાધનોનો સંપર્ક કરવો જોઈએ.

પ્રોગ્રેસિવ એન્હાન્સમેન્ટ માટેની વ્યૂહરચનાઓ

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

અહીં તમે ફોલબેક-રેડી CSS કેવી રીતે લખી શકો છો તે છે:

.card {

  /* જૂના બ્રાઉઝર્સ માટે ફોલબેક */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* આધુનિક લોજિકલ પ્રોપર્ટી જે ફોલબેકને ઓવરરાઇડ કરશે */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

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

ભવિષ્ય લોજિકલ છે: લેવલ 2 ની બહાર

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

શું હજુ પણ ખામીઓ છે? થોડી. background-position અથવા ગ્રેડિએન્ટ્સ જેવી પ્રોપર્ટીઝ માટે લોજિકલ વેલ્યુઝ પર હજુ પણ ચર્ચા થઈ રહી છે. પરંતુ લેવલ 2 ના પ્રકાશન સાથે, રોજિંદા લેઆઉટ અને સ્ટાઇલિંગ કાર્યોનો મોટો ભાગ હવે સંપૂર્ણપણે તાર્કિક અભિગમનો ઉપયોગ કરીને પૂર્ણ કરી શકાય છે.

ડેવલપર્સ માટે ક્રિયા માટેનું આહ્વાન સ્પષ્ટ છે: લોજિકલ પ્રોપર્ટીઝને ડિફોલ્ટ કરવાનું શરૂ કરો. width ને બદલે inline-size ને તમારું ગો-ટુ બનાવો. ડાબા અને જમણા માર્જિનને અલગથી સેટ કરવાને બદલે margin-inline નો ઉપયોગ કરો. આ ફક્ત વિવિધ ભાષાઓને ટેકો આપવા વિશે નથી; તે વધુ સારી, વધુ સ્થિતિસ્થાપક CSS લખવા વિશે છે. લોજિકલ પ્રોપર્ટીઝ સાથે બનેલો ઘટક સ્વાભાવિક રીતે વધુ પુનઃઉપયોગી અને અનુકૂલનશીલ હોય છે, પછી ભલે તે LTR, RTL, અથવા વર્ટિકલ લેઆઉટમાં વપરાય. તે ફક્ત વધુ સારું એન્જિનિયરિંગ છે.

નિષ્કર્ષ: પ્રવાહને અપનાવો

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

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