CSS məntiqi xüsusiyyətlərinin yerləşdirilməsi tərtibatçılara fiziki ekran istiqamətləri əvəzinə mətn axınına əsaslanan layout qaydalarını müəyyən etməyə imkan verir. en və hündürlük əvəzinə inline-size və block-size kimi xüsusiyyətlərdən istifadə etməklə veb-saytınız müxtəlif yazı rejimlərinə və dillərə avtomatik uyğunlaşır. Bu yanaşma hər bir dil dəyişikliyi üçün əl ilə ləğv edilməsini tələb etmədən ikitərəfli mətn layoutlarını dəstəkləyir. O, qlobal veb əlçatanlığı və müxtəlif brauzer mühitlərində təmiz, saxlanıla bilən kod üçün çevik təməl yaradır.
Niyə fiziki xüsusiyyətlərdən uzaqlaşmalısınız?
Ənənəvi CSS yuxarı, aşağı, sol və sağ kimi fiziki istiqamətlərə əsaslanır. Bu xüsusiyyətlər hər bir istifadəçinin soldan sağa və yuxarıdan aşağıya oxuduğunu ehtimal edir. Qlobal auditoriya üçün sayt qurursunuzsa, bu fiziki dəyərlər çox vaxt sizi geniş şərti CSS yazmağa məcbur edir. Fiziki xüsusiyyətlərdən istifadə etmək o deməkdir ki, ərəb və ya ivrit mətni üçün boşluqları və yastiqciqları əl ilə çevirməlisiniz. Bu proses çox vaxt aparır və saytınızın strukturunu yeniləyərkən səhvlərə meyillidir.
Məntiqi xüsusiyyətlər bunun əvəzinə layoutu məzmunun axınına uyğunlaşdırır. Brauzer sənəddə müəyyən edilmiş yazı rejiminə əsasən konteynerin əvvəlini və sonunu müəyyən edir. Yazı rejimini dəyişdirdiyiniz zaman layout düzəlişləri avtomatik baş verir. Bu keçid müxtəlif regionlarda uyğunluğu qorumaq üçün tələb olunan kodun miqdarını azaldır. Bu, uzunmüddətli layihənin idarə edilməsi üçün üslub cədvəllərinizi oxunaqlı və yığcam saxlayaraq mürəkkəb layoutları strukturlaşdırmağın daha səmərəli yoludur.
Məntiqi xüsusiyyətlər praktikada necə işləyir?
Məntiqi xüsusiyyətlər fiziki ölçüləri nisbi xəritəçəkmə ilə əvəz edir. Məsələn, inline-size xüsusiyyəti üfüqi yazı rejimlərində enə uyğun gəlir, lakin şaquli rejimlərdə hündürlüyə keçir. Eynilə, padding-inline-start padding-left-i əvəz edir və aralığınızın həmişə mətn axınının əvvəlində olmasını təmin edir. Bu, naviqasiya panelləri, yan panellər və hərəkətə çağırış düymələri kimi elementlər üçün proqnozlaşdırıla bilən davranış yaradır.
- inline-size: Elementin sətir daxili istiqamətdə uzunluğunu təmsil edir.
- block-size: Elementin blok istiqamətində uzunluğunu təmsil edir.
- margin-inline-start: Sətir daxili oxun əvvəlində kənar boşluğu təyin edir.
- margin-inline-end: Sətir daxili oxun sonunda kənar boşluğu təyin edir.
- inset-block: block-start və block-end üçün qısa xüsusiyyət.
Fiziki və məntiqi CSS xüsusiyyətlərinin müqayisəsi
| Fiziki Xüsusiyyət | Məntiqi Xüsusiyyət | Davranış |
|---|---|---|
| width | inline-size | LTR-də enə, şaquli rejimdə hündürlüyə uyğun gəlir |
| padding-left | padding-inline-start | Mətn istiqaməti axınına uyğunlaşır |
| margin-top | margin-block-start | Blok axınına əsasən boşluğu müəyyən edir |
Alien Road CSS məntiqi xüsusiyyətlərini necə tətbiq edir
Alien Road-da dizayn komandamız miqyaslana bilən dizayn sistemləri qurmaq üçün məntiqi xüsusiyyətlərdən istifadə edir. Tipik layihə zamanı biz cavabdehliyə mane olan sərt fiziki ölçüləri müəyyən etmək üçün mövcud üslub cədvəllərini audit edirik. Quruluş mərhələsində bunları məntiqi alternativlərlə əvəz edirik. Məsələn, müştəriyə çoxdilli idarə paneli lazımdırsa, biz bütün konteyner məhdudiyyətlərini inline-size və block-size istifadə edərək təyin edirik. Bu, istifadəçinin ingilis, yapon və ya fars dilini seçməsindən asılı olmayaraq UI-nin ardıcıl qalmasını təmin edir.
Bizim prosesimiz hər bir aralıq dəyərinin məntiqi xəritəçəkmədən istifadə etdiyi əsas nişan kitabxanasının yaradılmasını əhatə edir. Daha sonra məzmunun yazı rejiminin dəyişməsinə uyğunlaşmasını təmin etmək üçün müxtəlif brauzerlərdə layoutu yoxlayırıq. Bu üsul bizim texniki xidmət mərhələsində dilə xas üslubun ləğvinə ehtiyacı azaldır. Axına nisbi vahidlərə üstünlük verməklə biz CSS arxitekturasının tam yenidən yazılmasını tələb etmədən beynəlxalq genişlənməyə hazır veb-saytlar təqdim edirik.
Bu xüsusiyyətlər hansı ümumi layout problemlərini həll edir?
Həll edilən əsas problem məzmun istiqaməti dəyişdikdə layoutların pozulmasıdır. Oxu istiqaməti sağdan sola olduqda fiziki xüsusiyyətlər çox vaxt mətnin daşmasına və ya üst-üstə düşməsinə səbəb olur. Məntiqi xüsusiyyətlərdən istifadə etməklə siz kənar boşluqların və yastiqciqların mətn axınına düzgün əməl etməsini təmin edirsiniz. Bu, dil parametrlərindən asılı olmayaraq başlığınızın, altbilginizin və məzmun bloklarınızın vizual balansını toxunulmaz saxlayır.
- İkitərəfli mətn mühitlərində üst-üstə düşmənin qarşısını alır.
- Mürəkkəb grid və flexbox layoutlarının saxlanmasını sadələşdirir.
- Şaquli yazı rejimlərində ardıcıl boşluqları təmin edir.
- Artıq dilə xas qaydaları silməklə CSS fayllarının ölçüsünü azaldır.
- Xüsusi yazı rejimləri tələb edən istifadəçilər üçün əlçatanlığı yaxşılaşdırır.
Bu xüsusiyyətlər köhnə brauzerlərdə istifadə oluna bilrmi?
Müasir brauzerlər məntiqi xüsusiyyətlər üçün geniş dəstəyə malikdir. Bununla belə, köhnəlmiş sistemlər üçün ehtiyat strategiyasına ehtiyacınız ola bilər. Ümumi model fiziki xüsusiyyəti ehtiyat variant kimi daxil etmək, ardınca məntiqi xüsusiyyəti daxil etməkdir. Brauzer tanımadığı xüsusiyyətə məhəl qoymayacaq və yeni standartları mənimsəyərkən uyğunluğu qorumağa imkan verəcək. Xüsusi istifadə halınızın gözlənildiyi kimi göstərilməsini təsdiqləmək üçün həmişə layoutunuzu layihəniz üçün göstərilən hədəf brauzer siyahısında sınamalısınız.
Bu həftə haradan başlamalı?
Cari layihənizdə bir komponenti audit etməklə başlayın. Düyməni və ya naviqasiya kartını seçin və onun enini və yastiqciqlarını inline-size və padding-inline ilə əvəz edin. Brauzerin tərtibatçı alətlərində yazı rejimini dəyişdirdiyiniz zaman elementin necə reaksiya verdiyini müşahidə edin. Bu dəyişikliklərdən rahat olduqdan sonra əsas şəbəkəniz və ya fleks konteynerləriniz kimi daha böyük layout konteynerlərinə keçin. Bu tədrici yanaşma bütün sayt strukturunuzu pozmadan xəritəçəkməni öyrənməyə kömək edir.
Tez-tez Verilən Suallar
Məntiqi xüsusiyyətlər CSS Grid ilə işləyirmi?
Bəli, məntiqi xüsusiyyətlər CSS Grid ilə mükəmməl şəkildə inteqrasiya olunur. Şəbəkə strukturunuzu müəyyən etmək üçün blok və sətir ölçüsü ilə birlikdə grid-template-columns və grid-template-rows kimi xüsusiyyətlərdən istifadə edə bilərsiniz. Bu, şəbəkə izlərinizin mətnin məntiqi axınına uyğun olmasını təmin edir və bir çox dili dəstəkləməli olan mürəkkəb layoutları idarə etməyi asanlaşdırır.
Heç bir performans təsiri varmı?
Məntiqi xüsusiyyətlərdən istifadə edərkən heç bir mənfi performans təsiri yoxdur. Onlar fiziki xüsusiyyətlər kimi brauzer mühiti tərəfindən işlənən standart CSS xüsusiyyətləridir. Bəzi hallarda, artıq müxtəlif dillər üçün artıq ləğvlər yazmağa ehtiyac duymadığınız üçün CSS fayl ölçüsünün cüzi azaldığını görə bilərsiniz ki, bu da üslub cədvəllərinizi arıq və səmərəli saxlamağa kömək edə bilər.
Müxtəlif yazı rejimlərini necə sınaya bilərəm?
Yazı rejimlərini birbaşa brauzerin tərtibatçı alətlərində sınaya bilərsiniz. Elements tabında body və ya konteyner elementini tapın. Üslublar bölməsində writing-mode xüsusiyyətini əlavə edin və onu vertical-rl və ya sideways-lr olaraq təyin edin. Bu, faktiki mənbə kodunuzu dəyişdirməyə ehtiyac duymadan məntiqi xüsusiyyətlərinizin boşluğu və ölçüsünü düzgün şəkildə tənzimlədiyini yoxlamağa imkan verir.
Bütün fiziki xüsusiyyətləri əvəz etməliyəmmi?
Yeni layihələr üçün və ya əhəmiyyətli yenidənqurmalar zamanı məntiqi xüsusiyyətlərə üstünlük vermək ümumiyyətlə daha yaxşıdır. Hər bir fiziki xüsusiyyəti dərhal əvəz etməyə ehtiyac olmasa da, məntiqi-birinci yanaşmaya doğru hərəkət etmək saytınızı daha əlçatan və saxlamağı asanlaşdıracaq. Yan panellər, menyular və mətn konteynerləri kimi mətn axınına həssas olan elementlərə diqqət yetirin.
Oxumağa davam edin: Veb Dizayn və Proqramlaşdırma · Veb Dizayn