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

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

От автора: недавно я запустил в Твиттере опрос, в котором попросил перечислить все атрибуты CSS, предлагая дополнительные бонусные баллы за перечисление в алфавитном порядке.

Через некоторое время Tejas создал инструмент, который позволяет перечислить все свойства CSS в терминале (если вам когда-нибудь понадобится сделать это по какой-то причине). По-видимому, есть некоторые свойства CSS, о которых я понятия не имел, давайте рассмотрим несколько интересных примеров:

1. azimuth

Свойство azimuth позволяет (или, скорее, позволяло, поскольку оно устарело) использовать различные источники аудио, которые могут быть использованы для звукового представления. Подождите, источники звука в CSS?

Все верно, очевидно, вы можете использовать azimuth и elevation для контроля, откуда исходит звук, когда у пользователей есть аудио-оборудование, которое может с этим справиться. Если кто-то, читающий это, действительно проводил подобный эксперимент, пожалуйста, дайте мне знать в комментариях — я хотел бы услышать больше! Синтаксис:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

2. bleed

Что это еще такое, это связано с «Сумерками»? Не совсем, bleed — это экспериментальная технология, которая определяет степень области обрезки страницы за пределами поля при печати документа.

Не очень полезно для веб-дизайна, но может пригодиться, когда ваши пользователи заканчивают печатать документы на физической бумаге (счета, счета и т. д.)

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

3. caret-color

Это на самом деле довольно полезно. Каретка — это то, как умные люди называют мигающий курсор, который отображается, когда вы пытаетесь что-то напечатать в поле ввода (например, при написании записи в блоге).

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

Как только вы заметили, что он постоянно мигает, вы больше не сможете его упустить из внимания. caret-color позволяет веб-разработчикам контролировать его цвет. Синтаксис:

Я не эксперт по доступности, но transparent — это не очень хорошая идея, так что, возможно, не используйте это значение. Пурпурный выглядит довольно аккуратно:

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

4. ::cue

Вы можете добавлять теги track к элементам video на странице, что полезно, если вы хотите добавить к видео субтитры для людей, которые либо не говорят уверенно на языке, на котором записано видео, либо имеют какие-либо проблемы со слухом.

Если вы хотите стилизовать эти подписи, здесь на помощь приходит где псевдо-элемент cue. Цитируя MDN: Псевдо-элемент CSS ::cue соответствует подсказкам WebVTT в выделенном элементе. Его можно использовать для стилизации титров и других сигналов в медиа с треками VTT.

Синтаксис:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

5. hyphens

Это для моих немецких друзей. Если ваш текст содержит необычно длинные слова и фразы, иногда содержимое может выходить за края контейнера, что выглядит … неоптимальным. Свойство Hyphens позволяет превратить это:

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

в это:

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

Эта штука «-» называется дефисом, и правила ее применения зависят от языка (например, вы можете разделить слова по-разному в английском и венгерском).

Огромный привет команде Firefox, потому что в настоящее время они, похоже, единственные, кто поддерживает ВСЕ словари, доступные в Интернете.

Синтаксис:

6. will-change

Подавляющее большинство свойств CSS предназначено для пользователей, чтобы улучшить их работу в Интернете, чтобы все не было черным текстом на белом фоне и т. д. will-change отличается от большинства — это свойство на самом деле для браузера.

Идея заключается в том, чтобы will-change сообщило браузеру, как ожидается изменять элемента. Например, вы можете сообщить Chrome, что непрозрачность элемента в какой-то момент изменится, и в результате браузер сможет настроить оптимизации до того, как элемент будет фактически изменен.

Имейте в виду, что это следует использовать в качестве крайней меры (Папа Роуч был бы горд), браузеры уже делают все возможное, чтобы оптимизировать все, и чрезмерное использование этого свойства может привести к замедлению работы сайта.

Синтаксис:

7. flex

Серьезно, никто не может использовать flex в полную силу, не открывая эту (отличную, кстати) статью на CSS Tricks.

Уфф, я многому научился! Есть ли какие-то интересные, уникальные свойства, которые я пропустил? Напишите об этом в комментариях.

Автор: Tomasz Łakomy

Источник: //dev.to

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка-Мастер. От теории до верстки популярных шаблонов

Изучите современную верстку сайтов с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: