6 свойств CSS, о которых вы и понятия не имеете

0
2345
views

Сокращенный перевод статьи «7 CSS properties you had no idea about».

Необычные свойства CSS

Одни свойства 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
Свойство azimuth

2. bleed

Свойство 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> */