4 CSS фишки

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

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

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

table {
empty-cells: hide;
}

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

Идентификатор 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;
}

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

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

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