Чухал хүч чадал Каскад дахь өөрчлөлт
Вэбсайтуудыг хэрхэн кодлох талаар сурах хамгийн сайн арга бол бусад сайтын эх кодыг харах явдал юм. Энэ практик нь вэб дизайны курс , ном , онлайн сургалтын сайтуудад зориулсан маш олон сонголтуудаас өмнө, ялангуяа хэдэн өдөр интернетээр сурч мэдсэн зүйлээ сурсан юм.
Хэрэв та энэ дадлыг туршиж үзээд сайт дахь CSS (cascading style sheets) хуудсыг хараарай гэвэл энэ кодонд таны харж болох нэг зүйл бол чухал гэсэн үг юм.
Энэ нь юу гэсэн үг вэ, бас хамгийн чухал зүйл нь та загварынхээ хуудсандаа тэр мэдэгдэлийг хэрхэн зөв хэрэглэдэг вэ?
CSS-ийн Cascade
Юуны өмнө, цуурхал загварын хуудсууд нь тодорхой нэг дараалалд байрладаг гэсэн үг юм. Ерөнхийдөө энэ нь загварыг браузер уншиж байгаа дарааллаар нь хэрэглэдэг гэсэн үг юм. Эхний загварыг хэрэглэж дараа нь хоёр дахь нь гэх мэт.
Үүний үр дүнд, хэрэв загварын хэв маягын дээд хэсэгт хэвлэгдэж, дараа нь баримт бичигт доод тал нь өөрчлөгдвөл, тэр хэв маягийн хоёрдахь жишээ нь дараа дараагийн тохиолдлуудад хэрэглэдэг бол эхнийх нь биш юм. Үндсэндээ, хоёр загвар ижил зүйлийг хэлдэг (өөрөөр хэлбэл ижил түвшинтэй гэсэн үг), сүүлд нь жагсаасан байна.
Жишээлбэл, дараах загварын хэв маягийн хуудсанд агуулагдсан гэж төсөөлье. Эхний загварын шинж чанар нь улаан боловч догол мөр текстийг хараар харуулна.
Энэ нь "хар" утга нь хоёрдугаарт жагсаасан байдаг. CSS-г дээд тал нь уншдаг тул сүүлийн загвар нь "хар" бөгөөд яагаад гэвэл нэг ялалт.
p {color: red; }
p {color: black; }
Яагаад чухал ач холбогдолтой вэ?
Одоо эдгээр бараг адил дүрмүүд нь CSS-ээр хэрхэн боловсруулагдаж байгааг та ойлгож байгаа болохоор бид чухал тушаал хэрхэн өөрчлөгдөж байгааг харах болно.
Чухал удирдамж нь таны хамгийн чухал гэж үзсэн дүрмүүдийг дагаж байхдаа таны CSS дараалал хэрхэн нөлөөлдөг болохыг харуулах болно. Хамгийн чухал удирдамжтай дүрмийг үргэлж хэрэглэдэг бол CSS дүрмэнд аль дүрмийг зааж өгөх нь хамаагүй.
Зүйлийн текстийг үргэлж улаан болгохын тулд дээрх жишээнээс та доор дурдсаныг ашиглана:
p {color: red! important; }
p {color: black; }
"Хар" утга нь хоёр дахь удаагаа орсон ч гэсэн бүх текст улаан өнгөөр гарч ирнэ. Чухал удирдамж нь жирийн дүрэм журмыг давж гардаг бөгөөд энэ загвар нь маш өндөр өвөрмөц чанарыг өгдөг.
Хэрвээ та догол мөрийг улаан өнгөөр харуулахыг шаардвал энэ хэв маяг үүнийг хийх болно. Гэхдээ энэ нь сайн практик гэсэн үг биш юм. Хэрэгцээтэй, хэзээ хэрэглэхийг хүсч байгаагаа дараагийн харцгаая.
Хэзээ хэрэглэх нь чухал юм
Вэбсайтыг тестлэх болон дибаг хийхэд чухал заавар нь маш их тустай. Хэрэв та хэв маяг яагаад ашиглагдахгүй байгаагаа мэдэж байгаа бөгөөд энэ нь тодорхой өвөрмөц асуудал байж магадгүй гэж бодож байвал та өөрийн хэв маягтаа чухал мэдэгдэл нэмж үүнийг засаж чадах эсэхийг харах боломжтой.
Хэрэв нэмж чухал бол хэв маягийн асуудлыг засаж залруулахын тулд энэ нь тусгайлсан асуудал гэдгээ саяхан тогтоосон. Гэсэн хэдий ч, та энэ чухал кодыг орхихыг хүсэхгүй байгаа бөгөөд үүнийг зөвхөн туршилтын зорилгоор ашиглах боломжтой болсон.
Тестийг хийсний дараа та одоо энэ удирдамжийг устгаад өөрийн хэв маягийг авахын тулд танд шаардлагатай онцлог чанарыг олж авахын тулд өөрийн сонгон шалгаруулагчаа тохируулна уу. Чухал ач холбогдол нь яагаад үйлдвэрлэлийн цэгтээ хүрч очих аргагүй юм.
Хэрэв та хүссэн хэв маягаа гүйцэлдүүлэхийн тулд чухал тунхаглалд хэт их түшиглэвэл эцсийн эцэст чухал стилистуудаар дүүрэн хэв маягийн хуудастай байх болно. Та хуудасны CSS боловсруулагдсан арга замыг үндсээр нь өөрчлөх болно. Энэ нь урт хугацааны удирдлагын байр сууринд сайнгүй залхуу практик юм.
Тест хийхэд чухал үүрэг гүйцэтгэдэг эсвэл зарим тохиолдолд та сэдэв, загвар бүтцийн хэсэг дэх тойм хэлбэрийг заавал өөрчлөх шаардлагатай үед ашиглах хэрэгтэй.
Энэ тохиолдолд ч гэсэн энэ арга барилыг аль болох бага байлгахын оронд каскадийг ойлгодог цэвэр загварын хуудас бичихийг хичээ.
Хэрэглэгчийн Style Sheets
Ойлгоход зайлшгүй чухал чухал удирдамжийн нэг эцсийн тэмдэглэл байна. Энэ удирдамж нь вэб хуудсууд хэрэглэгчид унших, уншуулахад хүндрэлтэй хуудсуудыг гаргах загварын хуудсыг давахад туслах зорилгоор хийгдсэн.
Ерөнхийдөө хэрэв хэрэглэгч вэб хуудсыг харахын тулд загварын хуудсыг тодорхойлж байгаа бол энэ загварын хуудсыг вэб хуудас зохиогчийн хэв загварын хуудсаас давж гардаггүй. Хэрвээ хэрэглэгч загварыг чухал гэж тэмдэглэсэн бол энэ загвар нь зохиогчийн дүрмийг чухал гэж үзсэн байсан ч вэбсайт зохиогчын хэв загварын хуудсыг давж гардаг.
Энэ нь загварыг тодорхой байдлаар тохируулах шаардлагатай хэрэглэгчидэд тустай. Жишээ нь, хэн нэгэн ашиглаж буй бүх вэб хуудсанд анхдагч фонтыг нэмэгдүүлэх шаардлагатай болж магадгүй юм. Өөрийнхөө бүтээн байгуулалтын хуудас дотроо чухал удирдамжийг ашигласнаар таны хэрэглэгчдэд ямар нэгэн тусгай хэрэгцээг хангаж чадна.
Жереми Герард засварт хийсэн