ویژگی‌های منطقی CSS: ساخت وب‌سایت‌ها برای مخاطبان جهانی

در دنیای متصل امروز، وب‌سایت‌ها باید به مخاطبان جهانی خدمات ارائه دهند. این به معنای پشتیبانی از زبان‌ها، حالت‌های نوشتاری و قراردادهای فرهنگی متنوع است. ویژگی‌های سنتی CSS، که بر اساس ابعاد فیزیکی (بالا، راست، پایین، چپ) هستند، هنگام کار با طرح‌بندی‌هایی که در جهات مختلف جریان دارند، می‌توانند مشکل‌ساز شوند. ویژگی‌های منطقی CSS با تعریف طرح‌بندی بر اساس جریان محتوا به جای جهت‌گیری فیزیکی صفحه، راه‌حلی ارائه می‌دهند. این مقاله به قدرت ویژگی‌های منطقی CSS و چگونگی کمک آن‌ها به ساخت وب‌سایت‌های واقعاً بین‌المللی می‌پردازد.

درک نیاز به ویژگی‌های منطقی

به طور سنتی، ویژگی‌های CSS مانند margin-left و padding-right یک حالت نوشتاری چپ‌به‌راست (LTR) را فرض می‌کنند. با این حال، بسیاری از زبان‌ها مانند عربی و عبری از حالت نوشتاری راست‌به‌چپ (RTL) استفاده می‌کنند. هنگام استفاده از CSS سنتی در یک وب‌سایت RTL، اغلب نیاز به معکوس کردن مقادیر این ویژگی‌ها دارید که منجر به استایل‌شیت‌های پیچیده و مستعد خطا می‌شود. علاوه بر این، برخی از زبان‌های شرق آسیا می‌توانند به صورت عمودی نوشته شوند که لایه دیگری از پیچیدگی را به همراه دارد. ویژگی‌های منطقی با ارائه راهی برای تعریف استایل‌ها بر اساس جریان محتوا به جای موقعیت فیزیکی آن بر روی صفحه، این مشکلات را برطرف می‌کنند. این تضمین می‌کند که طرح‌بندی‌های شما به طور خودکار با حالت‌ها و جهات نوشتاری مختلف سازگار می‌شوند.

مشکل ویژگی‌های فیزیکی

یک منوی ناوبری ساده با آیتم‌هایی که با یک حاشیه از هم جدا شده‌اند را در نظر بگیرید. با استفاده از ویژگی‌های فیزیکی، ممکن است بنویسید:

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

            

              
                Copy
              
            
          

این برای زبان‌های LTR کاملاً کار می‌کند. با این حال، هنگامی که وب‌سایت به یک زبان RTL رندر می‌شود، حاشیه در سمت اشتباه آیتم‌های ناوبری ظاهر می‌شود. برای رفع این مشکل، باید یک قانون CSS دیگر به طور خاص برای طرح‌بندی‌های RTL اضافه کنید:

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

            

              
                Copy
              
            
          

این رویکرد دست‌وپاگیر است و نگهداری CSS شما را دشوارتر می‌کند. ویژگی‌های منطقی یک راه‌حل بسیار تمیزتر و قابل نگهداری‌تر ارائه می‌دهند.

معرفی ویژگی‌های منطقی CSS

ویژگی‌های منطقی CSS جایگزین ویژگی‌های فیزیکی (بالا، راست، پایین، چپ) با معادل‌های منطقی می‌شوند که نسبت به حالت نوشتاری و جهت‌گیری محتوا هستند. در اینجا برخی از ویژگی‌های منطقی کلیدی و ویژگی‌های فیزیکی متناظر آن‌ها آورده شده است:

