От автора: недавно я запустил в Твиттере опрос, в котором попросил перечислить все атрибуты CSS, предлагая дополнительные бонусные баллы за перечисление в алфавитном порядке.
Через некоторое время Tejas создал инструмент, который позволяет перечислить все свойства CSS в терминале (если вам когда-нибудь понадобится сделать это по какой-то причине). По-видимому, есть некоторые свойства CSS, о которых я понятия не имел, давайте рассмотрим несколько интересных примеров:
1. azimuth
Свойство azimuth позволяет (или, скорее, позволяло, поскольку оно устарело) использовать различные источники аудио, которые могут быть использованы для звукового представления. Подождите, источники звука в CSS?
Все верно, очевидно, вы можете использовать azimuth и elevation для контроля, откуда исходит звук, когда у пользователей есть аудио-оборудование, которое может с этим справиться. Если кто-то, читающий это, действительно проводил подобный эксперимент, пожалуйста, дайте мне знать в комментариях — я хотел бы услышать больше! Синтаксис:
|
1 |
<angle> | [ [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards |
2. bleed
Что это еще такое, это связано с «Сумерками»? Не совсем, bleed — это экспериментальная технология, которая определяет степень области обрезки страницы за пределами поля при печати документа.
Не очень полезно для веб-дизайна, но может пригодиться, когда ваши пользователи заканчивают печатать документы на физической бумаге (счета, счета и т. д.)
3. caret-color
Это на самом деле довольно полезно. Каретка — это то, как умные люди называют мигающий курсор, который отображается, когда вы пытаетесь что-то напечатать в поле ввода (например, при написании записи в блоге).
Как только вы заметили, что он постоянно мигает, вы больше не сможете его упустить из внимания. caret-color позволяет веб-разработчикам контролировать его цвет. Синтаксис:
|
1 2 3 |
caret-color: auto; caret-color: transparent; caret-color: #123456; |
Я не эксперт по доступности, но transparent — это не очень хорошая идея, так что, возможно, не используйте это значение. Пурпурный выглядит довольно аккуратно:
4. ::cue
Вы можете добавлять теги track к элементам video на странице, что полезно, если вы хотите добавить к видео субтитры для людей, которые либо не говорят уверенно на языке, на котором записано видео, либо имеют какие-либо проблемы со слухом.
Если вы хотите стилизовать эти подписи, здесь на помощь приходит где псевдо-элемент cue. Цитируя MDN: Псевдо-элемент CSS ::cue соответствует подсказкам WebVTT в выделенном элементе. Его можно использовать для стилизации титров и других сигналов в медиа с треками VTT.
Синтаксис:
|
1 2 3 4 |
::cue { color: yellow; font-weight: bold; } |
5. hyphens
Это для моих немецких друзей. Если ваш текст содержит необычно длинные слова и фразы, иногда содержимое может выходить за края контейнера, что выглядит … неоптимальным. Свойство Hyphens позволяет превратить это:
в это:
Эта штука «-» называется дефисом, и правила ее применения зависят от языка (например, вы можете разделить слова по-разному в английском и венгерском).
Огромный привет команде Firefox, потому что в настоящее время они, похоже, единственные, кто поддерживает ВСЕ словари, доступные в Интернете.
Синтаксис:
|
1 2 3 |
hyphens: none; hyphens: manual; hyphens: auto; |
6. will-change
Подавляющее большинство свойств CSS предназначено для пользователей, чтобы улучшить их работу в Интернете, чтобы все не было черным текстом на белом фоне и т. д. will-change отличается от большинства — это свойство на самом деле для браузера.
Идея заключается в том, чтобы will-change сообщило браузеру, как ожидается изменять элемента. Например, вы можете сообщить Chrome, что непрозрачность элемента в какой-то момент изменится, и в результате браузер сможет настроить оптимизации до того, как элемент будет фактически изменен.
Имейте в виду, что это следует использовать в качестве крайней меры (Папа Роуч был бы горд), браузеры уже делают все возможное, чтобы оптимизировать все, и чрезмерное использование этого свойства может привести к замедлению работы сайта.
Синтаксис:
|
1 2 3 4 5 6 |
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> */ |
7. flex
Серьезно, никто не может использовать flex в полную силу, не открывая эту (отличную, кстати) статью на CSS Tricks.
Уфф, я многому научился! Есть ли какие-то интересные, уникальные свойства, которые я пропустил? Напишите об этом в комментариях.
Автор: Tomasz Łakomy
Источник: //dev.to
Редакция: Команда webformyself.
