Вэб хөтөчүүд вэбсайттай байх хугацаанд эргэн тойронд байсан. Үнэн хэрэгтээ хөтчүүд нь туршлага дээрээ эсвэл таны сайтыг үзэж буй хүмүүс нь чухал бүрэлдэхүүн хэсэг юм. Гэхдээ бүх хөтөчүүд адилхан бүтээгдээгүй. Хэрэглэгчид интернетэд байгаа вэб хуудсуудыг маш хуучны хөтөч дээр үзэж, илүү орчин үеийн браузеруудаас олж болох боломжуудыг бүгдийг нь (боломжтой байх магадлалтай) боломжтой юм. Вэбсайт дизайн, хөгжлийн хамгийн сүүлийн үеийн дэвшилтэт давуу талуудыг ашиглахын тулд вэбсайтуудыг хөгжүүлэхийг хичээхийн тулд энэ нь томоохон асуудал үүсгэж болно. Хэрвээ хэн нэгэн таны сайт руу орж ирвэл, тэдгээрийн хамгийн сүүлийн дэвшилтэт технологи нь тэдгээрийн хувьд ажиллахгүй байгаа бол та ерөнхийдөө муу туршлага хуримтлуулж болно. Прогрессив сайжруулалт нь янз бүрийн хөтөчүүдэд зориулсан вэб хуудасны дизайнтай харьцах стратеги юм. Тухайлбал орчин үеийн дэмжлэг байхгүй байгаа хуучин хөтөчүүд юм.
Прогрессив сайжруулалт нь вэб хуудсаа дизайн хийх арга юм. Ингэснээр хэрэглэгчийн төлөөлөгчдийн илүү олон боломжуудыг агуулсан вэб хуудсыг дизайн хийхэд ашиглах боломжтой. Энэ бол гоолиг доройтол гэж нэрлэгддэг дизайны стратегийн эсрэг юм. Энэ стратеги нь хамгийн орчин үеийн браузеруудыг хуудсуудыг эхлээд дараа нь тэдгээр нь бага функцын хөтчүүдтэй харьцангуй сайн ажиллаж чаддаг болохыг баталгаажуулдаг - энэ туршлага нь "доройтсон" гэж үздэг. Прогрессив сайжруулалт нь эхлээд чадвар муутай хөтчүүдээс эхлээд туршлагаасаа эхэлдэг.
Прогрессив өсөлтийг хэрхэн ашиглах вэ
Та дэвшилтэт сайжруулалтыг ашиглан вэб дизайн үүсгэх үед таны хамгийн эхний хийх зүйл бол вэб хөтчийн хамгийн бага нийтлэг хуваарилалтанд зориулж дизайн үүсгэх явдал юм. Үндсэндээ дэвшилтэт сайжруулалт нь таны агуулгыг зөвхөн бүхэл вэб хөтөч дээр ашиглах боломжтой гэж хэлдэг. Иймээс та эдгээр хуучин, хуучирсан, болон чадваргүй хөтчүүдийг дэмжиж эхэлдэг. Хэрэв та сайн ажиллаж байгаа сайтыг үүсгэх бол Та бүхэн зочдод хамгийн багаар бодоход хүргэх суурь мэдээллийг бий болгосон гэдгийг та мэднэ.
Эхлээд хамгийн боломжит хөтөчтэй эхэлж эхлэх үед, таны бүх HTML зөв байх ёстой бөгөөд зөв зүйтэй эсэхийг шалгахыг хүсэх болно. Энэ нь хамгийн өргөн тархсан хэрэглэгчийн агентлагууд хуудсыг үзэж, зөв харуулах боломжийг хангахад тусална.
Дүрсний загвар болон ерөнхий хуудасны загварыг гадны хэв маяг ашиглан ашиглан нэмж оруулаарай . Энэ бол дэвшилтэт сайжруулалт болдог газар юм. Бүх зочдод зориулсан сайт дизайныг гаргахын тулд загварын хуудсыг ашигладаг. Хэрэглэгчийн агентууд функцийг олж авахын тулд хуудсыг сайжруулах нэмэлт загварыг нэмж болно. Хүн бүр үндсэн шугамын загварыг авдаг, гэхдээ илүү дэвшилтэт, илүү орчин үеийн хэв маягийг дэмждэг аливаа мэдээллийн хөтөч нарт зориулж зарим нэмэлт зүйлүүд авдаг. Эдгээр загварыг дэмждэг хөтчүүдэд "дэвшилтэт сайжруулалт" хуудсыг танд өгдөг.
Та дэвшилтэт сайжруулалтыг хэрэгжүүлэх цөөн хэдэн арга зам бий. Эхлээд та CSS-ийн мөрийг ойлгохгүй байгаа бол ямар хөтөчийг авч үзэх хэрэгтэй - үүнийг үл тоомсорлодог! Энэ нь таны таалалд нийцэх болно. Хэрэв та бүх хөтөч ойлгодог үндсэн загварын багц үүсгэж байвал шинэ хөтчүүдэд зориулсан нэмэлт загварыг нэмж болно. Тэд стилийг дэмждэг бол тэдгээрийг хэрэглэнэ. Хэрэв үгүй бол тэд үүнийг үл тоомсорлож, эдгээр үндсэн загваруудыг ашиглана. Сайжруулсан сайжруулалтын энгийн жишээ энэ CSS-д харагдана:
.main-content {
суурь мэдээлэл: # 999;
дэвсгэр: rgba (153,153,153, .75);
}
Энэ загвар нь эхлээд саарал өнгөөр суурьлодог. Хоёр дахь дүрэм нь RGBA-ийн өнгөний утгыг ашиглан ил тод байдлын түвшинг тогтооход ашигладаг. Хэрэв хөтөч нь RGBA-г дэмждэг бол энэ нь эхний хэв загварыг дарах болно. Хэрэв тийм биш бол зөвхөн эхний хувилбарыг нь хэрэглэнэ. Та суурь өнгөний хэмжээг тогтоож, илүү орчин үеийн хөтөчүүдэд зориулж нэмэлт загварыг нэмсэн.
Feature Query ашиглах
Өөр нэг арга замыг та дэвшилтэт сайжруулалтыг ашиглаж болох юм бол "онцлог асуулт" гэж нэрлэгддэг зүйлсийг ашиглах явдал юм. Эдгээр нь мэдээллийн мессежтэй төстэй бөгөөд энэ нь вэбсайтыг зохистой вэбсайтуудын чухал хэсэг юм. Медиа хайлтын тодорхой дэлгэцийн хэмжээтэй текстийг оруулаад зарим онцлог шинж чанар нь дэмжигдсэн эсэхийг шалгадаг. Таны ашиглах синтакс нь:
@ supports (дэлгэц: flex) {}Энэ дүрэм дотор нэмсэн ямар ч загвар нь уг хөтчийг зөвхөн "flex" дэмждэг бөгөөд энэ нь Flexbox-ийн стиль юм. Та хүн бүрт зориулсан нэг багц дүрмийг тохируулж болох бөгөөд дараа нь зөвхөн тусгай сонгож тохируулахын тулд нэмэлт асуултуудыг ашиглан нэмэлт асуултуудыг ашиглана.
Женнифер Кэрнин эх нийтлэл. 12/13/16 дээр Жереми Герард засварлав.