• margin-inline-start: معادل margin-left در LTR و margin-right در RTL.
• margin-inline-end: معادل margin-right در LTR و margin-left در RTL.
• padding-inline-start: معادل padding-left در LTR و padding-right در RTL.
• padding-inline-end: معادل padding-right در LTR و padding-left در RTL.
• border-inline-start: معادل border-left در LTR و border-right در RTL.
• border-inline-end: معادل border-right در LTR و border-left در RTL.
• inset-inline-start: معادل left در LTR و right در RTL.
• inset-inline-end: معادل right در LTR و left در RTL.
• margin-block-start: معادل margin-top در هر دو حالت LTR و RTL.
• margin-block-end: معادل margin-bottom در هر دو حالت LTR و RTL.
• padding-block-start: معادل padding-top در هر دو حالت LTR و RTL.
• padding-block-end: معادل padding-bottom در هر دو حالت LTR و RTL.
• border-block-start: معادل border-top در هر دو حالت LTR و RTL.
• border-block-end: معادل border-bottom در هر دو حالت LTR و RTL.
• inset-block-start: معادل top در هر دو حالت LTR و RTL.
• inset-block-end: معادل bottom در هر دو حالت LTR و RTL.
• inline-size: نشان‌دهنده بعد افقی است. معادل width برای حالت‌های نوشتاری افقی.
• block-size: نشان‌دهنده بعد عمودی است. معادل height برای حالت‌های نوشتاری افقی.

اصطلاحات "inline" و "block" به جهت جریان متن اشاره دارند. جهت درون‌خطی (inline) جهتی است که متن در یک خط جریان می‌یابد (مثلاً چپ‌به‌راست یا راست‌به‌چپ). جهت بلوکی (block) جهتی است که بلوک‌های متن روی هم قرار می‌گیرند (مثلاً بالا‌به‌پایین). استفاده از این ویژگی‌های منطقی به شما امکان می‌دهد استایل‌هایی را تعریف کنید که مستقل از حالت و جهت نوشتاری باشند.

مثال‌های عملی استفاده از ویژگی‌های منطقی

مثال ۱: منوی ناوبری

بیایید به مثال منوی ناوبری برگردیم. به جای استفاده از margin-right، می‌توانیم از margin-inline-end استفاده کنیم:

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

            

              
                Copy
              
            
          

اکنون، صرف نظر از اینکه وب‌سایت در حالت LTR یا RTL باشد، حاشیه همیشه در سمت صحیح آیتم‌های ناوبری ظاهر می‌شود. نیازی به قوانین CSS جداگانه مخصوص RTL نیست!

مثال ۲: طرح‌بندی کارت

یک طرح‌بندی کارت را در نظر بگیرید که یک تصویر در یک طرف و متن در طرف دیگر قرار دارد. می‌توانیم از ویژگی‌های منطقی برای قرار دادن صحیح تصویر، صرف نظر از حالت نوشتاری، استفاده کنیم:

            .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 (راست‌به‌چپ). این ویژگی اغلب همراه با صفت lang روی تگ <html> یا روی عناصر خاص برای نشان دادن زبان و جهت‌گیری محتوا استفاده می‌شود.

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

            

              
                Copy
              
            
          

هنگامی که صفت dir روی rtl تنظیم می‌شود، مرورگر به طور خودکار جهت محتوای درون‌خطی را معکوس می‌کند و استایل‌های مناسب را بر اساس ویژگی‌های منطقی اعمال می‌کند.

مزایای استفاده از ویژگی‌های منطقی

