inset-block-start
bir öğenin başlangıç kenarından blok yönünde kaydırılacağı uzunluğu ayarlayan mantıksal bir CSS özelliğidir. Bu tür ilan benzeri var top
unsuru en belirlenir onun başlangıç noktası hariç direction
, text-orientation
ve writing-mode
tıpkı diğer mantıksal özellikleri gibi.
Özellik, şu anda Editörün Taslak durumunda olan CSS Mantıksal Özellikleri ve Değerleri Seviye 1 spesifikasyonunun bir parçasıdır. Bu, onunla ilgili tanım ve bilgilerin şimdiki ve resmi tavsiye arasında değişebileceği anlamına gelir.
.element ( inset-block-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )
Yani, örneğin, yazma modu olarak ayarlanırsa özelliği gibi hareket edecek ve onu üst olan kenar başlıyor gelen eleman ofset ayarlamasına. Tıpkı ve diğer fiziksel ofset özellikleri gibi, aynı öğe üzerinde etkili olması için bir açık belirtmeniz bile gerekir .horizontal-lr
inset-block-start
top
position
top
Ancak elemanın writing-mode
benzerini değiştirin vertical-rl
ve başlangıç kenarı dikey yönde döndürülerek daha çok left
özellik gibi davranın.
Sözdizimi
inset-block-start: ;
- Başlangıç değeri:
auto
- Şunlar için geçerlidir: konumlandırılmış elemanlar
- Devralındı: hayır
- Yüzdeler: karşılık gelen fiziksel özellik için
- Hesaplanan değer: karşılık gelen
top
özellik ile aynı - Animasyon türü: hesaplanan değer türüne göre
Değerler
inset-block-start
bir uzunluk değeri alır ve genel anahtar kelimeleri destekler. Varsayılan değeri auto
.
/* Length values */ inset-block-start: 50px; inset-block-start: 4em; inset-block-start: 3.5rem inset-block-start: 25vh; /* Percentage values */ inset-block-start: 50%; /* Keyword values */ inset-block-start: auto; /* initial value */ /* Global values */ inset-block-start: initial inset-block-start: inherit; inset-block-start: unset;
Tarayıcı desteği
IE | Kenar | Firefox | Krom | Safari | Opera |
---|---|---|---|---|---|
Hayır | Hayır | 63+ | Hayır | Hayır | Hayır |
Android Chrome | Android Firefox | Android Tarayıcı | iOS Safari | Opera Mini |
---|---|---|---|---|
Hayır | 79+ | Hayır | Hayır | Hayır |
Demo
daha fazla okuma
- CSS Mantıksal Özellikleri ve Değerleri Seviye 1 spesifikasyonu (Editör Taslağı)
- MDN Belgeleri
- Mantıksal Özellikleri ve Değerleri Anlama (Smashing Magazine)
- CSS Mantıksal Özellikleri (Adrian Roselli)
- CSS'de çift yönlü yatay kurallar (Hussein Al Hammad)