CSS लॉजिकल प्रॉपर्टीज: जागतिक प्रेक्षकांसाठी वेबसाइट्स तयार करणे

आजच्या जोडलेल्या जगात, वेबसाइट्सना जागतिक प्रेक्षकांना सेवा देण्याची आवश्यकता आहे. याचा अर्थ विविध भाषा, लेखन पद्धती आणि सांस्कृतिक परंपरांना समर्थन देणे. पारंपरिक CSS प्रॉपर्टीज, ज्या भौतिक परिमाणांवर (वर, उजवीकडे, खाली, डावीकडे) आधारित आहेत, वेगवेगळ्या दिशांमध्ये वाहणाऱ्या लेआउट्स हाताळताना समस्या निर्माण करू शकतात. CSS लॉजिकल प्रॉपर्टीज सामग्रीच्या प्रवाहावर आधारित लेआउट परिभाषित करून एक उपाय देतात, भौतिक स्क्रीन ओरिएंटेशनवर नव्हे. हा लेख CSS लॉजिकल प्रॉपर्टीजच्या सामर्थ्यावर आणि त्या तुम्हाला खऱ्या अर्थाने आंतरराष्ट्रीय वेबसाइट्स तयार करण्यात कशी मदत करू शकतात यावर सविस्तर चर्चा करेल.

लॉजिकल प्रॉपर्टीजची गरज समजून घेणे

पारंपरिकपणे, margin-left आणि padding-right सारख्या CSS प्रॉपर्टीज डावीकडून-उजवीकडे (LTR) लेखन पद्धत गृहीत धरतात. तथापि, अरबी आणि हिब्रू सारख्या अनेक भाषा उजवीकडून-डावीकडे (RTL) लेखन पद्धत वापरतात. RTL वेबसाइटवर पारंपरिक CSS वापरताना, तुम्हाला अनेकदा या प्रॉपर्टीजची मूल्ये उलटी करावी लागतील, ज्यामुळे स्टाईलशीट्स गुंतागुंतीच्या आणि त्रुटी-प्रवण होतात. याशिवाय, काही पूर्व आशियाई भाषा उभ्या लिहिल्या जाऊ शकतात, ज्यामुळे आणखी एक गुंतागुंत निर्माण होते. लॉजिकल प्रॉपर्टीज या समस्यांचे निराकरण करतात, कारण त्या स्क्रीनवरील भौतिक स्थितीऐवजी सामग्रीच्या प्रवाहावर आधारित शैली परिभाषित करण्याचा एक मार्ग प्रदान करतात. यामुळे हे सुनिश्चित होते की तुमचे लेआउट्स वेगवेगळ्या लेखन पद्धती आणि दिशांनुसार आपोआप जुळवून घेतात.

भौतिक प्रॉपर्टीजची समस्या

एका साध्या नेव्हिगेशन मेन्यूचा विचार करा जिथे आयटम्स मार्जिनने वेगळे केले आहेत. भौतिक प्रॉपर्टीज वापरून, तुम्ही असे लिहू शकता:

            .nav-item {
 margin-right: 10px;
}

            

              
                Copy
              
            
          

हे LTR भाषांसाठी उत्तम काम करते. तथापि, जेव्हा वेबसाइट RTL भाषेत रेंडर केली जाते, तेव्हा मार्जिन नेव्हिगेशन आयटम्सच्या चुकीच्या बाजूला दिसते. हे दुरुस्त करण्यासाठी, तुम्हाला विशेषतः RTL लेआउटसाठी आणखी एक CSS नियम जोडावा लागेल:

            [dir="rtl"] .nav-item {
 margin-right: 0;
 margin-left: 10px;
}

            

              
                Copy
              
            
          

हा दृष्टिकोन त्रासदायक आहे आणि तुमच्या CSS ची देखभाल करणे अधिक कठीण बनवतो. लॉजिकल प्रॉपर्टीज एक अधिक स्वच्छ आणि सुलभ उपाय प्रदान करतात.

CSS लॉजिकल प्रॉपर्टीजची ओळख

CSS लॉजिकल प्रॉपर्टीज भौतिक प्रॉपर्टीज (वर, उजवीकडे, खाली, डावीकडे) च्या जागी तार्किक समकक्ष वापरतात जे लेखन पद्धत आणि सामग्रीच्या दिशात्मकतेच्या सापेक्ष असतात. येथे काही प्रमुख लॉजिकल प्रॉपर्टीज आणि त्यांच्या संबंधित भौतिक प्रॉपर्टीज आहेत:

