Yük Hızını Təkmilləşdirmək üçün Qrupu Çox CSS Seçicilər
Səmərəliliyi müvəffəqiyyətli bir veb saytında əhəmiyyətli bir faktordur. Bu saytın şəkillərdən onlayn istifadə etdiyində effektiv olması lazımdır. Bu, saytın ziyaretçiler üçün yaxşı bir performans gösterdiğinden ve cihazlarına hızlı bir şekilde yüklenmelerini təmin edir. Səmərəlilik həmçinin ümumi prosesinizin bir hissəsi olmalıdır, bu da saytın tərəqqisini vaxtında və büdcədə saxlamağa kömək edir.
Nəticədə səmərəlilik, veb saytın yaradılması və uzunmüddətli müvəffəqiyyətin bütün aspektlərində, o cümlədən, həmin saytın CSS formasında yazılmış üslublarda rol oynayır. Yalınca, təmiz CSS faylları yaratmaq üçün idealdır və bunu əldə edə biləcəyiniz yollardan biri birlikdə birdən çox CSS seçicisini bir araya gətirməkdir.
Qruplaşdırma Seçiciləri
CSS seçiciləri qruplaşdırdığınızda, stilinizdə üslubları təkrar etmədən eyni üslubları müxtəlif elementlərə tətbiq edirsiniz. İki, üç və ya daha çox CSS qaydalarına malik olmaq əvəzinə, bunların hamısı eyni şeyi edir (məsələn, bir şeyin rəngini qırmızıya təyin edin), sizin səhifəniz üçün yerinə yetirən bir CSS qayda var.
Bu "seçicilərin qruplaşdırılması" bir səhifə faydası səbəb bir sıra səbəbləri var. Birincisi, stiliniz daha kiçik olacaq və daha tez yüklənəcəkdir. Etiraf edək ki, tərtibat saytlarını yavaşlaşdırmaq üçün stil vərəqələri əsas günahkarlardan biri deyil. CSS faylları mətn fayllarıdır, belə ki, hətta həqiqətən uzun CSS səhifələri unoptimized images ilə müqayisədə kiçik, fayl ölçüsü müdrikdir. Hələ, hər bir az sayar və CSS-nin bəzi ölçüsünü qırxıb, daha sürətli səhifələr yükləyə bilərsinizsə, həmişə yaxşı bir şeydir.
Ümumiyyətlə, saytlar üçün yüklənmənin yuxarıdan yuxarı sürəti 3 saniyədən azdır; 3 ilə 7 saniyə arasında ortalama, 7 saniyədən çox isə çox yavaş. Bu aşağı sayılar deməkdir ki, onları saytınıza çatdırmaq üçün əlinizdən gələn hər şeyi etməlisiniz! Bu səbəbdən, qruplaşdırılmış CSS seçicilərindən istifadə etməklə saytınızı sürətlə saxlamağa kömək edə bilərsiniz.
Qrup CSS Seçiciləri üçün necə
CSS tərtibçiləri üslub tərzinizdə birləşdirmək üçün tərzdə birdən çox qruplaşdırılmış seçiciləri ayırmaq üçün vergüllərdən istifadə edirsiniz. Aşağıdakı nümunədə, stil p və div elementlərinə təsir göstərir:
div, p (rəng: # f00; }Virgül əsasən "və" deməkdir. Beləliklə, bu seçici bütün bənd elementlərinə və bütün bölmə elementlərinə aiddir. Virgülün eksik olmasına baxmayaraq, bir bölümün uşağı olan bütün bənd elementləri olardı. Bu çox fərqli selektor növüdür, buna görə də bu vergül həqiqətən selektorun mənasını dəyişir!
Hər bir selektor forması digər seçicilərlə qruplaşdırıla bilər. Bu nümunədə bir sinif seçicisi ID seçicisi ilə qruplaşdırılır:
p.red, #sub {color: # f00; }Beləliklə, bu stil "qırmızı" sinif atributu ilə hər hansı bir paraqrafa və "alt" bir ID atributuna sahib olan hər hansı elementə (hansı növ göstərmədiklərimizdən) aiddir.
Tək sözlər və kompund seçiciləri olan seçicilər də daxil olmaqla, hər hansı sayda seçiciyi bir araya bilər. Bu nümunə dörd fərqli seçicilər daxildir:
p, .red, #sub, div a: link {color: # f00; }Beləliklə, bu CSS qayda aşağıdakılara tətbiq ediləcək:
- Hər hansı bir bənd elementi
- "Qırmızı" sinfi olan hər hansı element
- "Sub" bir ID ilə hər hansı element
- Bir bölmənin həlledici olan bağlama elementlərinin "link" sözü sinfi.
Bu son selector bir seçim seçicisidir. Bu CSS qaydasında digər seçicilərlə asanlıqla birləşdirildiyini görə bilərsiniz. Bu qayda ilə, bu 4 seçicilərdə # f00 (qırmızı olan) rəngini seçirik, eyni nəticəni əldə etmək üçün 4 ayrı seçici yazmaq üstündür.
Seçiciləri qruplaşdırmanın bir faydası, əgər bir dəyişiklik etmək lazımdırsa, birdən çox CSS yerinə bir CSS kuralını düzəldə bilərsiniz. Bu deməkdir ki, bu yanaşma saytın gələcəkdə saxlanmasına gəldikdə sizə səhifə çəki və vaxtınızı qənaət edir.
Hər hansı bir seçici qruplaşdırıla bilər
Yuxarıda göstərilən nümunələrdən göründüyü kimi, hər hansı bir etibarlı seçici bir qrupa yerləşdirilə bilər və bütün qruplaşdırılmış elementlərə uyğun olan sənəddə bütün elementlər stil mülkiyyətinə əsaslanan eyni stilə malik olacaqlar.
Bəzi insanlar qruplaşdırılmış elementləri kodda okunabilirlik üçün ayrı-ayrı satırlar siyahısına daxil etməyi üstün tuturlar. Veb saytdakı görünüş və yük sürəti eyni olaraq qalır. Məsələn, vergüllə ayrılmış üslubları bir satırda bir stil əmlakına birləşdirə bilərsiniz:
th, td, p.red, div # firstred (rəng: qırmızı; }
və ya aydınlıq üçün fərdi xətlər üzrə üslubları sıralaya bilərsiniz:
th,
td,
p.red,
div # ləqəbli
{
rəng: qırmızı;
}
Bir neçə CSS seçicisini qruplaşdırmaq üçün istifadə etdiyiniz üsul hər hansı bir sitenizi sürətləndirir və üslubları uzunmüddətli idarə etmək üçün asanlaşdırır.
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard tərəfindən 5/8/17 tarixində ediləcək.