Şapka şekli - CSS Hileleri

CSS'deki caret-shapeözellik, bir kullanıcının yazdığını gösteren düzenlenebilir öğeler içindeki metin imlecinin şeklini değiştirir. Şu anda Çalışma Taslağı durumunda olan CSS Temel Kullanıcı Arayüzleri Modülü Seviye 4'ün bir parçasıdır.

Yazarken imleç yazdığım her karakteri takip eden küçük yanıp sönen çubuktur.

Bu caret-shapeçubuğu, örneğin bir blok gibi başka bir şeye değiştirmek için kullanabiliriz :

.element ( caret-shape: block; )

Bu, komut satırına yazarken görebileceğinize daha çok benzeyen bir düzeltme işareti üretir:

Sözdizimi

caret-shape: auto | bar | block | underscore

• Başlangıç ​​değeri: auto
• Şunlar için geçerlidir: girdiyi kabul eden öğeler
• Devralındı: evet
• Yüzdeler: n / a
• Hesaplanan değer: belirtilen anahtar kelime
• Animasyon türü: hesaplanan değere göre

Değerler

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

Şu anda çok fazla tarayıcı desteğimiz yok caret-shape(aşağıya bakın), ancak işte bu değerlerin bir görünümü.

Tarayıcı desteği

Caniuse'da herhangi bir veri mevcut gibi görünmüyor, ancak bazı hızlı testlerle bulduğum şey:

IE	Kenar	Firefox	Krom	Safari	Opera
Hayır	Hayır	Hayır	Hayır	Hayır	Herşey

Android Chrome	Android Firefox	Android Tarayıcı	iOS Safari	Opera Mobile
Hayır	Hayır	Hayır	Hayır	Hayır

Bunu "taklit edebiliriz"

Tarayıcı desteği tam olarak bu olsa da, aslında diğer CSS büyüleriyle bu efekti kopyalayabiliriz.

Bu daktilo animasyonunda kullanılan türden bir şey:

Daha fazla bilgi

• CSS Temel Kullanıcı Arayüzü Modülü Seviye 4 (Çalışma Taslağı)

İlgili özellikler

27 Ocak 2021'de Almanak

şapka

.element ( caret: #ff7a18 underscore; ) Chris Coyier