• margin-inline-start: LTR मध्ये margin-left आणि RTL मध्ये margin-right च्या समतुल्य.
• margin-inline-end: LTR मध्ये margin-right आणि RTL मध्ये margin-left च्या समतुल्य.
• padding-inline-start: LTR मध्ये padding-left आणि RTL मध्ये padding-right च्या समतुल्य.
• padding-inline-end: LTR मध्ये padding-right आणि RTL मध्ये padding-left च्या समतुल्य.
• border-inline-start: LTR मध्ये border-left आणि RTL मध्ये border-right च्या समतुल्य.
• border-inline-end: LTR मध्ये border-right आणि RTL मध्ये border-left च्या समतुल्य.
• inset-inline-start: LTR मध्ये left आणि RTL मध्ये right च्या समतुल्य.
• inset-inline-end: LTR मध्ये right आणि RTL मध्ये left च्या समतुल्य.
• margin-block-start: LTR आणि RTL दोन्हीमध्ये margin-top च्या समतुल्य.
• margin-block-end: LTR आणि RTL दोन्हीमध्ये margin-bottom च्या समतुल्य.
• padding-block-start: LTR आणि RTL दोन्हीमध्ये padding-top च्या समतुल्य.
• padding-block-end: LTR आणि RTL दोन्हीमध्ये padding-bottom च्या समतुल्य.
• border-block-start: LTR आणि RTL दोन्हीमध्ये border-top च्या समतुल्य.
• border-block-end: LTR आणि RTL दोन्हीमध्ये border-bottom च्या समतुल्य.
• inset-block-start: LTR आणि RTL दोन्हीमध्ये top च्या समतुल्य.
• inset-block-end: LTR आणि RTL दोन्हीमध्ये bottom च्या समतुल्य.
• inline-size: आडव्या परिमाणाचे प्रतिनिधित्व करते. आडव्या लेखन पद्धतींसाठी width च्या समतुल्य.
• block-size: उभ्या परिमाणाचे प्रतिनिधित्व करते. आडव्या लेखन पद्धतींसाठी height च्या समतुल्य.

"इनलाइन" आणि "ब्लॉक" हे शब्द मजकूर प्रवाहाच्या दिशेचा संदर्भ देतात. इनलाइन दिशा ही ती दिशा आहे ज्यात मजकूर एका ओळीत वाहतो (उदा. डावीकडून-उजवीकडे किंवा उजवीकडून-डावीकडे). ब्लॉक दिशा ही ती दिशा आहे ज्यात मजकूराचे ब्लॉक्स स्टॅक केले जातात (उदा. वरून-खालपर्यंत). या लॉजिकल प्रॉपर्टीज वापरल्याने तुम्हाला लेखन पद्धत आणि दिशेपासून स्वतंत्र असलेल्या शैली परिभाषित करता येतात.

लॉजिकल प्रॉपर्टीज वापरण्याची व्यावहारिक उदाहरणे

उदाहरण १: नेव्हिगेशन मेन्यू