• بهبود بین‌المللی‌سازی (i18n) و بومی‌سازی (l10n): ویژگی‌های منطقی ایجاد وب‌سایت‌هایی را که با زبان‌ها، حالت‌های نوشتاری و قراردادهای فرهنگی مختلف سازگار هستند، آسان‌تر می‌کند.
• کاهش پیچیدگی CSS: با حذف نیاز به قوانین CSS جداگانه مخصوص RTL، ویژگی‌های منطقی استایل‌شیت‌های شما را ساده‌تر کرده و نگهداری آن‌ها را آسان‌تر می‌کنند.
• افزایش خوانایی کد: نام‌های ویژگی‌های منطقی توصیفی‌تر و قابل فهم‌تر از نام‌های ویژگی‌های فیزیکی هستند که منجر به کد خواناتر می‌شود.
• عملکرد بهتر: کاهش پیچیدگی CSS می‌تواند منجر به بهبود عملکرد وب‌سایت شود، زیرا مرورگر CSS کمتری برای تجزیه و اعمال دارد.
• آینده‌نگری: با تکامل استانداردهای وب، احتمالاً ویژگی‌های منطقی برای ایجاد وب‌سایت‌های انعطاف‌پذیر و سازگار اهمیت بیشتری پیدا خواهند کرد.

سازگاری مرورگرها

اکثر مرورگرهای مدرن از جمله کروم، فایرفاکس، سافاری و اج به خوبی از ویژگی‌های منطقی CSS پشتیبانی می‌کنند. با این حال، مرورگرهای قدیمی‌تر ممکن است به طور کامل از آن‌ها پشتیبانی نکنند. همیشه ایده خوبی است که قبل از استفاده گسترده از ویژگی‌های منطقی، جداول سازگاری مرورگرها (مثلاً در caniuse.com) را بررسی کنید. همچنین می‌توانید از ابزارهایی مانند Autoprefixer برای تولید خودکار ویژگی‌های جایگزین (fallback) برای مرورگرهای قدیمی‌تر استفاده کنید.

بهترین شیوه‌ها برای استفاده از ویژگی‌های منطقی

• با ویژگی‌های منطقی شروع کنید: هر زمان که ممکن است، هنگام تعریف استایل‌های طرح‌بندی از ویژگی‌های منطقی به جای ویژگی‌های فیزیکی استفاده کنید.
• از صفت dir استفاده کنید: از صفت dir روی تگ <html> یا روی عناصر خاص برای نشان دادن جهت‌گیری محتوا استفاده کنید.
• به طور کامل تست کنید: وب‌سایت خود را در زبان‌ها و حالت‌های نوشتاری مختلف تست کنید تا اطمینان حاصل کنید که طرح‌بندی به درستی سازگار می‌شود. از ابزارهای توسعه‌دهنده مرورگر برای بازرسی استایل‌های اعمال شده و شناسایی هرگونه مشکل استفاده کنید.
• جایگزین‌ها را در نظر بگیرید: برای مرورگرهای قدیمی‌تری که از ویژگی‌های منطقی پشتیبانی نمی‌کنند، استفاده از ویژگی‌های جایگزین یا ابزارهایی مانند Autoprefixer را در نظر بگیرید.
• ثبات را حفظ کنید: از ویژگی‌های منطقی به طور مداوم در سراسر استایل‌شیت خود استفاده کنید تا از سردرگمی جلوگیری کرده و طراحی ثابتی را حفظ کنید.
• اصطلاحات را یاد بگیرید: با اصطلاحات "inline" و "block" و نحوه ارتباط آن‌ها با حالت‌های نوشتاری و جهت‌گیری آشنا شوید.
• از متغیرهای 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
              
            
          

ترکیب ویژگی‌های منطقی با Flexbox و Grid

ویژگی‌های منطقی به طور یکپارچه با طرح‌بندی‌های CSS Flexbox و Grid کار می‌کنند. می‌توانید از آن‌ها برای کنترل تراز و توزیع آیتم‌ها در یک کانتینر flex یا grid استفاده کنید. برای مثال:

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

            

              
                Copy
              
            
          

استفاده از ویژگی‌های منطقی با جاوا اسکریپت

می‌توانید از جاوا اسکریپت برای تشخیص جهت‌گیری محتوا و اعمال استایل‌های مناسب بر اساس ویژگی‌های منطقی استفاده کنید. برای مثال:

            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 سطح ۱
• Can I Use: ویژگی‌های منطقی CSS