БлогСфера

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

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

1. 1. azimuth
2. 2. bleed
3. 3. caret-color
4. 4. ::cue
5. Синтаксис: CSS ::cue { color: yellow; font-weight: bold; } 1234 ::cue {  color: yellow;  font-weight: bold;} 5. hyphens Это для моих немецких друзей. Если ваш текст содержит необычно длинные слова и фразы, иногда содержимое может выходить за края контейнера, что выглядит … неоптимальным. Свойство Hyphens позволяет превратить это: в это: Эта штука «-» называется дефисом, и правила ее применения зависят от языка (например, вы можете разделить слова по-разному в английском и венгерском). Огромный привет команде Firefox, потому что в настоящее время они, похоже, единственные, кто поддерживает ВСЕ словари, доступные в Интернете. Синтаксис: CSS hyphens: none; hyphens: manual; hyphens: auto; 123 hyphens: none;hyphens: manual;hyphens: auto; 6. will-change Подавляющее большинство свойств CSS предназначено для пользователей, чтобы улучшить их работу в Интернете, чтобы все не было черным текстом на белом фоне и т. д. will-change отличается от большинства — это свойство на самом деле для браузера. Идея заключается в том, чтобы will-change сообщило браузеру, как ожидается изменять элемента. Например, вы можете сообщить Chrome, что непрозрачность элемента в какой-то момент изменится, и в результате браузер сможет настроить оптимизации до того, как элемент будет фактически изменен. Имейте в виду, что это следует использовать в качестве крайней меры (Папа Роуч был бы горд), браузеры уже делают все возможное, чтобы оптимизировать все, и чрезмерное использование этого свойства может привести к замедлению работы сайта. Синтаксис: CSS will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* Example of */ will-change: opacity; /* Example of */ will-change: left, top; /* Example of two */ 123456 will-change: auto;will-change: scroll-position;will-change: contents;will-change: transform;        /* Example of */will-change: opacity;          /* Example of */will-change: left, top;        /* Example of two */ 7. flex Серьезно, никто не может использовать flex в полную силу, не открывая эту (отличную, кстати) статью на CSS Tricks. Уфф, я многому научился! Есть ли какие-то интересные, уникальные свойства, которые я пропустил? Напишите об этом в комментариях. Автор: Tomasz Łakomy Редакция: Команда webformyself. Источник
6. 5. hyphens
7. 6. will-change
8. 7. flex

В чем разница между узлом и элементом в DOM?

1. azimuth

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

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

CSS | [ [ 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 позволяет веб-разработчикам контролировать его цвет. Синтаксис:

CSS caret-color: auto; caret-color: transparent;

caret-color: #123456;

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

4. ::cue

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

YouTube тестирует новый формат коротких видео

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

Синтаксис:

CSS ::cue { color: yellow; font-weight: bold;

}

5. hyphens

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

в это:

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

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

Синтаксис:

CSS hyphens: none; hyphens: manual;

hyphens: auto;

6. will-change

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

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

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

Синтаксис:

CSS will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* Example of */ will-change: opacity; /* Example of */

will-change: left, top; /* Example of two */

7. flex

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

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

Автор: Tomasz Łakomy

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

Источник

Вам также может понравиться