चला नेव्हिगेशन मेन्यूच्या उदाहरणावर परत जाऊया. margin-right वापरण्याऐवजी, आपण margin-inline-end वापरू शकतो:

            .nav-item {
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

आता, वेबसाइट LTR किंवा RTL मध्ये असली तरी, मार्जिन नेहमी नेव्हिगेशन आयटम्सच्या योग्य बाजूला दिसेल. वेगळ्या RTL-विशिष्ट CSS नियमांची गरज नाही!

उदाहरण २: कार्ड लेआउट

एका बाजूला प्रतिमा आणि दुसऱ्या बाजूला मजकूर असलेल्या कार्ड लेआउटचा विचार करा. लेखन पद्धतीची पर्वा न करता, प्रतिमा योग्यरित्या ठेवण्यासाठी आपण लॉजिकल प्रॉपर्टीज वापरू शकतो:

            .card {
 display: flex;
}

.card-image {
 flex: 0 0 150px;
}

.card-content {
 padding-inline-start: 20px; /* Adjust spacing between image and text */
}

            

              
                Copy
              
            
          

या उदाहरणात, padding-inline-start LTR मध्ये सामग्रीच्या डावीकडे आणि RTL मध्ये उजवीकडे पॅडिंग जोडेल, ज्यामुळे मजकूर नेहमी प्रतिमेपासून दृष्यदृष्ट्या वेगळा राहील याची खात्री होते.

उदाहरण ३: फॉर्म लेबल्स

फॉर्म डिझाइन करताना, LTR लेआउटमध्ये लेबल्स सामान्यतः इनपुट फील्डच्या डावीकडे ठेवले जातात. RTL लेआउटमध्ये, लेबल्स उजवीकडे असावेत. लॉजिकल प्रॉपर्टीज हे सोपे करतात:

            label {
 display: inline-block;
 text-align: end;
 width: 100px;
 margin-inline-end: 10px; /* Space between label and input */
}

            

              
                Copy
              
            
          

text-align: end प्रॉपर्टी मजकुराला LTR मध्ये उजवीकडे आणि RTL मध्ये डावीकडे संरेखित करते. margin-inline-end प्रॉपर्टी लेबल आणि इनपुट फील्ड दरम्यान योग्य बाजूला जागा जोडते.

लेखन पद्धतींसह लॉजिकल प्रॉपर्टीजचा वापर

CSS लेखन पद्धती मजकूर कोणत्या दिशेने वाहतो, आडवा आणि उभा दोन्ही, हे नियंत्रित करतात. लॉजिकल प्रॉपर्टीज विविध लेखन पद्धतींसह काम करताना विशेषतः उपयुक्त आहेत, जसे की उभा मजकूर. writing-mode प्रॉपर्टी horizontal-tb (डीफॉल्ट, आडवे वरून-खालपर्यंत), vertical-rl (उभे उजवीकडून-डावीकडे), आणि vertical-lr (उभे डावीकडून-उजवीकडे) यांसारखी मूल्ये घेऊ शकते.

उभ्या लेखन पद्धती वापरताना, लॉजिकल प्रॉपर्टीजचा अर्थ बदलतो. उदाहरणार्थ, margin-inline-start आणि margin-inline-end आता अनुक्रमे वरच्या आणि खालच्या मार्जिनचा संदर्भ देतात.

उदाहरण: उभा नेव्हिगेशन

चला एक उभा नेव्हिगेशन मेन्यू तयार करूया:

            .vertical-nav {
 writing-mode: vertical-rl; /* or vertical-lr */
}

.vertical-nav-item {
 margin-block-end: 10px; /* Space between items */
}

            

              
                Copy
              
            
          

या उदाहरणात, margin-block-end उभ्या दिशेने नेव्हिगेशन आयटम्समध्ये जागा जोडते.

दिशात्मकता: LTR आणि RTL

direction प्रॉपर्टी एका एलिमेंटमधील मजकूर प्रवाहाची दिशा निर्दिष्ट करते. तिची दोन मूल्ये असू शकतात: ltr (डावीकडून-उजवीकडे) आणि rtl (उजवीकडून-डावीकडे). ही प्रॉपर्टी अनेकदा <html> टॅगवर किंवा विशिष्ट एलिमेंट्सवर lang ॲट्रिब्यूटसह वापरली जाते, जेणेकरून सामग्रीची भाषा आणि दिशात्मकता दर्शविली जाईल.

            <html lang="ar" dir="rtl">
 <body>
 <!-- Arabic content here -->
 </body>
</html>

            

              
                Copy
              
            
          

जेव्हा dir ॲट्रिब्यूट rtl वर सेट केले जाते, तेव्हा ब्राउझर आपोआप इनलाइन सामग्रीची दिशा उलटवतो आणि लॉजिकल प्रॉपर्टीजवर आधारित योग्य शैली लागू करतो.

लॉजिकल प्रॉपर्टीज वापरण्याचे फायदे

• सुधारित आंतरराष्ट्रीयकरण (i18n) आणि स्थानिकीकरण (l10n): लॉजिकल प्रॉपर्टीजमुळे विविध भाषा, लेखन पद्धती आणि सांस्कृतिक परंपरांशी जुळवून घेणाऱ्या वेबसाइट्स तयार करणे सोपे होते.
• CSS गुंतागुंत कमी: वेगळ्या RTL-विशिष्ट CSS नियमांची गरज दूर करून, लॉजिकल प्रॉपर्टीज तुमच्या स्टाईलशीट्स सोप्या करतात आणि त्यांची देखभाल करणे सोपे करतात.
• वर्धित कोड वाचनीयता: लॉजिकल प्रॉपर्टीजची नावे भौतिक प्रॉपर्टीजच्या नावांपेक्षा अधिक वर्णनात्मक आणि समजण्यास सोपी असतात, ज्यामुळे कोड अधिक वाचनीय होतो.
• उत्तम कार्यप्रदर्शन: कमी झालेली CSS गुंतागुंत वेबसाइटच्या कार्यप्रदर्शनात सुधारणा करू शकते, कारण ब्राउझरला कमी CSS पार्स आणि लागू करावे लागते.
• भविष्य-प्रूफिंग: वेब मानके विकसित होत असताना, लवचिक आणि जुळवून घेणाऱ्या वेबसाइट्स तयार करण्यासाठी लॉजिकल प्रॉपर्टीज अधिक महत्त्वाच्या होण्याची शक्यता आहे.

ब्राउझर सुसंगतता

बहुतेक आधुनिक ब्राउझर Chrome, Firefox, Safari, आणि Edge सह CSS लॉजिकल प्रॉपर्टीजला चांगले समर्थन देतात. तथापि, जुने ब्राउझर त्यांना पूर्णपणे समर्थन देऊ शकत नाहीत. लॉजिकल प्रॉपर्टीजचा विस्तृत वापर करण्यापूर्वी ब्राउझर सुसंगतता सारण्या (उदा. caniuse.com वर) तपासणे नेहमीच चांगली कल्पना आहे. तुम्ही जुन्या ब्राउझरसाठी फॉलबॅक प्रॉपर्टीज स्वयंचलितपणे तयार करण्यासाठी Autoprefixer सारखी साधने देखील वापरू शकता.

लॉजिकल प्रॉपर्टीज वापरण्यासाठी सर्वोत्तम पद्धती

• लॉजिकल प्रॉपर्टीजने सुरुवात करा: शक्य असेल तेव्हा, लेआउट शैली परिभाषित करताना भौतिक प्रॉपर्टीजऐवजी लॉजिकल प्रॉपर्टीज वापरा.
• dir ॲट्रिब्यूट वापरा: सामग्रीची दिशात्मकता दर्शविण्यासाठी <html> टॅगवर किंवा विशिष्ट एलिमेंट्सवर dir ॲट्रिब्यूट वापरा.
• पूर्णपणे चाचणी करा: लेआउट योग्यरित्या जुळवून घेतो याची खात्री करण्यासाठी तुमची वेबसाइट वेगवेगळ्या भाषा आणि लेखन पद्धतींमध्ये तपासा. लागू केलेल्या शैली तपासण्यासाठी आणि कोणत्याही समस्या ओळखण्यासाठी ब्राउझर डेव्हलपर साधनांचा वापर करा.
• फॉलबॅकचा विचार करा: लॉजिकल प्रॉपर्टीजला समर्थन न देणाऱ्या जुन्या ब्राउझरसाठी, फॉलबॅक प्रॉपर्टीज किंवा Autoprefixer सारख्या साधनांचा वापर करण्याचा विचार करा.
• एकसारखेपणा राखा: गोंधळ टाळण्यासाठी आणि एकसारखे डिझाइन राखण्यासाठी तुमच्या स्टाईलशीटमध्ये लॉजिकल प्रॉपर्टीजचा सातत्याने वापर करा.
• परिभाषा शिका: "इनलाइन" आणि "ब्लॉक" या शब्दांशी आणि ते लेखन पद्धती आणि दिशात्मकतेशी कसे संबंधित आहेत याबद्दल स्वतःला परिचित करा.
• CSS व्हेरिएबल्स वापरा: तुम्ही लॉजिकल प्रॉपर्टीजसाठी मूल्ये परिभाषित करण्यासाठी आणि तुमच्या स्टाईलशीटमध्ये त्यांचा पुन्हा वापर करण्यासाठी CSS व्हेरिएबल्स वापरू शकता. हे एकसारखेपणा राखण्यास मदत करते आणि शैली अद्यतनित करणे सोपे करते. उदाहरणार्थ:

            :root {
 --spacing-inline: 10px;
}

.element {
 margin-inline-start: var(--spacing-inline);
 padding-inline-end: var(--spacing-inline);
}

            

              
                Copy
              
            
          

प्रगत तंत्रे

calc() सह लॉजिकल प्रॉपर्टीज वापरणे

तुम्ही सामग्रीच्या किंवा इतर एलिमेंट्सच्या आकारावर आधारित गणना करण्यासाठी calc() फंक्शन लॉजिकल प्रॉपर्टीजसह वापरू शकता. उदाहरणार्थ:

            .container {
 width: 100%;
}

.element {
 margin-inline-start: calc(50% - 100px); /* Center the element */
}

            

              
                Copy
              
            
          

फ्लेक्सबॉक्स आणि ग्रिडसह लॉजिकल प्रॉपर्टीज एकत्र करणे

लॉजिकल प्रॉपर्टीज CSS फ्लेक्सबॉक्स आणि ग्रिड लेआउटसह अखंडपणे काम करतात. तुम्ही त्यांचा वापर फ्लेक्स किंवा ग्रिड कंटेनरमधील आयटम्सचे संरेखन आणि वितरण नियंत्रित करण्यासाठी करू शकता. उदाहरणार्थ:

            .flex-container {
 display: flex;
 justify-content: space-between;
 padding-inline-start: 20px;
 padding-inline-end: 20px;
}

            

              
                Copy
              
            
          

JavaScript सह लॉजिकल प्रॉपर्टीज वापरणे

तुम्ही सामग्रीची दिशात्मकता ओळखण्यासाठी आणि लॉजिकल प्रॉपर्टीजवर आधारित योग्य शैली लागू करण्यासाठी JavaScript वापरू शकता. उदाहरणार्थ:

            const isRtl = document.documentElement.getAttribute('dir') === 'rtl';

if (isRtl) {
 // Apply RTL-specific styles
 document.body.classList.add('rtl');
}

            

              
                Copy
              
            
          

नंतर, तुमच्या CSS मध्ये:

            .element {
 margin-inline-start: 10px; /* Default LTR style */
}

.rtl .element {
 margin-inline-start: 0; /* Override for RTL */
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

जरी हा दृष्टिकोन शक्य असला तरी, शक्य असेल तेव्हा CSS लॉजिकल प्रॉपर्टीज आणि dir ॲट्रिब्यूटवर अवलंबून राहणे सामान्यतः चांगले आहे, कारण यामुळे तुमचा कोड अधिक स्वच्छ आणि देखरेख करण्यास सोपा राहतो.

ॲक्सेसिबिलिटी संबंधित विचार

लॉजिकल प्रॉपर्टीज वापरल्याने तुमच्या वेबसाइटची ॲक्सेसिबिलिटी देखील सुधारू शकते. तुमचा लेआउट वेगवेगळ्या लेखन पद्धतींमध्ये योग्यरित्या जुळवून घेतो याची खात्री करून, तुम्ही अपंग वापरकर्त्यांसाठी तुमची सामग्री नेव्हिगेट करणे आणि समजणे सोपे करू शकता. उदाहरणार्थ, जे वापरकर्ते स्क्रीन रीडर वापरतात ते एलिमेंट्सच्या योग्य वाचन क्रमावर अवलंबून असू शकतात, ज्यावर लेखन दिशेचा परिणाम होऊ शकतो. लॉजिकल प्रॉपर्टीज वापरल्याने वाचन क्रम भाषेची पर्वा न करता एकसारखा राहील याची खात्री होते.

निष्कर्ष

CSS लॉजिकल प्रॉपर्टीज जागतिक प्रेक्षकांना सेवा देणाऱ्या वेबसाइट्स तयार करण्यासाठी एक शक्तिशाली साधन आहेत. भौतिक प्रॉपर्टीजऐवजी लॉजिकल प्रॉपर्टीज वापरून, तुम्ही असे लेआउट तयार करू शकता जे विविध भाषा, लेखन पद्धती आणि सांस्कृतिक परंपरांनुसार आपोआप जुळवून घेतात. यामुळे सुधारित आंतरराष्ट्रीयकरण, कमी CSS गुंतागुंत आणि वर्धित कोड वाचनीयता साधता येते. CSS लॉजिकल प्रॉपर्टीजचा स्वीकार करा आणि प्रत्येकासाठी खऱ्या अर्थाने जागतिक आणि ॲक्सेसिबल वेब अनुभव तयार करा.

अधिक वाचन

• MDN वेब डॉक्स: CSS लॉजिकल प्रॉपर्टीज
• CSS लॉजिकल प्रॉपर्टीज अँड व्हॅल्यूज लेव्हल १
• कॅन आय यूज: CSS लॉजिकल प्रॉपर्टीज