You Don’t Know CSS
1 пост
1 пост
Привет, пикабу! Решил написать серию небольших постов про Frontend в которых постараюсь рассказать о свойствах CSS, которые мало кто знает или не знает всех возможностей.
Итак, сегодня рассмотрим такое свойство как content. Уверен многие frontend-разработчики используют его каждый день для псевдоэлементов. Ну как-то так:
Мало кто знает, что это свойство может принимать не только текст, но и attr(), counter(), url() и градиенты. А еще это свойство можно использовать и для обычных элементов. То есть мы можем поместить картинку внутрь псевдоэлемента или даже превратить <div /> в <img /> всего одной строчкой в CSS:
К сожалению градиенты не поддерживаются в Safari, поэтому не советую их использовать. А вот url() поддерживается всеми браузерами (даже IE8 !!!).
Еще можно указывать в content сразу несколько значений, но это работает только для псевдоэлементов:
На этом пока всё. Если зайдет, то буду писать еще. И не только про CSS.