4 CSS фишки

На каждый день

Скрыть все пустые строки в таблице

Для этого не нужно использовать JS и писать функции модификации DOM. Все можно сделать на уровне CSS:

table {
empty-cells: hide;
}

Отличная поддержка в браузерах начиная с IE8+.

Ассиметричный border-radius

Свойство border-radius может быть ассиметричным. Это позволяет создавать объекты нестандартной формы. Например:

.non-symmetric-round {
border-radius: 15px 15px 15px 10px / 5px 5px 20px 5px;
}

Свойство currentColor

Если нужно задать цвет через перменную в CSS, то не спешите использовать пользовательские свойства. Есть такое значение (встроенная перменная, можно сказать), как currentColor.

<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+.

Псевдо-элементы для первых

Если нужно задать стиль для первого символа или первой строки, то пользуйтесь псевдо-элементами с префиксом first:

p::first-letter {
font-size: 2rem;
}

p::first-line {
font-weight: 600;
}