Сокращенный перевод статьи «7 CSS properties you had no idea about».
Одни свойства CSS используются чаще других, и это естественно. Однако, не следует забывать и о редко используемых свойствах, по крайней мере, о них точно стоит знать. Томаш Лакомы представил в своей статье несколько примеров таких свойств.
1. azimuth
Свойство azimuth позволяет (или, скорее, позволяло, поскольку теперь оно отнесено к устаревшим) позиционировать разные источники аудио в пространстве.
Погодите, что еще за источники аудио в CSS?!
Все верно. Вы можете использовать azimuth и elevation для определения того, откуда будет идти звук, если у пользователя будет нужное оборудование для его воспроизведения.
Синтаксис:
<angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards
2. bleed
Свойство bleed это экспериментальная технология, помогающая определять область просачивания за пределы страницы при печати документа.
Может, для дизайна это и не слишком полезно, зато пригодится, когда ваши пользователи решат распечатать что-либо (например, счета).
Источник: CSS tricks.
3. caret-color
Вот это свойство и вправду полезное.
Что такое caret? Это то, что умные люди называют мигающим курсором. Он появляется, когда вы пытаетесь напечатать что-либо в поле для ввода (например, при написании поста для блога).
Как только вы заметите его мигание, «развидеть» это уже не получится.
Свойство caret-color позволяет веб-разработчику контролировать цвет этого курсора.
Синтаксис:
caret-color: auto; caret-color: transparent; caret-color: #123456;
Я, конечно, не эксперт, но вариант transparent («прозрачный») мне не кажется хорошей идеей, я бы не стал его использовать.
А вот в цвете Magenta курсор выглядит интересно:
4. ::cue
К элементам video на странице можно добавлять теги track. Таким образом вы можете добавить к видео субтитры (это поможет пользователям, не знающим языка видео или имеющим проблемы со слухом).
А если вы захотите стилизовать эти субтитры, вам поможет псевдоэлемент cue (англ. «реплика, подавать реплики»).
Синтаксис:
::cue {
color: yellow;
font-weight: bold;
}
5. hyphens
Это особенно пригодится нашим немецким друзьям.
Если в вашем тексте встречаются невероятно длинные слова, они могут вылезти за пределы отведенного для них контейнера, а это выглядит не очень хорошо.
Свойство hyphens позволяет вам добавить знаки переноса (дефисы). Благодаря этому свойству вы можете превратить это:
вот в это:
Дефис по-английски называется hyphen. Правила его использования определяются особенностями языка (например, перенос слов в английском отличается от переноса слов в венгерском).
В настоящее время, кажется, только Firefox поддерживает ВСЕ доступные в интернете словари, за что большое спасибо команде Firefox.
Синтаксис:
hyphens: none; hyphens: manual; hyphens: auto;
6. will-change
Подавляющее большинство свойств CSS предназначены для улучшения опыта пользователей при использовании интернета, чтобы они видели не просто черный текст на белом фоне.
В этом плане will-change отличается: это свойство предназначено для браузера.
Свойство will-change говорит браузеру, каких изменений можно ждать от элемента с этим свойством. Например, вы можете сказать Chrome, что на каком-то этапе изменится прозрачность элемента. В результате браузер сможет провести некоторую оптимизацию еще до того, как элемент изменится.
Имейте в виду, что это вариант на крайний случай. Браузеры и так в смысле оптимизации делают все, что могут, так что злоупотребление свойством will-change может не помочь делу, а замедлить ваш сайт.
Синтаксис:
will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* Example of <custom-ident> */ will-change: opacity; /* Example of <custom-ident> */ will-change: left, top; /* Example of two <animateable-feature> */
