Kamroq ma'lum bo'lgan CSS savollari va rivojlangan maslahatlar

Quyida siz g'alati CSS xususiyatlarining ayrimlarini, shuningdek ilg'or CSS foydalanuvchilari uchun maslahatlar va fokuslarni topishingiz mumkin.

• Vertikal to'ldirish elementning kengligi balandligiga nisbatan emas

Shunday qilib padding-top: 50% to'ldiruvchi sifatida elementning asl balandligining 50% qo'shmaydi, lekin asosiy element kengligining 50% ni tashkil qiladi:

Buni bilib, biz balandlik / kenglik nisbatlarini saqlaydigan sezgir elementlarni osongina yasashimiz mumkin:

.square {
  kengligi: 100%;
  balandligi: 0;
  padding-tub: 100%;
}

• Chegaralar bir-biriga mos keladi, lekin faqat ba'zida

Shunday qilib, quyidagi elementlar orasidagi bo'shliq 40px emas, 20px bo'ladi:

foo
foo

Biroq, istisnolar mavjud! Chegaralar quyidagi holatlarda qulamaydi:

  • suzuvchi elementlar
  • mutlaqo joylashtirilgan elementlar
  • inline-blok elementlari
  • toshib ketadigan elementlar ko'rinadigan narsalardan boshqasiga o'rnatiladi (ular o'z farzandlari bilan chegaralarni buzmaydi).
  • tozalangan elementlar (Ular yuqori qismlarini asosiy blokning pastki chegarasi bilan yig'ishmaydi).
  • ildiz elementi

• Shaffoflik z-index stacking tartibini o'zgartirishi mumkin

Sizda har birida mutlaqo joylashtirilgan 3 ta div mavjud, deylik, z-indeks sonini oshiradigan boshqa element mavjud. Keyingi har biri avvalgisining ustiga chiqadi. Agar siz z-index: 10-ni birinchisiga qo'shsangiz, u endi oldingidek tartiblanib qolgan qolgan ikkitasining ustida paydo bo'ladi. Hozircha barchasi yaxshi. Endi birinchi bo'limga "shaffoflik: 0.99" qo'shing va qolgan ikkitasida to'planganini tomosha qiling. :)

Bu nima uchun yuz berishi haqida ko'proq ma'lumot: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

• CSS shaxsiy xususiyatlari va parametrlari

SASS yoki LESS-dan foydalanib, CSS-ning xususiyatlarini va o'zgaruvchilarni ushbu protsessorlarda mavjud bo'lgan xususiyatlarning ekvivalenti sifatida aniqlash mumkin, ammo bir nechta muhim farqlar mavjud.

Avval asoslar:

// siz shunday xususiyatlarni o'rnatishingiz va ulardan foydalanishingiz mumkin
: root {
 --foo: # 000;
}
tugmasi {
  fon rangi: var (- foo); // fon qora
}

Ular shuningdek meros qilib olinadi, shuning uchun agar siz mahalliy o'zgaruvchini qayta tayinlasangiz, u barcha bolalar elementlariga ta'sir qiladi va oldindan ishlov beruvchilardan farqli o'laroq brauzer barcha o'zgaruvchilar va iboralarni, agar bu sodir bo'lsa, tegishli ravishda qayta hisoblab chiqadi.

Xatolarni vergul bilan ishlatish mumkin, bir nechta xatolarni verguldan keyin, hatto boshqa o'zgaruvchilardan ham to'plashingiz mumkin:

.foo {
  rang: var (—- my-var, 'ko'k');
}

Bu bizni protsessorlardan asosiy farqga olib keladi: CSS o'zgaruvchilari DOM tuzilishini bilishadi va dinamikdir.

:: root {
  - noaniq rang: # 000000;
}
sarlavha {
 - oddiy rang: # ff0000;
}
a {
 rang: var (- birlamchi rang, - noaniq rang);
}
 bu qora 
   bu qizil rang.

Meros qilib olishning birinchi misolidan farqli o'laroq, bu misol shaxsiy xususiyat ota-ona DOM elementida o'rnatilgan yoki o'rnatilmaganligini bilishga tayanadi.

Bundan tashqari, ularni javascript yordamida ham oson o'zgartirish mumkin:

// ichki uslubdan o'zgaruvchini olish
element.style.getPropertyValue ("- my-var");
// o'zgaruvchilarni inline uslubida o'rnatish
element.style.setProperty ("- my-var", jsVar + 4);

Edge15-dan beri yuqoriga qarab qo'llab-quvvatlanadi.

• Vertikal tekislash: tepada | o'rta | pastki

“Vertikal-tekislash: tepada | o'rta | pastki "faqat ichki satr (tahrirlash: shu qatorda blokirovka) va jadval uyasi uchun ishlaydi, elementni o'z ichki qismida ishonadigan tarzda hizalashning qonuniy usuli emas.
Buning uchun moslashuvchan qutidan foydalaning yoki buning uchun dobuk sumkasini vertikal ravishda tekislash (quyida tushuntirib berilgan). :)

• Balandligi: 100% sizning fikringizcha ishlamasligi mumkin

Xuddi shu narsa "balandlik: 100%" ga to'g'ri keladi, ko'p holatlarda bu ishlab chiquvchi kutgan narsani bajarmaydi, chunki ota-ona elementining balandligi o'rnatilmagan. Masalan:



  

Bu butun sahifani qizil bilan to'ldirmaydi. Buni amalga oshirish uchun siz tananing va html balandligini 100% ga sozlashingiz kerak.

• Id> sinf

Id uslublari barcha sinf uslublarini bekor qiladi. Bu sinfga qaraganda aniqroq bo'lganligi sababli, ".foo.bar" faqat ".foo" yoki ".bar" ni bekor qiladi.

#foo {rang: qizil; }
.bar {rang: yashil; }

bu qizil-yashil emas

bo'ladi

• Attributni nishonga olish

Siz aniq atributlarni va ularning tarkibini, masalan, src yoki href atributi tarkibiga yo'naltirishingiz mumkin.

// barcha ZIP fayllarni nishonga oling, harflar sezgir emas
a [href $ = ". zip" i] {}
// google.com havolalarini qizil rangga aylantiring
[href * = "google.com"] {rang: qizil; }

Bu disk raskadrovka paytida, masalan, barcha rasm elementlarini yoki bo'sh "alt" atributsiz namoyish etishda yordam berishi mumkin:

img: emas ([alt]) {
 chegara: 2px qizil rangda;
}
img [alt = ""] {
 chegara: 2px qizil rangda;
}

Agar siz burchakdan foydalansangiz, ushbu usul [ng-chertish] ni o'z ichiga olgan ba'zi elementlarni yo'naltirish uchun ham foydali bo'lishi mumkin. Yoki xohlasangiz, mahalliy emas, balki "http" yoki "https" bilan boshlanadigan barcha havolalarni yo'naltirishingiz mumkin.

• Gorizontal / vertikal o'q qiymatlari nomuvofiqligi

Gorizontal va vertikal o'qlar uchun qiymatlarni e'lon qilganda, odatda birinchi raqam vertikal qiymatlarni va ikkinchi gorizontal qiymatlarni bildiradi (masalan: "to'ldirish: 10px 20px;" da 10px yuqori va pastki, 20px chap va o'ngda). Bu hamma narsa to'ldirish, chekka, chegara va hokazolarga tegishli.

To'liq teskarisi bo'lgan jadvallardagi "chegara oralig'i" bundan mustasno: birinchi raqam gorizontal va ikkinchi vertikal qiymatlarni o'rnatadi ... o_O

• Bir nechta fon

Siz bitta elementga bir nechta orqa fon rasmlarini qo'shishingiz va ularni har xil tarzda joylashtirishingiz mumkin, shunchaki vergul bilan ajratib oling:

fon: url (example1.png ') 50px takrorlanmaydigan markaz, url (' example2.jpg ') pastki-pastki takrorlanmaydigan;

IE11-dan yuqoriga qarab qo'llab-quvvatlanadi.

• Animatsiyalarni yig'ish

Fonga o'xshab, siz ham CSS animatsiyalarini to'plashingiz mumkin:

@keyframes foo {
 0% {shaffoflik: 0; }
 100% {shaffoflik: 1; }
}
@fikrlar paneli {
 0% {o'zgartirish: translateX (-100px); }
 100% {o'zgartirish: translateX (0px); }
}
.element {
 animatsiya: foo 2s 0s, bar 1s 0s;
}
Maqoladan yarim yo'l! Shunga o'xshash GRRM, ehtimol keyingi kitobni yozishda yarim yo'l bormi?

• "translateZ" bilan "pozitsiya: sobit" ning g'alati harakati.

Transformatsiyani qo'shish: translateZ (0); pozitsiyali elementni o'z ichiga olgan idishga: sobit; sobit elementni deraza o'rniga konteynerga moslashtiradi.

Url xeshini (/ # foo) maqsadli elementlarni uslublash

Siz foydalanishingiz mumkin: maqsadli soxta sinfni maqsadga yo'naltirish uchun ... ahem ... maqsadli elementga. Masalan, masalan, Foo ga o'ting , sahifadagi

foo
elementiga o'tasiz. Endi, agar siz #foo: target {color: red; } css-da, maqsadli #foo div element matni endi qizil bo'ladi.
Agar siz tashqi xesh havolasi orqali sahifaga kirgan odamlarga maqsadli elementni ta'kidlashni xohlasangiz, masalan foydali bo'lishi mumkin: www.example.com/#foo
Brauzer nafaqat to'g'ri elementni aylantiradi, balki ushbu maqsadli bo'limni yanada aniqroq qilish uchun CSS-dan ham foydalanishingiz mumkin. Bugungi kunda bu juda kamdan-kam hollarda amalga oshiriladi, ammo foydalanuvchi tajribangizni yaxshilash uchun juda foydali usul bo'lishi mumkin.

• kamroq "tarkib": "foo"; "xususiyat xususiyatlari"

Ma'lumot atributlari
Siz dinamik CSS tarkibi uchun ma'lumotlar atributlaridan foydalanishingiz mumkin. Masalan:

div: oldin {
 tarkib: attr (ma'lumotlar-matn);
}

Bu foydali bo'lishi mumkin, masalan, soxta sinf tarkibidagi matnlarni (masalan, ularni ko'rsatmalar uchun ishlatishda) tarjima qilmoqchi bo'lsangiz. Hozirda attr () tarkibi xususiyati uchun qo'llab-quvvatlanadi va deyarli boshqa brauzerlar uni boshqa xususiyatlar uchun qo'llab-quvvatlamaydi, lekin ular kelajakda ham shunday qilishlari mumkin. Bundan tashqari, attr () qiymatlari satrlardir, shuning uchun uni aslida faqat tarkib uchun ishlatilishi kerak edi va birliklar (masalan, shrift o'lchami) yoki URL manzillari uchun ishlatilishi mumkin emas (masalan, tarkib: url ()) . Qaysi biri haqida gaplashish:

Tarkib: url ()
Bu ko'pgina ommaviy axborot vositalari (rasm, ovoz, video) uchun ishlatilishi mumkin.

div: oldin {
 tarkib: url (image.jpg);
}

Biroq, har qanday tarkibni DOM-dan CSS-ga o'tkazish uchun nima ishlatilishi mumkin, bu avval aytib o'tilgan xususiy xususiyatlar:

div: keyin {
 tarkib: '';
 fon-rasm: var (- fon-rasm);
}

O'sish hisoblagichi
Siz soxta elementlarni bosqichma-bosqich sanash uchun mulk tarkibini ishlatishingiz mumkin: counter () xususiyatidan.

p {
 qarshi o'sish: myIndex;
}
p: oldin {
 tarkib: hisoblagich (myIndex);
}

foo

satri

Qo'shtirnoqlarni oching va yoping
Soxta sinflarning tarkibiy xususiyati quyidagicha: oldin va undan keyin kotirovka belgilarini ochish va yopish uchun foydalanish mumkin:

q: oldin {
 tarkib: ochiq kotirovka;
}
q: keyin {
 tarkib: yaqin-taklif;
}

Iqtiboslar haqida gapirishda, yuqorida aytib o'tilgan ma'lumotlar atributlarini maqsadli biriktirish bilan bir qatorda, siz CSS-dan sayt tiliga asoslangan tirnoqlarning o'ziga xos uslubini belgilash uchun ham foydalanishingiz mumkin, masalan:

html [lang = “fr”] q {
 Iqtiboslar: "" "" "";
}

• Shrift - bu stsenariy mulki

"Shrift" bu CSS stenografiyasining mulki. Shuning uchun, barcha xususiyatlarni yozish o'rniga, ularni barchasini bitta tagiga birlashtirish mumkin:

h1 {
 shriftning vazni: qalin;
 shrift uslubi: kursiv;
 shrift hajmi: 1rem;
 //va boshqalar…
}
// va boshqalar
h1 {
 shrift: kursiv zajigalka 1rem / 150% Verdana, Helvetica, sans-serif;
}
// sintaksisi
// shrift: shrift-uslubi shrift-variant shrift-og'irlik font-size / line-height font-family;

• @ brauzer qo'llab-quvvatlashini tekshirish uchun yordam

Brauzer qo'llab-quvvatlashini tekshirish uchun siz @supports xususiyati so'rovidan foydalanishingiz mumkin. Misol sifatida: agar siz "display: flex" -ni faqat qo'llab-quvvatlanganda ishlatmoqchi bo'lsangiz, uni shunday sozlashingiz mumkin:

@supports (displey: flex) {
 div {
   displey: egiluvchan;
 }
}

• Sinf nomlaridagi ustunlar

Tasniflash maqsadlarida yo'g'on tugmachalardan foydalanish farqlash maqsadida foydali bo'lishi mumkin. Ba'zi CSS UI ramkalari (masalan, Tailwind) quyidagi nomlash konventsiyasini ishlatdi:

Ko'pgina hollarda hover stillari uchun o'ziga xos sinflarni e'lon qilish foydali emas, ammo bunday nomlash to'g'risidagi konventsiya hover-shtatlarning aniq tan olinishiga olib keladi, bu esa o'qishni yaxshiroq ta'minlaydi. Bu juda tavsifli.

CSS-da, siz shunchaki yo'g'on ichakdan qochishingiz kerak:

.sm \: justify-center {}

• Lobotomlashtirilgan boyo'g'li selektor

Ushbu maqolani o'qiyotgan har bir kishi lobotomlashtirilgan boyo'g'li selektori haqida bilishi kerak:

* + * {
 margin-top: 2rem;
}

Bir xil turdagi bir nechta elementlarga ega bo'lgan holatlar uchun foydalidir, masalan, ro'yxat yoki nav ulanish elementlari.

li + li {
 margin-top: 1rem;
}
// va boshqalar
li {
 chegara-pastki: 1rem;
}
li: oxirgi turdagi {
  margin-pastki: 0;
}

• Dushhebagni vertikal tekislang

Biz kulgili ovoz chiqaradigan tanlovchilar bilan tanishar ekanmiz, sizni "vertikal vertikal tekislash" deb nomlangan narsalar qiziqtirishi mumkin:

.element {
 lavozim: nisbiy;
 yuqori: 50%;
 o'zgartirish: translateY (-50%);
}

• OpenType shriftlari uchun shrift-xususiyat sozlamalari xususiyati

OpenType shriftlarida shrift-xususiyat sozlamalari xususiyatidan foydalangan holda shriftni o'zingizning xohishingizga moslashtirish uchun foydalanishingiz mumkin bo'lgan xususiyat sozlamalari mavjud.
Ushbu xususiyat uchun maxsus foydalanish holatlaridan biri, siz vaqtni hisoblash taymeri uchun chiroyli ko'rinadigan shriftdan foydalanmoqchi bo'lganingizda, lekin u bitta-bitta shriftga aylanmaydi. Bu shuni anglatadiki, raqamlarning kengligi o'zgaradi va tarkibni atrofga surib qo'yadi. Qaror:

shrift-xususiyatni sozlash: "tnum";
shrift-variant-soni: jadval-raqamlar;

• Matnni ellips ("...") bilan tugating

p {
  toshib ketish: yashirin;
  oq bo'shliq: nowrap;
  matnni to'ldirish: ellips;
}

• Qo'shimcha: wbr element

CSS emas, lekin bu erda kamroq ma'lum bo'lgan HTML elementi: , bu so'z buzilishi kerak bo'lgan joyni belgilashga imkon beradi.

• Ammo kuting, CSS Grid qayerda?

Ushbu maqola etarlicha uzoq, ehtimol keyingi qismida. Biz hech qachon CSS-dagi g'alati va g'aroyib narsalardan qutulishimizga o'xshamaydi. :)

O'qiganingiz uchun rahmat!

Qabul qilingan har bir yangi maslahatingizni uring. ;)

Siz meni https://twitter.com/peedutuisk-da topishingiz mumkin