
CSS-da az tanınan 4 property
#Step IT Academy tərəfindən təqdim olunur
CSS-da maraqlı və gərəkli funksiyalar çoxdur. Lakin bəziləri çox az istifadə olunur. Bunun səbəbi o qədər də tanınmamalarındadır. Ona görə də tərtibatçılar eyni nəticəni əldə etmək üçün kənar vasitələrdən istifadə edib gərəksiz yerə vaxt itirirlər. Biz sizə o özəlliklərin 4-ünü misal çəkəcəyik.
1. Cədvəldə bütün boş sətrləri gizlətmək.
Bunun üçün JS yazmaq lazım deyil. CSS bunu artıq düşünüb:
table {
empty-cells: hide;
}
IE8-dən etibarən bütün brauzerlər dəstəkləyirlər.
2. currentColor identifikatoru.
Əgər rəngi CSSda dəyişənlər vasitəsi ilə təyin etmək lazımdırsa kənar vasitələrə qaçmağa tələsməyin. Bəlkə də özündə element üçün hazırda istifadə olan rəngi saxlayan currentColor işinizi görə bilər.
.text {
color: red;
}
.border {
background: currentColor;
height: 1px;
}
<style>
.text {
color: red;
}
.border {
background: currentColor;
height: 1px;
}
</style>
<div class=”text”>
The color of this text is the same as the one of the line:
<div class=”border”></div> ⇐ RED BORDER
Some more text.
</div>
IE8-dən etibarən dəstəklənir.
3. Birincilər üçün psevdoelementlər.
Əgər birinci simvol və ya mətnin birinci sətri üçün tərz təyin etmək lazımdırsa first prefikslı psevdoelementləri sınayın:
p::first-letter {
font-size: 2rem;
}
p::first-line {
font-weight: 600;
}
4. Assimmetrik border-radius.
Qeyri standart obyektlər üçün png və ya svg istifadə etməyə tələsməyin. Border-radius-un assimetrik imkanlarını sınayın öncə. Misal:
.non-symmetric-round {
border-radius: 15px 15px 15px 10px / 5px 5px 20px 5px;
}
Qeyd: Əgər sizə dilin bir neçə özəlliklərini sadalayan bu cür lakonik yazılar maraqlıdırsa və CodeNews-da bənzər kiçik yazıları tez-tez görmək istəyirsinizsə şərhlərdə istifadə etdiyiniz dilləri qeyd edin. Axtarıb, tapıb, yazarıq :)
Paylaş
Bənzər xəbərlər