Web-brauzerlər veb-saytların olduğu müddətdə ətrafında olmuşdur. Əslində, brauzerlər saytınızdakı təcrübədə və ya insanların baxışında mühüm tərkib hissəsidir - lakin bütün brauzerlər eyni dərəcədə yaradılmır. Müasir brauzerlərdə olan xüsusiyyətləri son dərəcə köhnə və eksik olan brauzerlərdə internet səhifənizdə olan müştərilərə sahib olmaq üçün tamamilə mümkündür (və həqiqətən ehtimal ki). Veb sayt dizaynı və inkişafında ən son avanslardan faydalanan veb saytları inkişaf etdirmək üçün çalışırıq. Biri sizin saytınıza bu qədim brauzerlərdən birini istifadə edərək gəlsə və son inkişaf etmiş texnika sizin üçün işləmirsə, ümumiyyətlə pis bir təcrübə təqdim edə bilərsiniz. Progressive genişləndirilməsi müxtəlif brauzerlər üçün veb səhifə dizaynını idarə etmək strategiyasındadır, yəni müasir dəstəyi olmayan köhnə brauzerlərdir.
Progressive enhancement, web səhifələrini tərtib etmək üçün bir vasitədir, belə ki, bir istifadəçi agentinin daha çox xüsusiyyətləri dəstəklənir, veb səhifənin daha çox xüsusiyyətləri olacaqdır. Bu zərif qüsur kimi tanınan dizayn strategiyasının əksinədir. Bu strategiya ilk növbədə ən müasir brauzerlər üçün səhifələr qurur və daha sonra onların daha az funksional brauzerlər ilə yaxşı işləməsini təmin edir - təcrübə "incəliyi azaldır". Progressive enhancement əvvəlcə daha az bacarıqlı brauzerlərdən başlayır və oradan bir təcrübə qurur.
Progressive Enhancement istifadə Necə
Proqressiv genişləndirməni istifadə edərək veb dizayn yaratdığınız zaman, ilk etdiyiniz şey, veb brauzerlərin ən aşağı ümumi məxrəcində işləyən bir dizayn yaratmaqdır. Əsasında, mütərəqqi genişlənmənin məzmunu yalnız bir alt set deyil, bütün veb brauzerlər üçün istifadə oluna bilər. Bu səbəbdən bu köhnə, köhnəlmiş və daha az bacarıqlı brauzerləri dəstəkləyərək başlayacaqsınız. onlar üçün ən azından bütün ziyarətçilərə lazımi bir təcrübə təqdim etməsi lazım olan bir təməl yaratdığınızı bilirsiniz.
Əvvəlcə ən az təcrübəli brauzerlər ilə başlayan zaman, bütün HTML-lərin etibarlı və semantik şəkildə doğru olmasını təmin etmək istəyə bilərsiniz. Bu, istifadəçilərin ən geniş çeşidli səhifəsini görmək və düzgün göstərməsini təmin edəcəkdir.
Vizual dizayn üslublarını və ümumi səhifə tərtibatını xarici stillərdən istifadə edərək əlavə edin. Bu, mütərəqqi genişlənmə baş verdiyi yerdir. Bütün ziyarətçilər üçün işləyən bir site dizaynı yaratmaq üçün stillərdən istifadə edirsiniz. Daha sonra istifadəçi agentləri funksionallıq qazanmaq üçün səhifəni artırmaq üçün əlavə üslublar əlavə edə bilərsiniz. Hər kəs əsas bazası üslublarını alır, lakin daha inkişaf etmiş və daha müasir üslubları dəstəkləyən hər hansı bir xəbər brauzer üçün, bir az əlavə olurlar. Bu üslubları dəstəkləyən brauzerlər üçün səhifəni "mütərəqqi artırın".
Proqressiv genişləndirməni tətbiq edə biləcəyiniz bir neçə yol var. Birincisi, CSS-nin bir xəttini başa düşmürsə, bir brauzerin nə düşündüyünü düşünməlisən - onu məhəl qoymur! Bu, həqiqətən, xeyrinə işləyir. Bütün brauzerlər başa düşən bir üslub dəsti yaratsanız, yeni brauzerlər üçün əlavə üslublar əlavə edə bilərsiniz. Onlar üslubları dəstəkləsələr, onları tətbiq edəcəklər. Əgər olmasaydı, bunları görməzlər və yalnız bu əsas üslublardan istifadə edəcəklər. Bu CSS-də mütərəqqi genişlənmənin sadə bir nümunəsi mövcuddur:
.main-məzmunu {
fon: # 999;
fon: rgba (153, 153, 153, .75);
}
Bu üslub ilk növbədə fonları boz rəngli edir. İkinci qayda şəffaflıq səviyyəsini təyin etmək üçün RGBA rəng dəyərlərindən istifadə edir. Bir brauzer RGBA-ni dəstəkləyirsə, ilk stilin ikincisini ləğv edər. Əgər yoxsa, yalnız birincisi tətbiq olunacaq. Daha təməl rəng qurdunuz və daha müasir brauzerlər üçün əlavə üslublar əlavə etdiniz.
Bədii Sorgular istifadə
Proqressiv genişləndirməni tətbiq edə biləcəyiniz başqa bir üsul "xüsusiyyət sorgulamaları" olaraq bilinir. Bunlar, məsuliyyətli veb sayt dizaynlarının vacib bir parçası olan media sorgularına bənzəyir. Media müəyyən ekran ölçüləri üçün mətni sorgularken, xüsusiyyət sorğuları müəyyən bir xüsusiyyətin dəstəklənib-dəstəklənməməsini yoxlayacaq. Istədiyiniz sözdizimdir:
@ dəstəyi (display: flex) {}Bu qayda içində əlavə etdiyiniz hər hansı bir üslub yalnız brauzer Flexbox üçün üslub olan "flex" dəstəklənsə işləyərdi. Hər kəs üçün bir qaydalar dəsti qura və sonra yalnız seçmə brauzerlər üçün əlavə əlavə etmək üçün xüsusiyyət sorgulamalarını istifadə edə bilərsiniz.
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard tərəfindən 12/13/16 tarixində redaktə edildi.