CSS nizomlari faqat chegara emas
CSS anahat xususiyati shubhali xususiyatdir. Bu haqda birinchi marta bilganingizda chegara mulkidan qanday uzoq masofadan farq qilishini tushunish qiyin. W3C uni quyidagi farqlarga ega deb tushuntiradi:
- Qisqacha joylar bo'sh joy qoldirmaydi.
- Asosiy chiziqlar to'rtburchaklar bo'lmagan bo'lishi mumkin.
Joylardagi joylar
Ushbu bayonot o'z ichida va shubhali. Veb-sahifangizdagi obyekt veb-sahifada qanday joy egallamaydi? Agar siz Veb-sahifangizni piyozga o'xshash deb hisoblasangiz, sahifadagi har bir element boshqa elementning tepasida qatlam bo'lishi mumkin. Anahat xususiyati joyni egallamaydi, chunki u doimo elementning qutisiga joylashtiriladi.
Element atrofida anahat joylashtirilganda, u elementni sahifada qanday joylashtirilganiga ta'sir qilmaydi. U elementning o'lchamini yoki holatini o'zgartirmaydi. Agar siz anjumanni elementga joylashtirsangiz, u elementning tasavvuriga ega bo'lmagandek bir xil miqdordagi maydonga ega bo'ladi. Bu chegara uchun to'g'ri emas. Elementdagi chegara elementning tashqi kengligi va balandligiga qo'shiladi. Shunday qilib siz 50 piksel kengligida, 2 piksellik chegara bilan tasvirni qo'lga kiritgan bo'lsangiz, u 54 piksel (har bir yon chekka uchun 2 piksel) bo'lishi kerak edi. 2-pikselli kontur bilan bir xil tasvir sizning sahifangizda faqatgina 50 piksel kenglikga ega bo'lishi kerak edi, bu kontur tasvirning tashqi chetidan ko'rsatiladi.
Oddiy joylar to'rtburchak bo'lmagan bo'lishi mumkin
Siz o'ylab ko'rishdan oldin, "salqin, endi men hamkasblar chizishim mumkin!" Qayta o'ylang. Bu gap sizning fikringizdan ko'ra boshqacha ma'noga ega. Elementga chegara qo'yganingizda, brauzer elementni xuddi buyuk to'rtburchak quti kabi sharhlaydi. Agar quti bir nechta satrlarga bo'linib qolsa, brauzer chekkalarni ochib qo'yadi, chunki quti yopilmaydi. Go'yo brauzer chegara cheksiz keng ekranli kenglikda, u chegara uchun bir tekis to'rtburchak bo'lib ko'rinadi.
Aksincha, konstruktsiyaning xususiyati qirralarni hisobga oladi. Belgilangan element bir nechta chiziqni tashkil qilsa, chiziq oxirida kontur yopiladi va keyingi qatorga yana qaytadan boshlanadi. Agar iloji bo'lsa, kontur to'rtburchaklar bo'lmagan shaklni yaratib, to'liq bir-biriga bog'lanib qoladi.
Chizilgan mulkning ishlatilishi
Anahat xususiyatlarining eng yaxshi qo'llanishlaridan biri qidiruv shartlarini ta'kidlashdir. Ko'pgina saytlar buni fon rangi bilan amalga oshiradi, lekin siz ham anahat xususiyatidan foydalanishingiz va sahifalaringizda qo'shimcha bo'sh joy qo'shish haqida tashvishlanmasligingiz mumkin.
Anahat rangli xususiyat "invert" atamasini qabul qiladi, bu anahat rangini joriy fonning teskarisini qiladi. Bu sizga ranglarning ishlatilishini bilishga hojat qoldirmasdan dinamik veb-sahifalardagi elementlarni ta'kidlash imkonini beradi.
Faol linklar atrofida nuqta chiziqni olib tashlash uchun anahat xususiyatidan ham foydalanishingiz mumkin. CSS-Tricks-dan ushbu maqola nuqtali tasmani qanday olib tashlashni ko'rsatadi.