CSS subgrid iç-içə şəbəkə konteynerlərinə sətir və sütun təriflərini birbaşa ana şəbəkə konteynerindən miras almağa imkan verən xüsusiyyətdir. Bu alət hər bir iç-içə element üçün əllə eyni şəbəkə treklərini təyin etmək məcburiyyətində qalmadan maketin müxtəlif bölmələri üzrə məzmunu uyğunlaşdırmağın uzunmüddətli problemini həll edir. grid-template-rows və ya grid-template-columns xüsusiyyətlərində subgrid-i dəyər olaraq təyin etməklə tərtibatçılar əlaqəsi olmayan DOM qovşaqları arasında ciddi uyğunluq tələb edən mürəkkəb maketlərə nəzarət əldə edirlər.
Tərtibatçılar nə üçün CSS subgrid-dən istifadə etməlidirlər?
Subgrid istifadəsinin əsas üstünlüyü sehrli rəqəmlərin və sərt maket asılılıqlarının aradan qaldırılmasıdır. Tipik layihədə səhifə maketi üçün qlobal şəbəkə təyin edən ana konteyneriniz ola bilər. Subgrid olmadan, həmin hüceyrələrdən birinin içərisində iç-içə yerləşdirilmiş kart komponentiniz varsa, onun özünün müstəqil şəbəkəsi olardı. Həmin kartın içindəki elementləri xaricindəki elementlərlə uyğunlaşdırmaq trekin ölçülərinin dəqiq uyğunlaşdırılmasını tələb edir ki, bu da məzmun ölçüləri dəyişdikdə çətin olur. Subgrid uşağa ana şəbəkənin koordinat sistemində iştirak etməyə icarə verməklə bu maneəni aradan qaldırır.
Cavabdeh sərhədlər üzrə ardıcıl məsafənin saxlanılması subqridin aydın üstünlük təmin etdiyi başqa bir sahədir. Subgrid-dən istifadə etdikdə, uşaq komponenti avtomatik olaraq ana treklərin ölçüsünə uyğunlaşır. Bu, bir neçə kartdakı düymələrin, başlıqların və ya şəkillərin üfüqi və ya şaquli oxda mükəmməl uyğunlaşmasını təmin edir. Tərtibatçılar tez-tez görürlər ki, bu, tələb olunan CSS kodu miqdarını azaldır, çünki onlar artıq əsas səhifə strukturu ilə uyğunlaşmalı olan hər bir komponent üçün dublikat şəbəkə sistemləri təyin etməyə ehtiyac duymurlar.
Subgrid praktiki olaraq necə işləyir?
MDN Web Docs təsdiq edir ki, subgrid iç-içə şəbəkə konteynerlərinə sətir və sütun təriflərini birbaşa ana şəbəkə konteynerindən miras almağa imkan verir. Bunu həyata keçirmək üçün əvvəlcə display: grid xüsusiyyətinə malik ana konteyner təyin edirsiniz. Sonra iç-içə uşağa grid-template-columns və ya grid-template-rows ‘subgrid’ dəyəri təyin edirsiniz. Bu, brauzerə bildirir ki, uşaq öz treklərini qurmamalı, əvəzində valideynin tərifinə tabe olmalıdır. Daha sonra uşaq elementləri valideyn tərəfindən yaradılan xətlərə yerləşdirilir.
İcra yoxlama siyahısı
- Ana konteyneri açıq trekləri olan şəbəkə kimi müəyyənləşdirin.
- Uşaq konteynerinin displey xüsusiyyətini şəbəkəyə təyin edin.
- Uşağa grid-template-columns: subgrid və ya grid-template-rows: subgrid tətbiq edin.
- Uşaq elementlərinin miras qalmış şəbəkə xətlərinə nisbətən yerləşməsini təmin edin.
CSS Grid və CSS Subgrid: Doğru alətin seçilməsi
| Xüsusiyyət | Standart Şəbəkə | Subgrid |
|---|---|---|
| Trekin tərifi | Müstəqil | Miras qalıb |
| Maket uyğunlaşması | Yalnız yerli əhatə dairəsi | Komponentlərarası əhatə dairəsi |
| Mürəkkəblik | Daha aşağı quraşdırma səyi | Daha yüksək koordinasiya səyi |
Subgrid-dən nə vaxt qaçınmaq lazımdır?
Subgrid uyğunlaşdırma üçün səmərəli olsa da, hər bir maket tələbi üçün həmişə ən yaxşı seçim deyil. Əgər iç-içə komponentiniz ana maketlə heç bir əlaqəsi olmayan tamamilə müstəqil şəbəkə strukturu saxlamaq lazımdırsa, subgrid-dən istifadə lazımsız birləşməni təqdim edir. Ana şəbəkədəki dəyişikliklər uşağa gözlənilmədən təsir edə bilər və bu da sazlanması çətin olan maket dəyişikliklərinə səbəb ola bilər. Komponentlərin həqiqətən modulyar və özünü ehtiva edən hallarda, standart şəbəkə tərifləri çox vaxt daha etibarlıdır.
Nəzərə alınmalı digər amil yeni layihənin ilkin inkişaf mərhələsində brauzer dəstəyidir. Hədəf auditoriyanız köhnə brauzer versiyalarından istifadə edirsə, uyğunluq tələblərini yoxlamalısınız. Müasir brauzerlər artıq subgrid-i dəstəkləsələr də, köhnə mühitlər üçün hələ də ehtiyat strategiya tələb oluna bilər. Sadə ehtiyat nüsxə strategiyası funksiyalar sorğusu daxilində standart şəbəkə xüsusiyyətlərindən istifadə etməyi əhatə edir və subgrid davranışı əlçatan olmasa belə, maketin işlək qalmasını təmin edir.
Alien Road subgrid-i necə tətbiq edir
Alien Road-da komandamız yüksək performanslı rəqəmsal vitrinlərdə vizual ardıcıllığı təmin etmək üçün subqrid-dən istifadə edir. Məsələn, pərakəndə satış müştərisi üçün məhsul siyahısı səhifəsi qurarkən, biz tez-tez məhsul kartlarının müxtəlif uzunluqlu başlıqlara malik olduğu çətinliklərlə qarşılaşırıq. Bu kartlara subgrid tətbiq etməklə biz bütün başlıq konteynerlərini eyni sətir trekləri ilə mükəmməl uyğunlaşmağa məcbur edirik. Bu, hər bir ayrı-ayrı elementin daxilində məzmun uzunluğundan asılı olmayaraq təmiz, peşəkar görünüş yaradır.
Bizim prosesimiz uyğunlaşdırmanın vacib olduğu sahələri müəyyən etmək üçün dizayn çərçivələrinin ilkin auditi ilə başlayır. Səhifənin ritmini diktə edən əsas şəbəkəni müəyyənləşdiririk və sonra həmin ritmə qoşulmaq üçün təkrar olunan komponentlər daxilində subgrid tətbiq edirik. Bu sistematik yanaşma bizə həm vizual olaraq balanslaşdırılmış, həm də idarə olunması asan olan saytlar təqdim etməyə imkan verir. Müştəri qlobal məsafədə dəyişiklik tələb etdikdə, biz yalnız ana konteyneri yeniləməliyik və dəyişikliklər subgridlər vasitəsilə yayılır.
Diqqət edilməli ümumi tələlər nelerdir?
- Həddindən artıq yuvalanma: Çoxlu sayda subgrid səviyyələrinin yaradılması CSS-in oxunmasını və saxlanmasını çətinləşdirə bilər.
- Çatışmayan trekin tərifi: Əgər valideynin açıq trekləri yoxdursa, subgrid miras alacaq Heç nəyə sahib olmayacaq və bu, standart davranışla nəticələnəcək.
- İmperativ treklər: Avtomatik yaradılan treklərə güvənmək məzmun ölçüləri elementlər arasında uyğun gəlmədikdə uyğunlaşma problemlərinə səbəb ola bilər.
- Performans narahatlıqları: CSS şəbəkəsi səmərəli olsa da, həddindən artıq dərin yuvalanma çox mürəkkəb DOM ağaclarında brauzerin işlənməsini çətinləşdirə bilər.
Subgrid maketlərini necə sazlamaq olar?
Subgrid maketlərinin sazlanması çox vaxt şəbəkə xətlərini vizuallaşdırmaq üçün brauzerin tərtibatçı alətlərini tələb edir. Əksər müasir brauzerlər şəbəkə treklərini və xətt nömrələrini göstərən örtüyü dəyişməyə imkan verir. Subgrid istifadə edən elementi seçdiyiniz zaman brauzer miras qalmış trekləri vurğulayacaqdır. Uyğunlaşma səhv görünürsə, əvvəlcə ana şəbəkə tərifini yoxlayın. Çox vaxt problem subqridin özündə deyil, ana şəbəkənin kifayət qədər yer ayırmamasında və ya səhv boşluq xüsusiyyətlərinə malik olmasındadır.
Uşaq elementlərinizin həqiqətən nəzərdə tutulmuş trekləri əhatə etdiyini yoxlayın. Elementin düzgün xətt üzərində yerləşdiyini müəyyən etməyə kömək edən şəbəkə etiketlərini dəyişmək üçün brauzerin yoxlama panelindən istifadə edə bilərsiniz. Element yerinə oturmursa, ana konteynerin uşaqları yerləşdirmək üçün kifayət qədər sətir və ya sütun müəyyən etdiyini iki dəfə yoxlayın. Tipik nasazlıqların aradan qaldırılması sessiyasında biz uşaqlardakı grid-column və ya grid-row qiymətlərinin valideyn xətlərinə nisbətən düzgün təyin olunduğunu yoxlayırıq.
Bu həftə haradan başlamaq lazımdır?
Siz mövcud veb layihələrinizi uyğunlaşdırma ilə mübarizə aparan komponentlər üçün audit etməklə başlaya bilərsiniz. Məzmunu düzəltmək üçün əllə hündürlük və ya eni təyin etdiyiniz halları axtarın. Həmin əllə düzəlişləri subgrid istifadə edərək ana-uşaq şəbəkə strukturu ilə əvəz edin. Ana xətlərin uşaq tərtibatına necə təsir etməsi ilə rahat olmaq üçün kart siyahısı kimi sadə komponentlərlə başlayın. Əsas sintaksisi əldə etdikdən sonra həm sətir, həm də sütun uyğunlaşdırmasını ehtiva edən daha mürəkkəb maketlərə keçin.
Tez-tez Verilən Suallar
Subgrid bütün brauzerlərdə dəstəklənirmi?
Əksər müasir brauzerlər indi subgrid xüsusiyyəti üçün dəstək təmin edir. Bununla belə, onu istehsal mühitində yerləşdirməzdən əvvəl cari uyğunluq cədvəllərini yoxlamaq həmişə tövsiyə olunur. Əgər köhnə brauzerləri dəstəkləməlisinizsə, saytınızın brauzer versiyasından asılı olmayaraq bütün ziyarətçilər üçün istifadəyə yararlı qalmasını təmin edən əsas ehtiyat maket təmin etmək üçün funksiya sorğularından istifadə edin.
Subgrid səhifənin performansına təsir edirmi?
Subgrid yerli brauzer xüsusiyyətidir və ümumiyyətlə səmərəlidir. Standart şəbəkə maketləri ilə müqayisədə əhəmiyyətli overhead yaratmır. Əsas narahatlıq performans deyil, kodun mürəkkəbliyidir. Şəbəkə strukturunuzu təmiz saxlamaq və həddindən artıq yuvalanmadan qaçınmaq davam edən veb inkişaf tapşırıqlarınız üçün performanslı və oxunaqlı kod bazasını saxlamağa kömək edir.
Həm sətirlər, həm də sütunlar üçün subgrid istifadə edə bilərəm?
Bəli, siz subgridi sətir oxuna, sütun oxuna və ya hər ikisinə eyni vaxtda tətbiq edə bilərsiniz. Həm grid-template-rows, həm də grid-template-columns-u subgrid-ə təyin etməklə siz uşaq konteynerinin valideynin tam şəbəkə həndəsəsini miras almasını təmin edirsiniz. Bu, xüsusilə iç-içə elementlərin ana hüceyrələrində tam uyğunlaşdırılmasına ehtiyacınız olan mürəkkəb maketlər üçün faydalıdır.
Ana şəbəkə dəyişərsə nə olar?
Ana şəbəkə tərifi dəyişdikdə, subgrid avtomatik olaraq yeni trekin ölçülərinə və mövqelərinə uyğunlaşır. Tək bir nəzarət nöqtəsinə imkan verdiyi üçün bu, xüsusiyyətin əsas üstünlüyüdür. Valideynə yeni trek əlavə etsəniz, subgrid uşaq elementində miras qalmış trekləri necə təyin etdiyinizə əsasən həmin dəyişikliyi nəzərə alacaq.
Subqrid ilə uyğunlaşma problemlərini necə həll edə bilərəm?
Uyğunlaşma problemlərini həll etmək üçün brauzerinizin tərtibatçı alətlərində ana şəbəkə xətlərini yoxlamaqla başlayın. Uşaq konteynerinin düzgün şəkildə subgrid-ə təyin olunduğundan və uşaqlarının düzgün şəbəkə xətlərinə təyin edildiyindən əmin olun. Tez-tez uyğunlaşma problemləri subqrid tətbiqinin özündəki problemdən deyil, uşaq elementlərindəki səhv trek span dəyərlərindən qaynaqlanır.
Oxumağa davam edin: Veb Dizayn və İnkişafı · Veb Dizayn