Каретоподібна - CSS-хитрощі

caret-shapeВластивість в CSS змінює форму текстового курсора всередині редагованих елементів , який вказує користувач друкує. Це частина модуля базових інтерфейсів користувача CSS рівня 4, який наразі перебуває у статусі робочої чернетки.

Поки я пишу, каретка - це маленька блимаюча смужка, яка слідує за кожним символом, який я вводжу.

Ми можемо використовувати, caret-shapeщоб змінити цей рядок на щось інше, наприклад, скажімо, на блок:

.element ( caret-shape: block; )

Це створить каретку, яка більше нагадує те, що ви можете побачити під час введення в командному рядку:

Синтаксис

caret-shape: auto | bar | block | underscore

• Початкове значення: auto
• Застосовується до: елементів, які приймають введення
• Успадковано: так
• Відсотки: н / д
• Обчислене значення: вказане ключове слово
• Тип анімації: за обчисленим значенням

Цінності

caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;

На даний момент у нас не так багато підтримки браузера caret-shape(див. Нижче), але ось візуалізація цих значень.

Підтримка браузера

Не схоже, що будь-які дані доступні в Caniuse, але після швидкого тестування ось що я знайшов:

IE	Край	Firefox	Chrome	Сафарі	Опера
Ні	Ні	Ні	Ні	Ні	Всі

Android Chrome	Android Firefox	Браузер Android	iOS Safari	Opera Mobile
Ні	Ні	Ні	Ні	Ні

Ми можемо "підробити" це

Хоча підтримка браузера є такою, яка вона є, ми можемо насправді відтворити ефект за допомогою іншої магії CSS.

Ось такі речі використовуються на цій анімації на машинці:

Більше інформації

• Модуль базового інтерфейсу користувача CSS рівень 4 (робочий проект)

Пов’язані властивості

Альманах 27 січня 2021 року

карет

.element ( caret: #ff7a18 underscore; ) Кріс Койєр